/* =============================================================
   EXPLANT COSTA RICA - Universal Header
   Self-contained (own tokens, own variable names) so this file
   renders IDENTICALLY on every page regardless of which other
   stylesheet (styles.css or home.css) is also loaded.
   Do not duplicate these rules anywhere else - this is the only
   place header/mobile-menu markup is styled, site-wide.
   ============================================================= */
:root {
  --h-paper: #F6F0E7;
  --h-paper-2: #FBF7F0;
  --h-cream: #EDE3D2;
  --h-ink: #2B2119;
  --h-ink-2: #6A5B4C;
  --h-ink-3: #9A8A78;
  --h-hairline: rgba(43,33,25,.14);
  --h-hairline-2: rgba(43,33,25,.08);
  --h-coral: #F07E86;
  --h-coral-deep: #E0687A;
  --h-on-dark: #EFE6D6;
  --h-sage: #7D976F;
  --h-serif: "Fraunces", Georgia, serif;
  --h-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --h-header-h: 94px;
  --h-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --h-maxw-wide: 1512px;
  --h-r: 12px;
  --h-r-sm: 4px;
  --h-r-pill: 999px;
  --h-shadow: 0 18px 50px -24px rgba(43,33,25,.28);
  --h-ease: cubic-bezier(.22,.61,.36,1);
  --h-ease-out: cubic-bezier(.16,1,.3,1);
}

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--h-header-h);
  display: flex; align-items: center;
  transition: background .4s var(--h-ease), box-shadow .4s var(--h-ease), height .4s var(--h-ease);
  font-family: var(--h-sans);
}
/* Full-width header, 3-column grid: [nav links] [centered logo] [actions].
   1fr / auto / 1fr locks the logo to the exact viewport centre regardless of
   how wide the nav or the action buttons are. */
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem 1.5rem; width: 100%; max-width: 100%; margin-inline: auto; padding-inline: var(--h-gutter); }
.site-header::before {
  content: ""; position: absolute; inset: 0; background: var(--h-paper);
  opacity: 0; transition: opacity .4s var(--h-ease); z-index: -1;
  border-bottom: 1px solid var(--h-hairline-2);
}
.site-header.is-scrolled { height: 80px; }
.site-header.is-scrolled::before { opacity: .96; backdrop-filter: saturate(1.2) blur(6px); }

/* on pages with a light hero, header is dark-text by default; on dark hero, use .header-on-dark */
.brand { display: flex; align-items: center; flex-shrink: 0; grid-column: 2; grid-row: 1; justify-self: center; }
.brand img { height: 44px; width: auto; }
.header-on-dark:not(.is-scrolled) .brand .logo-coral { display: none; }
.header-on-dark:not(.is-scrolled) .brand .logo-cream { display: block; }
.brand .logo-cream { display: none; }

.nav { display: flex; align-items: center; gap: clamp(.5rem, .85vw, .9rem); grid-column: 1; grid-row: 1; justify-self: start; }
.nav-item { position: relative; }
.nav-link {
  font-size: .875rem; font-weight: 500; color: var(--h-ink); font-family: var(--h-sans);
  display: inline-flex; align-items: center; gap: .3em;
  padding: .5em 0; letter-spacing: .005em;
  transition: color .25s;
}
.nav-link .chev { width: 9px; height: 9px; transition: transform .3s var(--h-ease); opacity: .6; }
.nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px;
  background: var(--h-coral); transform: scaleX(0); transform-origin: center;
  transition: transform .35s var(--h-ease-out);
}
.nav-link:hover::after, .nav-item.current .nav-link::after { transform: scaleX(1); }
.header-on-dark:not(.is-scrolled) .nav-link { color: var(--h-on-dark); }

/* Dropdown - FULL-WIDTH mega-menu, adopted from the reference (all-natural.framer).
   A full-bleed panel of large image cards that reveals in a downward "curtain"
   below the header. Being full-width, it's independent of where the nav item
   sits. Self-contained here so every page renders identically. */
