/* ===========================================================================
   Light-background navbar treatment — single source of truth.

   Applied by <Navbar lightPage /> (adds `.navbar--light`) on the white-hero
   marketing pages (/agencies, /hospitality). The landing `contentBlack` variant
   only themes the nav on desktop (JS + breakpoint gated), so these rules carry
   the dark-on-white treatment across EVERY viewport and from the first paint,
   plus the white-on-scroll bar and the open-drawer flip.

   Loaded by the marketing pages as plain CSS. The logo swap is handled in the
   component because it needs the drawer state.

   Breakpoints match the landing nav: the hamburger appears at <= 1167px.
   =========================================================================== */

/* Dark nav content on the white page (visible from first paint, all viewports). */
.navbar.navbar--light .navbar-link {
  color: #0a0a0a;
}
.navbar.navbar--light .hamburger-trigger span {
  background-color: #0a0a0a;
}

/* Sticky bar: transparent over the hero, frosted white once scrolled so the
   dark content stays readable over any section underneath. */
.navbar.navbar--light.navbar-active {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* "Start for free" CTA: a solid black pill on desktop … */
@media (min-width: 1168px) {
  .navbar.navbar--light .button-primary {
    background: #0a0a0a;
    color: #ffffff;
  }
}
/* … and clean text (no heavy background) on the mobile bar. */
@media (max-width: 1167px) {
  .navbar.navbar--light .button-primary {
    background: transparent !important;
    color: #0a0a0a !important;
  }
  .navbar.navbar--light .button-primary .cta-bg {
    display: none !important;
  }
}

/* Drawer OPEN → the top bar overlays the dark drawer. Make the bar itself dark
   to match (it otherwise keeps the scrolled frosted-white background, leaving
   white-on-white), and flip the links, X and CTA back to white (the logo flips
   in the component). */
.navbar.navbar--light.navbar-menu-open {
  background: var(--black) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.navbar.navbar--light.navbar-menu-open .navbar-link,
.navbar.navbar--light.navbar-menu-open .button-primary {
  color: #ffffff !important;
}
.navbar.navbar--light.navbar-menu-open .hamburger-trigger span {
  background-color: #ffffff !important;
}