/* ============================================================
   LitHERacy — homepage nav colour
   ============================================================
   Paired with js/nav.js. The homepage loads home.css and the other
   pages load site.css, so these shared rules live on their own.
   ============================================================ */

/* The nav used mix-blend-mode: difference, inverting itself against
   whatever sat behind. Lovely over the flat black hero, illegible over
   a photograph or a heading — and the page is now full of both. */
nav {
  mix-blend-mode: normal;
  transition: background-color 220ms ease, border-color 220ms ease;
  /* a whisper of shade so white type holds up over the photography
     in the dark scenes */
  background: linear-gradient(to bottom, rgba(15,15,15,0.42), rgba(15,15,15,0));
}
nav .navlink, nav .listen { color: #fff; }
nav .listen { border-color: #fff; }
/* The real wordmark, which carries the lavender HER. Two versions rather
   than a filter: logo_white.svg had no fill colours at all, so it rendered
   as a black silhouette and lost the lavender entirely. */
nav .logo { display: inline-flex; }
/* both selectors carry .logo so neither outranks the other on specificity —
   `nav .logo img` would otherwise beat `nav .logo-light` and show both */
nav .logo img.logo-dark { display: block; }
nav .logo img.logo-light { display: none; }

/* over the cream scenes */
nav.nav--light {
  background: rgba(245, 241, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,15,15,0.12);
}
nav.nav--light .navlink, nav.nav--light .listen { color: var(--ink); }
nav.nav--light .listen { border-color: var(--ink); }
nav.nav--light .logo img.logo-dark { display: none; }
nav.nav--light .logo img.logo-light { display: block; }

@media (prefers-reduced-motion: reduce) {
  nav { transition: none; }
}