/* ==========================================================================
   stromfee.us — unified navigation (v2: grouped / dropdown)
   Namespace: .sfus-*   (deliberately private: .nav-links/.nav-cta/.brand are
   already defined by page-local CSS on 222/231/250 pages respectively, so
   reusing them would let each page restyle the nav differently.)

   All values are declared LITERALLY, never via var(--font)/var(--accent),
   because 109 of 362 pages define no design tokens at all and would
   otherwise fall back to a different font and colour.

   Layout stability contract (UNCHANGED from v1, and load-bearing):
     - header height is FIXED (never grows/shrinks with item count OR scroll)
     - brand + CTA sit in fixed side slots (grid: auto 1fr auto)
     - links live in the bounded middle track, never wrap
     - hover/active never change font-weight (that would change width)

   WHY THE BAR DOES NOT SHRINK ON SCROLL
   -------------------------------------
   The header is position:sticky, so it occupies real space in normal flow.
   Animating its height moves every following pixel of the page — precisely
   the "layout jumping" the brief forbids. The scrolled state is therefore
   expressed with elevation + opacity only, which costs no layout.

   V2 CHANGE: 12 flat links became 4 dropdown groups + 1 link. The old
   JS-driven overflow ("More") is gone — with 5 top-level items there is
   nothing to overflow, so the bar no longer depends on measuring widths.
   Edit menu items in nav.json, then run build_nav.py.
   ========================================================================== */

/* ---------- anchor offset: nothing may hide under the sticky bar ---------- */
:root {
  --sfus-bar: 64px;          /* must match --sfus-height below */
  --sfus-anchor-gap: 20px;
}
[id] {
  scroll-margin-top: calc(var(--sfus-bar) + var(--sfus-anchor-gap));
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.sfus-nav,
.sfus-nav *,
.sfus-nav *::before,
.sfus-nav *::after {
  box-sizing: border-box;
}

.sfus-nav {
  /* --- design tokens, scoped so page CSS cannot reach them --- */
  --sfus-accent: #a78bfa;
  --sfus-accent-deep: #7c5cd6;
  --sfus-ink: #1d1d1f;
  --sfus-ink-soft: #55555c;
  --sfus-ink-faint: #86868b;
  --sfus-surface: rgba(253, 252, 255, 0.88);
  --sfus-border: rgba(29, 29, 31, 0.09);
  --sfus-height: 64px;

  position: sticky;
  top: 0;
  z-index: 9000;

  display: grid;
  grid-template-columns: auto 1fr auto;   /* brand | links | cta */
  align-items: center;
  column-gap: clamp(12px, 1.4vw, 28px);

  height: var(--sfus-height);              /* FIXED — the stability contract */
  min-height: var(--sfus-height);
  max-height: var(--sfus-height);
  padding: 0 clamp(14px, 2vw, 30px);
  margin: 0;

  background: var(--sfus-surface);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--sfus-border);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

  transition: box-shadow 0.22s ease, background-color 0.22s ease;
}

/* scrolled state — elevation only, never geometry */
.sfus-nav.is-scrolled {
  background: rgba(253, 252, 255, 0.96);
  box-shadow: 0 6px 24px rgba(29, 29, 31, 0.08);
}

/* ---------- brand (fixed left slot) ---------- */
.sfus-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: clamp(14px, 0.85vw + 5px, 16.5px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--sfus-ink);
  text-decoration: none;
  white-space: nowrap;
}
.sfus-brand:hover { color: var(--sfus-accent-deep); }
.sfus-brand-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sfus-accent);
  flex: 0 0 auto;
}

