/* LearningHub Mobile Optimization CSS v2 */
/* Comprehensive mobile styles based on 2025 best practices */
/* Sources: webstacks.com, dev.to, uxpin.com */

/* ===========================================
   BASE MOBILE STYLES (max-width: 768px)
   =========================================== */
@media (max-width: 768px) {

    /* --- Container & Layout --- */
    .container {
        padding: 1rem !important;
        max-width: 100% !important;
    }

    /* --- Typography (16px minimum for readability) --- */
    html {
        font-size: 16px;
    }

    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
    }

    h2, .section-title, .goal-title, .module-title {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
    }

    h3, .concept-name, .challenge-title {
        font-size: 1.1rem !important;
    }

    h4, h5, h6 {
        font-size: 1rem !important;
    }

    p, li, .lesson-goal, .goal-desc, .concept-def, .path-desc {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* --- Navigation --- */
    .nav-bar {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start !important;
        padding: 0.75rem 0 !important;
    }

    .nav-back {
        font-size: 0.9rem !important;
        padding: 0.5rem 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-breadcrumb {
        font-size: 0.8rem !important;
        color: var(--text-muted);
    }

    /* --- Progress Steps (lesson wizard) --- */
    .progress-steps {
        gap: 0.25rem !important;
        padding: 0 0.5rem;
        justify-content: space-between !important;
    }

    .step {
        width: 100% !important;
        max-width: 60px;
        height: 6px !important;
        min-height: 6px;
        flex: 1;
    }

    /* --- Header Sections --- */
    .lesson-header, .header, .goal-section {
        padding: 1.25rem 1rem !important;
        border-radius: 12px !important;
        margin-bottom: 1.5rem !important;
    }

    .header-icon, .logo-icon {
        font-size: 2.5rem !important;
    }

    .goal-icon, .completion-icon {
        font-size: 3rem !important;
        margin-bottom: 0.75rem !important;
    }

    .tagline, .subtitle, .lesson-subtitle {
        font-size: 0.95rem !important;
    }

    /* --- Badges --- */
    .lesson-badge, .grade-badge, .module-badge,
    .try-badge, .learn-badge, .test-badge {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.75rem !important;
        display: inline-block;
    }

    /* --- Cards & Sections --- */
    .section, .goal-section, .concepts-section,
    .progress-section, .try-section, .learn-section, .test-section {
        padding: 1rem !important;
        border-radius: 12px !important;
        margin-bottom: 1.25rem !important;
    }

    .section-header, .try-header, .learn-header, .test-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }

    .section-header h2, .try-header h2, .learn-header h2, .test-header h2 {
        font-size: 1.1rem !important;
    }

    /* --- Lesson Cards (Module Index) --- */
    .lesson-card, .module-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1rem !important;
        gap: 0.75rem !important;
    }

    .lesson-num {
        margin: 0 auto !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
        flex-shrink: 0;
    }

    .lesson-info, .module-content {
        width: 100%;
    }

    .lesson-title, .module-title {
        font-size: 1rem !important;
    }

    .lesson-goal, .module-desc {
        font-size: 0.85rem !important;
    }

    .lesson-status, .module-status {
        display: inline-block;
        margin-top: 0.5rem;
        font-size: 0.7rem !important;
        padding: 0.25rem 0.6rem !important;
    }

    /* --- Module Icon --- */
    .module-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        margin: 0 auto !important;
    }

    /* --- Path Cards (Hub Main) --- */
    .paths, .module-content {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .path-card {
        padding: 1rem !important;
    }

    .path-icon {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .path-title {
        font-size: 1.05rem !important;
        margin-bottom: 0.35rem !important;
    }

    .path-desc {
        font-size: 0.85rem !important;
    }

    /* --- Grade Selection Grid --- */
    .grades-grid, .grade-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }

    .grade-card, .grade-btn {
        padding: 0.9rem 0.5rem !important;
        min-height: 80px;
    }

    .grade-num {
        font-size: 1.75rem !important;
    }

    .grade-name, .grade-school {
        font-size: 0.75rem !important;
    }

    /* --- Current Module Section --- */
    .current-module {
        padding: 1rem !important;
    }

    .module-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }

    .module-dates {
        font-size: 0.8rem !important;
    }

    .grade-topic {
        padding: 0.9rem !important;
    }

    .grade-label {
        font-size: 0.7rem !important;
    }

    .topic-name {
        font-size: 0.9rem !important;
    }

    .topic-goal {
        font-size: 0.8rem !important;
    }

    /* --- Question Section (Hub) --- */
    .question-section {
        padding: 1rem !important;
    }

    .question {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }

    /* --- Quick Start --- */
    .quick-start {
        padding: 1rem !important;
    }

    .quick-title {
        font-size: 1rem !important;
    }

    /* ===========================================
       LESSON PAGE SPECIFIC STYLES
       =========================================== */

    /* --- Challenge & Task Boxes --- */
    .challenge-box, .challenge-task {
        padding: 0.9rem !important;
        font-size: 0.9rem !important;
    }

    .challenge-task ul {
        padding-left: 1.25rem !important;
        margin: 0.5rem 0 !important;
    }

    .challenge-task li {
        margin-bottom: 0.35rem;
    }

    /* --- Hint Box --- */
    .hint-box {
        padding: 0.9rem !important;
    }

    .hint-toggle {
        font-size: 0.9rem !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .hint-content {
        font-size: 0.85rem !important;
        margin-top: 0.75rem !important;
    }

    .hint-content code {
        font-size: 0.8rem !important;
    }

    /* --- Info Box --- */
    .info-box {
        padding: 0.9rem !important;
    }

    .info-box-title {
        font-size: 0.95rem !important;
    }

    /* --- Concept Cards --- */
    .concept-card {
        padding: 1rem !important;
        margin: 0.75rem 0 !important;
    }

    .concept-name {
        font-size: 1rem !important;
    }

    .concept-def {
        font-size: 0.9rem !important;
    }

    /* --- Code Blocks --- */
    .code-block {
        padding: 0.75rem !important;
        font-size: 0.75rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: pre;
        max-width: 100%;
    }

    .code-label, .demo-label {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.5rem !important;
    }

    /* --- Demo Box (HTML Preview) --- */
    .demo-box {
        padding: 1rem !important;
        overflow-x: auto !important;
    }

    .demo-box h1 { font-size: 1.4rem !important; }
    .demo-box h2 { font-size: 1.2rem !important; }
    .demo-box h3 { font-size: 1.1rem !important; }
    .demo-box h4 { font-size: 1rem !important; }
    .demo-box h5 { font-size: 0.95rem !important; }
    .demo-box h6 { font-size: 0.9rem !important; }
    .demo-box p { font-size: 0.9rem !important; }

    /* --- Comparison Grid --- */
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* --- Scratch Blocks --- */
    .scratch-demo, .preview-box {
        padding: 0.9rem !important;
        border-radius: 10px !important;
    }

    .scratch-block {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.6rem !important;
        word-break: break-word;
        max-width: 100%;
    }

    .scratch-blocks {
        gap: 0.3rem !important;
    }

    .preview-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* --- Steps List --- */
    .steps-list {
        padding-left: 0 !important;
    }

    .steps-list li {
        padding: 0.75rem 0.5rem 0.75rem 2.75rem !important;
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }

    .steps-list li::before {
        width: 1.6rem !important;
        height: 1.6rem !important;
        font-size: 0.75rem !important;
        left: 0.35rem !important;
    }

    /* ===========================================
       QUIZ & TEST STYLES (CRITICAL FOR TOUCH)
       =========================================== */

    .quiz-question {
        padding: 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }

    .question-text {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
    }

    /* Quiz options - both .quiz-option and .option classes */
    .quiz-options, .options {
        gap: 0.5rem !important;
    }

    .quiz-option, .option {
        padding: 0.9rem 0.75rem !important;
        font-size: 0.85rem !important;
        min-height: 48px !important; /* Google touch target minimum */
        display: flex !important;
        align-items: center !important;
        line-height: 1.35 !important;
        border-radius: 8px !important;
    }

    .feedback {
        padding: 0.75rem !important;
        font-size: 0.85rem !important;
        margin-top: 0.75rem !important;
    }

    /* --- Example Box --- */
    .example-box {
        padding: 0.75rem 0.9rem !important;
        margin: 0.75rem 0 !important;
    }

    .example-title {
        font-size: 0.9rem !important;
    }

    /* --- Prerequisites Notice --- */
    .prereq-notice {
        flex-direction: column !important;
        text-align: center !important;
        padding: 0.9rem !important;
        gap: 0.5rem !important;
    }

    .prereq-notice-icon {
        font-size: 1.25rem !important;
    }

    .prereq-notice-text {
        font-size: 0.85rem !important;
    }

    /* --- Concept Tags --- */
    .concept-tags {
        gap: 0.4rem !important;
    }

    .concept-tag {
        padding: 0.4rem 0.7rem !important;
        font-size: 0.75rem !important;
    }

    /* --- Progress Bar --- */
    .progress-bar {
        height: 8px !important;
    }

    .progress-text {
        font-size: 0.8rem !important;
    }

    /* --- Highlight Text --- */
    .highlight {
        padding: 0.1rem 0.3rem !important;
        font-size: inherit !important;
    }

    code {
        font-size: 0.8rem !important;
        padding: 0.15rem 0.35rem !important;
    }

    /* ===========================================
       BUTTONS (44px minimum touch targets)
       =========================================== */

    .btn, .nav-btn, .action-btn {
        min-height: 48px !important;
        padding: 0.85rem 1.25rem !important;
        font-size: 0.9rem !important;
        border-radius: 10px !important;
    }

    .nav-buttons, .actions {
        flex-direction: column !important;
        gap: 0.6rem !important;
        margin-top: 1.5rem !important;
    }

    .nav-btn, .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* --- Completion Section --- */
    .completion {
        padding: 1.5rem 1rem !important;
    }

    .completion-title {
        font-size: 1.5rem !important;
    }

    .xp-gain {
        font-size: 1.25rem !important;
    }

    /* --- Footer --- */
    footer {
        padding: 1.25rem 1rem !important;
        font-size: 0.8rem !important;
        margin-top: 2rem !important;
    }

    footer a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }
}

