/* ===================================================================
   WILD PIXEL — INTERIOR-PAGE HEADER OVERRIDE
   Forces the locked-tight nav state from page load on every page that
   ISN'T the homepage. The homepage has the morph (big wordmark + tagline
   that contracts to W-icon-only on scroll); interior pages skip the morph
   and ship in tight state from the start.

   May 2, 2026 — locked.

   Scope: any page with `body.is-interior-page`.
   =================================================================== */

/* The bar itself — tight padding only.
   Background and border are NOT overridden here — the existing
   .nav-bar / .nav-bar.is-scrolled rules and the page's luminance-based
   scroll handler manage the dark-glass-over-hero → light-glass-over-content
   transition automatically. We only force the size/morph, not the color. */
body.is-interior-page .nav-bar {
  padding-top: 14px;
  padding-bottom: 14px;
  min-height: 60px;
}

/* Wordmark hidden from page-load. Tagline collapsed.
   The W-icon container is forced visible — but its .light vs .dark
   variant tracks the existing .nav-bar.is-scrolled rules, so the icon
   stays legible against both the dark hero and the light scrolled bg. */
body.is-interior-page .nav-logo .wordmark {
  width: 0; opacity: 0;
  transform: scale(0.85) translateX(-12px);
  overflow: hidden; pointer-events: none;
}
body.is-interior-page .nav-logo .iconmark {
  opacity: 1; transform: translateY(-50%) scale(1);
}
/* Don't override .iconmark .light / .iconmark .dark here — the existing
   homepage rules toggle those based on .nav-bar.is-scrolled, which is
   what we want: light W on dark hero, dark W on scrolled-past-hero. */

/* Tagline collapsed */
body.is-interior-page .nav-tagline {
  max-width: 0; opacity: 0;
  margin-left: -22px;
  transform: translateX(-12px);
  pointer-events: none;
}

/* Divider hidden */
body.is-interior-page .nav-divider { opacity: 0; width: 0; }

/* Brand block tightens up */
body.is-interior-page .nav-brand { gap: 0; }

/* Nav link copy color follows the bg state — handled by the existing
   .nav-bar.is-scrolled rules. We don't override it here so the dark-state
   (hero) and light-state (scrolled past hero) both render correctly. */

/* Per Rule 12 + Mike's directive: lat/long coords + "Since 2006" only
   belong in the footer (and the Contact page block). Hide the hero-meta
   block on every interior page. */
body.is-interior-page .hero-meta {
  display: none !important;
}

/* Salmon italic emphasis inside the hero sub.
   The locked Wild Pixel display-type rule is `em = italic salmon` —
   that's how scan-points get marked. Each per-page <style> block
   defines its own .hero-sub but only the H1 em rule gets salmon
   coloring, not the sub. This site-wide override fixes that so any
   <em> inside an interior-page hero sub renders italic + salmon
   (tracks --bg-fg-em so it works in both dark and light bg states). */
body.is-interior-page .hero-sub em {
  font-style: italic;
  color: var(--bg-fg-em);
  font-weight: inherit;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ghost button must track the body bg state on interior pages.
   The per-page rules hardcode `color: var(--charcoal) !important`
   (default) with a `.hero` / `footer` override to `var(--paper)`.
   Anywhere ELSE on an interior page (FAQ section, result panel,
   inline CTAs, etc.) the button stays charcoal-on-charcoal when the
   body bg fades to dark-foot at the bottom of the page → invisible.
   This site-wide override makes every .btn-ghost on every interior
   page track --bg-fg + color-mix, so it flips paper-on-dark and
   charcoal-on-paper automatically with the bg-tracking system.
   Specificity (body.is-interior-page .btn-ghost = 0,2,0) ties the
   page rule but the !important wins because we declare it later. */
body.is-interior-page .btn-ghost {
  color: var(--bg-fg) !important;
  border-color: color-mix(in srgb, var(--bg-fg) 35%, transparent) !important;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 700ms cubic-bezier(0.4, 0, 0.2, 1),
              background 0.25s ease;
}
body.is-interior-page .btn-ghost:hover {
  border-color: var(--bg-fg) !important;
  background: color-mix(in srgb, var(--bg-fg) 6%, transparent) !important;
}