/* Purpose: Site header / primary navigation. Ported from the approved WV reference.
   Floats transparent over the hero; gains a frosted-glass .is-solid state on scroll.
   Mobile-first: base = hamburger nav, full nav appears from lg (1024px). */

/* ── Announcement bar (top emerald strip, normal flow) ── */
.wv-ann {
  background: var(--emerald);
  color: var(--cream);
  text-align: center;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  position: relative;
  z-index: var(--z-nav);
}
.wv-ann__sep { color: rgba(245, 239, 224, 0.4); margin: 0 12px; }
.wv-ann__link {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-30);
  padding-bottom: 2px;
  transition: color var(--dur-default), border-color var(--dur-default);
}
.wv-ann__link:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }

.site-header {
  position: absolute;
  top: var(--wv-ann-h, 44px);  /* sits just below the announcement bar (JS refines the height) */
  left: 0; right: 0;
  z-index: var(--z-nav);
  background: transparent;
  border-bottom: 0;
  transition: background var(--dur-lux), border-color var(--dur-lux);
  /* Drop in from the top on page load. */
  animation: wv-nav-drop 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
@keyframes wv-nav-drop {
  from { transform: translateY(-120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { animation: none; }
}
/* Added by JS once the page scrolls past the announcement bar → pin to viewport. */
.site-header.is-solid {
  position: fixed;
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--ink-08);
}

.site-header__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 16px var(--space-section-x);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}
/* Logo left · nav + CTA grouped right (matches reference). */
.site-header__nav { margin-left: auto; }

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-header__logo-img { display: block; height: 44px; width: auto; }
.site-header__logo-text {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ── Primary menu (WP nav menu) ── */
.site-header__nav { display: none; }              /* hidden on mobile */
.site-header__menu {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: nowrap;
}
.site-header__menu a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-72);
  padding: 4px 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-default);
}
.site-header__menu a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-lux) var(--ease);
}
.site-header__menu a:hover,
.site-header__menu .current-menu-item > a { color: var(--ink); }
.site-header__menu a:hover::after,
.site-header__menu .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }

/* ── Nav CTA — uses the unified .btn / .btn-A pill (components.css).
   This class only handles responsive show/hide + spacing. ── */
.site-header__cta {
  display: none;                                   /* shown with the desktop nav */
  margin-left: 8px;
}

/* ── Mobile toggle ── */
.site-header__toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;                       /* 44px tap target */
  margin-left: auto;                               /* push to the right on mobile */
}
.site-header__toggle span,
.site-header__toggle span::before,
.site-header__toggle span::after {
  content: '';
  display: block; width: 24px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-default), opacity var(--dur-default);
}
.site-header__toggle span { position: relative; }
.site-header__toggle span::before { position: absolute; top: -7px; left: 0; }
.site-header__toggle span::after  { position: absolute; top:  7px; left: 0; }

/* Open state (JS toggles .is-open on .js-nav) — animate to an X. */
.js-nav.is-open .site-header__toggle span { background: transparent; }
.js-nav.is-open .site-header__toggle span::before { transform: translateY(7px) rotate(45deg); }
.js-nav.is-open .site-header__toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer (base) ── */
@media (max-width: 1023px) {
  .js-nav.is-open .site-header__nav {
    display: block;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ink-08);
    padding: 16px var(--space-section-x) 24px;
  }
  .js-nav.is-open .site-header__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

/* ── Desktop nav (lg / 1024px+) ── */
@media (min-width: 1024px) {
  .site-header__nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-header__toggle { display: none; }
}