/**
 * ============================================================
 * MOBILE UX BASE STYLES — Scholastic Pages
 * Bible Ministries International
 * Generated: 2026-02-03 by Agarikon Workshop
 * ============================================================
 * 
 * This CSS provides mobile-optimized styles for all scholastic pages.
 * Include this file AFTER the page's main CSS.
 * 
 * KEY IMPROVEMENTS:
 * - Touch targets: minimum 44x44px (iOS) / 48x48px (Material)
 * - Font sizes: minimum 16px base to prevent iOS zoom
 * - Responsive layouts: optimized for phones (320-480px) and tablets (481-1024px)
 * - Improved tap areas and spacing
 * - Touch-friendly drag alternatives
 */

/* ============================================================
   1. BASE RESETS & TOUCH OPTIMIZATION
   ============================================================ */

/* Prevent iOS zoom on input focus */
input, select, textarea {
    font-size: 16px !important;
}

/* Improve tap highlighting */
* {
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
}

/* Better touch scrolling */
.scrollable, 
[class*="container"],
[class*="content"],
main {
    -webkit-overflow-scrolling: touch;
}

/* Prevent text selection on interactive elements */
button,
.btn,
[role="button"],
.game-card,
.option,
[draggable="true"] {
    -webkit-user-select: none;
    user-select: none;
}


/* ============================================================
   2. TOUCH TARGET SIZES (44x44px minimum)
   ============================================================ */

/* Buttons - ensure minimum touch size */
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
.nav-link,
.game-card,
.option,
.answer-option,
.choice,
.card,
.word-option,
.map-option,
.chapter-option,
.def-option,
.match-item,
.difficulty-btn,
.category-btn,
.testament-btn,
.mega-tab-btn,
.journey-btn,
.game-nav button,
.punct-btn,
.vocab-option,
.blank-option,
.pattern-choice {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

/* Larger touch targets on mobile */
@media (max-width: 768px) {
    button,
    .btn,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 48px;
        padding: 12px 20px;
    }
    
    /* Links in navigation */
    nav a,
    .nav-links a,
    .mobile-menu a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 10px 16px;
    }
    
    /* Interactive list items */
    .location-item,
    .match-item,
    .era-item,
    .seq-verse {
        min-height: 48px;
        padding: 14px 16px;
    }
    
    /* Input fields */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        min-height: 48px;
        padding: 12px 16px;
    }
}


/* ============================================================
   3. MOBILE TYPOGRAPHY (Readable on small screens)
   ============================================================ */

@media (max-width: 768px) {
    /* Base font size - prevent iOS zoom */
    html {
        font-size: 62.5%; /* 10px base for rem calculations */
    }
    
    body {
        font-size: 1.6rem; /* 16px minimum */
        line-height: 1.6;
    }
    
    /* Headings - scaled for mobile */
    h1 {
        font-size: clamp(2rem, 6vw, 2.8rem);
        line-height: 1.2;
    }
    
    h2 {
        font-size: clamp(1.8rem, 5vw, 2.4rem);
        line-height: 1.25;
    }
    
    h3 {
        font-size: clamp(1.6rem, 4vw, 2rem);
        line-height: 1.3;
    }
    
    h4 {
        font-size: clamp(1.4rem, 3.5vw, 1.8rem);
    }
    
    /* Paragraph text */
    p, li, td, th {
        font-size: 1.6rem;
        line-height: 1.7;
    }
    
    /* Scripture/verse text - larger for readability */
    .verse-display,
    .verse-box,
    .scripture-box,
    .passage,
    .scripture-text,
    blockquote {
        font-size: 1.8rem;
        line-height: 1.8;
        padding: 16px;
    }
    
    /* Small text - still readable */
    small,
    .caption,
    .reference,
    .scripture-ref,
    .stat-label,
    .hint {
        font-size: 1.4rem;
    }
    
    /* Button text */
    button,
    .btn {
        font-size: 1.5rem;
    }
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 1024px) {
    body {
        font-size: 1.7rem;
    }
    
    .verse-display,
    .verse-box,
    .scripture-box {
        font-size: 2rem;
    }
}


/* ============================================================
   4. RESPONSIVE LAYOUTS
   ============================================================ */

