/* ==========================================================================
   Auto-contrast header — TTW
   Uses design tokens from _tokens.css. Never hardcode hex values here.

   header-contrast.js sets ONE state class on .site-header as the bar crosses
   each section:
     .is-light  — over a DARK section  → light (alabaster) ink  (the resting glass look)
     .is-dark   — over a LIGHT section → dark (steel) ink + light glass
   Two-class specificity (0,2,0) intentionally beats the server-rendered
   .site-header--dark / --solid (0,1,0), so scroll state always wins.
   Enqueued standalone in inc/assets.php (NOT @import-ed) so ?mtime cache-busts it.
   ========================================================================== */

/* Smooth ink + logo swap on top of the bar's existing background/colour transition. */
.site-logo__img {
  transition:
    opacity 0.2s ease,
    filter 0.3s ease;
}

/* Over a dark section — light ink (matches the default glass bar). */
.site-header.is-light {
  color: var(--color-alabaster);
}

/* Over a light section — Water ink on a light (alabaster) glass. Nav items (region pill,
   globe/caret, hamburger) all draw with currentColor, so they follow this. */
.site-header.is-dark {
  color: var(--color-water);
  background: rgba(247, 244, 231, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(30, 23, 17, 0.06),
    inset 0 -1px 0 rgba(30, 23, 17, 0.06),
    var(--shadow-soft);
}

/* Logo-white.svg is a white mark (embedded raster) so it can't be recoloured directly.
   Over a light section, hide the white bitmap and repaint the mark in Water: a Water fill
   clipped to the mark's shape via a mask (match-source → the PNG's alpha channel). Scoped to
   the top bar — the open-menu nav logo stays white on its Water overlay (below). */
.site-header.is-dark .site-header__inner .site-logo {
  position: relative;
}
.site-header.is-dark .site-header__inner .site-logo__img {
  visibility: hidden;
}
.site-header.is-dark .site-header__inner .site-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-water);
  -webkit-mask: var(--logo-src, url("../icons/Logo-white.svg")) center / contain no-repeat;
          mask: var(--logo-src, url("../icons/Logo-white.svg")) center / contain no-repeat;
}

/* Menu open → Water overlay behind the bar; show the plain white wordmark on it
   (undo the top-bar Water recolour above so it never disappears into the overlay). */
body.nav-open .site-header .site-logo__img {
  visibility: visible;
  filter: none;
}
body.nav-open .site-header .site-header__inner .site-logo::after {
  display: none;
}

/* Reduced-transparency → solid light bar, no refraction (matches base rule). */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-dark {
    background: var(--color-alabaster);
  }
}