/*
 * Nav bar tone (Alex, 30 Oct): over a dark section the boxed bar is dark glass with light type, so the
 * wordmark keeps its contrast; over a light section it stays white glass. nav-tone.js sets data-tone="dark".
 * An open menu keeps its white panel. Same rules as src/components/hero/Navbar.astro in lji-page.
 */
.navbar[data-tone='dark']:not([data-clean]):not([data-open]):not([data-menu]) { color: #fff; }
.navbar[data-tone='dark']:not([data-clean]):not([data-open]):not([data-menu])::before {
  background: rgb(12 16 20 / 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.26),
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 0 0 1px rgb(0 0 0 / 0.32),
    0 12px 40px rgb(0 0 0 / 0.34);
}
.navbar[data-tone='dark']:not([data-clean]):not([data-open]):not([data-menu]) .navbar__top[data-here],
.navbar[data-tone='dark']:not([data-clean]):not([data-open]):not([data-menu]) .navbar__top[aria-current='page'] { color: #8de9ea; }
.navbar[data-tone='dark']:not([data-clean]):not([data-open]):not([data-menu]) .navbar__toggle-bar { background: #fff; }