/*
 * mobile.css — Revisall Global Mobile Overrides
 * AB#1723 | Phase 1: Global CSS overrides and structural fixes
 *
 * Strategy:
 *   1. Prevent horizontal overflow sitewide
 *   2. Override v1_* absolute-positioned classes (design-tool exports)
 *   3. Reset fixed pixel widths on major containers
 *   4. Fix student-area specific layout classes
 *   5. Navigation and footer mobile fixes
 *
 * Breakpoints:
 *   Mobile  : max-width 767px
 *   Tablet  : max-width 991px
 *
 * Load order: always after all other stylesheets so these take effect.
 */

/* ==========================================================================
   1. SITEWIDE — Prevent horizontal overflow
   ========================================================================== */

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================================================
   2. TABLET (≤991px) — Structural fixes
   ========================================================================== */

@media (max-width: 991px) {

    /* Fixed-width page wrappers used on home/marketing pages */
    .block,
    .about-us1,
    .top-categories,
    .featured-courses1,
    .our-creators,
    .testimonials,
    .latest-news {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
    }

    /* Slick carousel containers */
    .categories {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: auto !important;
    }

    /* Sign-up panel (index.css — 470px fixed) */
    .sign-up-and-start-learning {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
    }

    .sign-up-and-start-learning-child {
        width: 100% !important;
    }

    .form {
        width: 100% !important;
    }
}

/* ==========================================================================
   3. MOBILE (≤767px) — Full override pass
   ========================================================================== */

@media (max-width: 767px) {

    /* ---- 3a. v1_* — SubjectDetails absolute-positioned card classes ---- */

    .v1_83 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
    }

    .v1_84 {
        width: 100% !important;
        height: auto !important;
    }

    .v1_85 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
    }

    .v1_86 {
        width: 100% !important;
        height: auto !important;
        background-size: cover !important;
    }

    .v1_90 {
        position: relative !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
    }

    .v1_139 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
    }

    .v1_140 {
        width: 100% !important;
    }

    .v1_141 {
        position: relative !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
    }

    .v1_224 {
        height: auto !important;
    }

    /* ---- 3b. SubjectDetails — mainImage and subject card widths ---- */

    .mainImage {
        width: 100% !important;
        height: 220px !important;
    }

    /* ---- 3c. index.css — Hero / slider fixed widths ---- */

    .slider-child {
        width: 100% !important;
    }

    .slider {
        height: 420px !important;
    }

    /* Hero text blocks pinned with absolute + left:373px */
    .get-started-your-container,
    .it-is-long,
    .start-your-learning-container,
    .with-a-free,
    .start-your-learning-item,
    .lets-study-in,
    .upcoming-educational-events,
    .events-item {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 90% !important;
        margin: 8px auto !important;
    }

    .button-1 {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 12px auto !important;
        display: block !important;
    }

    /* ---- 3d. index.css — Feature blocks (370px × 3 side by side) ---- */

    .block-1,
    .block-2,
    .block-3 {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        margin-bottom: 16px !important;
    }

    .block-1-child {
        position: relative !important;
        width: 100% !important;
    }

    /* ---- 3e. index.css — Top-bar rows (1920px wide) ---- */

    .telephone,
    .login-register {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
    }

    /* ---- 3f. index.css — About / course sections ---- */

    .about-us-child {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .study-and-education-container,
    .creating-a-community {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    /* ---- 3g. global.css — Revisall home page root container ---- */

    .revisall-home-website {
        height: auto !important;
        overflow: visible !important;
    }

    /* ---- 3h. Navbar — ensure toggler works correctly ---- */

    .hero-nav {
        top: 0 !important;
    }

    /* ---- 3i. DataTables — prevent table overflow ---- */

    .dataTables_wrapper {
        overflow-x: auto !important;
    }

    /* ---- 3j. Teacher / student panel cards ---- */

    .card {
        margin-bottom: 16px;
    }

    /* Offcanvas panels — ensure full-width on mobile */
    .offcanvas {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* ---- 3k. jsPDF download button rows — prevent overflow ---- */

    .d-flex.justify-content-end {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ---- 3k2. GradeProficiency — JS-generated table container ---- */

    #proficiency-table-container {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- 3l. Footer — fix stacked layout ---- */

    .footer-inner,
    .footer-students,
    .footer1 {
        width: 100% !important;
    }

    /* ---- 3m. Preferences / custom absolute panels ---- */

    [class^="v1_"],
    [class*=" v1_"] {
        max-width: 100% !important;
    }

    /* ---- 3n. SubjectDetails — sidebar negative-margin + scrollable tabs ---- */

    /* The stats sidebar floated left via margin-left:-30% must stack below on mobile */
    .sd-subject-sidebar {
        margin-left: 0 !important;
    }

    /* Nav-tabs with 5 items: scroll horizontally rather than overflow/wrap */
    .sd-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sd-tabs-nav::-webkit-scrollbar { display: none; }
    .sd-tabs-nav .nav-item { flex-shrink: 0; }

    /* ---- 3o. SubjectDetails — instructor image fixed-px override ---- */
    .sd-instructor-img {
        width: 100% !important;
        height: auto !important;
        max-width: 280px;
    }

    /* ---- 3p. EngagementReport — PowerBI iframe fixed-width override ---- */
    #powerBIReport {
        width: 100% !important;
        min-height: 500px;
    }
}