/* ==========================================================================
   AWOOGA — Shared site header / nav / drawer / search palette
   --------------------------------------------------------------------------
   The markup for all of this is built by assets/js/main.js from the NAV_GROUPS
   array in assets/js/config.js. This file is the styling half of that pair, and
   it lives on its own for one reason: /elementor-1101/boat-portal.php mounts the
   same header but CANNOT load style.css — that file's global element rules
   (body, h1–h4, p, a, img, button) would restyle the self-contained portal UI
   underneath it. It used to keep a hand-trimmed copy of these rules inline, and
   that copy silently rotted when the flat ten-link bar became the grouped
   mega-nav: the portal rendered unstyled buttons and a visible skip link.

   So: no global element rules here, and nothing that assumes style.css loaded.
   Everything is class-scoped, the few element rules are wrapped in :where() so
   they stay at zero specificity, and the handful of resets the header relies on
   (box-sizing, link colors, button fonts) are re-stated scoped to the header,
   drawer and search palette. Both style.css and boat-portal.php just link it.

   Requires: tokens.css (the --navy/--cream/--brass/--font-* custom properties).
   ========================================================================== */

/* ── Self-sufficiency: the bits of style.css's reset this header depends on,
      scoped so they can't leak into a page that hosts its own UI. ────────── */
.site-header, .site-header *,
.drawer, .drawer *,
.site-search, .site-search * { box-sizing: border-box; }
:where(.site-header, .drawer, .site-search) a { color: inherit; text-decoration: none; }
:where(.site-header, .drawer, .site-search) button { font-family: var(--font-sans); cursor: pointer; }
:where(.site-header, .drawer, .site-search) img { max-width: 100%; }

/* ---------- Site header / nav ------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 32, 52, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cream);
  font-family: var(--font-sans);
  line-height: 1.65;
  border-bottom: 1px solid rgba(247, 241, 227, 0.12);
  /* Named so a cross-document view transition carries the bar across as one
     persistent object instead of dissolving and rebuilding it (see the
     @view-transition block in style.css). Inert on pages that never opt in,
     the boat portal included, so it is safe to state here. */
  view-transition-name: site-header;
}

/* ── Scroll progress ──────────────────────────────────────────────────────
   A brass hairline along the bottom edge of the bar, filling as the document
   scrolls. Driven by a scroll-progress timeline, so there is no scroll
   listener and nothing to keep in sync on resize.

   The @supports gate is load-bearing, not decoration: without a timeline an
   animation with no duration would settle instantly on its final frame and
   paint a permanently full bar. Browsers that lack scroll() must not see
   this rule at all. */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--brass), var(--brass-lt));
    box-shadow: 0 0 10px rgba(227, 195, 90, 0.45);
    animation: header-scroll-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes header-scroll-progress {
    to { transform: scaleX(1); }
  }
}
/* The bar carries more items than a section of body copy, so it gets a wider
   container than the 1200px --maxw the rest of the site uses. It sets its own
   width and centering rather than leaning on .container (which it shares a
   div with): .container lives in style.css, which the boat portal never loads,
   and the extra specificity keeps this winning wherever both do apply. */
.site-header .nav {
  width: min(100% - 2rem, 1440px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(0.5rem, 1.5vw, 1rem); padding: 0.7rem 0;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--cream); letter-spacing: 0.02em; flex: none; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__word { height: 1.25rem; width: auto; flex: none; display: block; }
/* ── Skip link ────────────────────────────────────────────────────────────
   Every page opens with the nav; this lets keyboard and screen-reader users
   jump the whole bar. Off-screen until focused, then it slides into view. */
.skip-link {
  position: absolute; left: 1rem; top: 0.5rem; z-index: 120;
  padding: 0.65rem 1.1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--brass); color: var(--navy-900);
  font-weight: 700; font-size: 0.9rem;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
/* :focus as well as :focus-visible — a skip link is only ever reached by
   keyboard, and older engines don't all support :focus-visible. */
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--cream); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ── Primary bar ──────────────────────────────────────────────────────────
   Four group triggers instead of ten flat links, so the row no longer has to
   grow with the site. Groups are defined once in config.js (NAV_GROUPS) and
   render here, in the mobile drawer, and in the footer. */
