/* ==========================================================================
   header — site header (shared on every page)
   Rename + reorganize only. Declaration values are byte-identical to source.
   ========================================================================== */

/* --- Page shell --- */
.site-header-page {
  position:relative;background:var(--bg,#08090C);color:#ECEFF4;min-height:100vh;display:flex;flex-direction:column;font-family:'Fredoka',-apple-system,system-ui,sans-serif;
}

/* --- Fixed header bar --- */
.site-header-bar {
  position:fixed;top:0;inset-inline:0;z-index:100;transition:all .45s cubic-bezier(.16,.8,.24,1);border-bottom:1px solid transparent;
}
/* Solid once the page has scrolled past 40px. strix-theme.js only flips the
   class now; it used to write these three properties inline on every scroll
   frame, which meant the resting state was described nowhere in CSS. */
.site-header-bar.is-scrolled {
  background:rgba(8,9,12,.72);backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.08);
}
.site-header-inner {
  max-width:1300px;margin:0 auto;padding:clamp(.9rem,1.6vw,1.4rem) clamp(.85rem,3.5vw,1.4rem);display:flex;align-items:center;justify-content:space-between;gap:.5rem;position:relative;
}

/* --- Brand ---
   Mobile bar: hamburger (right) · logo (centered) · CTA (left).
   RTL: flex start = right. Order sorts the in-flow children; the logo takes the
   middle zone so it stays centered between the two controls without overlap. */
.site-header-brand {
  display:flex;align-items:center;color:#ECEFF4;text-decoration:none;order:2;flex:1 1 auto;min-width:0;justify-content:center;
}
/* !important on both sides: strix_logo() emits an inline height, and an inline
   style can only be beaten by !important — so the desktop value needs it too. */
.site-header-brand .strix-logo { height:23px !important; max-width:100%; }

/* --- Navigation --- */
.site-header-nav {
  display:none;align-items:center;gap:clamp(1rem,2vw,2.2rem);font-size:1.02rem;font-weight:500;
}

