/* ═══════════════════════════════════════════════════════════════
   MOBILE-MENU.CSS v6  |  Structural supplement to styles-header.css
   All visual styling lives in styles-header.css (Sovereign Architect)
   This file only provides checkbox/body-lock & mobile phone button
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hidden checkbox for pure-CSS toggle ───────────────────── */
#mobile-menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* ─── Body scroll lock when menu is open ────────────────────── */
body.menu-open {
    overflow: hidden !important;
    width: 100% !important;
}

/* ─── Mobile phone button (inside open menu) ────────────────── */
@media (max-width: 768px) {
    .mobile-phone-item {
        display: none !important;
        order: -1;
    }

    #mobile-menu-toggle:checked ~ .header-content .main-navigation .nav-menu .mobile-phone-item,
    body.menu-open .nav-menu .mobile-phone-item {
        display: block !important;
    }

    .mobile-phone-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 14px 16px;
        background: linear-gradient(135deg, #f27210 0%, #d9650e 100%);
        margin: 12px 8px;
        border-radius: 0.75rem;
        text-decoration: none;
        color: #fff;
        box-shadow: 0 0 20px rgba(242, 114, 16, 0.2);
        transition: all 0.25s ease;
        border: 1px solid rgba(255, 255, 255, 0.15);
        font-family: 'Manrope', sans-serif;
    }

    .mobile-phone-button:hover,
    .mobile-phone-button:active {
        box-shadow: 0 0 30px rgba(242, 114, 16, 0.35);
        transform: scale(1.01);
    }

    .mobile-phone-number {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    .mobile-phone-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-phone-text {
        font-size: 13px;
        opacity: 0.9;
        font-weight: 500;
    }
}

/* ─── Desktop: hide mobile-only elements ────────────────────── */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    #mobile-menu-toggle {
        display: none !important;
    }

    .mobile-phone-item {
        display: none !important;
    }

    .menu-overlay {
        display: none !important;
    }
}