/* ---------- links (bounded middle track) ---------- */
.sfus-links {
  display: flex;
  flex-wrap: nowrap;               /* never wrap -> height can never grow */
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.9vw, 16px);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a top-level entry: either a plain <a> or a <button> that owns a panel */
.sfus-link,
.sfus-top {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  white-space: nowrap;
  text-decoration: none;
  color: var(--sfus-ink-soft);
  font-family: inherit;
  font-size: clamp(12px, 0.62vw + 3.4px, 14px);
  font-weight: 500;                /* CONSTANT — never changes on hover */
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.sfus-link:hover,
.sfus-top:hover,
.sfus-link:focus-visible,
.sfus-top:focus-visible { color: var(--sfus-ink); }

/* chevron on group buttons */
.sfus-top::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.sfus-group.is-open .sfus-top::after {
  transform: translateY(1px) rotate(-135deg);
}
.sfus-group.is-open .sfus-top {
  color: var(--sfus-ink);
  background: rgba(167, 139, 250, 0.10);
}

/* current page / current section marker (no layout cost) */
.sfus-link[aria-current="page"],
.sfus-group[data-active="true"] > .sfus-top {
  color: var(--sfus-ink);
}
.sfus-link[aria-current="page"]::after,
.sfus-group[data-active="true"] > .sfus-top::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--sfus-accent);
}
/* keep the chevron pseudo free on group buttons */
.sfus-group[data-active="true"] > .sfus-top::before { bottom: 1px; }

/* ---------- dropdown panels ---------- */
.sfus-group { position: relative; flex: 0 0 auto; display: inline-flex; }

/* HOVER BRIDGE — the panel floats 10px below the button, and that gap is
   outside .sfus-group. Moving the cursor straight down from the button
   therefore left the group, fired mouseleave and shut the menu before it
   could be reached (measured: group bottom 49px, panel top 59px).
   This pseudo-element extends the panel's hit area upward across the gap.
   It lives on the PANEL, not the group, so it inherits the panel's position
   automatically — including the re-anchored .is-left / .is-right variants —
   and hovering it counts as hovering inside the group. */
.sfus-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;      /* 10px gap + 4px overlap onto the button row */
  height: 14px;
}

.sfus-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 280px;
  max-width: min(620px, calc(100vw - 32px));
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--sfus-border);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(29, 29, 31, 0.15);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;

  /* closed state: invisible AND not focusable/hit-testable.
     visibility is stepped, never eased: on CLOSE it is delayed until the fade
     has finished (so you still see the fade out), but on OPEN it flips at 0s.
     Transitioning it over 0.16s instead would leave the panel unfocusable for
     the whole animation — keyboard users pressing ArrowDown would land
     nowhere, because a visibility:hidden element cannot take focus. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.sfus-group.is-open .sfus-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
}
/* wide groups get two columns so the panel never runs off-screen vertically */
.sfus-panel[data-cols="2"] {
  grid-template-columns: 1fr 1fr;
  min-width: 560px;
}
/* panels near the viewport edge are re-anchored by nav.js */
.sfus-panel.is-left  { left: 0;    transform: translateX(0) translateY(-4px); }
.sfus-panel.is-right { left: auto; right: 0; transform: translateX(0) translateY(-4px); }
.sfus-group.is-open .sfus-panel.is-left,
.sfus-group.is-open .sfus-panel.is-right { transform: translateX(0) translateY(0); }

.sfus-panel a {
  display: block;
  padding: 9px 11px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--sfus-ink);
  transition: background-color 0.15s ease;
}
.sfus-panel a:hover,
.sfus-panel a:focus-visible { background: rgba(167, 139, 250, 0.11); }

.sfus-panel .sfus-i-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.sfus-panel .sfus-i-desc {
  display: block;
  margin-top: 2px;
  font-size: 11.8px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--sfus-ink-faint);
}
.sfus-panel a[aria-current="page"] .sfus-i-label { color: var(--sfus-accent-deep); }

/* external-link marker: a small arrow, drawn in CSS (no icon font, no SVG file) */
.sfus-ext .sfus-i-label::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  vertical-align: -1px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  border-top-right-radius: 1px;
  transform: rotate(45deg) translate(-1px, 1px);
  opacity: 0.55;
}

