/* ============================================================
   LIGHT-THEME NAV OVERRIDE  ·  loaded AFTER nav.css (so it wins).
   ------------------------------------------------------------
   These pages have DARK heroes, so at the transparent top the bar
   content stays WHITE (visible over the hero). Once the user scrolls,
   the bar becomes a WHITE frosted-glass surface and the content flips
   to dark navy for contrast. Dropdowns + mobile sheet are light.

   TO REVERT to the dark nav: remove the <link href="assets/nav-light.css">
   line from BetterPlace pages and ai-labs.html
   (this file can stay; it just won't be loaded).
   ============================================================ */

/* --- scrolled: white frosted glass (replaces the dark tint) --- */
.nav.scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: rgba(27,45,147,0.12);
  box-shadow: 0 6px 26px rgba(27,45,147,0.12);
}
/* flip the bar content to dark navy once the white bar is in */
.nav.scrolled .nav-logo img { filter: none; }
.nav.scrolled .nav-links { background: rgba(27,45,147,0.05); border-color: rgba(27,45,147,0.08); }
.nav.scrolled .nav-links a { color: var(--text-body, #2A3260); }
.nav.scrolled .nav-links a:hover { color: var(--neelam, #1B2D93); background: rgba(27,45,147,0.06); }
.nav.scrolled .nav-links a.active { color: #fff; background: var(--neelam, #1B2D93); }
.nav.scrolled .nav-cta .login { color: var(--text-body, #2A3260); }
.nav.scrolled .nav-cta .login:hover { color: var(--neelam, #1B2D93); background: rgba(27,45,147,0.06); }
/* AI Labs sparkle: teal over the dark hero (top), deep navy on the white bar */
.nav.scrolled .nav-links a .nav-spark { color: var(--neelam, #1B2D93); }
.nav.scrolled .nav-burger { border-color: rgba(27,45,147,0.18); background: rgba(27,45,147,0.05); }
.nav.scrolled .nav-burger span { background: var(--neelam, #1B2D93); }

/* --- dropdowns: light --- */
.nav-drop { background: rgba(255,255,255,0.98); border-color: rgba(27,45,147,0.12); box-shadow: 0 28px 64px rgba(27,45,147,0.20); }
.nav-drop a { color: var(--text-body, #2A3260); }
.nav-drop a:hover { background: rgba(27,45,147,0.06); color: var(--neelam, #1B2D93); }
.nav-drop a i { color: var(--neelam-30, #568AF7); }
.nav-drop a.hook { color: var(--purple, #7B4FFF); }
.nav-drop a.hook i { color: var(--purple, #7B4FFF); }
.nav-drop .drop-sep { background: rgba(27,45,147,0.10); }

/* --- mobile sheet: light --- */
@media (max-width: 1000px) {
  .nav-mobile { background: rgba(255,255,255,0.98); border-bottom-color: rgba(27,45,147,0.1); }
  .nav-mobile a { color: var(--text-body, #2A3260); }
  .nav-mobile a:hover, .nav-mobile a:active { background: rgba(27,45,147,0.06); color: var(--neelam, #1B2D93); }
  .nav-mobile a.active { color: #fff; background: var(--neelam, #1B2D93); }
  .nav-mobile a.hook { color: var(--purple, #7B4FFF); }
  .nav-mobile .m-head { color: var(--text-light, #6B7DB3); }
  /* when the sheet is open at the very top (bar still transparent), flip the
     logo + burger to dark so they stay visible on the light sheet */
  .nav:has(#navMobile.open) .nav-logo img { filter: none; }
  .nav:has(#navMobile.open) .nav-burger span { background: var(--neelam, #1B2D93); }
}