/**
 * Mobile Accessibility Fixes - Bitcoin Sovereign Academy
 * 
 * Critical fixes for mobile usability:
 * - Minimum 16px fonts to prevent zoom
 * - 44px minimum touch targets
 * - Improved text contrast
 * - Better responsive spacing
 */

/* ========================================
   MOBILE TYPOGRAPHY FIXES
   ======================================== */

/* Prevent zoom on iOS by ensuring minimum 16px font size */
@media (max-width: 768px) {
    /* Override any fonts smaller than 16px */
    * {
        font-size: max(1rem, 16px) !important;
    }
    
    /* Specific overrides for small text elements */
    .small, .text-sm, .caption, .meta, .badge {
        font-size: max(0.875rem, 14px) !important;
    }
    
    /* Ensure readable line height */
    body, p, li, .text-content {
        line-height: 1.6 !important;
    }
    
    /* Improve text contrast */
    .text-dim, .text-secondary {
        color: #c0c0c0 !important; /* Better contrast than #b3b3b3 */
    }
}

/* ========================================
   TOUCH TARGET IMPROVEMENTS
   ======================================== */

/* Ensure all interactive elements meet 44px minimum */
@media (max-width: 768px) {
    a, button, input, select, textarea,
    .btn, .nav-link, .path-card, .feature-card,
    .quiz-option, .choice-card, .module-card {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: max(var(--space-3), 12px) max(var(--space-4), 16px) !important;
    }
    
    /* Small buttons need more padding */
    .btn-sm, .quick-btn, .chip {
        min-height: 40px !important;
        padding: 10px 16px !important;
    }
    
    /* Navigation links */
    .nav-link {
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Form elements */
    input, select, textarea {
        padding: 16px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }
}

/* ========================================
   MOBILE LAYOUT IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Reduce overall padding to maximize content space */
    .container {
        padding: var(--space-4) var(--space-4) !important;
    }
    
    /* Header adjustments */
    .header {
        padding: var(--space-3) 0 !important;
    }
    
    .header-content {
        padding: 0 var(--space-4) !important;
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .logo-text {
        font-size: 1.1rem !important;
    }
    
    /* Navigation improvements */
    .nav-links {
        width: 100%;
        background: var(--color-bg-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        margin-top: var(--space-3);
    }
    
    .nav-dropdown .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        padding: var(--space-2) 0 !important;
    }
    
    /* Path cards mobile layout */
    .path-cards-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
        padding: 0 !important;
    }
    
    .path-card {
        padding: var(--space-6) var(--space-5) !important;
        margin: 0 !important;
    }
    
    .path-icon {
        font-size: 2.5rem !important;
    }
    
    /* Module content spacing */
    .module-content {
        padding: var(--space-4) !important;
    }
    
    /* Reduce section spacing on mobile */
    .section {
        padding: var(--space-12) 0 !important;
    }
    
    /* Hero adjustments */
    .hero3d, .hero-header {
        padding: var(--space-16) var(--space-4) var(--space-12) !important;
    }
    
    .hero3d__title, .hero h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }
    
    .hero3d__subtitle, .hero-tagline {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }
}

/* ========================================
   IMPROVED READABILITY
   ======================================== */

@media (max-width: 768px) {
    /* Better paragraph spacing */
    p {
        margin-bottom: var(--space-5) !important;
    }
    
    /* List improvements */
    ul, ol {
        padding-left: var(--space-6) !important;
        margin-bottom: var(--space-5) !important;
    }
    
    li {
        margin-bottom: var(--space-2) !important;
        line-height: 1.6 !important;
    }
    
    /* Headings spacing */
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: var(--space-4) !important;
        margin-top: var(--space-8) !important;
        line-height: 1.3 !important;
    }
    
    h1:first-child, h2:first-child, h3:first-child {
        margin-top: 0 !important;
    }
    
    /* Quiz and interaction improvements */
    .quiz-container, .demo-container, .interactive-section {
        padding: var(--space-5) !important;
        margin: var(--space-6) 0 !important;
        border-radius: var(--radius-lg) !important;
    }
    
    .quiz-option {
        padding: var(--space-4) !important;
        margin-bottom: var(--space-3) !important;
        font-size: 16px !important;
    }
    
    /* Cards and modules */
    .card, .module-card, .stage-card {
        padding: var(--space-5) !important;
        margin-bottom: var(--space-5) !important;
    }
}

