/* ============================================================
   VizAion SITE HEADER — self-contained stylesheet.
   Ports the header-only rules from design-previews/base/tokens.css.
   Declares its OWN palette + IBM Plex font-stack custom props so it does
   NOT depend on a theme.json token rewrite. Asset URLs are stylesheet-
   relative (this file lives in assets/header/ alongside the images), so
   they resolve on the live theme, not the preview path.
   Scope: header/navigation chrome ONLY. No hero/section/reveal/WebGL.
   ============================================================ */
.site-header,
.mobile-nav {
  /* field module (only the atoms the header uses) */
  --mu: 80px;
  --gutter: clamp(1.5rem, 4vw, 2.5rem);

  /* atmospheric-dark palette (MIKO-locked DARK) — header subset */
  --ground:   #0B0620;
  --ink:      #F3F1FA;
  --ink-dim:  rgba(243, 241, 250, .62);
  --lilac:    #C6B6F2;
  --mark:     rgba(243, 241, 250, .22);
  --mark-live:rgba(198, 182, 242, .85);

  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --reveal-ease: cubic-bezier(.2, .7, .2, 1);

  /* ============================================================
     HEADER SIZE + BRIGHTNESS KNOBS (MIKO tunables, T5 2026-07-12)
     "Top panel a bit too small + too dim, same for the logo mark."
     Eyeball these five, nothing else needs touching. The mark height
     tracks the width automatically (91/84, the ratified 84×91 box). Brightness
     is one dial: --ink-rest is the resting colour of nav text AND the
     social icons; raise the alpha toward 1 to brighten, lower to dim.
     ------------------------------------------------------------ */
  --vz-mark-size: 84px;                  /* logo-mark width (was 64px) */
  --vz-mark-aspect: 1.0833;              /* matches the ratified 84×91 box (91/84) — leave as-is */
  --vz-nav-size: clamp(1rem, .9rem + .45vw, 1.2rem);  /* nav link size (was .9–1.05rem) */
  --vz-social-size: 26px;                /* Instagram/Email icon size (spec: 26px, up from 20px) */
  --vz-ink-rest: rgba(243, 241, 250, .82);  /* resting text/icon brightness (was .62) */
}

/* ---------- shared field container ---------- */
.site-header .field {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header bar breaks OUT of the 1280px content column (MIKO 2026-07-12 v2): the bar spans the
   full viewport, and the logo sits CENTERED in the strip between the viewport edge and the
   content column's left edge — NOT hugging the edge. The social cluster mirrors it on the
   right (space-between + symmetric padding). The padding centres the mark inside that margin
   strip: half of ((half the leftover viewport margin, floored at the gutter) minus the mark
   width), floored at 12px so it never collapses on narrow viewports. Mark width is the
   --vz-mark-size knob, so re-tuning the logo keeps the centering correct. */
.site-header .field.bar {
  max-width: none;
  padding-inline: max(calc((max((100vw - 1280px) / 2 + var(--gutter), var(--gutter)) - var(--vz-mark-size)) / 2), 12px);
}

/* ---------- HEADER — logo mark LEFT / nav / Instagram + Email RIGHT ----------
   Transparent header everywhere (no bar/border/blur, no solid-on-scroll) —
   MIKO-locked 2026-07-11; legibility via glyph shadows. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: transparent;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: calc(var(--mu) / 4);
}

.site-header .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.site-header .brand .mark {
  width: var(--vz-mark-size);
  height: calc(var(--vz-mark-size) * var(--vz-mark-aspect));
  flex: 0 0 auto;
  background: url(logo-white.png) center/contain no-repeat;
  filter: drop-shadow(0 1px 10px rgba(11, 6, 32, .95));
}

/* Plain text nav — NO buttons/frame. On hover a cosmo nebula bleeds through
   behind the words, strongest nearest the cursor (JS sets --mx/--my). */
.site-header .nav {
  display: flex;
  gap: 2rem;
  align-items: center;
  position: relative;
}
.site-header .nav a {
  font-family: var(--mono);
  font-size: var(--vz-nav-size);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--vz-ink-rest);
  text-decoration: none;
  position: relative;
  z-index: 2;
  padding-block: .4rem;
  transition: color .3s ease;
  text-shadow: 0 1px 14px rgba(11, 6, 32, .95), 0 0 5px rgba(11, 6, 32, .85);
}
/* WCAG 2.5.5 hit area (M-02, 2026-07-12): the link renders 40px tall; a transparent
   ::after stretches the CLICKABLE box to ≥44px WITHOUT changing the visual layout
   (the text, spacing and glyph shadow are untouched). The link measures ~39.7px tall,
   so inset:-3px vertical lifts the clickable box to ~45.7px (≥44 with margin); full link
   width horizontally. The 2rem nav gap leaves ample room, no overlap. */
.site-header .nav a::after {
  content: "";
  position: absolute;
  inset: -3px 0;
  z-index: -1;
}
.site-header .nav a > span {
  display: inline-block;
  transition: transform .3s var(--reveal-ease);
}
.site-header .nav a:hover { color: var(--ink); }
.site-header .nav a:hover > span { transform: scale(1.05); }

/* cursor-proximity cosmo reveal: nebula masked to a soft disc that follows
   the pointer — wider than the nav + horizontal side-fade + dimmer peak. */
/* Edge fix (MIKO 2026-07-12): wider box + longer horizontal ramp + vertical ramp,
   all mask-intersected — the reveal dies smoothly on every edge. */
