/* WHY: Anchor the navbar to the same solid dark blue used by the footer bottom bar
   (--va-brand-blue-darker / #121B3F) so the top and bottom of the page share one
   consistent brand color. The base nav-menu.css default is transparent; this
   override makes the navbar solid from the moment the page loads. */
.topbar {
    background: var(--va-brand-blue-darker);
}

.topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--va-accent), var(--va-accent-tertiary), var(--va-accent-secondary));
    opacity: 0.8;
    pointer-events: none;
}

.topbar.is-scrolled {
    background: var(--va-brand-blue-darker);
    border-bottom-color: rgba(39, 56, 122, 0.35);
    box-shadow: 0 4px 20px rgba(18, 27, 63, 0.25);
}


.topbar.is-scrolled .topbar__brand {
    color: var(--va-text-light);
}

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

.topbar.is-scrolled nav a:hover {
    color: var(--va-text-light);
    background: rgba(39, 56, 122, 0.12);
}

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

.topbar.is-scrolled .topbar__toggle {
    color: var(--va-text-light);
}


.topbar.nav-is-open {
    background: var(--va-brand-blue-darker);
    border-bottom-color: rgba(39, 56, 122, 0.35);
    box-shadow: 0 4px 20px rgba(18, 27, 63, 0.25);
}

.topbar.nav-is-open .topbar__brand {
    color: var(--va-text-light);
}

.topbar.nav-is-open .topbar__toggle {
    color: var(--va-text-light);
}


.topbar nav a.nav-portal-btn,
.topbar.is-scrolled nav a.nav-portal-btn,
.topbar.nav-is-open nav a.nav-portal-btn {
    margin-left: 0.5rem;
    padding: 0.45rem 1rem;
    background: var(--va-accent);
    color: var(--va-text-dark);
    border-radius: var(--radius-full);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 128, 0, 0.30);
    white-space: nowrap;
}

.topbar nav a.nav-portal-btn:hover,
.topbar.is-scrolled nav a.nav-portal-btn:hover,
.topbar.nav-is-open nav a.nav-portal-btn:hover {
    background: var(--va-accent-hover);
    color: var(--va-text-dark);
    box-shadow: 0 4px 16px rgba(255, 128, 0, 0.45);
}

.topbar nav a.nav-portal-btn.active,
.topbar.is-scrolled nav a.nav-portal-btn.active,
.topbar.nav-is-open nav a.nav-portal-btn.active {
    background: var(--va-accent-hover);
    color: var(--va-text-dark);
}

@media (max-width: 900px) {
    .topbar nav.is-open a.nav-portal-btn,
    .topbar.is-scrolled nav.is-open a.nav-portal-btn,
    .topbar.nav-is-open nav.is-open a.nav-portal-btn {
        background: var(--va-accent);
        color: var(--va-text-dark);
        margin-left: 0;
        border-radius: var(--radius-md);
        box-shadow: none;
    }

    .topbar nav.is-open a.nav-portal-btn:hover,
    .topbar.is-scrolled nav.is-open a.nav-portal-btn:hover,
    .topbar.nav-is-open nav.is-open a.nav-portal-btn:hover {
        background: var(--va-accent-hover);
        color: var(--va-text-dark);
    }
}