/* ========================================
   NAVIGATION AND SCROLLING
   ======================================== */

@media (max-width: 768px) {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Fixed elements should not overlap content */
    .progress-tracker {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        margin-bottom: var(--space-6) !important;
        border-radius: var(--radius-lg) !important;
    }
    
    /* Module navigation */
    .module-navigation, .module-nav {
        flex-direction: column !important;
        gap: var(--space-4) !important;
        padding: var(--space-6) var(--space-4) !important;
    }
    
    .nav-btn {
        width: 100% !important;
        text-align: center !important;
        padding: var(--space-4) var(--space-6) !important;
        font-size: 16px !important;
    }
    
    /* Back button improvements */
    .back-button {
        padding: var(--space-3) var(--space-5) !important;
        font-size: 16px !important;
        margin-bottom: var(--space-6) !important;
    }
}

/* ========================================
   INTERACTIVE ELEMENTS MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Demo controls */
    .demo-controls {
        padding: var(--space-4) !important;
    }
    
    .control-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-2) !important;
    }
    
    .control-row label {
        margin-bottom: var(--space-2) !important;
        font-size: 16px !important;
    }
    
    .control-row input[type="range"] {
        height: 44px !important; /* Larger touch target for sliders */
    }
    
    /* Form improvements */
    .form-group {
        margin-bottom: var(--space-5) !important;
    }
    
    .form-group label {
        font-size: 16px !important;
        margin-bottom: var(--space-3) !important;
    }
    
    /* Stats and metrics */
    .stats-grid, .data-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }
    
    .stat-card, .data-card {
        padding: var(--space-5) !important;
        text-align: center;
    }
    
    .stat-value, .data-value {
        font-size: 2rem !important;
    }
    
    /* Timeline mobile fixes */
    .timeline::before {
        left: var(--space-6) !important;
    }
    
    .timeline-item {
        flex-direction: column !important;
        padding-left: var(--space-16) !important;
    }
    
    .timeline-number {
        left: var(--space-6) !important;
        transform: translate(-50%, 0) !important;
    }
    
    .timeline-content {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Focus indicators */
    *:focus {
        outline: 3px solid var(--color-primary) !important;
        outline-offset: 2px !important;
    }
    
    /* Skip links */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 6px;
        background: var(--color-primary);
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        border-radius: 4px;
        z-index: 10000;
        font-size: 16px;
        transition: top var(--transition-fast);
    }
    
    .skip-link:focus {
        top: 6px;
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        * {
            border-color: white !important;
        }
        
        .text-dim, .text-secondary {
            color: white !important;
        }
        
        .bg-secondary {
            background: #000 !important;
            border: 2px solid white !important;
        }
    }
    
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ========================================
   LIVE STATS BAR MOBILE
   ======================================== */

@media (max-width: 768px) {
    .live-stats-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-3) !important;
        padding: var(--space-4) !important;
        text-align: center;
    }
    
    .live-stat {
        font-size: 0.9rem !important;
        min-height: 44px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .live-stat .label {
        font-size: 0.8rem !important;
        margin-bottom: var(--space-1) !important;
    }
    
    .live-stat .value {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }
}

/* ========================================
   EMERGENCY FIXES FOR CURRENT ISSUES
   ======================================== */

@media (max-width: 768px) {
    /* Fix any elements that are too small */
    .small-text, .tiny, .micro {
        font-size: 14px !important;
    }
    
    /* Fix overlapping elements */
    .fixed, .sticky {
        position: relative !important;
    }
    
    /* Fix horizontal scroll issues */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix tables on mobile */
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    /* Fix images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix pre/code blocks */
    pre, code {
        overflow-x: auto !important;
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
    }
}