/* ══════════════════════════════════════════════════
   SITE HEADER — floating pill bar
   Scroll morph is driven entirely by scripts/header.js via per-frame
   inline style interpolation. No CSS transitions on the morphed
   properties (width, padding, border-radius, box-shadow, logo width/
   opacity, cta border-radius) — transitions there would add lag and
   fight the scroll-linked updates.
   Depends on tokens.css.
   ══════════════════════════════════════════════════ */

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  padding-inline:clamp(1.2rem, 3.2vw, 3.2rem);
  /* Above .site-mobile-menu (z-index:var(--z-overlay)), not just
     --z-sticky — position:fixed + z-index here already makes .site-header
     its own stacking context, so a child's z-index (e.g. the burger)
     can never out-rank a sibling context like the overlay on its own;
     the context root itself has to sit higher. Without this the burger's
     morphed "X" close icon gets buried under the overlay it controls. */
  z-index:calc(var(--z-overlay) + 1);
  pointer-events:none;
  box-sizing:border-box;
}

.site-header__inner{
  pointer-events:auto;
  position:relative;
  width:100%;
  max-width:var(--container-max);
  margin-top:var(--space-6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
  padding:var(--space-5);
  background:rgba(17,17,31,0.55);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border:1px solid var(--bd);
  border-radius:var(--radius-lg);
  box-shadow:0 0 16px rgba(0,0,0,0.50), 0 0 6px rgba(0,0,0,0.35), var(--glow-white);
}


/* ── RIGHT GROUP (nav + cta) ── */
.site-header__right{
  display:flex;
  align-items:center;
  gap:var(--space-5);
}

/* ── LOGO · crossfade + shrink between full lockup and favicon ── */
.site-header__logo-link{
  display:inline-flex;
  align-items:center;
}
.site-header__logo-link:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-sm);
}

.site-header__logo{
  position:relative;
  width:11.9rem;
  height:3.4rem;
}

.site-header__logo-img{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:auto;
  opacity:0;
}
.site-header__logo-img--full{ opacity:1; }

/* ── NAV ── */
.site-header__nav-list{
  display:flex;
  align-items:center;
  gap:var(--space-6);
  list-style:none;
}

.site-header__nav-link{
  position:relative;
  display:inline-block;
  padding-bottom:var(--space-2);
  font-family:var(--fb);
  font-size:1.4rem;
  line-height:1;
  font-weight:400;
  color:var(--txt);
  text-decoration:none;
  transition:color 200ms ease;
}
.site-header__nav-link:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-sm);
}

/* pointer underline — hidden until hover/active */
.site-header__nav-link::after{
  content:"";
  position:absolute;
  left:25%;
  bottom:0;
  width:50%;
  height:2px;
  border-radius:var(--radius-sm);
  background:var(--ad);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 200ms ease;
}

.site-header__nav-link:hover{ color:var(--a); }
.site-header__nav-link:hover::after{ transform:scaleX(1); }

.site-header__nav-link[aria-current="page"]{
  color:var(--txt);
}
.site-header__nav-link[aria-current="page"]::after{
  background:var(--txt);
  transform:scaleX(1);
}

/* ── CTA BUTTON ── */
.site-header__cta{
  flex-shrink:0;
  font-family:var(--fb);
  font-size:1.4rem;
  line-height:1;
  font-weight:600;
  letter-spacing:.01em;
  padding:.8rem 2rem;
  background:var(--gr);
  color:#fff;
  border:none;
  border-radius:0.7rem;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  transition:box-shadow .25s ease, filter .25s ease;
}
.site-header__cta:hover{
  box-shadow:var(--glow-brand);
  filter:brightness(1.1);
}
.site-header__cta:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}

/* ── BURGER BUTTON · hidden on desktop, shown at ≤1024px via responsive.css ──
   Design system option 2: ev-menu-dotbars (dot + bars).
   Source: brand.eventology.me assets/css/components.css */
.site-header__burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:var(--touch-target);
  height:3.4rem;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  flex-shrink:0;
}
.site-header__burger:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-sm);
}