/* ---------- CTA (fixed right slot) ---------- */
.sfus-right {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.sfus-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 clamp(11px, 1vw, 17px);
  border: 0;
  border-radius: 9px;
  background: var(--sfus-accent);
  color: #fff;
  font-family: inherit;
  font-size: clamp(11.5px, 0.55vw + 4px, 13px);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.sfus-cta:hover {
  background: var(--sfus-accent-deep);
  transform: translateY(-1px);
}

/* ---------- burger ---------- */
.sfus-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--sfus-border);
  border-radius: 9px;
  background: none;
  cursor: pointer;
}
.sfus-burger span {
  display: block;
  height: 1.8px;
  width: 100%;
  border-radius: 2px;
  background: var(--sfus-ink);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.sfus-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.sfus-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sfus-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* ---------- mobile drawer ---------- */
.sfus-drawer {
  /* The drawer is a SIBLING of <header class="sfus-nav">, not a descendant,
     so it inherits none of the tokens declared there. Without this block
     `background: var(--sfus-accent)` on .sfus-cta resolves to nothing and the
     mobile "Request intro call" button renders as plain text — the primary
     conversion CTA, invisible as a button on phones. Same values as the bar. */
  --sfus-accent: #a78bfa;
  --sfus-accent-deep: #7c5cd6;
  --sfus-ink: #1d1d1f;
  --sfus-ink-soft: #55555c;
  --sfus-border: rgba(29, 29, 31, 0.09);

  position: fixed;
  top: var(--sfus-bar, 64px);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--sfus-bar, 64px));
  max-height: calc(100dvh - var(--sfus-bar, 64px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 8999;
  display: none;
  flex-direction: column;
  padding: 8px 14px 28px;
  background: #fdfcff;
  border-bottom: 1px solid rgba(29, 29, 31, 0.09);
  box-shadow: 0 18px 40px rgba(29, 29, 31, 0.12);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sfus-drawer.is-open { display: flex; }

/* body lock while the drawer is open */
body.sfus-lock { overflow: hidden; }

/* accordion section inside the drawer */
.sfus-d-group { border-bottom: 1px solid rgba(29, 29, 31, 0.07); }
.sfus-d-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;                /* large touch target */
  padding: 6px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--sfus-ink, #1d1d1f);
  text-align: left;
}
.sfus-d-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
.sfus-d-group.is-open .sfus-d-toggle::after { transform: translateY(1px) rotate(-135deg); }

.sfus-d-panel { display: none; padding: 0 0 10px 4px; }
.sfus-d-group.is-open .sfus-d-panel { display: block; }

.sfus-drawer a {
  display: block;
  padding: 13px 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sfus-ink, #1d1d1f);
  text-decoration: none;
}
.sfus-d-panel a {
  min-height: 48px;                /* large touch target */
  padding: 12px 8px;
  border-radius: 8px;
  font-size: 14.5px;
  color: #55555c;
}
.sfus-d-panel a:hover { background: rgba(167, 139, 250, 0.10); }
.sfus-d-panel a[aria-current="page"] { color: #7c5cd6; font-weight: 600; }
.sfus-d-panel .sfus-ext::after {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-left: 6px;
  vertical-align: -1px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
  opacity: 0.55;
}
/* top-level plain link in the drawer (About) */
.sfus-d-link {
  border-bottom: 1px solid rgba(29, 29, 31, 0.07);
  min-height: 52px;
  display: flex !important;
  align-items: center;
  font-size: 15.5px !important;
  font-weight: 600 !important;
}
.sfus-drawer .sfus-cta {
  margin-top: 18px;
  height: 48px;
  justify-content: center;
  font-size: 15px;
  /* `.sfus-drawer a` (0,1,1) out-specifies `.sfus-cta` (0,1,0), so the white
     label has to be restated here or the CTA text renders dark-on-violet. */
  color: #fff;
}

/* ---------- responsive ----------
   1024px is the switch point: below it the grouped bar is replaced by the
   burger + drawer. Tablets in portrait (768/834) therefore get the drawer,
   landscape iPad (1024) is the boundary and also gets the drawer, which is
   the safer side of the line for touch. */
@media (max-width: 1024px) {
  .sfus-links { display: none; }
  .sfus-burger { display: flex; }
}
@media (max-width: 560px) {
  :root { --sfus-bar: 58px; }
  .sfus-nav { --sfus-height: 58px; }
  .sfus-right .sfus-cta { display: none; }   /* CTA lives in the drawer */
}

/* never allow the nav to create a horizontal scrollbar */
.sfus-nav, .sfus-drawer { max-width: 100vw; }

/* ---------- accessibility ---------- */
.sfus-nav a:focus-visible,
.sfus-nav button:focus-visible,
.sfus-drawer a:focus-visible,
.sfus-drawer button:focus-visible {
  outline: 2px solid var(--sfus-accent-deep, #7c5cd6);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .sfus-nav *,
  .sfus-drawer * { transition: none !important; }
}