/* nav-sticky — the menu follows the page instead of scrolling away.
 *
 * WHY (Mena 2026-08-25: "the menu on the homepage should be by section and
 * moves on the page"). The nav became a set of in-page section links on
 * 2026-08-25. The template's bar is `position: absolute; top: 0`, so it left
 * the screen as soon as you scrolled and the section menu was only reachable
 * by scrolling all the way back to the top. A section menu you cannot reach
 * from the middle of the page is not a menu.
 *
 * The bar stays exactly as it was over the hero: transparent, no border, no
 * shadow. `data-nav-scrolled` (set by nav-sticky.js once you pass the fold)
 * fades in a translucent, blurred surface so the logo and buttons stay legible
 * over whatever section is passing underneath. Both themes are covered because
 * the surface is built from --bg-color--bg-default, which dark.css re-points.
 */

.navbar {
  position: fixed !important;
}

/* The surface lives on a pseudo-element so the bar's own transparent
   background, z-index and padding are left untouched. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: color-mix(in srgb, var(--bg-color--bg-default) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid
    color-mix(in srgb, var(--text-color--text-primary) 8%, transparent);
  transition: opacity 0.28s ease;
  pointer-events: none;
}

html[data-nav-scrolled="true"] .navbar::before {
  opacity: 1;
}

/* While the menu card is open it carries its own background and its own dim
   backdrop; a second surface behind it just muddies the dim. */
html[data-navigation-status="active"] .navbar::before {
  opacity: 0;
}

/* Browsers without color-mix get a plain token background rather than nothing. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .navbar::before {
    background: var(--bg-color--bg-default);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar::before {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * Logo legibility once the bar is over the page body.
 *
 * The lockup ships in two versions: .navbar_logo.hvo-lockup (light mark, its
 * img inverted) and .navbar_logo.is-black.hvo-lockup (dark mark, no invert).
 * Until now the choice was made per page-type and never changed, which was
 * fine while the bar scrolled away with the hero. Fixed, it now travels from a
 * dark hero onto a light body, and the white wordmark vanished against the new
 * surface.
 *
 * Past the fold the lockup follows the THEME instead of the hero, because the
 * surface behind it is --bg-color--bg-default. Above the fold nothing changes,
 * so every hero keeps the lockup it was designed with.
 *
 * .hvo-private-page is excluded: it paints its sections #151515 even in light
 * theme and deliberately forces the white lockup (see hvo-pages-v5.css), so
 * theme-following would put a black wordmark on a black bar.
 * ------------------------------------------------------------------------ */

html[data-nav-scrolled="true"]:not(:has(.hvo-private-page))
  .navbar_logo.hvo-lockup {
  display: none !important;
}

html[data-nav-scrolled="true"]:not(:has(.hvo-private-page))
  .navbar_logo.is-black.hvo-lockup {
  display: inline-flex !important;
  color: var(--text-color--text-primary) !important;
}

html[data-nav-scrolled="true"]:not(:has(.hvo-private-page))
  .navbar_logo.is-black.hvo-lockup img {
  filter: none !important;
}

/* Dark theme: the surface is near-black, so the light mark is the right one. */
html[data-theme="dark"][data-nav-scrolled="true"] .navbar_logo.hvo-lockup {
  display: inline-flex !important;
  color: #fff !important;
}

html[data-theme="dark"][data-nav-scrolled="true"] .navbar_logo.hvo-lockup img {
  filter: invert(1) !important;
}

html[data-theme="dark"][data-nav-scrolled="true"]
  .navbar_logo.is-black.hvo-lockup {
  display: none !important;
}