/*
 * virtuamerica: NavMenu microsite overrides.
 * Docs: /Docs/Apps/Microsites/virtuamerica.md
 *
 * WHY: Initial transparent state is kept (white text on dark background is correct).
 * The signature 2px cyan/violet/teal gradient accent stripe is restored via ::before
 * at all scroll states. Scrolled state uses the site's dark va-bg-primary palette
 * instead of the plugin's light frosted-glass default.
 */

/* WHY: Signature accent stripe. A top-edge gradient is a key VirtuAmerica brand detail.
   Rendered at both initial and scrolled states so it is always visible. */
.topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--va-accent), var(--va-accent-secondary), var(--va-accent-tertiary));
    opacity: 0.7;
    pointer-events: none;
}

/* WHY: Scrolled dark navy surface instead of plugin's warm-white glass. */
.topbar.is-scrolled {
    background: rgba(5, 10, 18, 0.95);
    border-bottom-color: var(--va-border-hover);
    box-shadow: var(--va-shadow-sm);
}

/* WHY: backdrop-filter scoped to desktop so iOS Safari's containing-block bug
 * does not break touch routing on the fixed mobile nav drawer. */
@media (min-width: 901px) {
    .topbar.is-scrolled {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

.topbar.is-scrolled .topbar__brand {
    color: var(--white);
}

.topbar.is-scrolled nav a {
    color: var(--va-text-muted);
}

.topbar.is-scrolled nav a:hover {
    color: var(--va-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.topbar.is-scrolled nav a.active {
    color: var(--va-accent);
    background: var(--accent-soft);
}

.topbar.is-scrolled .topbar__toggle {
    color: var(--white);
}

/* WHY: nav-is-open mirrors is-scrolled so opening the mobile drawer on an
 * unscrolled page doesn't flash the plugin's default light-beige topbar on a
 * dark navy hero. is-scrolled is already overridden above; nav-is-open must
 * match so both states are visually consistent regardless of scroll position. */
.topbar.nav-is-open {
    background: rgba(5, 10, 18, 0.95);
    border-bottom-color: var(--va-border-hover);
    box-shadow: var(--va-shadow-sm);
}

.topbar.nav-is-open .topbar__brand {
    color: var(--white);
}

.topbar.nav-is-open .topbar__toggle {
    color: var(--white);
}