/* ===========================================
   EXTRA SMALL SCREENS (max-width: 400px)
   =========================================== */
@media (max-width: 400px) {
    .container {
        padding: 0.75rem !important;
    }

    h1 {
        font-size: 1.35rem !important;
    }

    h2, .goal-title {
        font-size: 1.15rem !important;
    }

    .grades-grid, .grade-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .grade-card, .grade-btn {
        padding: 0.75rem 0.4rem !important;
        min-height: 70px;
    }

    .grade-num {
        font-size: 1.5rem !important;
    }

    .path-card, .lesson-card {
        padding: 0.85rem !important;
    }

    .scratch-block {
        font-size: 0.65rem !important;
        padding: 0.3rem 0.5rem !important;
    }

    .code-block {
        font-size: 0.7rem !important;
        padding: 0.6rem !important;
    }

    .steps-list li {
        padding-left: 2.5rem !important;
        font-size: 0.8rem !important;
    }

    .steps-list li::before {
        width: 1.4rem !important;
        height: 1.4rem !important;
        font-size: 0.7rem !important;
    }

    .quiz-option, .option {
        padding: 0.75rem 0.6rem !important;
        font-size: 0.8rem !important;
    }

    .btn, .nav-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
    }

    .goal-icon, .completion-icon {
        font-size: 2.5rem !important;
    }

    .header-icon, .logo-icon {
        font-size: 2rem !important;
    }
}

