/* ============================================================
   Shared site header — SINGLE SOURCE OF TRUTH.
   Linked by index.html, viewer.html, and every sector-*.html /
   workflow-*.html page. Do NOT redefine header/.nav/.brand/
   .nav-links/.back/.burger rules anywhere else — edit them here.

   Treatment: compact translucent bar (70px tall, 38px logo),
   blurred background. Relies on these custom properties being
   defined by each page: --ink --muted --neon --line --mono
   --display (falls back to Manrope). --maxw is optional
   (defaults to 1240px). --navh is provided below.
   ============================================================ */
:root{ --navh:70px; }

body.menu-open{ overflow:hidden; }

header{
  position:fixed; top:0; left:0; right:0; z-index:50; transition:.3s;
  background:rgba(7,9,12,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
header.scrolled{ box-shadow:0 10px 34px rgba(0,0,0,.45); }

.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--navh); max-width:var(--maxw,1240px); margin:0 auto; padding:0 26px;
}

/* brand lockup — explicit line-height so the two-line lockup stacks
   identically regardless of each page's body line-height. */
.brand{ display:flex; align-items:center; gap:14px; font-family:var(--display,"Manrope",sans-serif); font-weight:800; font-size:21px; line-height:1.1; text-decoration:none; color:var(--ink); }
.brand img{ height:38px; width:auto; }
.brand small{ display:block; font-family:var(--mono); font-size:10.5px; font-weight:500; line-height:1.1; letter-spacing:.3em; color:var(--neon); margin-top:0px; }

/* full nav menu (home + simulator) */
.nav-links{ display:flex; gap:22px; align-items:center; }
.nav-links a{ font-family:var(--mono); font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); transition:.2s; text-decoration:none; white-space:nowrap; }
/* hover = neutral brighten; green is reserved for the active section so
   only ever one link is green at a time. */
.nav-links a:hover{ color:var(--ink); }
/* scrollspy: link for the section currently in view (set by JS).
   Declared after :hover so the current section stays green even when hovered. */
.nav-links a.active{ color:var(--neon); }

/* "Buy Now" CTA — self-contained so it renders identically on every page
   (index.html's .btn/.btn-neon are not available on viewer.html). */
.nav-links .nav-cta{ background:var(--neon); color:#0a0f04; font-weight:700; font-size:14px; line-height:normal; padding:10px 18px;
  border:1px solid transparent; white-space:nowrap;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.nav-links .nav-cta:hover{ color:#0a0f04; box-shadow:var(--glow,0 0 40px rgba(53,255,163,.30)); transform:translateY(-2px); }

/* "Simulator" CTA — blue sibling of .nav-cta, sits left of "Buy Now". */
.nav-links .nav-sim{ background:#61d2fe; color:#04121f; font-weight:700; font-size:14px; line-height:normal; padding:10px 18px;
  border:1px solid transparent; white-space:nowrap;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.nav-links .nav-sim:hover{ color:#04121f; box-shadow:0 0 40px rgba(53,182,255,.35); transform:translateY(-2px); }

/* back link (sector + workflow sub-pages) */
.back{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); padding:9px 16px; transition:.2s;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.back:hover{ border-color:var(--neon); color:var(--neon); }

/* burger (mobile toggle) */
/* Reset the UA button chrome: this markup is a <div> on some pages and a
   <button> on others, and a bare <button> renders with the ButtonFace
   background, which swallowed the three near-white bars into a solid box.
   Stated explicitly so the rule works for either element. */
.burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px;
  background:none; border:0; -webkit-appearance:none; appearance:none; color:inherit; }
.burger span{ width:24px; height:2px; background:var(--ink); transition:.3s; display:block; }
body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* While the window is actively resizing, kill the menu's reveal transition so it
   doesn't animate open/closed as the breakpoint is crossed (set by main.js /
   sector.js / viewer.js). Burger taps still animate normally. */
html.nav-resizing .nav-links{ transition:none; }

/* Collapse to the burger at 1000px — before the logo + links + two CTA buttons
   can overflow the row (was 900px, which let the row overflow ~900–1130px and
   push "Buy Now" off-screen). Shared by index.html and viewer.html. */
@media(max-width:1000px){
  /* Reveal downward from the bar's bottom edge rather than sliding the panel up
     over it. The panel is a position:fixed descendant of <header>, and header
     has z-index:50 so it forms a stacking context — inside that, a positioned
     descendant paints ABOVE the header's own background and above the logo and
     burger. z-index can't reorder that (a parent's background always paints
     under its children; even z-index:-1 sits above it), so the old
     translateY(-140%) start position meant you watched the panel cross the bar
     on its way in. Clipping instead keeps every painted pixel below --navh at
     all times, and hit-testing respects clip-path so the closed panel can't
     swallow a tap on the burger mid-animation either. */
  .nav-links{ position:fixed; top:var(--navh); left:0; right:0; flex-direction:column;
    background:rgba(7,9,12,.98); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    padding:18px 24px 28px; gap:4px; border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0); transition:clip-path .4s cubic-bezier(.16,.84,.44,1);
    align-items:stretch; max-height:calc(100dvh - var(--navh)); overflow:auto; }
  .nav-links.open{ clip-path:inset(0 0 0 0); }
  .nav-links a{ padding:15px 2px; font-size:15px; border-bottom:1px solid var(--line); }
  .burger{ display:flex; }
}