/* ==============================================================
   IGNITEBIT ACADEMY - GLOBAL MOBILE FIX 
   This file globally resolves overlapping, text spilling, 
   and forces the sidebar to the bottom on mobile devices.
   ============================================================== */

/* 1. FORCE FLEXBOX ON BODY TO REORDER ELEMENTS ON MOBILE */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh;
}

/* 2. KEEP TOP MENUS AT THE VERY TOP */
.top-navbar { order: -2; }
.horizontal-menu { order: -1; }

@media screen and (max-width: 900px) {
    
    /* 3. FIX: PREVENT HEADINGS & TEXT FROM SPILLING OUT OF BOXES */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .w3-card, .vibrant-marketing, .w3-panel-info, .promo-footer {
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 4. FIX: HIDE MARKETING SLIDER & EXTRA CLUTTER ON MOBILE */
    .testimonial-slider {
        display: none !important; /* Completely hides the slider on mobile */
    }

    /* 5. FIX: MAIN CONTENT (Notes & MCQs) COMES FIRST */
    .main-content {
        order: 1 !important; /* Forces content to load immediately after top menus */
        margin-left: 0 !important;
        margin-top: 104px !important; /* Clears the fixed top navbars so headings don't hide */
        width: 100% !important;
        padding: 20px 15px !important;
    }

    /* 6. FIX: MOVE SIDEBAR BELOW CONTENT & HIDE UNNECESSARY LINKS */
    .sidebar {
        order: 2 !important; /* Magically moves the sidebar BELOW the main content */
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: 0 !important; /* Removes fixed overlapping behavior */
        border-right: none !important;
        border-top: 3px solid #04AA6D !important; /* Adds a nice separator above the list */
        padding: 20px 15px 40px 15px !important;
        background-color: #f8fafc !important; /* Blends with background */
    }

    /* Keep ONLY the Topic List (Live Modules) in the sidebar on mobile */
    .sidebar h4:not(:nth-of-type(3)), 
    .sidebar a[href="#home"],
    .sidebar a[href="about.html"],
    .sidebar a[href="contact.html"],
    .sidebar a[href="#school-hub"],
    .sidebar a[href="#competitive-hub"],
    .sidebar a[href="#ncert-hub"],
    .sidebar a[href="#games-hub"],
    .sidebar a[target="_blank"] {
        display: none !important; /* Hides everything EXCEPT the chapter content list */
    }

    /* Format the remaining "List of Content" beautifully for mobile tapping */
    .sidebar h4 {
        color: #04AA6D !important;
        font-size: 20px !important;
        margin-bottom: 15px !important;
        text-align: center;
    }
    
    .sidebar a {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        margin-bottom: 8px !important;
        border-radius: 6px !important;
        padding: 12px 16px !important;
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    /* 7. FIX: FOOTERS AT THE VERY BOTTOM */
    .promo-footer {
        order: 3 !important;
    }

    .universal-footer-container {
        order: 4 !important;
    }
}