/* AIR-CURTAINS-NAV-COLLAPSE-01: hamburger for the shared app nav on narrow screens.
   Loaded by the nav markup itself (build_air_curtains_nav), because pages carry
   their own copies of the .app-nav rules and not every page includes air_curtains.css. */

/* Above 820px the toggle never renders and the panel is a transparent wrapper,
   so its children lay out directly in .app-nav (same geometry as before). */
.app-header .app-nav .app-nav-toggle {
    display: none;
}

.app-header .app-nav .app-nav-panel {
    display: contents;
}

@media (max-width: 820px) {
    .app-header .app-nav .app-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        background: var(--card, #fff);
        border: 1px solid var(--line, #d9dde3);
        border-radius: var(--radius-sm, 6px);
        color: var(--accent, #1f5fbf);
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
    }

    .app-header .app-nav .app-nav-toggle[aria-expanded="true"] {
        background: var(--bg, #f4f6f8);
    }

    .app-header .app-nav .app-nav-panel:not([data-open]) {
        display: none;
    }

    .app-header .app-nav .app-nav-panel[data-open] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
        padding: 8px 0 4px;
    }

    .app-header .app-nav .app-nav-panel a {
        padding: 8px 10px;
        border-radius: var(--radius-sm, 6px);
    }

    .app-header .app-nav .app-nav-panel a:hover {
        background: var(--bg, #f4f6f8);
    }
}