.nav__bar { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.nav__links { display: flex; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.nav__links > li { flex: none; }

.nav__home {
  display: inline-block; white-space: nowrap;
  padding: 0.5rem clamp(0.6rem, 1vw, 0.95rem); border-radius: 999px;
  font-size: 0.92rem; font-weight: 500; color: rgba(247, 241, 227, 0.82);
  transition: background-color 0.2s, color 0.2s;
}
.nav__home:hover { color: var(--cream); background: rgba(247, 241, 227, 0.1); }
.nav__home.is-active { color: var(--navy-900); background: var(--brass); font-weight: 600; }

.nav__trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.32rem;
  white-space: nowrap; border: 0; background: none;
  padding: 0.5rem clamp(0.6rem, 1vw, 0.95rem); border-radius: 999px;
  font-family: var(--font-sans); font-size: 0.92rem; font-weight: 500;
  color: rgba(247, 241, 227, 0.82);
  transition: background-color 0.2s, color 0.2s;
}
.nav__trigger:hover, .nav__trigger.is-showing { color: var(--cream); background: rgba(247, 241, 227, 0.12); }
.nav__trigger:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; }
.nav__chev { width: 13px; height: 13px; opacity: 0.7; transition: transform 0.25s var(--ease); }
.nav__trigger.is-showing .nav__chev { transform: rotate(180deg); }
/* The group holding the current page keeps a quiet brass underline. */
.nav__trigger.is-active { color: var(--cream); }
.nav__trigger.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -0.15rem;
  width: 18px; height: 2px; border-radius: 2px; background: var(--brass);
  transform: translateX(-50%);
}
.nav__group { position: relative; }
@media (prefers-reduced-motion: reduce) { .nav__chev { transition: none; } }

.nav__tools { display: inline-flex; align-items: center; gap: 0.25rem; flex: none; }
.nav__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: 0; color: rgba(247, 241, 227, 0.85);
  transition: background-color 0.2s, color 0.2s;
}
.nav__icon:hover { background: rgba(247, 241, 227, 0.12); color: var(--cream); }
.nav__icon:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; }
.nav__icon svg { width: 21px; height: 21px; }
.nav__toggle { display: none; }
.nav__toggle svg { width: 25px; height: 25px; }

/* ── The group panels ─────────────────────────────────────────────────────
   A single full-width sheet under the bar. Only one is ever un-hidden, and
   the wrapper carries the sheet's background so the panels can cross-fade
   without the ground flashing. */
.megawrap {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 60; pointer-events: none;
}
.megawrap.is-active { pointer-events: auto; }
.megapanel {
  background:
    radial-gradient(90% 140% at 12% -30%, rgba(227, 195, 90, 0.13), transparent 60%),
    linear-gradient(180deg, #0e2740, var(--navy-900));
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.megapanel.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .megapanel { transition: none; transform: none; }
}
.megapanel__inner {
  width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(180px, 250px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1.8rem, 3.5vw, 2.6rem);
}
.megapanel__intro { border-left: 2px solid var(--brass); padding-left: 1.1rem; }
.megapanel__eyebrow {
  margin: 0 0 0.4rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-lt);
}
.megapanel__tagline {
  margin: 0; font-family: var(--font-display); font-size: 1.12rem;
  line-height: 1.35; color: rgba(247, 241, 227, 0.9);
}
.megapanel__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0.15rem 0.6rem;
}
.megalink {
  display: block; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.megalink:hover { background: rgba(247, 241, 227, 0.07); border-color: rgba(201, 162, 39, 0.35); transform: translateX(3px); }
.megalink:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 1px; }
.megalink.is-active { background: rgba(201, 162, 39, 0.16); border-color: rgba(201, 162, 39, 0.5); }
.megalink__label { display: block; font-weight: 600; font-size: 0.95rem; color: var(--cream); }
.megalink__blurb {
  display: block; margin-top: 0.15rem; font-size: 0.8rem; line-height: 1.45;
  color: rgba(247, 241, 227, 0.6);
}
@media (prefers-reduced-motion: reduce) { .megalink:hover { transform: none; } }

/* ── Mobile drawer ────────────────────────────────────────────────────────
   Below the bar's comfortable width the groups become a scrollable, focus-
   trapped sheet. 1024px is well clear of the four-trigger row, so unlike the
   old ten-link bar this breakpoint doesn't need re-measuring when a page is
   added — the row's width no longer depends on how many pages exist. */
