/* ====================================================
   mobile.css — Chumba Casino US
   Loaded LAST after styles.css to win the cascade.
   ==================================================== */

/* ── 1. FIX: undo overflow-x:hidden from all containers ── */
/* styles.css and patches set overflow-x:hidden on body,
   section, .container — this blocks .table-scroll-wrap scroll */
html {
    overflow-x: hidden;
    /* page-level clip only */
}

body {
    overflow-x: visible !important;
}

section {
    overflow-x: visible !important;
}

.container {
    overflow-x: visible !important;
}

.site-header {
    overflow: visible !important;
    /* needed for mobile-nav dropdown */
    position: sticky;
    top: 0;
    z-index: 200;
}

/* ── 2. TABLE: proper horizontal scroll ───────────────── */
.table-wrap {
    width: 100%;
    overflow-x: visible;
    /* outer card - visual only */
}

.table-scroll-wrap {
    display: block;
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.table-scroll-wrap table {
    min-width: max-content;
    width: 100%;
    border-collapse: collapse;
}

/* ── 3. CHART: position:relative required for Chart.js ── */
.chart-box {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    /* NOT hidden - let resize work */
    box-sizing: border-box;
}

.chart-box canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ── 4. Responsive grid for chart+table pairs ─────────── */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* ── 5. MOBILE BREAKPOINT 900px ──────────────────────── */
@media (max-width: 900px) {
    .chart-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .chart-box canvas {
        max-height: 280px !important;
    }
}

/* ── 6. MOBILE BREAKPOINT 768px ──────────────────────── */
@media (max-width: 768px) {

    /* Header */
    .main-nav {
        display: none !important;
    }

    .header-cta {
        display: flex !important;
    }

    .header-cta .btn-outline {
        display: none !important;
    }

    .header-cta .btn-rainbow,
    .header-cta .btn-gold {
        display: inline-flex !important;
        font-size: 0.78rem;
        padding: 8px 12px;
        white-space: nowrap;
    }

    .hamburger {
        display: flex !important;
    }

    /* Mobile nav */
    .mobile-nav {
        position: fixed !important;
        top: 64px;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 199;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    .mobile-nav.open {
        display: flex !important;
    }

    /* Section */
    section {
        padding: 40px 0;
    }

    /* Grids collapse */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
    }

    .stat-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .pros-cons {
        grid-template-columns: 1fr !important;
    }

    .promo-grid {
        grid-template-columns: 1fr !important;
    }

    .app-store-cards {
        grid-template-columns: 1fr !important;
    }

    .how-steps {
        grid-template-columns: 1fr !important;
    }

    .how-steps::before {
        display: none;
    }

    /* Charts */
    .chart-box {
        padding: 16px 12px !important;
        margin: 0 !important;
    }

    .chart-box canvas {
        max-height: 250px !important;
    }

    .chart-box h3 {
        font-size: 0.82rem;
    }

    /* Tables */
    .table-scroll-wrap th,
    .table-scroll-wrap td {
        font-size: 0.8rem;
        padding: 9px 10px;
        white-space: nowrap;
    }

    /* Hero */
    .hero h1 {
        font-size: clamp(1.5rem, 6vw, 2.4rem);
    }

    .hero-btns {
        flex-direction: column;
        gap: 10px;
    }

    .hero-btns .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-badges {
        flex-wrap: wrap;
        gap: 6px;
    }

    .hbadge {
        font-size: 0.73rem;
        padding: 5px 10px;
    }

    /* CTA band */
    .cta-band .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    /* Section title */
    .section-title {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Rating bars */
    .rb-label {
        font-size: 0.75rem;
        min-width: 90px;
    }

    .rating-panel {
        padding: 24px;
    }

    /* Page hero */
    .page-hero h1 {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
    }
}

/* ── 7. SMALL MOBILE 480px ────────────────────────────── */
@media (max-width: 480px) {
    .stat-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .mobile-cta-bar {
        flex-direction: column;
    }

    .mobile-cta-bar .btn {
        width: 100%;
    }

    .chart-box canvas {
        max-height: 220px !important;
    }

    .table-scroll-wrap th,
    .table-scroll-wrap td {
        font-size: 0.73rem;
        padding: 8px 8px;
    }

    .hero {
        min-height: 320px;
    }

    .rg-bar {
        font-size: 0.7rem;
        padding: 4px 12px;
    }

    .section-title {
        font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    }
}