/* =============================================================
   nav-light.css — the light-background nav variant for the
   static pages (/privacy, /terms, /cookies, /about, /reviews …).

   WHY THIS FILE EXISTS

   The `nav-light` class was being applied to these pages and doing
   almost nothing, because the rules that implement it live in
   home.css and the static pages do not load home.css. Each static
   page loads exactly one legacy stylesheet of its own — privacy.css,
   terms.css, about.css and so on — and the port only carried the
   three `.nav-light .logo-*` rules across. The nav background and,
   critically, the link colour never came with it.

   The result was a nav that correctly knew it was over a white page
   and still painted rgba(255,255,255,0.65) links: 3.25:1, under
   WCAG AA, and camouflaged by the bar's own translucent dark
   backdrop so it read as a deliberate frosted look rather than a bug.

   SECOND REASON THE PORT COULD NOT HAVE WORKED

   home.css targets `.nav-item > a`. The static pages' markup has no
   `.nav-item` at all — it uses `.nav-links li a`. So even loading
   home.css here would have restyled nothing. These selectors match
   the markup the static pages actually ship.

   WHY A NEW FILE RATHER THAN EDITING THIRTEEN STYLESHEETS

   Thirteen static pages would mean thirteen copies drifting apart.
   Per CLAUDE.md, two legacy stylesheets must never be loaded on one
   page — each carries its own :root, reset and body{} — so this file
   deliberately carries NONE of those. It is additive only, the same
   pattern as the rebuilt blog stylesheets. Safe to load alongside
   any single legacy page stylesheet.

   Specificity: `#nav.nav-light .nav-links a` is (1,2,0) and the
   legacy `.nav-links a` it overrides is (0,2,0), so this wins on
   specificity and does not depend on load order.
   ============================================================= */

#nav.nav-light {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(48px) saturate(160%) brightness(0.97);
    -webkit-backdrop-filter: blur(48px) saturate(160%) brightness(0.97);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Measured, not estimated: the bar composites to rgb(253,253,253) and
   rgba(0,0,0,0.72) on it lands at rgb(71,71,71) → 9.15:1. Hover is
   19.1:1. The value being replaced was 3.25:1. */
#nav.nav-light .nav-links a,
#nav.nav-light .nav-links button,
#nav.nav-light .nav-links .has-dropdown > button {
    color: rgba(0, 0, 0, 0.72);
}

#nav.nav-light .nav-links a:hover,
#nav.nav-light .nav-links button:hover,
#nav.nav-light .nav-links .has-dropdown > button:hover {
    color: rgba(0, 0, 0, 0.95);
}

/* The wordmark and mark invert together: dark tile, light glyph. */
#nav.nav-light .nav-logo,
#nav.nav-light .logo-wordmark {
    color: #0A0A0A;
}
#nav.nav-light .logo-rect { fill: #0A0A0A; }
#nav.nav-light .logo-text { fill: #FFFFFF; }

/* The pill is white-on-dark by default, which vanishes on a light bar. */
#nav.nav-light .nav-pill {
    background: #0A0A0A;
    color: #FFFFFF;
}
#nav.nav-light .nav-pill:hover {
    background: #262626;
}

#nav.nav-light .hamburger span {
    background: rgba(0, 0, 0, 0.7);
}