html.nav-lock { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 150; background: rgba(6, 16, 27, 0.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.25s var(--ease); font-family: var(--font-sans); line-height: 1.65; }
.drawer.is-open { opacity: 1; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(420px, 88vw); height: 100%; overflow-y: auto;
  padding: 1rem clamp(1rem, 4vw, 1.6rem) 3rem;
  background: linear-gradient(180deg, #0e2740, var(--navy-900) 40%);
  border-left: 1px solid rgba(201, 162, 39, 0.3);
  color: var(--cream);
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
  -webkit-overflow-scrolling: touch;
}
.drawer.is-open .drawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer__panel { transition: none; }
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.2rem 0 1rem; }
.drawer__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; }
.drawer__close { background: none; border: 0; color: rgba(247, 241, 227, 0.8); padding: 0.4rem; border-radius: 50%; display: inline-flex; }
.drawer__close:hover { background: rgba(247, 241, 227, 0.12); color: var(--cream); }
.drawer__close:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__search {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.8rem 1rem; margin-bottom: 1rem;
  border-radius: 999px; border: 1px solid rgba(247, 241, 227, 0.22);
  background: rgba(247, 241, 227, 0.06); color: rgba(247, 241, 227, 0.75);
  font-size: 0.95rem; text-align: left;
}
.drawer__search:hover { border-color: var(--brass); color: var(--cream); }
.drawer__search:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; }
.drawer__search svg { width: 18px; height: 18px; flex: none; }
.drawer__home {
  display: block; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  font-weight: 600; color: var(--cream); background: rgba(247, 241, 227, 0.07);
  margin-bottom: 0.9rem;
}
.drawer__home.is-active { background: var(--brass); color: var(--navy-900); }
.drawer__group { border-top: 1px solid rgba(247, 241, 227, 0.12); }
.drawer__heading { margin: 0; font-size: 1rem; }
.drawer__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 0.95rem 0.2rem;
  background: none; border: 0; color: var(--cream);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
}
.drawer__toggle:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; }
.drawer__toggle svg { width: 18px; height: 18px; color: var(--brass); transition: transform 0.22s var(--ease); flex: none; }
.drawer__toggle.is-open svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .drawer__toggle svg { transition: none; } }
.drawer__list { list-style: none; margin: 0; padding: 0 0 0.9rem 0.2rem; display: flex; flex-direction: column; gap: 0.1rem; }
.drawer__list a {
  display: block; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
  font-size: 0.95rem; color: rgba(247, 241, 227, 0.78);
}
.drawer__list a:hover { background: rgba(247, 241, 227, 0.09); color: var(--cream); }
.drawer__list a:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 1px; }
.drawer__list a.is-active { color: var(--navy-900); background: var(--brass); font-weight: 600; }

@media (max-width: 1023px) {
  .nav__bar { display: none; }
  .nav__toggle { display: inline-flex; }
  .megawrap { display: none; }
}
@media (min-width: 1024px) {
  .drawer { display: none; }
}

/* ── Site-wide search palette ─────────────────────────────────────────── */
html.search-lock { overflow: hidden; }
.site-search {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(3rem, 12vh, 9rem) 1rem 2rem;
  font-family: var(--font-sans); line-height: 1.65;
}
.site-search[hidden] { display: none; }
.site-search__backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 19, 34, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.2s var(--ease, ease);
}
.site-search.is-open .site-search__backdrop { opacity: 1; }
.site-search__panel {
  position: relative; width: min(640px, 100%);
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-10px) scale(0.98); opacity: 0;
  transition: transform 0.22s var(--ease, ease), opacity 0.22s var(--ease, ease);
}
.site-search.is-open .site-search__panel { transform: none; opacity: 1; }
.site-search__bar {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--cream-2);
}
.site-search__icon { width: 20px; height: 20px; flex: none; color: var(--ink-soft); }
.site-search__input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--font-sans); font-size: 1.05rem; color: var(--ink);
}
.site-search__esc {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600;
  color: var(--ink-soft); background: var(--cream-2);
  padding: 0.15rem 0.4rem; border-radius: 6px; flex: none;
}
.site-search__results { list-style: none; margin: 0; padding: 0.4rem; max-height: min(60vh, 460px); overflow-y: auto; }
.site-search__result { border-radius: var(--radius-sm); }
.site-search__result a {
  display: grid; grid-template-columns: 1fr auto; grid-auto-rows: auto;
  gap: 0 0.75rem; padding: 0.6rem 0.8rem; text-decoration: none; color: inherit;
}
.site-search__result-group {
  grid-column: 2; grid-row: 1;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--brass); align-self: center;
}
.site-search__result-title { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--navy-900); }
.site-search__result-blurb { grid-column: 1; grid-row: 2; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.35; }
.site-search__result.is-active { background: var(--brass); }
.site-search__result.is-active .site-search__result-group { color: var(--navy-900); }
.site-search__result.is-active .site-search__result-blurb { color: rgba(12, 32, 52, 0.82); }
.site-search__empty { padding: 1.4rem 1.2rem 1.6rem; margin: 0; color: var(--ink-soft); font-size: 0.95rem; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .site-search__backdrop, .site-search__panel { transition: none; }
}