/* mobile-fix.css — shared mobile overflow fixes for all state pages
 * Owns: viewport containment, nav responsiveness, grid sizing, footer wrapping
 * Does NOT own: color themes, component styles, page-specific layout */

/* Root-level overflow containment — iOS Safari ignores overflow-x on body alone */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

html, body {
    max-width: 100vw;
}

/* Nav: hide text links on mobile, show hamburger-style condensed nav */
@media (max-width: 640px) {
    .nav {
        padding: 0 12px;
        gap: 8px;
    }

    .nav-brand {
        font-size: 16px;
        flex-shrink: 0;
    }

    .nav-links {
        gap: 8px;
        flex-shrink: 1;
        min-width: 0;
    }

    /* Hide text nav links on small screens — keep only Premium CTA */
    .nav-links a:not(.upgrade-btn) {
        display: none;
    }

    .nav-links .upgrade-btn {
        padding: 5px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Hero section */
    .hero {
        padding: 32px 12px 28px;
    }

    .hero p {
        font-size: 14px;
    }

    .hero h1 {
        font-size: 22px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 4px 10px;
    }

    .hero-stats {
        gap: 16px;
    }

    .hero-stat .num {
        font-size: 22px;
    }

    .hero-stat .label {
        font-size: 11px;
    }

    /* Reform banner — text wrap */
    .reform-banner {
        font-size: 12px;
        padding: 8px 12px;
        word-break: break-word;
    }

    /* Tab nav — already has overflow-x: auto, just tighten padding */
    .tab-btn {
        padding: 12px 14px;
        font-size: 13px;
    }

    /* Container */
    .container {
        padding: 16px 12px 48px;
    }

    /* Rights grid — reduce min column width for 320px screens */
    .rights-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .right-card {
        padding: 14px;
    }

    .right-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .right-title {
        font-size: 14px;
    }

    /* Scenarios grid */
    .scenarios-grid {
        gap: 10px;
    }

    .scenario-card {
        padding: 14px;
    }

    .scenario-num {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .scenario-title {
        font-size: 14px;
    }

    /* Legislation */
    .legislation-card {
        padding: 14px;
    }

    .legislation-title {
        font-size: 14px;
    }

    /* Cases */
    .case-card-full {
        padding: 14px;
    }

    .case-header {
        flex-direction: column;
        gap: 4px;
    }

    .case-name {
        font-size: 13px;
    }

    /* Detail view */
    .detail-title {
        font-size: 20px;
    }

    .phrases-box {
        padding: 16px;
    }

    .phrase-item {
        font-size: 13px;
        padding: 8px 12px;
    }

    .content-section {
        padding: 16px;
    }

    .can-cant-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .can-do-box, .cant-do-box {
        padding: 14px;
    }

    /* Quiz */
    .quiz-question-card {
        padding: 16px;
    }

    .quiz-q-text {
        font-size: 15px;
    }

    .quiz-option {
        padding: 10px 12px;
        font-size: 13px;
    }

    .quiz-nav {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        text-align: center;
    }

    /* Footer — wrap links properly */
    .footer {
        padding: 20px 12px;
    }

    .footer p {
        word-break: break-word;
        line-height: 2;
        font-size: 12px;
    }

    /* Disclaimer */
    .disclaimer {
        padding: 12px 14px;
        font-size: 12px;
    }

    /* Safety alert */
    .safety-alert {
        padding: 12px 14px;
        font-size: 13px;
    }

    /* Section labels */
    .section-label {
        font-size: 12px;
    }

    /* Premium gate modal — ensure it doesn't overflow */
    #premiumGateModal > div {
        max-width: calc(100vw - 40px) !important;
        padding: 24px 16px !important;
    }
}

/* Extra-small screens (320px) */
@media (max-width: 375px) {
    .nav {
        padding: 0 8px;
    }

    .nav-brand {
        font-size: 14px;
    }

    .hero {
        padding: 24px 8px 24px;
    }

    .hero h1 {
        font-size: 20px;
    }

    .hero p {
        font-size: 13px;
    }

    .container {
        padding: 12px 8px 40px;
    }

    .tab-btn {
        padding: 10px 10px;
        font-size: 12px;
    }

    .quiz-tabs {
        flex-direction: column;
        gap: 8px;
    }
}