/**
 * MakeWPFast Mobile Navigation
 * Bottom bar + slide-up sheets. Mobile only (<=768px).
 * Static file — versioned via filemtime in mwf-mobile-nav.php.
 *
 * Dark tokens: bg #0d1117, panel #161b22, border #30363d,
 * text #e6edf3, accent #10b981, muted #8b949e.
 * Fonts: DM Sans (body), JetBrains Mono (mono).
 *
 * Visibility: Datastar data-show toggles inline display; sheets seed inline
 * display:none in the markup so there is no flash on load. We therefore keep
 * NO display rule on the sheets here (a CSS display:none would fight data-show).
 * The slide-up motion is a CSS @keyframes animation that re-runs every time the
 * sheet goes display:none -> block, so it plays on each open with zero JS.
 */

/* ── Desktop: entire component hidden ─────────────────────────────── */
#mwf-mobile-nav {
    display: none;
}

@keyframes mwf-sheet-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Mobile only ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Show the mobile nav wrapper (its fixed children do the real layout) */
    #mwf-mobile-nav {
        display: block;
    }

    /* Hide desktop nav (incl. GP's own toggle) + the sticky desktop search */
    .main-navigation {
        display: none !important;
    }
    .mwf-gsearch {
        display: none !important;
    }

    /* TeleChat -> floating button lifted to sit just ABOVE the bottom bar
       (bar is 60px tall), so it never overlaps the page title/logo. Its bubble
       sets bottom/right via inline styles (not !important), so a stylesheet
       !important wins. The panel opens upward from above the button. */
    #telechat-btn {
        top: auto !important;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
    }
    #telechat-container {
        top: auto !important;
        bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
    }

    /* Reserve space so the fixed bar never covers content/footer */
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Bottom bar ───────────────────────────────────────────────── */
    .mwf-mbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 998; /* above page content, below TeleChat (999998) */
        display: flex;
        height: 60px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #161b22;
        border-top: 1px solid #30363d;
        font-family: 'DM Sans', sans-serif;
    }

    .mwf-mbar__btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 48px;
        min-width: 48px;
        padding: 0.25rem;
        background: transparent;
        border: none;
        color: #e6edf3;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s, background 0.15s;
    }

    .mwf-mbar__btn:hover,
    .mwf-mbar__btn:active,
    .mwf-mbar__btn[aria-expanded="true"] {
        color: #10b981;
        background: rgba(16, 185, 129, 0.06);
    }

    .mwf-mbar__icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .mwf-mbar__label {
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: #8b949e;
    }

    .mwf-mbar__btn[aria-expanded="true"] .mwf-mbar__label {
        color: #10b981;
    }

    /* ── Slide-up sheets (menu + search) ──────────────────────────── */
    .mwf-msheet,
    .mwf-ssheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 60px; /* sits directly above the bottom bar */
        z-index: 997;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #161b22;
        border-top: 1px solid #30363d;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
        font-family: 'DM Sans', sans-serif;
        animation: mwf-sheet-up 0.22s ease-out;
    }

    /* Sheet headers */
    .mwf-msheet__header,
    .mwf-ssheet__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #21262d;
        position: sticky;
        top: 0;
        background: #161b22;
        z-index: 1;
    }

    .mwf-msheet__title,
    .mwf-ssheet__title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #e6edf3;
    }

    .mwf-msheet__close,
    .mwf-ssheet__close {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        min-height: 48px;
        padding: 0;
        background: transparent;
        border: none;
        color: #8b949e;
        cursor: pointer;
        border-radius: 8px;
        transition: color 0.15s, background 0.15s;
    }

    .mwf-msheet__close:hover,
    .mwf-msheet__close:active,
    .mwf-ssheet__close:hover,
    .mwf-ssheet__close:active {
        color: #e6edf3;
        background: rgba(255, 255, 255, 0.06);
    }

    .mwf-msheet__close svg,
    .mwf-ssheet__close svg {
        width: 20px;
        height: 20px;
    }

    /* ── Primary menu list ────────────────────────────────────────── */
    .mwf-msheet__menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mwf-msheet__menu > li {
        border-bottom: 1px solid #21262d;
    }

    .mwf-msheet__menu > li:last-child {
        border-bottom: none;
    }

    .mwf-msheet__menu a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0.85rem 1.25rem;
        text-decoration: none !important;
        color: #e6edf3;
        font-size: 0.95rem;
        font-weight: 500;
        transition: color 0.15s, background 0.15s;
    }

    .mwf-msheet__menu a:hover,
    .mwf-msheet__menu a:active,
    .mwf-msheet__menu .current-menu-item > a,
    .mwf-msheet__menu .current_page_item > a {
        color: #10b981;
        background: rgba(16, 185, 129, 0.08);
    }

    /* Sub-menus: indent + muted */
    .mwf-msheet__menu .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        background: #0d1117;
    }

    .mwf-msheet__menu .sub-menu a {
        padding-left: 2rem;
        font-size: 0.9rem;
        font-weight: 400;
        color: #8b949e;
    }

    .mwf-msheet__menu .sub-menu a:hover,
    .mwf-msheet__menu .sub-menu a:active {
        color: #10b981;
    }

    /* ── Search sheet body ────────────────────────────────────────── */
    .mwf-ssheet__body {
        padding: 0.75rem 1rem 1rem;
    }

    .mwf-ssheet__input {
        margin-bottom: 0.5rem;
    }

    /* Results reuse .mwf-gsearch__* classes from global-search.css.
       The wrapper's data-show hides stale results when the query is cleared. */
    .mwf-ssheet__results {
        position: static;
    }
}