/* ==========================================================
   LeeLaDee Design System v1.1
   Header
   ========================================================== */

@media (max-width: 767px) {
    body.modal-active .nav-panel._mobile,
    body.modal-active .nav-panel._mobile.active {
        background: linear-gradient(180deg, #111 0%, var(--ld-surface) 100%) !important;
        border-right: 1px solid var(--ld-border-strong);
        box-shadow: 18px 0 48px rgba(0,0,0,.55);
        color: var(--ld-text);
        max-width: 320px;
        padding: 72px 18px 28px;
        width: min(78vw, 320px);
    }

    body.modal-active .site-action-left._mobile .nav-toggle.active {
        align-items: center;
        background: rgba(255,255,255,.08);
        border: 1px solid var(--ld-border);
        border-radius: 999px;
        color: var(--ld-brand);
        display: inline-flex;
        height: 40px;
        justify-content: center;
        left: 18px;
        margin: 0;
        padding: 0;
        position: fixed;
        top: 18px;
        width: 40px;
        z-index: 1002;
    }

    body.modal-active .site-action-left._mobile .nav-toggle.active:hover,
    body.modal-active .site-action-left._mobile .nav-toggle.active:focus {
        background: rgba(255,215,0,.12);
        border-color: rgba(255,215,0,.28);
        outline: none;
    }

    body.modal-active .nav-panel._mobile .nav-toggle.nav-close {
        align-items: center;
        background: rgba(255,255,255,.06);
        border: 1px solid var(--ld-border);
        border-radius: 999px;
        color: var(--ld-brand);
        display: inline-flex;
        height: 40px;
        justify-content: center;
        margin: 0 0 24px;
        width: 40px;
    }

    body.modal-active .nav-panel._mobile .nav-toggle.nav-close::before,
    body.modal-active .nav-panel._mobile .nav-toggle.nav-close::after {
        background: currentColor;
    }

    body.modal-active .nav-panel._mobile .menu-main-menu-container {
        margin-top: 8px;
    }

    body.modal-active .nav-panel._mobile .menu {
        display: flex;
        flex-direction: column;
        gap: 6px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.modal-active .nav-panel._mobile .menu-item {
        margin: 0;
    }

    body.modal-active .nav-panel._mobile .menu a {
        align-items: center;
        border: 1px solid transparent;
        border-radius: 8px;
        color: var(--ld-text) !important;
        display: flex;
        font-size: 1rem;
        font-weight: 700;
        min-height: 44px;
        padding: 10px 12px;
        text-decoration: none;
    }

    body.modal-active .nav-panel._mobile .menu a:hover,
    body.modal-active .nav-panel._mobile .menu a:focus,
    body.modal-active .nav-panel._mobile .current-menu-item > a {
        background: rgba(255,215,0,.1);
        border-color: rgba(255,215,0,.22);
        color: var(--ld-brand-hover) !important;
        outline: none;
    }
}