/* ============================================================
   header.css — header component styles (nav, hamburger,
   mobile menu, active-page marker). Pairs with header.js.
   Page-level overrides (e.g. the transparent-over-hero state)
   stay in the page that needs them.
   ============================================================ */
/* --- skip link ---
   Off-screen until it takes focus, then pinned to the top-left above
   the sticky header. Not display:none — that would take it out of the
   tab order and defeat the point. --- */
.skiplink{
  position:fixed; top:0; left:0; z-index:100;
  transform:translateY(-120%);
  background:var(--black); color:var(--white);
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:0.95rem;
  letter-spacing:0.04em; text-transform:uppercase;
  padding:12px 20px;
  outline-offset:2px;
}
.skiplink:focus{transform:translateY(0);}
/* the skip link lands focus on <main tabindex="-1">; that target should not
   then draw a focus ring around the whole page */
main[tabindex="-1"]:focus{outline:none;}

/* --- nav --- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--white-rgb),0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(var(--black-rgb),0.08);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:var(--max); margin:0 auto;}
.logo{font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:1.4rem; letter-spacing:0.01em; text-transform:uppercase;}
.logo span{color:var(--teal);}
.navlinks{display:flex; gap:30px; font-size:0.92rem; font-weight:500; color:var(--slate);}
.navlinks a{position:relative; transition:color .15s ease;}
.navlinks a:hover{color:var(--black);}

/* --- active page marker (desktop) ---
   No icon, no colour swap to black: the link keeps the nav's own
   ink colour and is marked by a teal rule that sits on the header's
   baseline, so the header reads as a single ruled system rather
   than one item being decorated. --- */
.navlinks a.active{
  /* no colour override: the link keeps whatever the header is using,
     so it stays legible over the dark hero and over the solid state */
  font-weight:600;
}
.navlinks a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-9px;
  height:2px;
  background:var(--teal);
}

/* --- mobile nav toggle --- */
.navtoggle{
  display:none;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  background:transparent; border:0; padding:0;
  cursor:pointer; border-radius:var(--radius-sm);
  -webkit-tap-highlight-color:transparent;
}
.navtoggle:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
.navtoggle span{
  display:block; height:2px; width:22px;
  background:var(--black); border-radius:1px;
  transition:transform .22s ease, opacity .15s ease, width .22s ease, background .15s ease;
}
.navtoggle span:nth-child(2){width:14px; background:var(--teal);}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0; width:22px;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobilemenu{
  display:none;
  overflow:hidden;
  max-height:0;
  border-top:1px solid rgba(var(--black-rgb),0);
  transition:max-height .28s ease, border-color .28s ease;
}
.mobilemenu.open{max-height:460px; border-top-color:rgba(var(--black-rgb),0.08);}
.mobilemenu .inner{padding:8px 32px 24px;}
.mobilemenu a.mlink{
  position:relative;
  display:block;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:1.3rem;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--black);
  padding:15px 0;
  border-bottom:1px solid rgba(var(--black-rgb),0.08);
  transition:color .15s ease, padding-left .15s ease;
}
.mobilemenu a.mlink:hover, .mobilemenu a.mlink:focus-visible{color:var(--teal);}
/* same bearing-tick motif, laid out for a vertical list */
/* mobile: same idea, a plain teal rule — no icon */
.mobilemenu a.mlink.active{color:var(--teal); padding-left:18px;}
.mobilemenu a.mlink.active::before{
  content:"";
  position:absolute; left:0; top:15px; bottom:15px;
  width:3px; background:var(--teal);
}
.mobilemenu .btn{width:100%; justify-content:center; margin-top:20px;}

/* --- the mobile switch ---
   This used to live only in each page's inline <style>, which meant
   any new page loading header.css got a desktop nav on a phone: the
   unscoped .navlinks{display:flex} above had nothing to override it.
   It belongs to the component, so it lives here now.
   index.html and discover.html still declare the same rules in their
   own <style>; those load later and simply restate this. --- */