/* Mobile-first container */
@media (max-width: 768px) {
    .container,
    .game-container,
    main {
        padding: 16px;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* Stack grids on mobile */
    .game-menu,
    .game-selector,
    .game-grid,
    .options-grid,
    .card-grid,
    .map-container,
    .era-container,
    .match-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    /* Two-column layouts become single */
    .two-column,
    .split-layout,
    [class*="grid-2"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Headers stack */
    .game-header,
    .header-inner,
    .nav-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    /* Stats row */
    .stats,
    .game-stats,
    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .stat,
    .stat-card,
    .hero-stat {
        flex: 1 1 calc(50% - 10px);
        min-width: 120px;
        text-align: center;
    }
    
    /* Button groups */
    .btn-group,
    .action-buttons,
    .btn-container,
    .difficulty-selector,
    .category-selector,
    .testament-selector,
    .journey-selector {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group > *,
    .action-buttons > *,
    .difficulty-selector > *,
    .category-selector > * {
        width: 100%;
    }
}

/* Tablet layouts - two columns */
@media (min-width: 481px) and (max-width: 1024px) {
    .game-menu,
    .game-selector,
    .game-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .map-container {
        grid-template-columns: 1fr;
    }
    
    .btn-group,
    .difficulty-selector {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* ============================================================
   5. NAVIGATION (Mobile Menu)
   ============================================================ */

@media (max-width: 768px) {
    /* Hide desktop nav */
    .nav-links:not(.mobile-menu-links) {
        display: none !important;
    }
    
    /* Show hamburger */
    .mobile-menu-btn,
    .hamburger {
        display: flex !important;
    }
    
    /* Mobile menu overlay */
    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: rgba(10, 10, 10, 0.98);
        padding: 80px 24px 40px;
        overflow-y: auto;
    }
    
    .mobile-menu a {
        display: block;
        padding: 16px 20px;
        font-size: 1.8rem;
        text-align: center;
        border-radius: 8px;
        margin-bottom: 8px;
    }
    
    .mobile-menu-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }
}


/* ============================================================
   6. INTERACTIVE ELEMENTS (Cards, Options, Tiles)
   ============================================================ */

@media (max-width: 768px) {
    /* Game cards */
    .game-card,
    .card {
        padding: 20px;
        border-radius: 12px;
    }
    
    /* Option buttons */
    .word-option,
    .map-option,
    .chapter-option,
    .def-option,
    .answer-option,
    .choice {
        padding: 14px 18px;
        border-radius: 10px;
        width: 100%;
        text-align: center;
    }
    
    /* Match items - larger for touch */
    .match-item,
    .era-item,
    .location-item {
        padding: 16px;
        border-radius: 10px;
    }
    
    /* Timeline/sequence items */
    .timeline-event,
    .seq-verse,
    .genealogy-name,
    .genealogy-blank {
        padding: 14px 16px;
        min-height: 48px;
    }
    
    /* Patriarch cards */
    .patriarch-card {
        padding: 20px;
    }
    
    .patriarch-input {
        width: 100%;
        max-width: 150px;
        padding: 12px;
        font-size: 1.6rem;
    }
}


/* ============================================================
   7. TABLES (Responsive)
   ============================================================ */

@media (max-width: 768px) {
    /* Scrollable tables */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    td, th {
        padding: 12px 10px;
        min-width: 100px;
    }
    
    /* Or convert to cards */
    .responsive-table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
        padding: 16px;
        background: #f9f9f9;
        border-radius: 8px;
    }
    
    .responsive-table td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }
    
    .responsive-table td:last-child {
        border-bottom: none;
    }
    
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
    }
}


/* ============================================================
   8. FORMS & INPUTS
   ============================================================ */

@media (max-width: 768px) {
    /* Form layouts */
    form,
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    /* Labels */
    label {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 6px;
    }
    
    /* Inputs */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        width: 100%;
        padding: 14px 16px;
        font-size: 16px; /* Prevent zoom */
        border-radius: 8px;
        border: 2px solid #ddd;
    }
    
    input:focus,
    textarea:focus,
    select:focus {
        border-color: #D4AF37;
        outline: none;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
    }
    
    /* Answer spaces */
    .answer-space {
        min-height: 80px;
        padding: 14px;
    }
}


/* ============================================================
   9. DRAG & DROP (Touch-Friendly Alternatives)
   ============================================================ */

@media (max-width: 768px) {
    /* Make draggable items tappable */
    [draggable="true"],
    .timeline-event,
    .seq-verse,
    .genealogy-choice {
        cursor: pointer;
        touch-action: manipulation;
    }
    
    /* Add tap indicator */
    [draggable="true"]::after,
    .timeline-event::after {
        content: "↔ Tap to select";
        display: block;
        font-size: 1.1rem;
        color: #888;
        margin-top: 6px;
        text-align: center;
    }
    
    /* Selected state for tap-to-move */
    [draggable="true"].selected,
    .timeline-event.selected {
        border: 3px solid #D4AF37;
        background: rgba(212, 175, 55, 0.1);
        box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
    }
    
    /* Drop zones - larger on mobile */
    .timeline-dropzone,
    .drop-zone,
    [data-droppable] {
        min-height: 100px;
        padding: 20px;
        border: 3px dashed #ccc;
        border-radius: 12px;
    }
}


