/* -- Mobile Navigation & Layout Overrides -- */

/* 1. Header & Nav */
@media (max-width: 768px) {
    .header-container {
        padding: 0.5rem 0;
    }

    .logo-img {
        width: 140px;
        /* Resize logo */
    }

    .mobile-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 1001;
    }

    .mobile-toggle span {
        width: 25px;
        height: 3px;
        background-color: var(--primary-color);
        border-radius: 2px;
        transition: 0.3s;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden by default */
        width: 70%;
        height: 100vh;
        background: white;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: 0.3s ease-in-out;
        z-index: 1000;
        padding: 2rem;
    }

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

/* 2. Typography Sizing */
@media (max-width: 768px) {
    html {
        font-size: 14px;
        /* Base scale down */
    }

    .hero-title {
        font-size: 2.2rem !important;
        /* Force override */
    }

    .hero-subtitle {
        font-size: 1rem !important;
        padding: 0 1rem;
    }

    h2 {
        font-size: 1.8rem !important;
    }
}

/* 3. Hero Floating Badges */
@media (max-width: 768px) {
    .badge-aws {
        top: 10%;
        left: 0%;
        transform: scale(0.7);
    }

    .badge-cisco {
        top: 12%;
        right: -5%;
        transform: scale(0.7);
    }

    .badge-linux {
        bottom: 15%;
        left: -5%;
        transform: scale(0.7);
    }

    .badge-security {
        bottom: 18%;
        right: -5%;
        transform: scale(0.7);
    }

    .float-badge img {
        width: 60px !important;
        /* Smaller icons */
    }
}

/* 4. Comparison Table Scroll */
@media (max-width: 768px) {
    .comparison-table-wrapper {
        overflow-x: auto;
        padding-bottom: 1rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 0.8rem;
        white-space: nowrap;
        /* Prevent breaking */
    }
}

/* 5. Pricing Equation Stack */
@media (max-width: 768px) {
    .pricing-equation {
        flex-direction: column !important;
    }

    .pricing-divider {
        transform: rotate(90deg);
        margin: 1rem 0;
    }

    .market-side,
    .offer-side {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 6. Grids Stacking */
@media (max-width: 768px) {

    .modules-grid,
    .audience-grid,
    .labs-grid,
    .faq-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
        /* Force stack */
    }

    .terminal-wrapper {
        display: none;
        /* Hide visual noise on mobile if needed, or keep */
    }
}

/* 7. Popup Mobile */
@media (max-width: 768px) {
    .popup-content {
        width: 95%;
        padding: 1.5rem;
    }
}