/* ---------- NAV : AIWU nav, dark variant ----------
   Shared by the Builder Index board (/builder-index) and the profile pages
   (/builder-index/u/:username) — the two pages that render the dark nav. Both
   used to carry byte-identical copies of these rules; PR #10 had to edit both
   in lockstep and drifted, so the rules live here now. The homepage keeps its
   own .hd-* nav: same link list, but a different band model (grove-stroke
   insets vs 32px padding), static rather than sticky, and a different lockup
   asset — see https://github.com/plow-pbc/aiworthusing/issues/11.

   Mirrors the AI Worth Using homepage header (lockup left; EPISODES text link +
   Discord/X bordered-icon buttons right) but restyled for the WMP dark board:
   the volt lockup reads on dark, hairlines + glyphs are light, and hover inverts
   the homepage's grove->midnight shift into a chalk-brightening on dark.

   Depends on the host page defining --maxw, --seaglass and --chalk. */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* full-width dark band (background + hairline span edge-to-edge, mirroring the
     homepage volt header); the inner grid caps content at the site band width */
  background: rgba(9,10,7,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.nav-inner {
  /* capped, centered content band — matches the board's .board-section content
     width (--maxw 1320px + 32px horizontal padding) so the lockup's left edge
     and the social icons' right edge align vertically with the content's
     left/right edges directly below. The profile page caps its own main content
     at the same width, so both pages align edge-to-edge with this nav. */
  max-width: var(--maxw); margin: 0 auto;
  /* 3-column grid: lockup left, TEXT LINKS centered in the full nav width,
     social icons right-aligned in column 3 — the 1fr..1fr flanks keep the
     centered links centered regardless of lockup / icon-cluster width */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 13px 32px;
}
/* AIWU "AI worth using" lockup (volt variant so it reads on the dark board) */
.nav-lockup { display: flex; align-items: center; justify-self: start; }
.nav-lockup img { height: 44px; width: auto; display: block; }
/* wraps at ANY width where the links outgrow the middle grid column — not
   just under the narrow breakpoint — so the mid band never overflows */
.nav-right { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px clamp(24px,3vw,40px); justify-self: center; }
/* EPISODES text link — AIWU's quiet mono uppercase treatment, light on dark */
.nav-link {
  font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--seaglass); white-space: nowrap; transition: color .2s;
}
.nav-link:hover {
  color: var(--chalk);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
/* social icon buttons — AIWU's 32px rounded hairline squares, light hairline +
   light glyph on dark; hover brightens border + glyph to chalk */
.nav-social { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 8px;
  color: var(--seaglass);
  transition: color .2s, border-color .2s, background .2s;
}
.nav-icon svg { display: block; }
.nav-icon:hover {
  color: var(--chalk); border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
}
@media (max-width: 640px) {
  /* narrow: lockup left, the text links centered in a flexible middle
     column, the two icon buttons right — tighten gaps + tracking so
     lockup + links + icons clear 390px without overflow */
  .nav-inner { padding: 11px 22px; grid-template-columns: auto 1fr auto; gap: 8px; }
  .nav-lockup img { height: 34px; }
  .nav-link { letter-spacing: 1.2px; font-size: 11px; }
  .nav-right { gap: 6px 12px; }
  .nav-social { gap: 8px; }
}