/* --- CTA --- */
.site-header-cta {
  display:inline-flex;align-items:center;gap:.5rem;background:var(--accent,#2FD4BE);color:#04140F;font-weight:700;font-size:.88rem;padding:.5rem .85rem;border-radius:999px;text-decoration:none;transition:transform .25s,box-shadow .25s;order:3;flex:0 0 auto;
}

/* --- Mobile toggle (burger) --- */
.site-header-burger {
  display:flex;width:44px;height:44px;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s;order:1;flex:0 0 auto;color:#ECEFF4;
}
.site-header-burger:active { transform:scale(.94); }

/* Burger → X morph: three plain bars, JS only flips .is-open on the button.
   Bars are 2px in an 18x14 box (top 0 / mid 6 / bot 12), so the box centre sits at
   y=7 and translateY(6px) drops each arm exactly onto it before it rotates. */
.site-header-burger .burger-icon { position:relative;display:block;width:18px;height:14px; }
.site-header-burger .burger-line {
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .4s cubic-bezier(.65,.05,.36,1);
}
.site-header-burger .burger-line--top { top:0; }
.site-header-burger .burger-line--mid { top:6px; }
.site-header-burger .burger-line--bot { top:12px; }
/* middle bar collapses first on open, and waits for the arms to unfold on close */
.site-header-burger .burger-line--mid {
  transition:transform .25s cubic-bezier(.65,.05,.36,1) .18s,opacity .2s ease .18s;
}
.site-header-burger.is-open .burger-line--top { transform:translateY(6px) rotate(45deg);transition-delay:.08s; }
.site-header-burger.is-open .burger-line--bot { transform:translateY(-6px) rotate(-45deg);transition-delay:.08s; }
.site-header-burger.is-open .burger-line--mid { opacity:0;transform:scaleX(.15);transition-delay:0s; }

@media (prefers-reduced-motion: reduce) {
  .site-header-burger:active { transform:none; }
  .site-header-burger .burger-line,
  .site-header-burger.is-open .burger-line { transition-duration:1ms;transition-delay:0s; }
}

/* --- Mobile sheet --- */
.site-header-mobile-sheet {
  position:fixed;inset:0;z-index:99;background:#08090Cf2;backdrop-filter:blur(14px);display:none;flex-direction:column;padding:6rem clamp(1.5rem,7vw,3rem) 3rem;opacity:0;transition:opacity .35s;
}
.site-header-mobile-nav {
  display:flex;flex-direction:column;gap:.4rem;font-size:1.9rem;font-weight:600;
}
.site-header-mobile-cta {
  margin-top:auto;text-align:center;background:var(--accent,#2FD4BE);color:#04140F;font-weight:700;padding:1rem;border-radius:14px;font-size:1.1rem;text-decoration:none;
}

/* Skip link — WCAG 2.2 2.4.1 (Bypass Blocks). Off-screen until focused rather
   than display:none, which would drop it from the tab order entirely. */
.strix-skip-link {
  position:absolute;inset-inline-start:1rem;inset-block-start:-100%;z-index:1000;
  padding:.7rem 1.15rem;border-radius:0 0 12px 12px;
  background:var(--accent,#2FD4BE);color:#0B0E13;
  font-family:inherit;font-size:.95rem;font-weight:600;text-decoration:none;
  transition:inset-block-start .18s;
}
/* `:focus`, not `:focus-visible` — assistive tech and programmatic focus do not
   reliably match :focus-visible, and a skip link that stays hidden when focused
   is worse than none at all. */
.strix-skip-link:focus {
  inset-block-start:0;outline:2px solid #ECEFF4;outline-offset:2px;
}
/* the landmark takes focus when the skip link is used; never show a ring on it */
#main:focus { outline:none; }

/* ==========================================================================
   Primary menu — WP menu at location `primary`, walked by Strix_Nav_Walker.
   Two-level: top-level row + mega panel (desktop), accordion (mobile sheet).
   RTL-safe: panel geometry uses logical properties only.
   ========================================================================== */

/* Closed panels stay display:none. Needed explicitly because the rules below
   give the sub-lists a `display`, which would otherwise beat the UA [hidden]. */
.strix-mega[hidden],
.strix-mnav-sub[hidden] { display:none; }

/* --- Desktop: top-level row --- */
.strix-nav-list {
  display:flex;align-items:center;gap:clamp(1rem,2vw,2.2rem);list-style:none;margin:0;padding:0;
}
.strix-nav-item { position:relative;display:flex;align-items:center; }
.strix-nav-row  { display:flex;align-items:center;gap:.3rem; }

.strix-nav-link {
  color:#ECEFF4;text-decoration:none;opacity:.72;transition:opacity .2s,color .2s;
}
.strix-nav-link:hover,
.strix-nav-link:focus-visible { opacity:1; }
.strix-nav-link.is-active { color:var(--accent,#2FD4BE);opacity:1; }

/* --- Desktop: chevron toggle ---
   Two shapes share the behaviour hook `.strix-nav-toggle`:
   `--icon`  sits next to a real link (parent has its own page)
   `--label` IS the label (grouping parent with no page of its own) */
.strix-nav-toggle {
  display:inline-flex;align-items:center;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;
}
.strix-nav-toggle:focus-visible { outline:2px solid var(--accent,#2FD4BE);outline-offset:3px;border-radius:6px; }

/* Both shapes must read as one control, so the chevron — the one element they
   share — carries the entire visual. The buttons stay invisible hit areas. */
.strix-nav-toggle--icon  { justify-content:center;color:#ECEFF4;opacity:.72;transition:opacity .2s,color .2s; }
.strix-nav-toggle--icon:hover,
.strix-nav-toggle--icon:focus-visible { opacity:1; }

/* gap matches .strix-nav-row's, so label→chevron distance is identical whether
   the label is a sibling link or lives inside this button */
.strix-nav-toggle--label { gap:.3rem; }

.strix-nav-chevron { display:flex;align-items:center;justify-content:center;transition:transform .25s; }
.strix-nav-chevron svg { inline-size:.9rem;block-size:.9rem;display:block; }
.strix-nav-item--has-mega.is-open .strix-nav-chevron   { transform:rotate(180deg); }
.strix-nav-item--has-mega.is-open .strix-nav-toggle--icon { opacity:1;color:var(--accent,#2FD4BE); }
.strix-nav-item--has-mega.is-open .strix-nav-link      { opacity:1; }

/* --- Desktop: mega panel ---
   Centred under its item in both directions: `inset-inline-start` places the
   start edge at the midpoint, then a negative *logical* margin pulls it back by
   half its own width. `margin-inline-start` flips with `dir`, `translateX()`
   would not — which is why this avoids transforms. */
.strix-mega {
  --strix-mega-w:min(30rem,calc(100vw - 2rem));
  position:absolute;inset-block-start:calc(100% + .85rem);inset-inline-start:50%;
  inline-size:var(--strix-mega-w);margin-inline-start:calc(var(--strix-mega-w) / -2);
  z-index:120;padding:.7rem;border-radius:18px;
  background:rgba(12,14,19,.97);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 26px 64px -22px rgba(0,0,0,.9);backdrop-filter:blur(18px);
}
/* invisible bridge across the gap, so travelling to the panel keeps hover */
.strix-mega::before {
  content:"";position:absolute;inset-inline:0;inset-block-start:-.85rem;block-size:.85rem;
}

.strix-mega-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.2rem;
  list-style:none;margin:0;padding:0;
}
.strix-mega-item { display:flex; }
.strix-mega-link {
  display:flex;flex-direction:column;gap:.2rem;inline-size:100%;
  padding:.7rem .8rem;border-radius:12px;color:#ECEFF4;text-decoration:none;
  transition:background .2s,color .2s;
}
.strix-mega-link:hover,
.strix-mega-link:focus-visible { background:rgba(47,212,190,.1);color:var(--accent,#2FD4BE); }
.strix-mega-link:focus-visible { outline:2px solid var(--accent,#2FD4BE);outline-offset:-2px; }
.strix-mega-link.is-active { color:var(--accent,#2FD4BE);background:rgba(47,212,190,.08); }
.strix-mega-title { font-size:.96rem;font-weight:600;line-height:1.3; }
.strix-mega-desc  { font-size:.78rem;font-weight:400;line-height:1.5;color:#9BA3B4; }
.strix-mega-link:hover .strix-mega-desc,
.strix-mega-link:focus-visible .strix-mega-desc { color:#C3C9D4; }

/* --- Mobile sheet: accordion ---
   Expanded groups make the sheet taller than the viewport. */
.site-header-mobile-sheet { overflow-y:auto;overscroll-behavior:contain; }

/* One row height for every entry, so a plain link, a link+toggle pair and a
   grouping button all line up. Set once here rather than left to each shape's
   font metrics + padding, which is what made the two parent types differ. */
.strix-mnav-list {
  --strix-mnav-row-h:3.375rem;
  display:flex;flex-direction:column;gap:.4rem;list-style:none;margin:0;padding:0;
}
.strix-mnav-item { display:flex;flex-direction:column; }
.strix-mnav-row  {
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  min-block-size:var(--strix-mnav-row-h);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.strix-mnav-link {
  flex:1 1 auto;display:flex;align-items:center;
  min-block-size:var(--strix-mnav-row-h);padding-block:0;
  color:#ECEFF4;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:none;border-inline:0;border-block-start:0;font:inherit;text-align:start;
}
/* Inside a row the border and the height floor both belong to the row; leaving
   them on the label too would stack a second border-width onto the row. */
.strix-mnav-row .strix-mnav-link { border-bottom:0;min-block-size:0; }
.strix-mnav-link.is-active { color:var(--accent,#2FD4BE); }

.strix-mnav-toggle {
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
}
.strix-mnav-toggle:focus-visible { outline:2px solid var(--accent,#2FD4BE);outline-offset:2px;border-radius:12px; }

/* A destination parent (link + separate toggle) and a grouping parent (one
   button) must look identical. The chevron is the only element both shapes
   share, so it — not the button — carries the box. The buttons are reduced to
   hit areas; the box keeps its own 2.75rem so the tap target stays ~44px. */
.strix-mnav-toggle--icon {
  inline-size:auto;block-size:auto;background:none;border:0;border-radius:0;padding:0;
}

.strix-mnav-toggle--label {
  justify-content:space-between;gap:.75rem;inline-size:100%;cursor:pointer;
}
/* Height comes from --strix-mnav-row-h on .strix-mnav-link, which this button
   also carries, so it needs no padding of its own. */

.strix-mnav-chevron {
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  inline-size:2.75rem;block-size:2.75rem;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:#ECEFF4;
  transition:transform .25s,background .2s,border-color .2s,color .2s;
}
/* the glyph reads at ~1/3 the box, so the box looks like a button and not an
   empty tile with a speck in it */
.strix-mnav-chevron svg { inline-size:1.15rem;block-size:1.15rem;display:block; }
.strix-mnav-toggle:hover .strix-mnav-chevron,
.strix-mnav-toggle:focus-visible .strix-mnav-chevron {
  background:rgba(255,255,255,.09);border-color:var(--accent,#2FD4BE);
}
.strix-mnav-item.is-open .strix-mnav-chevron {
  transform:rotate(180deg);color:var(--accent,#2FD4BE);border-color:var(--accent,#2FD4BE);
}

.strix-mnav-sub {
  display:flex;flex-direction:column;gap:.1rem;list-style:none;
  margin:.4rem 0 .6rem;padding:0;padding-inline-start:.95rem;
  border-inline-start:2px solid rgba(47,212,190,.35);
}
.strix-mnav-sublink {
  display:block;color:#C3C9D4;text-decoration:none;font-size:1.15rem;font-weight:500;padding:.45rem 0;
}
.strix-mnav-sublink:hover,
.strix-mnav-sublink:focus-visible { color:var(--accent,#2FD4BE); }
.strix-mnav-sublink.is-active { color:var(--accent,#2FD4BE); }

@media (prefers-reduced-motion: reduce) {
  .strix-nav-chevron,
  .strix-mnav-chevron,
  .strix-nav-link,
  .strix-mega-link,
  .strix-nav-toggle--icon,
  .strix-mnav-toggle--icon { transition:none; }
}

/* --- Desktop bar: full nav, no burger, natural source order --- */
@media (min-width: 64em) {
  .site-header-inner { padding-inline:clamp(1.25rem,5vw,3.5rem);gap:1.5rem; }
  .site-header-brand { order:0;flex:0 1 auto;min-width:auto;justify-content:normal; }
  .site-header-brand .strix-logo { height:clamp(24px,3.2vw,28px) !important; }
  .site-header-nav { display:flex; }
  .site-header-cta { order:0;flex:0 1 auto;font-size:.98rem;padding:.62rem 1.25rem; }
  .site-header-burger { display:none; }
}