/* ===== Scroll-driven navbar reveal (shared) =====
   Transparent over the hero, fades to solid beige on scroll.
   Driven by --nav-p (0..1) set by navbar-fade.js.
   Default = dark hero (white text/logo at top). Add `nav-on-light` for light heroes. */
.navbar {
    --nav-p: 0;
    background: rgba(247, 245, 240, calc(0.95 * var(--nav-p)));
    -webkit-backdrop-filter: blur(calc(10px * var(--nav-p)));
    backdrop-filter: blur(calc(10px * var(--nav-p)));
    border-bottom: 1px solid rgba(224, 220, 212, calc(1 * var(--nav-p)));
    transition: background 0.2s linear, border-color 0.2s linear;
}

/* Logo crossfade: white logo over the hero -> blue logo when solid */
.navbar .logo { position: relative; }
.navbar .logo .logo-img-dark { opacity: var(--nav-p, 0); }
.navbar .logo .logo-img-light {
    position: absolute;
    top: 0; left: 0;
    opacity: calc(1 - var(--nav-p, 0));
}

.navbar .nav-links a {
    color: color-mix(in srgb, var(--text, #1a1a1a) calc(var(--nav-p) * 100%), rgba(255,255,255,0.92));
}
.navbar .nav-links a:hover,
.navbar .nav-links a.active {
    color: color-mix(in srgb, var(--navy) calc(var(--nav-p) * 100%), #ffffff);
}
.navbar .btn-nav {
    background: color-mix(in srgb, var(--navy) calc(var(--nav-p) * 100%), transparent);
    color: var(--white);
    border: 1px solid color-mix(in srgb, var(--navy) calc(var(--nav-p) * 100%), rgba(255,255,255,0.55));
}
.navbar .btn-nav:hover {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
}
.navbar .mobile-menu-btn {
    color: color-mix(in srgb, var(--navy) calc(var(--nav-p) * 100%), #ffffff);
}

/* Light-hero pages: keep text/logo dark over the (light) hero — only the bg fades in */
.navbar.nav-on-light .logo .logo-img-dark { opacity: 1; }
.navbar.nav-on-light .logo .logo-img-light { opacity: 0; }
.navbar.nav-on-light .nav-links a { color: var(--text, #1a1a1a); }
.navbar.nav-on-light .nav-links a:hover,
.navbar.nav-on-light .nav-links a.active { color: var(--navy); }
.navbar.nav-on-light .btn-nav {
    background: var(--navy);
    color: var(--white);
    border: 1px solid var(--navy);
}
.navbar.nav-on-light .btn-nav:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.navbar.nav-on-light .mobile-menu-btn { color: var(--navy); }

/* Mobile dropdown is beige — force dark, readable links regardless of scroll position */
@media (max-width: 1110px) {
    .navbar .nav-links a { color: var(--text, #1a1a1a); }
    .navbar .nav-links a:hover { color: var(--navy); }
    .navbar .nav-links a.active { color: var(--navy); }
}