/* 
 * Mobile Enhancement - Weak Pages
 * Brings pages up to gold standard (12+ @media queries)
 */

/* ========================================
   TABLET (768px) - @media (max-width: 768px)
   ======================================== */
@media only screen and (max-width: 768px) {
    /* Container adjustments */
    .container,
    main,
    .content-area {
        padding: 15px !important;
        max-width: 100% !important;
    }
    
    /* Grid to single column */
    .grid-2, .grid-3, .grid-4,
    .card-grid, .lesson-grid, .game-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Flex wrapping */
    .flex-row, .button-group, .nav-row {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    /* Header adjustments */
    .header h1 { font-size: 1.8rem !important; }
    .header h2 { font-size: 1.4rem !important; }
    
    /* Table scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Game areas */
    .game-area, .puzzle-area, .interactive-area {
        padding: 15px !important;
        margin: 10px 0 !important;
    }
    
    /* Cards */
    .card, .game-card, .lesson-card {
        padding: 15px !important;
        margin: 10px 0 !important;
    }
}

/* ========================================
   MOBILE (480px) - @media (max-width: 480px)
   ======================================== */
@media only screen and (max-width: 480px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Minimum font sizes - prevents iOS zoom */
    body, p, li, td, th, label {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
    h4 { font-size: 1rem !important; }
    
    /* Minimum tap targets - 44px */
    button, 
    .btn, 
    input[type="button"], 
    input[type="submit"],
    .btn-primary, .btn-secondary, .btn-outline {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
    
    /* Navigation */
    .nav, .nav-items, .header-nav {
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .nav-link {
        padding: 12px !important;
        min-height: 44px !important;
    }
    
    /* Form elements */
    input, textarea, select {
        font-size: 16px !important;
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Search bar */
    .search-input,
    .search-bar input {
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    /* Game elements */
    .word-bank, .letter-bank {
        padding: 10px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    .word-chip, .letter-chip {
        min-height: 44px !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    /* Quiz options */
    .quiz-option, 
    .option-item,
    .choice-item {
        padding: 12px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Dictionary entries */
    .dict-entry,
    .entry-item {
        padding: 12px !important;
        margin: 8px 0 !important;
    }
    
    /* Modal/popup */
    .modal, .popup, .dialog {
        width: 95% !important;
        max-width: 95% !important;
        left: 2.5% !important;
        right: 2.5% !important;
        padding: 15px !important;
    }
    
    /* Progress bars */
    .progress-bar, .score-bar {
        height: 24px !important;
        font-size: 12px !important;
    }
    
    /* Hide desktop-only */
    .desktop-only, .hide-mobile {
        display: none !important;
    }
}

/* ========================================
   iPHONE SE (320px) - @media (max-width: 320px)
   ======================================== */
@media only screen and (max-width: 320px) {
    body { font-size: 14px !important; }
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.2rem !important; }
    h3 { font-size: 1.1rem !important; }
    
    .container, main { padding: 10px !important; }
    
    button, .btn { 
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   TOUCH DEVICES - @media (hover: none)
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch */
    button:hover, .btn:hover, a:hover {
        transform: none !important;
    }
    
    /* Active states for touch feedback */
    button:active, .btn:active, a:active {
        opacity: 0.85 !important;
        transform: scale(0.97) !important;
    }
    
    /* Touch-friendly drag handles */
    .drag-handle,
    .drag-source {
        min-height: 50px !important;
        cursor: grab !important;
    }
    
    /* Swipe indicators */
    .swipe-hint::after {
        content: "← swipe →" !important;
        display: block !important;
    }
    
    /* Larger touch areas for drag-drop */
    .drop-zone {
        min-height: 80px !important;
        padding: 15px !important;
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */
@media only screen and (max-width: 768px) and (orientation: landscape) {
    .container, main {
        padding: 10px 20px !important;
    }
    
    .game-area {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
}

/* ========================================
   PAGE-SPECIFIC FIXES
   ======================================== */

/* bible-dictionary.html - search input zoom fix */
@media only screen and (max-width: 480px) {
    .search-input,
    .search-bar input,
    input.search {
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    .dictionary-entry {
        padding: 12px !important;
        margin: 8px 0 !important;
        font-size: 16px !important;
    }
    
    .dict-word {
        font-size: 18px !important;
    }
}

/* biblical-logic.html - minimum font sizes */
@media only screen and (max-width: 480px) {
    .logic-puzzle,
    .puzzle-card,
    .clue-card {
        padding: 15px !important;
        margin: 10px 0 !important;
    }
    
    .puzzle-text,
    .clue-text,
    .hint-text {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    .logic-grid td,
    .truth-table td {
        padding: 8px !important;
        font-size: 14px !important;
    }
    
    .option-btn,
    .choice-btn {
        min-height: 44px !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
    }
}

/* ========================================
   MOBILE V2 — Deep Fixes for 13 Core Pages
   Added 2026-03-05
   ======================================== */

/* === TABLE RESPONSIVENESS === */
@media only screen and (max-width: 768px) {
    /* Wrap all tables in scrollable container */
    .comparison-table,
    .measurement-table,
    .reference-table,
    table.data-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        font-size: 14px !important;
    }
    
    .comparison-table th,
    .comparison-table td,
    .measurement-table th,
    .measurement-table td {
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }
    
    /* Tab navigation — horizontal scroll instead of wrap */
    .tab-nav, .tabs, .tab-buttons {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }
    .tab-nav::-webkit-scrollbar,
    .tabs::-webkit-scrollbar,
    .tab-buttons::-webkit-scrollbar {
        display: none !important;
    }
    
    .tab-btn, .tab-button, .tab-link {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }
    
    /* Level selectors */
    .level-selector, .difficulty-selector {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    .level-btn, .difficulty-btn {
        flex: 1 1 calc(50% - 8px) !important;
        min-height: 44px !important;
        text-align: center !important;
        font-size: 14px !important;
    }
}

@media only screen and (max-width: 480px) {
    /* === PREVENT HORIZONTAL OVERFLOW === */
    *, *::before, *::after {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Fix images and SVGs */
    img, svg, canvas, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix pre/code blocks */
    pre, code {
        overflow-x: auto !important;
        max-width: 100% !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }
    
    /* === MATH PAGE SPECIFIC === */
    .calc-row, .converter-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .calc-input, .converter-input {
        width: 100% !important;
    }
    
    .calc-result, .converter-result {
        font-size: 16px !important;
        padding: 12px !important;
        word-break: break-word !important;
    }
    
    .number-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .number-card {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    .number-card .number {
        font-size: 24px !important;
    }
    
    /* SVG diagrams */
    .diagram-container, .svg-container {
        overflow-x: auto !important;
        max-width: 100% !important;
    }
    
    .diagram-container svg, .svg-container svg {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* === GRAMMAR PAGE SPECIFIC === */
    .exercise-container, .quiz-container {
        padding: 12px !important;
        margin: 8px 0 !important;
    }
    
    .exercise-question, .quiz-question {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }
    
    .radio-group, .checkbox-group {
        gap: 8px !important;
    }
    
    .radio-group label, .checkbox-group label {
        padding: 12px !important;
        min-height: 44px !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    input[type="radio"], input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }
    
    /* === READING PAGE SPECIFIC === */
    .passage-text, .scripture-text {
        font-size: 16px !important;
        line-height: 1.8 !important;
        padding: 16px !important;
    }
    
    .verse-ref, .scripture-ref {
        font-size: 13px !important;
    }
    
    /* === WRITING PAGE SPECIFIC === */
    textarea {
        font-size: 16px !important;
        line-height: 1.6 !important;
        min-height: 120px !important;
        padding: 12px !important;
        width: 100% !important;
    }
    
    .word-count, .char-count {
        font-size: 13px !important;
    }
    
    .prompt-card {
        padding: 16px !important;
    }
    
    /* === GAME SPECIFIC === */
    .game-header, .game-controls {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    
    .game-score, .game-timer, .game-level {
        text-align: center !important;
        font-size: 14px !important;
    }
    
    .game-board {
        padding: 8px !important;
        gap: 6px !important;
    }
    
    /* Drag and drop improvements */
    .sortable-item, .draggable-item {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        touch-action: manipulation !important;
    }
    
    .drop-target, .drop-zone {
        min-height: 60px !important;
        padding: 12px !important;
        border: 2px dashed rgba(139,0,0,0.3) !important;
    }
    
    /* Speed game timers */
    .timer-display {
        font-size: 20px !important;
    }
    
    /* === FLOATING PANEL FIX === */
    #bib-panel, .floating-panel, .progress-panel {
        bottom: 8px !important;
        right: 8px !important;
        left: auto !important;
        max-width: calc(100vw - 16px) !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        z-index: 9999 !important;
    }
    
    /* === LESSON CARDS === */
    .lesson-card, .learning-card {
        padding: 16px !important;
    }
    
    .lesson-header {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .lesson-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .lesson-title {
        font-size: 18px !important;
    }
    
    .lesson-body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* === BREADCRUMB === */
    .breadcrumb {
        font-size: 12px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    /* === HERO/BANNER === */
    .hero, .page-hero, .banner {
        padding: 24px 16px !important;
        min-height: auto !important;
    }
    
    .hero h1, .page-hero h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    .hero p, .page-hero p {
        font-size: 15px !important;
    }
    
    /* === CONFETTI/CELEBRATION — keep visible but contained === */
    .confetti-container {
        position: fixed !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* === EXTRA SMALL (320px - iPhone SE) === */
@media only screen and (max-width: 360px) {
    .tab-btn, .tab-button {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
    
    .level-btn, .difficulty-btn {
        flex: 1 1 100% !important;
        font-size: 13px !important;
    }
    
    .lesson-title {
        font-size: 16px !important;
    }
    
    .hero h1, .page-hero h1 {
        font-size: 20px !important;
    }
    
    button, .btn {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .number-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === SAFE AREA INSETS (iPhone notch) === */
@supports (padding: env(safe-area-inset-bottom)) {
    .floating-panel, #bib-panel, .progress-panel {
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
    
    .footer, footer {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* === JS-CREATED INLINE STYLE OVERRIDES === */
@media only screen and (max-width: 480px) {
    /* Score/progress panels created by JS with inline styles */
    div[style*="position:fixed"][style*="right:20px"],
    div[style*="position: fixed"][style*="right: 20px"] {
        right: 8px !important;
        left: auto !important;
        max-width: calc(100vw - 16px) !important;
        font-size: 12px !important;
        padding: 10px 14px !important;
    }
    
    /* Streak banners */
    div[style*="position:fixed"][style*="top:20px"] {
        top: 8px !important;
        right: 8px !important;
        left: 8px !important;
        max-width: calc(100vw - 16px) !important;
        text-align: center !important;
    }
    
    /* Celebration messages */
    div[style*="position:fixed"][style*="font-size:3rem"],
    div[style*="position:fixed"][style*="font-size: 3rem"] {
        font-size: 2rem !important;
    }
    
    /* Any fixed panel with inline top:80px */
    div[style*="top:80px"],
    div[style*="top: 80px"] {
        top: 60px !important;
    }
    
    /* Scholastic hub nav if present */
    .scholastic-nav, .hub-nav {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Fix inline textareas */
    textarea[style*="display: inline-block"],
    textarea[style*="display:inline-block"] {
        display: block !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
}