/* Mobile sidebar drawer.
 *
 * The project already hides the sidebar on phones in css/eden-theme.css:
 * #accordionSidebar.sidebar { display: none !important; width: 0 !important }
 * with body.sidebar-toggled revealing it as a fixed off-canvas panel. So the
 * "not there until you tap" behaviour is intentional.
 *
 * What was missing is any way back. Two things went wrong:
 *
 * 1. The hamburger could not be tapped a second time. The drawer is
 *    position: fixed and sits above the topbar, so once open, the point
 *    where the button is returns the sidebar's brand link. The only exit was
 *    tapping the page body, by luck.
 *
 * 2. There was no backdrop and no close control, and nothing closed the
 *    drawer on navigation or on Escape.
 *
 * This file is loaded *after* eden-theme.css and uses the same selectors, so
 * it wins on equal specificity. It adds a tappable backdrop, a close button,
 * and keeps the hamburger above the drawer. Desktop is untouched.
 */

@media (max-width: 767.98px) {
    #accordionSidebar.sidebar,
    .sidebar {
        display: none !important;
        width: 0 !important;
    }

    /* Keep the hamburger above the drawer so it can close it again. */
    .topbar {
        position: relative !important;
        z-index: 1060 !important;
    }

    body.sb-nav-open #accordionSidebar.sidebar,
    body.sb-nav-open .sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: var(--eden-bottom-nav-height, 0px) !important;
        width: 17rem !important;
        max-width: 82vw !important;
        overflow-y: auto !important;
        z-index: 1055 !important;
        box-shadow: 0 0 24px rgba(0, 0, 0, .35);
    }

    .sb-nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        z-index: 1052;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease-in-out, visibility .2s;
    }

    body.sb-nav-open .sb-nav-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .sb-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        /* Below the topbar, not behind it. The topbar is raised above the
           drawer so the hamburger stays tappable, so a button at top:.5rem
           sits under the bar and never receives the tap. */
        top: 4rem;
        right: .5rem;
        width: 2.25rem;
        height: 2.25rem;
        border: 0;
        border-radius: .35rem;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
        z-index: 3;
    }

    .sb-nav-close:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }
}

@media (min-width: 768px) {
    .sb-nav-close,
    .sb-nav-backdrop {
        display: none !important;
    }
}