.site-header .nav-cosmo {
  position: absolute;
  inset: -34px -120px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(rgba(7, 3, 18, .44), rgba(7, 3, 18, .44)),
              url(nav-cosmo-hover.jpg) center/cover;
  -webkit-mask-image:
    radial-gradient(circle 140px at var(--mx, 50%) var(--my, 50%), rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .34) 52%, transparent 92%),
    linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 34%, #000 66%, transparent 100%);
  mask-image:
    radial-gradient(circle 140px at var(--mx, 50%) var(--my, 50%), rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .34) 52%, transparent 92%),
    linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 34%, #000 66%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition: opacity .55s ease;
}
.site-header .nav:hover .nav-cosmo { opacity: 1; }

/* Nav active-section state (MIKO idea 2026-07-12): the link for the section you're
   IN carries a soft persistent cosmo glow — scrollspy via aria-current, not hover.
   Replaces the pill's orientation job inside the existing nav. */
.site-header .nav a .glow {
  position: absolute;
  inset: -18px -38px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(rgba(7, 3, 18, .55), rgba(7, 3, 18, .55)),
              url(nav-cosmo-hover.jpg) center/cover;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 55%, transparent 88%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 55%, transparent 88%);
  transition: opacity .6s ease;
}
.site-header .nav a[aria-current="location"] { color: var(--ink); }
.site-header .nav a[aria-current="location"] .glow { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-cosmo { display: none; }
  .site-header .nav a:hover > span { transform: none; }
}

.site-header .header-controls { display: flex; align-items: center; gap: 1rem; }
.site-header .menu-control { display: flex; align-items: center; }
.site-header .social { display: flex; align-items: center; gap: 1rem; }
.site-header .social a {
  color: var(--vz-ink-rest);
  display: inline-flex;
  transition: color .3s ease;
  filter: drop-shadow(0 1px 8px rgba(11, 6, 32, .95));
}
.site-header .social a:hover { color: var(--ink); }
.site-header .social svg { width: var(--vz-social-size); height: var(--vz-social-size); display: block; }

/* focus visibility */
.site-header :focus-visible,
.mobile-nav :focus-visible {
  outline: 2px solid var(--lilac);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- mobile nav ---------- */
.site-header .menu-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
}
.site-header .menu-toggle .ln {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  margin: 6px auto;
  transition: transform .3s ease, opacity .3s ease;
}
.site-header .menu-toggle[aria-expanded="true"] .ln:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] .ln:nth-child(2) { opacity: 0; }
.site-header .menu-toggle[aria-expanded="true"] .ln:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(7, 3, 18, .97);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: flex-start;
  justify-content: center;
  padding: var(--gutter);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .5s var(--reveal-ease), visibility .5s;
}
.mobile-nav.open { transform: none; visibility: visible; }
.mobile-nav a {
  font-family: var(--mono);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
/* WCAG 2.5.5 hit area (M-02): mobile links render ~35.8px tall; a transparent ::after
   stretches the clickable box to ~45.8px (inset:-5px vertical, ≥44 with margin) without
   moving the text or changing the 1.75rem row gap. */
.mobile-nav a::after {
  content: "";
  position: absolute;
  inset: -5px 0;
  z-index: -1;
}
.mobile-nav .social { margin-top: 1rem; display: flex; gap: 1rem; }
/* Overlay social icons (phase 2, 2026-09-06): the front-page overlay carries the
   header's SVGs before each label; text-only overlays elsewhere are unaffected. */
.mobile-nav .social a { display: inline-flex; align-items: center; gap: .55rem; }
.mobile-nav .social svg { width: 18px; height: 18px; display: block; flex: none; }

/* ---------- mobile reflow (header subset of the ⑨ breakpoint) ---------- */
@media (max-width: 820px) {
  .site-header .nav { display: none; }
  .site-header .menu-toggle { display: block; }
}

/* Header mark defers to the hero field's own logo (MIKO 2026-07-12):
   hidden while the field is drawing over the hero, fades in past the hero.
   .mark-deferred is added by header.js ONLY when the field is confirmed running —
   poster/reduced-motion/no-WebGL2/failure/JS-off all keep the mark visible. */
.site-header.mark-deferred .brand .mark { opacity: 0; transition: opacity .6s ease; }
.site-header.mark-deferred.past-hero .brand .mark { opacity: 1; }

/* WP admin bar offset — logged-in views only (MIKO-authorized fix 2026-07-12) */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ---------- social-icon hit areas (M-02, 2026-07-12) ----------
   Footer core social links render 16×16px, header social SVG links 20×20px — both
   below the WCAG 2.5.5 44px minimum. A transparent centred ::after enlarges the
   CLICKABLE box WITHOUT moving the visible icon (icon size, position, spacing all
   untouched — those are MIKO's aesthetic calls). Height goes to the full 44px (the
   row has free vertical space). Width is capped at 40px so adjacent overlays do NOT
   overlap into an ambiguous click zone at the current 16px inter-icon gap: a clean
   44×44 on width would require widening that gap, which is a spacing/visual decision
   for MIKO — flagged, not improvised. Height is fully compliant; width is a partial
   improvement (16/20 → 40). */
.site-header .social a,
footer.wp-block-template-part .wp-block-social-link-anchor {
  position: relative;
}
.site-header .social a::after,
footer.wp-block-template-part .wp-block-social-link-anchor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 44px;
  transform: translate(-50%, -50%);
}