/* ---------- style.css (full) ---------- */
:root{
  --green-900:#0b2e24;
  --green-800:#0f3d2e;           /* forest */
  --green-700:#145c3a;           /* spruce */
  --green-500:#1f8a5b;           /* jade */
  --green-400:#2faa69;           /* moss accent */
  --tint-50:#f2fbf6;             /* light forest tint */
  --ink:#222;
  --muted:#6b7280;
  --white:#fff;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.15);
}

html{scroll-behavior:smooth;scroll-padding-top:84px}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Raleway',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background-color:var(--white);
  line-height:1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* Removes extra space below images */
}


.container{max-width:1100px;margin-inline:auto;padding-inline:2rem}
.container.narrow{max-width:980px}

/* Header (over hero) */
.main-header{
  position:fixed; inset-inline:0; top:0; height:64px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  background:transparent; border-bottom:none;
  z-index:1000; padding-inline:1rem;
  transition:top .25s ease, background .25s ease, color .25s ease;
}

/* header grid placement + flush left */
.main-header > .brand{justify-self:start;width:max-content}
.main-header > .main-nav{justify-self:center}
.main-header > .lang-switcher{justify-self:end}

/* remove the left indent so brand sits at the corner */
.main-header{padding-left:0}


.logo {
  justify-self: start;
  display: grid;
  justify-items: start;

  font-family: 'Alex Brush', cursive;
  font-weight: 800;
  font-size: 1.2rem;  
  line-height: 1;
}
.main-nav{ justify-self:center; margin:0 }

.main-header nav.main-nav ul{
  display:flex;
  gap:1.25rem;
  list-style:none;
  margin:0;
  padding:0;
}
.main-header nav.main-nav a{
  text-decoration:none;
  font-weight:600;
  color:#fff;
}



.main-nav ul{ display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; justify-content:center }
.lang-switcher{ justify-self:end; display:flex; align-items:center; gap:.5rem; margin:0 }

.lang-switcher a {
  font-weight: 600;
}


/* brand stack: svg above text logo (centered) */
/* brand stack: svg above text logo (left-corner brand, centered word under icon) */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.brand-link{display:inline-flex;flex-direction:column;align-items:center;line-height:0}
.brand-badge{
  width:clamp(92px,11vw,176px);
  height:auto;display:block;margin-inline:auto;margin-bottom:-28px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.brand .logo{
  display:block;margin:0;line-height:1;text-align:center;transform:translateY(-4px); align-self:center;
}



/* light text while over hero */
.main-header .logo,
.main-header .main-nav a,
.main-header .lang-switcher a { color:#fff; }

/* turn solid after hero */
.main-header.solid{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(15,61,46,.08);
}
.main-header.solid .logo,
.main-header.solid .main-nav a,
.main-header.solid .lang-switcher a { color:var(--ink); }

/* nav underline */
.main-nav a{ text-decoration:none; font-weight:600; position:relative; padding:.25rem 0 }
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg,var(--green-500),var(--green-400));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.main-nav a:hover::after{ transform:scaleX(1) }

/* ---------- Hero (full-bleed + smooth cross-fade) ---------- */
.hero{
  position:relative;display:grid;place-items:center;
  min-height:100vh;min-height:100svh;margin:0;color:#fff;text-align:center
}
@supports(height:100dvh){ .hero{ min-height:100dvh } }

/* fallback image to avoid any green flash */
.hero-image-container{
  position:absolute; inset:0; overflow:hidden;
  /* no solid color here — the inline background-image above paints immediately */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}


/* overlay hidden until first image paints */
.hero-image-container .hero-overlay{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero-image-container.ready .hero-overlay{
  opacity:1;
  background:radial-gradient(60% 70% at 50% 40%, rgba(47,170,105,.42), rgba(11,46,36,.78));
  mix-blend-mode:multiply;
}

/* image layers and cross-fade */
.hero-image-container img.bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;will-change:opacity;
  transition:opacity 2600ms ease-in-out;
}
.hero-image-container img.bg.bg-1{opacity:1}
.hero-image-container.swap img.bg.bg-1{opacity:0}
.hero-image-container.swap img.bg.bg-2{opacity:1}

/* subtle interactive spotlight */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 280px at var(--mx,50%) var(--my,35%), rgba(47,170,105,.13), transparent 60%);
}
.hero-text{position:relative;z-index:1}

/* avoid peeking of next section */
.hero + .gallery-section{margin-top: 6rem}

/* ---------- Buttons ---------- */
.cta-button{
  display:inline-block;text-decoration:none;color:white;
  background:linear-gradient(135deg,var(--green-500),var(--green-400));
  padding:.85rem 1.5rem;border-radius:999px;font-weight:700;
  box-shadow:0 8px 20px rgba(31,138,91,.3);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cta-button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(31,138,91,.35)}
.cta-button:active{transform:translateY(0);filter:saturate(1.1)}

