/* =============================================================
 * MOBILE NAVIGATION DROPDOWN
 * Primary nav bar collapses on mobile, slides down when toggled.
 * Desktop: unchanged horizontal menu.
 * ============================================================= */

/* ── Hamburger button focus ring ─────────────────────────────── */
#mobile-nav-toggle:focus-visible {
    outline: 2px solid #123e8a;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Mobile: primary-nav-bar as slide-down dropdown ─────────── */
@media (max-width: 767px) {
    /* Collapsed — hidden but animatable (no display:none CLS) */
    .primary-nav-bar {
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition:
            max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow  0.2s ease;
    }

    /* Expanded */
    .primary-nav-bar.is-open {
        max-height: calc(100vh - var(--nav-h));
        height: calc(100vh - var(--nav-h)); /* fill remaining screen completely */
        overflow-y: auto;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    }
}

/* ── Desktop: hamburger never rendered ───────────────────────── */
@media (min-width: 768px) {
    #mobile-nav-toggle {
        display: none !important;
    }

    /* Ensure the nav bar is always visible (override any lingering max-height) */
    .primary-nav-bar {
        max-height: none !important;
        overflow: visible !important;
    }
}