/* mobile-nav.css — Nav drawer CSS (≤1024px).
   Ownership: all .topnav__hamburger rules and all drawer sidebar/backdrop overrides.
   Do NOT add rules for viewports wider than 1024px here. */

/* ── Hamburger button — hidden above 1024px ── */
.topnav__hamburger {
    display: none;
}

@media (max-width: 1024px) {
    /* ── Show hamburger ── */
    .topnav__hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: transparent;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        color: var(--fg-secondary);
        cursor: pointer;
        flex-shrink: 0;
        transition: var(--transition-base);
        order: -1;  /* ensures it stays leftmost inside flex topnav */
    }

    .topnav__hamburger:hover {
        background: var(--bg-surface-alt);
        color: var(--fg-primary);
    }

    .topnav__hamburger:focus-visible {
        outline: none;
        box-shadow: var(--shadow-focus);
    }

    /* Icon swap: hamburger ↔ close */
    .topnav__hamburger .icon-menu  { display: block; }
    .topnav__hamburger .icon-close { display: none; }

    .topnav__hamburger[aria-expanded="true"] .icon-menu  { display: none; }
    .topnav__hamburger[aria-expanded="true"] .icon-close { display: block; }

    /* ── Topnav: restore space-between so hamburger sits left, actions sit right ── */
    /* layout.css sets justify-content:flex-end at ≤640px; override it here */
    .topnav {
        justify-content: space-between;
    }

    /* ── Sidebar becomes a slide-in drawer ── */
    .sidebar {
        /* Override layout.css width:0 — drawer controls its own width */
        position: fixed;  /* Explicit — inherited from base rule but required for z-index/transform */
        left: 0;
        width: 78%;
        max-width: 300px;
        top: var(--header-height);
        height: calc(100dvh - var(--header-height));
        transform: translateX(-100%);
        /* Animate transform only — avoids flicker on other transitioned props */
        transition: transform 0.25s ease;
        box-shadow: var(--shadow-xl);
        border-right: 1px solid var(--border-default);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .sidebar--mobile-open {
        transform: translateX(0);
    }

    /* Neutralise desktop collapsed state inside the drawer */
    .sidebar--collapsed {
        width: 78%;
        max-width: 300px;
    }

    /* Labels always visible inside the drawer — reset all properties set by layout.css collapsed state */
    .sidebar--collapsed .sidebar__brand-name,
    .sidebar--collapsed .sidebar__brand-sub,
    .sidebar--collapsed .sidebar-item__label {
        display: block;
        opacity: 1;
        width: auto;
        overflow: visible;
        white-space: normal;
        pointer-events: auto;
    }

    /* Hide desktop collapse toggle — not applicable in drawer mode */
    .sidebar__collapse-btn {
        display: none;
    }

    /* ── Backdrop ── */
    .mobile-nav-backdrop {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100dvh - var(--header-height));
        background: var(--backdrop-mobile);
        z-index: calc(var(--z-sidebar) - 1);  /* 39 — above content, below drawer */
    }

    .mobile-nav-backdrop.is-visible {
        display: block;
    }
}