/**
 * Mobile Responsive Fixes - Week 2 P1 Improvements
 * Ensures all text meets WCAG minimum 14px on mobile devices
 * Target: iPhone SE (375px), iPhone 12 (390px), small Android phones
 */

/* ========================================
   MOBILE TEXT SIZE FIXES (< 640px)
   WCAG AA: Minimum 14px for readability
   ======================================== */

@media (max-width: 640px) {
    /* Body text baseline */
    body {
        font-size: 14px !important; /* Enforce minimum */
        line-height: 1.6;
    }

    /* Company card elements */
    .company-card {
        font-size: 14px;
    }

    .company-name {
        font-size: 1.125rem !important; /* 18px - readable company names */
        line-height: 1.3;
    }

    .company-info,
    .company-description,
    .description-text {
        font-size: 14px !important; /* Up from 13px */
        line-height: 1.6;
    }

    .company-country,
    .company-location {
        font-size: 14px !important; /* Up from 12px */
        line-height: 1.4;
    }

    .company-meta,
    .company-card-meta {
        font-size: 13px !important; /* Up from 11px - acceptable for meta */
        line-height: 1.4;
    }

    .company-category,
    .category-badge {
        font-size: 13px !important; /* Up from 11px */
        padding: 4px 10px; /* Slightly larger for touch */
    }

    /* Stats section */
    .stat-card {
        padding: 1rem;
    }

    .stat-number {
        font-size: 1.75rem !important; /* 28px - clear on small screens */
    }

    .stat-label {
        font-size: 14px !important; /* Up from 12px */
        line-height: 1.3;
    }

    /* Filter controls */
    #searchInput,
    #categoryFilter,
    #countryFilter,
    #qubitTypeFilter,
    #entityTypeFilter,
    select,
    input[type="text"],
    input[type="search"] {
        font-size: 16px !important; /* iOS requires 16px to prevent zoom */
        padding: 12px 16px;
        height: auto;
        min-height: 44px; /* WCAG touch target */
    }

    /* Buttons */
    button,
    .clear-filters-btn,
    .filter-btn {
        font-size: 14px !important;
        padding: 12px 20px;
        min-height: 44px; /* WCAG touch target */
    }

    /* Footer elements */
    .footer-description,
    .footer-text {
        font-size: 14px !important; /* Up from 13px */
        line-height: 1.6;
    }

    .footer-copyright,
    .footer-bottom {
        font-size: 13px !important; /* Acceptable for footer */
    }

    .footer-stat,
    .footer-stats span {
        font-size: 14px !important;
    }

    .footer-link {
        font-size: 14px !important;
        padding: 8px 0; /* Easier to tap */
        min-height: 44px; /* WCAG touch target */
        display: flex;
        align-items: center;
    }

    /* Featured companies */
    .featured-company-name {
        font-size: 1.125rem !important; /* 18px */
    }

    .featured-company-description {
        font-size: 14px !important; /* Up from 13px */
        line-height: 1.6;
    }

    .featured-company-location,
    .featured-company-founded {
        font-size: 14px !important; /* Up from 12px */
    }

    .featured-company-tag {
        font-size: 13px !important; /* Up from 11px */
        padding: 4px 10px;
    }

    /* Navigation */
    nav a,
    .nav-link {
        font-size: 14px !important;
        padding: 12px 16px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Breadcrumbs */
    .breadcrumb,
    .breadcrumb a {
        font-size: 14px !important;
    }

    /* Pagination */
    .pagination-btn,
    .pagination-page {
        font-size: 14px !important;
        padding: 10px 16px;
        min-height: 44px;
        min-width: 44px;
    }

    .pagination-info {
        font-size: 14px !important;
    }

    /* Tables (for insights page) */
    table {
        font-size: 14px !important;
    }

    th, td {
        font-size: 14px !important;
        padding: 12px 8px;
    }

    /* Headers */
    h1 {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.3;
    }

    h3 {
        font-size: 1.25rem !important; /* 20px */
        line-height: 1.3;
    }

    h4 {
        font-size: 1.125rem !important; /* 18px */
    }

    /* Subtitle / lead text */
    .subtitle,
    .lead,
    .intro-text {
        font-size: 1rem !important; /* 16px */
        line-height: 1.6;
    }

    /* Small text (acceptable at 13px for meta/supporting info) */
    small,
    .text-small,
    .meta-text {
        font-size: 13px !important; /* Minimum for small supporting text */
    }

    /* Tooltips and hints */
    .tooltip,
    .hint,
    .help-text {
        font-size: 13px !important;
    }
}

/* ========================================
   EXTRA SMALL DEVICES (iPhone SE: 375px)
   ======================================== */

@media (max-width: 375px) {
    /* Ensure nothing drops below 14px even on smallest screens */
    * {
        font-size: inherit; /* Inherit from parent, which is 14px minimum */
    }

    /* Slightly reduce padding to fit content */
    .company-card {
        padding: 1rem;
    }

    /* Maintain readability */
    .company-info,
    .description-text {
        font-size: 14px !important;
        line-height: 1.7; /* Extra line height for comfort */
    }

    /* Featured companies grid */
    .featured-companies-grid {
        grid-template-columns: 1fr !important; /* Single column */
        gap: 1rem;
    }

    /* Stats grid */
    .stats {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns */
        gap: 0.75rem;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .stat-number {
        font-size: 1.5rem !important; /* 24px - still readable */
    }
}

/* ========================================
   MEDIUM DEVICES (Tablets: 641px - 1024px)
   ======================================== */

@media (min-width: 641px) and (max-width: 1024px) {
    /* Comfortable reading on tablets */
    body {
        font-size: 15px;
    }

    .company-card {
        font-size: 15px;
    }

    /* Featured companies - 2 columns on tablets */
    .featured-companies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Stats - 3 columns */
    .stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   TOUCH TARGET IMPROVEMENTS
   WCAG 2.1: Minimum 44x44px for touch
   ======================================== */

@media (max-width: 1024px) {
    /* All interactive elements */
    button,
    a:not(.company-card),
    select,
    input,
    .filter-btn,
    .pagination-btn,
    .pagination-page,
    .expand-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }

    /* Company cards - larger touch area */
    .company-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Links with underlines */
    a {
        /* Increase clickable area with padding */
        padding: 4px 2px;
        margin: -4px -2px;
    }

    /* Filter dropdowns */
    select {
        padding: 12px 16px;
        min-height: 48px; /* Slightly larger for dropdowns */
        background-position: right 12px center;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

@media (max-width: 640px) {
    /* Screen reader text */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* Skip to content link */
    .skip-to-content {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--accent-orange);
        color: white;
        padding: 12px 20px;
        z-index: 100;
        font-size: 16px;
        text-decoration: none;
    }

    .skip-to-content:focus {
        top: 0;
    }

    /* Focus indicators - more visible on mobile */
    *:focus-visible {
        outline: 3px solid var(--accent-orange) !important;
        outline-offset: 3px;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 640px) {
    /* Reduce animations on slow devices */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Optimize for dark mode (battery saving on OLED) */
    @media (prefers-color-scheme: dark) {
        body {
            background: #000000; /* Pure black for OLED */
        }
    }
}