@media (max-width:860px){
  .navlinks{display:none;}
  .navtoggle{display:flex;}
  .mobilemenu{display:block;}
  nav{gap:12px;}

  /* --- the right-hand cluster ---
     With the links hidden, nav's space-between spread the three
     survivors evenly and left the WhatsApp icon marooned in the
     middle of the bar. The logo now claims the left edge on its
     own (margin-right:auto eats the free space before
     space-between can distribute it) and everything else packs
     against the right, with WhatsApp ordered last before the
     hamburger so the two controls sit together. The order also
     survives the 560px breakpoint below, where the CTA drops out
     of the bar entirely. --- */
  nav > a:first-child{margin-right:auto;}
  nav > .btn{order:1;}
  #wa-trigger, .wa-trigger{order:2;}
  .navtoggle{order:3;}
}
@media (max-width:560px){
  nav{padding:14px 20px;}
  nav > .btn{display:none;}      /* the CTA moves into the panel */
  .mobilemenu .inner{padding:8px 20px 24px;}
}

/* --- language switcher ---
   Three plain links rather than a <select>: a crawler following them is
   exactly what hreflang is asking it to do. The current language is marked
   but still rendered as a link, so its position never shifts. --- */
.langswitch{display:flex; align-items:center; gap:2px;}
.langswitch .lang{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:0.78rem; letter-spacing:0.08em;
  padding:5px 7px; border-radius:var(--radius-sm);
  color:inherit; opacity:0.62; transition:opacity .15s ease, background-color .15s ease;
}
.langswitch .lang:hover{opacity:1;}
.langswitch .lang.active{opacity:1; background:rgba(var(--white-rgb),0.14);}
body.chrome-solid .langswitch .lang.active{background:rgba(var(--black-rgb),0.08);}

@media (max-width:860px){
  /* in the bar it would crowd the hamburger; it moves into the panel */
  nav > .langswitch{display:none;}
  .langswitch--menu{
    display:flex; justify-content:center; gap:6px;
    margin-top:14px; padding-top:14px;
    border-top:1px solid rgba(var(--black-rgb),0.10);
  }
  .langswitch--menu .lang{opacity:0.75; font-size:0.9rem; padding:8px 12px;}
  .langswitch--menu .lang.active{opacity:1; background:rgba(var(--black-rgb),0.08);}
}

/* --- chrome over the opening band (desktop only) ---
   Every page opens on a dark band — `.hero`, `.page-hero`, `.legal-hero` or
   `.done` — so the header starts dark and translucent and sits *on* that band
   rather than above it. header.js adds `chrome-solid` once the band scrolls
   away, flipping the bar to the light treatment over the light page body.
   Below 861px the header is always light, so none of this applies. --- */
@media (min-width:861px){
  /* --- the desktop bar: logo | links | actions ---
     Four tracks, the last `auto` rather than a reserved rail width — a
     rail-width column pushed the WhatsApp icon and the book button into a
     phantom slot and left them adrift from the right edge. Full bleed with
     even 5vw padding, so the bar spans the viewport rather than stopping at
     --max like the page content does. This lived in five page stylesheets
     and left every other page on the flex default, which is why their header
     spacing did not match. --- */
  nav{
    display:grid;
    grid-template-columns:auto 1fr auto auto auto;
    align-items:center;
    column-gap:40px;
    max-width:none;
    margin:0;
    padding:14px 5vw;
  }
  nav > a:first-child{justify-self:start;}
  .navlinks{justify-self:center; gap:34px;}
  .langswitch--menu{display:none;}   /* the bar has its own */

  header{
    background:rgba(var(--black-rgb),0.34);
    -webkit-backdrop-filter:blur(14px) saturate(115%);
    backdrop-filter:blur(14px) saturate(115%);
    border-bottom:1px solid rgba(var(--white-rgb),0.16);
    transition:background-color .25s ease, border-color .25s ease;
  }
  header .logo{color:var(--white); text-shadow:0 1px 12px rgba(var(--black-rgb),0.55);}
  header .navlinks a{color:#EDEDF4; text-shadow:0 1px 12px rgba(var(--black-rgb),0.55);}
  header .navlinks a:hover{color:var(--white);}

  body.chrome-solid header{
    background:rgba(var(--white-rgb),0.94);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(var(--black-rgb),0.08);
  }
  body.chrome-solid header .logo{color:var(--black); text-shadow:none;}
  body.chrome-solid header .navlinks a{color:var(--slate); text-shadow:none;}
  body.chrome-solid header .navlinks a:hover{color:var(--black);}
}

@media (prefers-reduced-motion:reduce){
  .navtoggle span, .mobilemenu{transition:none;}
}