/* ===========================================
   LANDSCAPE ORIENTATION ON PHONES
   =========================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .lesson-header, .header, .goal-section {
        padding: 1rem !important;
    }

    .goal-icon, .header-icon {
        font-size: 2rem !important;
    }

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

    .grades-grid, .grade-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

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

/* ===========================================
   TABLET OPTIMIZATIONS (769px - 1024px)
   =========================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 1.5rem !important;
    }

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

    .grades-grid, .grade-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    h1 {
        font-size: 2rem !important;
    }
}

/* ===========================================
   TOUCH DEVICE IMPROVEMENTS
   =========================================== */
@media (hover: none) and (pointer: coarse) {
    /* Better touch feedback */
    .path-card:active,
    .lesson-card:active,
    .grade-btn:active,
    .grade-card:active,
    .quiz-option:active,
    .option:active,
    .nav-btn:active,
    .action-btn:active,
    .btn:active,
    .concept-tag:active,
    .hint-toggle:active {
        transform: scale(0.98);
        opacity: 0.85;
    }

    /* Remove hover effects that cause sticky states on touch */
    .path-card:hover,
    .lesson-card:hover,
    .grade-btn:hover,
    .option:hover {
        transform: none;
    }

    /* Ensure all interactive elements are touch-friendly */
    a, button, .option, .quiz-option, .hint-toggle, .step {
        -webkit-tap-highlight-color: rgba(139, 92, 246, 0.2);
    }
}

/* ===========================================
   SAFE AREA FOR NOTCHED PHONES
   =========================================== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .container {
            padding-left: max(1rem, env(safe-area-inset-left)) !important;
            padding-right: max(1rem, env(safe-area-inset-right)) !important;
        }

        footer {
            padding-bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
        }

        .nav-buttons, .actions {
            padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        }
    }
}

/* ===========================================
   ACCESSIBILITY: 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;
    }
}

/* ===========================================
   PRINT STYLES (bonus)
   =========================================== */
@media print {
    .nav-bar, .nav-buttons, .actions, .progress-steps,
    .hint-box, footer {
        display: none !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .section {
        display: block !important;
        page-break-inside: avoid;
    }

    body {
        background: white !important;
        color: black !important;
    }
}