/* ============================================================
   wuld.ink — site nav component
   Promoted from essay.html template-local CSS in session B.
   K29 markup contract — DUAL banner asset:
     • Non-home pages use site-banner-{800,1280,1920}.webp (full image,
       figure-focused via object-position: center 15%)
     • Homepage uses site-banner-home-{800,1280,1920}.webp (pre-cropped
       to wordmark band, 1920×70 natural aspect — image IS the wordmark)
   Markup shape (non-home):
     <header class="site-header">
       <a class="site-banner" href="/" aria-label="W.U.L.D.: Incorporated — wuld.ink">
         <img src="/assets/site-banner-1920.webp"
              srcset="/assets/site-banner-800.webp 800w, ..." ...>
       </a>
       <div class="site-header-inner">...</div>
     </header>
   Homepage src+srcset paths swap to site-banner-home-* variants in
   src/index.html only. body.home CSS rules below tune sizing accordingly.
   nav.js sets aria-current="page" on the matching link.
   ============================================================ */

/* K27: vertical bloat trimmed; nav extends horizontally to both ends.
   K28: banner band added above nav; .site-mark removed (banner is brand mark);
   .container constraint dropped from .site-header-inner so nav reaches edges.
   K28a→K28b: banner sized differently per page; cover not pushed below fold.
   K29: dedicated homepage wordmark asset eliminates object-position guesswork
   on home; non-home rules unchanged from K28b figure-focused contract.
   K30: middot interpunct spacer between nav entries via ::after pseudo. */
.site-header {
  border-bottom: var(--bw-base) solid var(--c-border-strong);
  margin-block-end: var(--s-4);
  background-color: var(--c-bg);
}

/* ---------- Banner band ---------- */
.site-banner {
  display: block;
  width: 100%;
  line-height: 0;
  text-decoration: none;
  background-color: var(--c-bg);
}

/* Non-home pages (K28b figure-focused; unchanged in K29) */
.site-banner img {
  display: block;
  width: 100%;
  height: 9rem;            /* ~144px non-home, figure visible upper portion */
  object-fit: cover;
  object-position: center 15%;  /* figure sits y=20-180 of 443; 15% centers it */
}

/* Homepage — dedicated wordmark asset (1920×70 natural aspect = 27.45:1).
   No object-position math; let aspect scale naturally with viewport.
   max-width caps growth past source resolution. */
body.home .site-banner img {
  width: 100%;
  height: auto;
  max-width: 1920px;
  object-fit: contain;
  object-position: center;
}

/* Mobile non-home: tighter figure band */
@media (max-width: 640px) {
  .site-banner img {
    height: 6rem;          /* ~96px mobile non-home */
  }
  /* Homepage mobile: hide banner entirely.
     At 640px wide × 27.45:1 = 23px tall — wordmark unreadable.
     Cover animation IS the brand mark on / so banner is redundant on mobile-home. */
  body.home .site-banner {
    display: none;
  }
}

/* ---------- Nav row (full viewport width, no container max) ---------- */
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  flex-wrap: wrap;
  padding-inline: var(--s-5);
  padding-block: var(--s-2);
}

/* ---------- Site mark (legacy text wordmark — banner supersedes K28) ---------- */
.site-mark {
  font-family: var(--font-mono);
  font-size: var(--t-h5);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--c-fg);
  text-decoration: none;
  text-decoration-thickness: 0;
}

.site-mark::before { content: "["; color: var(--c-accent); }
.site-mark::after  { content: "]"; color: var(--c-accent); }
.site-mark:hover { color: var(--c-fg); }
.site-mark:hover::before,
.site-mark:hover::after { color: var(--c-accent-hover); }

/* ---------- Primary nav (K27 carries: flex:1 + space-between) ---------- */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.site-nav a {
  color: var(--c-fg-muted);
  text-decoration: none;
  padding-block: 2px;
  border-bottom: var(--bw-base) solid transparent;
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

/* K30: middot interpunct spacer between nav entries.
   ::after on each link; suppressed on :last-child. Pointer-events:none
   so the spacer is not interactive. color uses muted fg so it reads
   as separator chrome rather than text. */
.site-nav a::after {
  content: " \00B7";
  margin-inline-start: var(--s-3);
  color: var(--c-fg-dim);
  pointer-events: none;
  text-decoration: none;
  border-bottom: none;
}
.site-nav a:last-child::after {
  content: "";
  margin-inline-start: 0;
}

.site-nav a:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.site-nav a:focus-visible {
  outline: var(--bw-base) solid var(--c-focus);
  outline-offset: 2px;
}

.site-nav a[aria-current="page"] {
  color: var(--c-fg);
  border-bottom-color: var(--c-accent);
}

@media (max-width: 640px) {
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .site-nav {
    width: 100%;
  }
  .site-nav a {
    font-size: var(--t-xs);
  }
  /* K30: suppress interpunct spacers on mobile column-stack layout
     so each line ends cleanly without a trailing middot. */
  .site-nav a::after {
    content: "";
    margin-inline-start: 0;
  }
}

/* ============================================================
   K43 — changelog nav-glow indicator.
   A nav item gets .nav-updated (set by nav.js) when its section
   changed since the visitor last visited that section. Subtle
   blood-red text-glow pulse — NOT a notification dot/badge.
   State lives in localStorage; visiting the section clears it.
   ============================================================ */
@keyframes nav-glow-pulse {
  0%, 100% {
    color: var(--c-accent);
    text-shadow: 0 0 0 transparent;
  }
  50% {
    color: var(--c-accent-hover, var(--c-accent));
    text-shadow: 0 0 6px var(--c-accent), 0 0 2px var(--c-accent);
  }
}

.site-nav a.nav-updated {
  color: var(--c-accent);
  animation: nav-glow-pulse 2.6s var(--ease, ease-in-out) infinite;
}

/* The interpunct separator must not inherit the glow. */
.site-nav a.nav-updated::after {
  color: var(--c-fg-dim);
  text-shadow: none;
}

/* Motion-sensitive visitors: drop the pulse, keep a steady accent marker. */
@media (prefers-reduced-motion: reduce) {
  .site-nav a.nav-updated {
    animation: none;
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
    text-shadow: 0 0 4px var(--c-accent);
  }
}