.dropdown {
  position: fixed; left: 0; top: var(--h-header-h); width: 100%;
  display: grid; grid-template-rows: 0fr;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 90;
  transition: grid-template-rows .45s var(--h-ease-out), opacity .35s var(--h-ease), visibility .45s;
}
.site-header.is-scrolled .dropdown { top: 80px; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
  grid-template-rows: 1fr; opacity: 1; visibility: visible; pointer-events: auto;
}
/* invisible bridge so the cursor can travel from the link down onto the panel */
.nav-item:hover::after, .nav-item:focus-within::after {
  content: ""; position: absolute; top: 100%; left: -.6rem; right: -.6rem; height: 3.4rem;
}
.dd-inner {
  min-height: 0; overflow: hidden;
  background: var(--h-paper-2); border-bottom: 1px solid var(--h-hairline-2);
  box-shadow: 0 26px 44px -30px rgba(43,33,25,.5);
}
.dd-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 1.1rem; padding: 1.4rem var(--h-gutter) 1.7rem;
}
.dd-card {
  position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--h-ease-out), transform .5s var(--h-ease-out);
}
.nav-item:hover .dd-card, .nav-item:focus-within .dd-card { opacity: 1; transform: none; }
.dd-card:nth-child(2){transition-delay:.05s}
.dd-card:nth-child(3){transition-delay:.1s}
.dd-card:nth-child(4){transition-delay:.15s}
.dd-card:nth-child(5){transition-delay:.2s}
.dd-media {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, var(--t1,#c9a98a), var(--t2,#a07d61));
  transition: transform .6s var(--h-ease-out);
}
.dd-card:hover .dd-media { transform: scale(1.045); }
.dd-media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(72% 55% at 24% 18%, rgba(255,255,255,.22), transparent 60%),
              linear-gradient(to top, rgba(20,13,8,.62), transparent 46%);
}
.dd-cap { position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1.05rem; z-index: 2; }
.dd-cap strong { display: block; font-family: var(--h-serif); font-weight: 500; font-size: clamp(1.1rem, .9rem + .5vw, 1.5rem); line-height: 1.08; color: #fff; }
.dd-cap .dd-desc { display: block; margin-top: .25rem; font-family: var(--h-sans); font-size: .8rem; line-height: 1.3; color: rgba(255,255,255,.82); }

/* header turns opaque while a mega-menu is open */
.site-header:has(.nav-item:hover)::before, .site-header:has(.nav-item:focus-within)::before { opacity: 1; }
.header-on-dark:has(.nav-item:hover) .nav-link, .header-on-dark:has(.nav-item:focus-within) .nav-link { color: var(--h-ink); }
.header-on-dark:has(.nav-item:hover) .brand .logo-cream, .header-on-dark:has(.nav-item:focus-within) .brand .logo-cream { display: none; }
.header-on-dark:has(.nav-item:hover) .brand .logo-coral, .header-on-dark:has(.nav-item:focus-within) .brand .logo-coral { display: block; }
/* keep the light nav crisp over hero imagery; and light the WhatsApp pill / darken it when the menu opens */
.header-on-dark:not(.is-scrolled) .nav-link { text-shadow: 0 1px 14px rgba(20,13,8,.4); }
.header-on-dark:has(.nav-item:hover) .wa-link, .header-on-dark:has(.nav-item:focus-within) .wa-link { color: var(--h-ink); border-color: var(--h-hairline); }
/* on small screens the home header sits on the light band, not the dark cards - keep logo + burger dark */
@media (max-width: 820px){
  .header-on-dark:not(.is-scrolled) .brand .logo-cream { display: none; }
  .header-on-dark:not(.is-scrolled) .brand .logo-coral { display: block; }
  .header-on-dark:not(.is-scrolled) .nav-toggle span,
  .header-on-dark:not(.is-scrolled) .nav-toggle span::before,
  .header-on-dark:not(.is-scrolled) .nav-toggle span::after { background: var(--h-ink); }
  .header-on-dark:not(.is-scrolled) .nav-link { text-shadow: none; }
}

/* brand tones for the card imagery */
.dd-tone-1 { --t1:#c98f6c; --t2:#9a5f40; } /* clay */
.dd-tone-2 { --t1:#8f9c7e; --t2:#5e6f52; } /* sage */
.dd-tone-3 { --t1:#c2a48f; --t2:#836350; } /* taupe */
.dd-tone-4 { --t1:#d0b27f; --t2:#9f7c3f; } /* gold */
.dd-tone-5 { --t1:#cdae8d; --t2:#9c7757; } /* warm */

.header-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; grid-column: 3; grid-row: 1; justify-self: end; }
.wa-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--h-r-pill);
  border: 1px solid var(--h-hairline); color: var(--h-ink); transition: all .3s var(--h-ease);
}
.wa-link:hover { background: var(--h-sage); color: #fff; border-color: var(--h-sage); transform: translateY(-2px); }
.header-on-dark:not(.is-scrolled) .wa-link { border-color: rgba(239,230,214,.3); color: var(--h-on-dark); }

/* The header/mobile-menu CTA button uses the universal .btn
   component from assets/css/buttons.css - no overrides here. */

.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 22px; height: 1.6px; background: var(--h-ink); position: relative; transition: all .3s var(--h-ease); }
.nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0; width:22px; height:1.6px; background:var(--h-ink); transition: all .3s var(--h-ease); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.header-on-dark:not(.is-scrolled) .nav-toggle span,
.header-on-dark:not(.is-scrolled) .nav-toggle span::before,
.header-on-dark:not(.is-scrolled) .nav-toggle span::after { background: var(--h-on-dark); }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { top: 0; transform: rotate(45deg); background: var(--h-ink); }
body.menu-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); background: var(--h-ink); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--h-paper);
  padding: calc(var(--h-header-h) + 1rem) var(--h-gutter) 2rem;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--h-ease-out), opacity .4s var(--h-ease), visibility .4s;
  overflow-y: auto;
}
body.menu-open .mobile-menu { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu a.m-link { display: block; font-family: var(--h-serif); font-size: clamp(1.8rem, 8vw, 2.6rem); padding: .35rem 0; border-bottom: 1px solid var(--h-hairline-2); color: var(--h-ink); }
.mobile-menu .m-sub { font-family: var(--h-sans); font-size: 1rem; color: var(--h-ink-2); padding: .4rem 0 .4rem 1rem; display:block; border:0; }

/* Centred-logo nav needs room for the links in its left column; below this
   width we collapse to logo + hamburger (logo stays centred). */
@media (max-width: 1300px) {
  .nav, .header-actions .btn, .header-actions .wa-link { display: none; }
  .nav-toggle { display: flex; }
}