/* =============================================================================
   Visit Citrusdal — shared site header / navigation
   -----------------------------------------------------------------------------
   A persistent top bar used on the homepage and every journey page. It gives
   every page a consistent way to reach the main sections AND the "Weekends"
   journey pages (the site's highest-value SEO content), which were previously
   only reachable from the footer.

   Design notes
   ------------
   - NO `mix-blend-mode`. The first version blended the whole <nav>, which also
     blended its children: the Weekends mega-menu and the mobile drawer inverted
     against whatever sat behind them and became unreadable, and the orange
     Contact pill stopped being orange. The homepage had already learned this and
     kept its drawer OUTSIDE the blended <nav> for exactly this reason. The bar is
     now a plain solid --dark band on EVERY page, homepage included. A transparent
     bar over the hero was tried and rejected: the homepage hero ground is cream
     (--ground), so white links over it are barely legible — which is exactly the
     problem the blend mode had been hiding. Do not reintroduce either.
   - Colours come from palette tokens (--dark / --on-dark / --accent), never
     hardcoded hexes, so the bar follows whatever palette a page sets.
   - The wordmark is a single-line text lockup (Visit Citrusdal) in the brand logo
     face — no dependency on the letterforms.js SVG builder, so it works on
     lightweight journey pages. It used to be a two-line stack, which was the main
     reason the bar was too thick.
   - "Discover" and "Weekends" each open a dropdown mega-menu on desktop and
     expand as an inline group inside the full-screen drawer on mobile. There can
     be any number of `.dd` blocks — the CSS and JS are written for N, not for one.
   - The MARKUP is not here. It lives once in brand/site-nav.html and is stamped
     into every page by scripts/build-site-nav.js. Do not hand-edit a page's copy.
   - Fully keyboard-accessible: the toggle and each menu item are focusable,
     Escape closes, and aria-expanded/aria-controls are maintained by JS.
   ============================================================================= */

/* ---- Reset / base --------------------------------------------------------- */
.site-nav *{box-sizing:border-box;margin:0;padding:0;}

:root{--nav-h:52px;}

/* Pages whose content starts at the top of the document (journey pages, contact)
   must reserve the fixed bar's height or the breadcrumbs sit underneath it.
   The homepage does not — its hero is meant to run under a transparent bar. */
body.has-fixed-nav{padding-top:var(--nav-h);}
html{scroll-padding-top:calc(var(--nav-h) + 12px);}

.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:11px 4vw;min-height:var(--nav-h);
  background:var(--dark);color:var(--on-dark);
  font-family:var(--font-body),system-ui,sans-serif;
  transition:padding .35s ease,background .35s ease;
}
.site-nav.shrink{padding:8px 4vw;}

/* ---- Over-the-hero treatment (the homepage only) --------------------------
   `body:not(.has-fixed-nav)` is the homepage and nothing else — build-site-nav.js
   adds `has-fixed-nav` to every page whose content starts at the top of the
   document, and skips exactly the one page whose hero is meant to run underneath
   the bar. So this is not a homepage hack; it is "the page the bar floats over".

   Two things happen there, and they solve one problem between them: the name was
   appearing twice in one field of view, ~200px apart, because the solid --dark band
   and the navy hero photograph read as a single surface.

     1. The bar is transparent until you scroll. An earlier transparent variant was
        built and REJECTED because the homepage hero ground was cream — that stopped
        being true on 28 Aug 2026 when the hero became a photograph, so the reason
        no longer holds. Reviewed against the photo and chosen 31 Aug 2026.
     2. The brand is hidden over the hero, leaving the hero wordmark as the only
        mark above the fold, and fades back in with the solid bar on scroll.

   Both revert on `.shrink`, so every scrolled state is exactly what it was before.
   NOTE: still no `mix-blend-mode` here, and it must not come back — blending the
   <nav> also blends the mega-menu and the drawer. Transparency is not blending. */