/* ============================================================
   10. FEEDBACK & MODALS
   ============================================================ */

@media (max-width: 768px) {
    /* Feedback messages */
    .feedback,
    .alert,
    .message {
        padding: 16px 20px;
        border-radius: 10px;
        font-size: 1.5rem;
    }
    
    /* Score displays */
    .score-display,
    .final-score {
        padding: 20px;
        font-size: 1.4rem;
    }
    
    .score-display .score-number,
    .final-score .score-number {
        font-size: 2.5rem;
    }
    
    /* Instructions */
    .instructions,
    .game-instructions,
    .tip-box {
        padding: 16px;
        font-size: 1.5rem;
        line-height: 1.6;
    }
}


/* ============================================================
   11. MAP & SVG INTERACTIONS
   ============================================================ */

@media (max-width: 768px) {
    /* Map containers */
    .map-container,
    .map-visual {
        padding: 12px;
    }
    
    /* SVG maps - fit screen */
    .map-visual svg,
    .map-svg {
        width: 100%;
        height: auto;
        max-height: 400px;
    }
    
    /* Map locations - larger touch targets */
    .map-location,
    .city-dot {
        cursor: pointer;
    }
    
    .city-dot {
        r: 10; /* Larger radius for touch */
    }
    
    /* Info panels */
    .info-panel {
        margin-top: 16px;
    }
    
    .info-panel-header {
        padding: 16px;
    }
    
    .info-panel-body {
        padding: 16px;
    }
    
    /* Legend */
    .map-legend {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }
}


/* ============================================================
   12. MEMORY GAMES (Cards)
   ============================================================ */

@media (max-width: 768px) {
    /* Memory card grids */
    .game-board.easy,
    .game-board.medium {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .game-board.hard {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .game-board.expert {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }
    
    /* Individual cards */
    .memory-card {
        min-height: 80px;
        aspect-ratio: 3/4;
    }
    
    .card-face {
        font-size: 1.2rem;
        padding: 8px;
    }
}

/* Tablet memory cards */
@media (min-width: 481px) and (max-width: 1024px) {
    .game-board.easy {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .game-board.medium {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .game-board.hard {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* ============================================================
   13. WRITING EXERCISES
   ============================================================ */

@media (max-width: 768px) {
    /* Exercise cards */
    .exercise,
    .prompt-card {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    /* Exercise headers */
    .exercise-header {
        flex-direction: column;
        gap: 10px;
    }
    
    .exercise-number,
    .prompt-number {
        font-size: 1.3rem;
    }
    
    /* Questions */
    .question {
        padding-left: 20px;
        margin: 16px 0;
    }
    
    .question::before {
        left: 0;
    }
    
    /* Writing spaces */
    .answer-space {
        min-height: 100px;
    }
}


/* ============================================================
   14. SPELL QUEST & VOCABULARY
   ============================================================ */

@media (max-width: 768px) {
    /* Word display */
    .vocab-word h3,
    .word-display {
        font-size: 2rem;
    }
    
    /* Definition options */
    .definition-options,
    .vocab-options {
        gap: 10px;
    }
    
    .def-option,
    .vocab-option {
        padding: 16px;
        text-align: left;
    }
    
    /* Word info sections */
    .word-info,
    .etymology-section {
        padding: 16px;
    }
    
    /* Context containers */
    .context-container {
        max-height: 200px;
        padding: 14px;
    }
    
    .highlight-word {
        padding: 3px 6px;
    }
}


/* ============================================================
   15. ACCESSIBILITY ENHANCEMENTS
   ============================================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    button,
    .btn,
    input,
    select {
        border-width: 2px;
    }
    
    .feedback.correct {
        border: 3px solid #155724;
    }
    
    .feedback.error,
    .feedback.incorrect {
        border: 3px solid #721c24;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .card-inner {
        transition: none !important;
    }
}

/* Focus indicators - visible for keyboard users */
:focus-visible {
    outline: 3px solid #D4AF37 !important;
    outline-offset: 3px !important;
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #D4AF37;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.25);
}


/* ============================================================
   16. PRINT STYLES
   ============================================================ */

@media print {
    .no-print,
    nav,
    .mobile-menu,
    .mobile-menu-btn,
    .hamburger,
    button:not(.print-btn),
    .game-nav {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
        background: white;
    }
    
    .exercise,
    .prompt-card {
        page-break-inside: avoid;
        border: 1px solid #ccc;
    }
    
    .answer-space {
        min-height: 2in;
        border: 1px solid #999;
    }
}