/* ==========================================================================
   MCX G26 - FINAL MOBILE FIXES (HEADER & MENU)
   ========================================================================== */

@media (max-width: 1150px) {
    /* Mobile Menu Drawer */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 80%;
        height: 100vh;
        background: rgba(5, 7, 15, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1000;
        border-left: 1px solid rgba(0, 200, 255, 0.2);
    }

    .main-nav.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }

    .nav-link {
        font-size: 1.2rem;
        display: block;
        text-align: center;
    }
}

@media (max-width: 768px) {
    /* 1. Header Layout Fixes */
    .header-main-bar {
        padding: 10px 0 !important;
    }

    .nav-container {
        flex-wrap: nowrap !important;
        gap: 5px !important;
    }

    /* 2. Hide Bulky Buttons on Mobile to fix overflow */
    #audio-ambient-toggle, 
    #command-palette-trigger {
        display: none !important; /* مخفی کردن دکمه‌های صوت و کیبورد در موبایل */
    }

    /* 3. Make the CTA Button smaller */
    .btn-primary.neon-glow-btn {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    /* 4. Hide Brand Text, just keep Logo */
    .brand-titles {
        display: none !important; 
    }

    /* 5. Fix the Telemetry Bar (Make it single line and scrollable if needed) */
    .header-telemetry-bar {
        padding: 5px 0 !important;
    }
    
    .telemetry-container {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 10px !important;
        overflow-x: auto !important; /* اسکرول افقی در صورت زیاد بودن متن */
    }

    .telemetry-text, .telemetry-node, .telemetry-version, .telemetry-clock {
        font-size: 0.6rem !important; 
        white-space: nowrap !important;
    }

    .telemetry-divider {
        display: none !important; 
    }

    /* 6. Fix the 'Curiosity Space' (Hero Section padding) */
    .hero-section {
        padding-top: 150px !important; /* این فضا رو نگه می‌داریم که کنجکاوی ایجاد کنه */
        min-height: 80vh;
    }
    
    /* 7. Remove the massive fixed padding from the body */
    body#mcx-body {
        padding-top: 0 !important; 
    }
}