body:not(.has-fixed-nav) .site-nav{background:transparent;}
body:not(.has-fixed-nav) .site-nav.shrink{background:var(--dark);}
body:not(.has-fixed-nav) .site-nav .brand{
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
body:not(.has-fixed-nav) .site-nav.shrink .brand{
  opacity:1;transform:none;pointer-events:auto;
}
/* Keyboard users must still be able to reach the home link while it is invisible. */
body:not(.has-fixed-nav) .site-nav .brand:focus-visible{
  opacity:1;transform:none;pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
  body:not(.has-fixed-nav) .site-nav .brand{transition:none;}
}

/* ---- Wordmark ------------------------------------------------------------- */
.site-nav .brand{display:flex;align-items:baseline;gap:7px;line-height:1;
  text-decoration:none;color:var(--on-dark);}
.site-nav .brand .visit{font-family:var(--font-logo),system-ui,sans-serif;
  font-size:9.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;opacity:.75;}
.site-nav .brand .name{font-family:var(--font-logo),system-ui,sans-serif;
  font-size:16.5px;font-weight:600;letter-spacing:.01em;}

/* ---- Desktop links -------------------------------------------------------- */
.site-nav .links{display:flex;align-items:center;gap:22px;position:relative;}
@media(max-width:1080px){.site-nav .links{gap:16px;}}
.site-nav .links > a{color:var(--on-dark);opacity:.82;text-decoration:none;font-size:11px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:opacity .25s;}
.site-nav .links > a:hover{opacity:1;}

/* "Contact" is a prominent pill button — the primary conversion action */
.site-nav .links > a.nav-contact{
  opacity:1;background:var(--accent);color:#fff;padding:7px 15px;border-radius:99px;
  letter-spacing:.07em;transition:filter .25s,transform .25s;}
.site-nav .links > a.nav-contact:hover{filter:brightness(1.12);transform:translateY(-1px);}

/* "Weekends" is a button that opens the dropdown */
/* static, not relative: the panels are positioned against .links (see .dd-menu) */
.site-nav .dd{position:static;}
.site-nav .dd > button{display:inline-flex;align-items:center;gap:6px;background:none;border:none;
  cursor:pointer;color:var(--on-dark);opacity:.82;font-family:inherit;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:0;transition:opacity .25s;}
.site-nav .dd > button:hover,.site-nav .dd.open > button{opacity:1;}
.site-nav .dd > button .chev{width:8px;height:8px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s;}
.site-nav .dd.open > button .chev{transform:rotate(225deg) translate(-1px,-1px);}

/* ---- Dropdown mega-menu ---------------------------------------------------
   Sits on its own solid ground with a hairline edge and a deep shadow so it
   reads as a panel floating above the page rather than tinting it. --------- */
.site-nav .dd-menu{
  /* Anchored to the RIGHT EDGE OF .links, not to its own trigger. Centring a 560px
     panel on a trigger hangs it off the right of the viewport; anchoring it to the
     trigger hangs it off the LEFT once the trigger sits far enough left (measured:
     Discover clipped at 860px). The link row's right edge is the one anchor that is
     always well inside the viewport, and it drops both panels from the same line. */
  position:absolute;top:calc(100% + 14px);right:0;transform:translateY(8px);
  width:min(560px,86vw);background:var(--dark);color:var(--on-dark);border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  padding:16px;box-shadow:0 26px 70px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.site-nav .dd.open .dd-menu{opacity:1;visibility:visible;transform:translateY(0);}
/* hover bridge: the gap under the bar must not drop the hover on the way down */
.site-nav .dd-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
.site-nav .dd-menu .dd-label{font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;opacity:.55;margin:0 6px 10px;}
.site-nav .dd-menu .dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.site-nav .dd-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;
  text-decoration:none;color:var(--on-dark);transition:background .2s;}
.site-nav .dd-menu a:hover,.site-nav .dd-menu a:focus-visible{background:rgba(255,255,255,.12);}
.site-nav .dd-menu a b{font-family:var(--font-display),system-ui,sans-serif;
  font-weight:500;font-size:14.5px;}
.site-nav .dd-menu a span{font-size:11.5px;font-weight:300;opacity:.7;}

/* ---- Mobile: hamburger + full-screen drawer ------------------------------- */
.site-nav .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;}
.site-nav .nav-toggle span{display:block;width:24px;height:2px;background:var(--on-dark);border-radius:2px;
  transition:transform .3s ease,opacity .3s ease;}
.site-nav .nav-toggle.x span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-nav .nav-toggle.x span:nth-child(2){opacity:0;}
.site-nav .nav-toggle.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.site-nav .drawer{
  position:fixed;inset:0;z-index:90;background:var(--dark);color:var(--on-dark);
  display:flex;flex-direction:column;padding:12vh 8vw 6vh;overflow-y:auto;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.6,0,.3,1);visibility:hidden;
}
.site-nav .drawer.open{transform:none;visibility:visible;}
.site-nav .drawer .close{position:absolute;top:14px;right:5vw;background:none;border:none;
  color:var(--on-dark);font-size:34px;line-height:1;cursor:pointer;opacity:.85;}
.site-nav .drawer .d-group{margin-bottom:22px;}
.site-nav .drawer .d-label{font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;opacity:.5;margin-bottom:8px;}
.site-nav .drawer a{display:block;font-family:var(--font-display),system-ui,sans-serif;
  font-weight:500;font-size:clamp(23px,5.6vw,32px);color:var(--on-dark);text-decoration:none;
  padding:9px 0;letter-spacing:-.01em;border-bottom:1px solid rgba(255,255,255,.12);}
.site-nav .drawer a:last-child{border-bottom:none;}
.site-nav .drawer .d-sub a{font-size:clamp(18px,4.4vw,24px);opacity:.85;}
.site-nav .drawer a.d-contact{color:var(--accent);font-weight:600;}

@media(max-width:820px){
  .site-nav .links{display:none;}
  .site-nav .nav-toggle{display:flex;}
}

@media(prefers-reduced-motion:reduce){
  .site-nav,.site-nav .dd-menu,.site-nav .drawer,.site-nav .nav-toggle span{transition:none;}
}