/* ---------- Sections ---------- */
.content-section,.content-section-dark{padding:5rem 0;text-align:center}
.content-section-dark{background:linear-gradient(180deg,var(--tint-50),#fff)}

h2{
  font-family:'Playfair Display',serif;color:var(--green-800);
  font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 1rem;
}
.lead-text{max-width:800px;margin:0 auto 2.25rem;color:#2b2b2b;font-weight:300}

/* (kept in case used later) */
.features-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;margin-top:2rem;text-align:left;
}
.feature-item h3{margin:.25rem 0 .4rem;color:var(--green-700);font-family:'Playfair Display',serif}
.feature-item p{margin:0;color:#2b2b2b}
.glass{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(15,61,46,.12);
  border-radius:var(--radius);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow);
}

/* ---------- Galleries ---------- */
.gallery-section{padding:0 0 3rem}
.gallery-section .container{text-align:center}
.gallery-section h2{margin:0 0 1.25rem;text-align:center}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:8px;margin:0;padding:0 1rem 0;
}
.gallery-item{
  position:relative;overflow:hidden;border-radius:10px;aspect-ratio:4/3;
}
.gallery-item img{
  display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in;
  transform:scale(1);transition:transform .35s ease, filter .35s ease;
}
.gallery-item:hover img{transform:scale(1.05);filter:saturate(1.05)}

/* ---------- Map + external links ---------- */
.map-container{
  margin-top:2rem;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:16/9;background:#e8f5e9;
}
.map-container iframe{width:100%;height:100%;border:0}

.location-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
.pill-link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1rem;border-radius:999px;font-weight:700;text-decoration:none;
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pill-link.map{background:#fff;color:var(--green-700);border:1px solid rgba(15,61,46,.2)}
.pill-link.ext{background:linear-gradient(135deg,var(--green-500),var(--green-400));color:#fff;box-shadow:0 8px 20px rgba(31,138,91,.28)}
.pill-link:hover{filter:saturate(1.05)}
.pill-link:focus-visible{outline:3px solid rgba(31,138,91,.45);outline-offset:2px}
.ext-icon{font-size:1.05em;line-height:1}

/* ---------- Footer (slim) ---------- */
.main-footer{
  background:linear-gradient(180deg,var(--green-800),var(--green-900));
  color:#fff;text-align:center;padding:1.25rem 1rem;
}
.main-footer .tiny{margin:0;opacity:.85;font-size:.9rem}

/* ---------- Lightbox ---------- */
dialog#lightbox{
  border:none;border-radius:14px;padding:0;max-width:min(92vw,1300px);
  box-shadow:0 30px 60px rgba(0,0,0,.45);overflow:hidden;position:fixed;
}
dialog#lightbox::backdrop{background:rgba(0,0,0,.6)}
#lightbox img{display:block;max-height:82vh;width:auto;height:auto;margin:auto;background:#000}

.lightbox-close{
  position:absolute;top:10px;right:12px;height:40px;width:40px;border:0;border-radius:999px;
  cursor:pointer;background:rgba(0,0,0,.45);color:#fff;font-size:20px;display:grid;place-items:center;
}
.hotzone{position:absolute;top:0;bottom:0;width:50%;z-index:1}
.hotzone.left{left:0;cursor:w-resize}
.hotzone.right{right:0;cursor:e-resize}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:999px;
  width:46px;height:46px;display:grid;place-items:center;font-size:26px;
  opacity:0;transition:opacity .18s ease, transform .18s ease;
}
.lightbox-nav.prev{left:12px}
.lightbox-nav.next{right:12px}
.hotzone.left:hover ~ .lightbox-nav.prev{opacity:1;transform:translateY(-50%) scale(1.05)}
.hotzone.right:hover ~ .lightbox-nav.next{opacity:1;transform:translateY(-50%) scale(1.05)}
.lightbox-meta{
  position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:space-between;
  padding:0 14px;color:#fff;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.6);pointer-events:none;
}
.lightbox-caption{max-width:70%}
.lightbox-count{opacity:.85}

/* ---------- Reveal on scroll ---------- */
.content-section,.content-section-dark,.feature-item,.gallery-item{
  opacity:0;transform:translateY(28px);
  transition:opacity .6s ease, transform .6s ease;
}
.is-visible{opacity:1;transform:none}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ============================================= */
/* ===== MOBILE RESPONSIVE STYLES (STEP 3) ===== */
/* ============================================= */

@media (max-width: 768px) {

  /* --- GENERAL LAYOUT --- */
  /* Make page scroll-padding smaller for the new mobile header height */
  html {
    scroll-padding-top: 150px; 
  }

  /* Reduce side padding on containers to maximize screen space */
  .container {
    padding-inline: 1rem;
  }

  /* --- HEADER & NAVIGATION --- */
  /* Allow the header to grow in height and stack its content */
  .main-header {
    position: fixed; /* Keep it fixed on mobile */
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    
    /* Change the trigger for the solid background to be immediate */
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(15, 61, 46, .08);
  }

  /* Make header text dark by default on mobile */
  .main-header .logo,
  .main-header .main-nav a,
  .main-header .lang-switcher a {
    color: var(--ink);
  }
  
  /* --- HERO SECTION --- */
  /* Reduce the size of the main headline */
  h1 {
    font-size: 2.5rem; /* Adjust as you see fit */
    line-height: 1.2;
  }

  /* --- GALLERY GRIDS --- */
  /* This is the most important fix for your collapsing components. */
  .gallery-grid {
    /* Force the grid into a single column on mobile screens */
    grid-template-columns: 1fr;
    gap: 1rem; /* Add a bit more space between stacked images */
  }

  /* --- TYPOGRAPHY & SECTIONS --- */
  /* Adjust heading sizes for better readability on small screens */
  h2 {
    font-size: 2.1rem;
  }

  .content-section {
    padding: 3rem 0;
  }
}