.ev-menu-dotbars-wrap{
  position:relative;
  width:20px;
  height:16px;
}
.ev-menu-dot{
  position:absolute;
  top:0;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gr);
  transition:transform .3s ease, opacity .25s ease;
}
.ev-menu-line{
  position:absolute;
  left:0;
  height:2px;
  border-radius:1px;
  background:var(--t2);
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease, width .3s ease, background-color .25s ease;
}
.ev-menu-dotbars-wrap .ev-menu-line{ width:20px; }
.ev-menu-dotbars-wrap .d1{ top:6px; }
.ev-menu-dotbars-wrap .d2{ top:14px; }

/* open state — X shape, azure colour */
.ev-menu-dotbars.is-open .ev-menu-dot{
  opacity:0;
  transform:scale(0);
}
.ev-menu-dotbars.is-open .d1{
  transform:translateY(4px) rotate(45deg);
  background-color:var(--a);
}
.ev-menu-dotbars.is-open .d2{
  transform:translateY(-4px) rotate(-45deg);
  background-color:var(--a);
}

/* ── MOBILE MENU · full-screen overlay, circular reveal from the burger ──
   Closed state is an empty circle clipped down to nothing at the
   burger's own screen position (--menu-origin-x/y, set by
   scripts/mobile-menu.js right before opening, since the burger can
   theoretically sit anywhere depending on header layout). Opening grows
   that circle to cover the viewport; the same transition plays in
   reverse on close. Deliberately reuses the hero loader's circular-
   reveal idea as a callback rather than a plain slide/fade panel. */
.site-mobile-menu{
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(147,39,143,0.14) 0%, rgba(31,147,255,0.07) 50%, transparent 75%),
    var(--c0);
  clip-path:circle(0% at var(--menu-origin-x, 100%) var(--menu-origin-y, 0%));
  transition:clip-path 420ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.site-mobile-menu[hidden]{ display:none; }
.site-mobile-menu.is-open{
  /* 200vmax, not a percentage — circle()'s percentage radius resolves
     against the reference box in a way that turned out far smaller than
     expected in testing (150% visibly failed to cover the viewport).
     vmax guarantees a radius at least twice the longer viewport
     dimension, comfortably covering the diagonal from any corner
     regardless of aspect ratio. */
  clip-path:circle(200vmax at var(--menu-origin-x, 100%) var(--menu-origin-y, 0%));
  pointer-events:auto;
}

.site-mobile-menu__nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-7);
  width:100%;
  padding:var(--space-6);
  box-sizing:border-box;
}

.site-mobile-menu__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-5);
}

.site-mobile-menu__link{
  font-family:var(--fd);
  font-size:clamp(3.2rem, 8vw, 5.6rem);
  font-weight:800;
  line-height:1.1;
  color:var(--txt);
  text-decoration:none;
  transition:color 200ms ease;
}
.site-mobile-menu__link:hover,
.site-mobile-menu__link:focus-visible{ color:var(--a); }
.site-mobile-menu__link[aria-current="page"]{ color:var(--v); }
.site-mobile-menu__link:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-sm);
}

.site-mobile-menu__cta{
  font-family:var(--fb);
  font-size:1.6rem;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
  text-decoration:none;
  padding:1.6rem 4rem;
  background:var(--gr);
  border-radius:var(--radius-pill);
  transition:box-shadow .25s ease, filter .25s ease;
}
.site-mobile-menu__cta:hover{
  box-shadow:var(--glow-brand);
  filter:brightness(1.1);
}
.site-mobile-menu__cta:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}

/* Reuses .site-footer__social itself (styles/footer.css) for each icon —
   same look, just laid out here for the mobile menu's own width/wrap. */
.site-mobile-menu__socials{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  align-items:center;
  justify-items:center;
  gap:var(--space-4) var(--space-5);
  max-width:32rem;
}

/* Staggered entrance — scripts/mobile-menu.js sets each item's
   transition-delay inline (a base offset so items arrive as the circle
   finishes expanding, then a per-item stagger on top; 0 on close, so
   everything fades out together, fast, with no cascade). */
.site-mobile-menu__item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 300ms ease, transform 300ms ease;
}
.site-mobile-menu.is-open .site-mobile-menu__item{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  .site-header__nav-link,
  .site-header__nav-link::after,
  .site-header__cta,
  .ev-menu-line,
  .ev-menu-dot,
  .site-mobile-menu,
  .site-mobile-menu__item{
    transition:none;
  }
}