/* ============================================
   MOBILE FONT FIX - FINAL SOLUTION
   This file MUST load LAST to properly override
   all conflicting font sizes on mobile devices
   ============================================ */

/* ===== MOBILE DEVICES (768px and below) ===== */
@media screen and (max-width: 768px) {
    
    /* ----- ROOT RESET ----- */
    /* Override fluid-typography root variables for mobile */
    :root {
        --fluid-base: 0.875rem !important;      /* 14px */
        --fluid-sm: 0.8125rem !important;       /* 13px */
        --fluid-md: 0.9375rem !important;       /* 15px */
        --fluid-lg: 1rem !important;            /* 16px */
        --fluid-xl: 1.125rem !important;        /* 18px */
        --fluid-2xl: 1.25rem !important;        /* 20px */
        --fluid-3xl: 1.5rem !important;         /* 24px */
        --fluid-4xl: 1.75rem !important;        /* 28px */
        --fluid-5xl: 2rem !important;           /* 32px */
        --fluid-6xl: 2.25rem !important;        /* 36px */
    }
    
    /* ----- BASE TYPOGRAPHY ----- */
    html {
        font-size: 14px !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    body {
        font-size: 0.9375rem !important;        /* 15px */
        line-height: 1.5 !important;
        overflow-x: hidden !important;
    }
    
    /* ----- HEADINGS ----- */
    h1, .h1 {
        font-size: 1.75rem !important;          /* 28px */
        line-height: 1.2 !important;
    }
    
    h2, .h2 {
        font-size: 1.5rem !important;           /* 24px */
        line-height: 1.25 !important;
    }
    
    h3, .h3 {
        font-size: 1.25rem !important;          /* 20px */
        line-height: 1.3 !important;
    }
    
    h4, .h4 {
        font-size: 1.125rem !important;         /* 18px */
    }
    
    h5, .h5, h6, .h6 {
        font-size: 1rem !important;             /* 16px */
    }
    
    /* ----- PARAGRAPHS ----- */
    p, .text-base {
        font-size: 0.9375rem !important;        /* 15px */
        line-height: 1.6 !important;
    }
    
    small, .text-sm {
        font-size: 0.8125rem !important;        /* 13px */
    }
    
    /* ----- HERO SECTION ----- */
    header {
        font-size: 1.75rem !important;          /* 28px */
    }
    
    .hero-title,
    .title-line {
        font-size: 1.75rem !important;          /* 28px */
        line-height: 1.2 !important;
        letter-spacing: 1px !important;
    }
    
    .subtitle {
        font-size: 0.875rem !important;         /* 14px */
        margin: 0.75rem 0 !important;
    }
    
    .tagline {
        font-size: 0.9375rem !important;        /* 15px */
        margin-bottom: 1.5rem !important;
    }
    
    /* ----- NAVIGATION ----- */
    .nav-logo {
        font-size: 1rem !important;             /* 16px */
    }
    
    .nav-link {
        font-size: 0.875rem !important;         /* 14px */
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap !important;
    }
    
    .nav-links {
        gap: 0.5rem !important;
    }
    
    /* Mobile menu open state */
    .nav-links.active .nav-link {
        font-size: 1.1rem !important;           /* 17.6px - larger for touch */
        padding: 0.75rem 1rem !important;
    }
    
    /* ----- BUTTONS ----- */
    button,
    .btn,
    .cta-btn,
    .cta-button,
    .action-btn,
    .preview-btn,
    .preview-btn-primary,
    .preview-btn-secondary {
        font-size: 0.875rem !important;         /* 14px */
        padding: 0.625rem 1.25rem !important;
        min-height: 44px !important;            /* Touch target */
    }
    
    .primary-cta,
    .secondary-cta {
        font-size: 0.875rem !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    /* ----- CARDS ----- */
    .app-card h3,
    .project h3,
    .project-content h3,
    .app-title {
        font-size: 1rem !important;             /* 16px */
        line-height: 1.3 !important;
    }
    
    .app-card p,
    .project p,
    .project-content p,
    .app-description {
        font-size: 0.875rem !important;         /* 14px */
        line-height: 1.5 !important;
    }
    
    .project-content .btn {
        font-size: 0.8125rem !important;        /* 13px */
        padding: 0.5rem 1rem !important;
    }
    
    /* ----- NEWS FEED ----- */
    .cosmic-news-title,
    .news-title-main {
        font-size: 1.5rem !important;           /* 24px */
    }
    
    .news-subtitle {
        font-size: 0.875rem !important;         /* 14px */
    }
    
    .news-category-btn {
        font-size: 0.8125rem !important;        /* 13px */
        padding: 0.5rem 0.875rem !important;
    }
    
    .news-content h3,
    .news-title {
        font-size: 0.9375rem !important;        /* 15px */
        line-height: 1.3 !important;
    }
    
    .news-summary {
        font-size: 0.8125rem !important;        /* 13px */
    }
    
    .news-time,
    .news-read-more {
        font-size: 0.75rem !important;          /* 12px */
    }
    
    /* News Modal */
    .modal-article-title {
        font-size: 1.25rem !important;          /* 20px */
    }
    
    .modal-article-summary {
        font-size: 0.9375rem !important;        /* 15px */
    }
    
    /* ----- HOLIDAY ELEMENTS ----- */
    .holiday-greeting {
        font-size: 0.75rem !important;          /* 12px */
    }
    
    .holiday-emoji {
        font-size: 1rem !important;             /* 16px */
    }
    
    .holiday-popup-title {
        font-size: 1.5rem !important;           /* 24px */
    }
    
    .holiday-popup-description {
        font-size: 0.9375rem !important;        /* 15px */
    }
    
    .holiday-popup-emoji {
        font-size: 3rem !important;             /* 48px */
    }
    
    .holiday-decoration {
        font-size: 1.75rem !important;          /* 28px */
    }
    
    /* ----- MODALS & POPUPS ----- */
    .modal-title,
    .preview-title {
        font-size: 1.25rem !important;          /* 20px */
    }
    
    .modal-body,
    .preview-description {
        font-size: 0.9375rem !important;        /* 15px */
        line-height: 1.6 !important;
    }
    
    .modal-date,
    .preview-date {
        font-size: 0.8125rem !important;        /* 13px */
    }
    
    .close-modal,
    .preview-close {
        font-size: 1.5rem !important;           /* 24px */
    }
    
    /* ----- VIDEO GALLERY ----- */
    .video-title {
        font-size: 1.125rem !important;         /* 18px */
    }
    
    .title-glow {
        font-size: 0.875rem !important;         /* 14px */
    }
    
    /* ----- AUTOPILOT PANEL ----- */
    .autopilot-control-panel.minimized .autopilot-title span {
        font-size: 0.875rem !important;         /* 14px */
    }
    
    .autopilot-control-panel.minimized .autopilot-title i {
        font-size: 1.25rem !important;          /* 20px */
    }
    
    /* ----- SEARCH ----- */
    .search-input,
    input[type="search"] {
        font-size: 0.9375rem !important;        /* 15px - prevents iOS zoom */
    }
    
    /* ----- COSMIC ELEMENTS ----- */
    .sparkle-icon {
        font-size: 1.5rem !important;           /* 24px */
    }
    
    .category-pill {
        font-size: 0.75rem !important;          /* 12px */
        padding: 0.375rem 0.75rem !important;
    }
    
    /* ----- FOOTER ----- */
    .footer-copyright {
        font-size: 0.875rem !important;         /* 14px */
    }
    
    .footer-tagline {
        font-size: 0.8125rem !important;        /* 13px */
    }
    
    .social-link {
        font-size: 1.25rem !important;          /* 20px */
    }
    
    /* ----- DONATION ----- */
    .donation-text h3 {
        font-size: 1.375rem !important;         /* 22px */
    }
    
    .donation-text p {
        font-size: 1rem !important;             /* 16px */
    }
    
    /* ----- BLOG ----- */
    .blog-post h3 {
        font-size: 1.125rem !important;         /* 18px */
    }
    
    .blog-post .date {
        font-size: 0.8125rem !important;        /* 13px */
    }
    
    .blog-post p {
        font-size: 0.9375rem !important;        /* 15px */
    }
    
    /* ----- AUTH DASHBOARD ----- */
    .dashboard-tab {
        font-size: 0.8125rem !important;        /* 13px */
    }
    
    /* ----- TAGS & BADGES ----- */
    .tag,
    .badge,
    .category-tag,
    .news-source,
    .news-fresh-badge,
    .app-badge {
        font-size: 0.6875rem !important;        /* 11px */
    }
    
    /* ----- ANNOUNCEMENTS ----- */
    .marquee-content {
        font-size: 0.75rem !important;          /* 12px */
    }
    
    .marquee-icon {
        font-size: 1rem !important;             /* 16px */
    }
    
    /* ----- PREVENT OVERFLOW ----- */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Prevent horizontal scroll from large text */
    .container,
    section,
    .section,
    main {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* ===== EXTRA SMALL DEVICES (480px and below) ===== */
@media screen and (max-width: 480px) {
    
    :root {
        --fluid-5xl: 1.75rem !important;        /* 28px */
        --fluid-6xl: 2rem !important;           /* 32px */
    }
    
    html {
        font-size: 13px !important;
    }
    
    h1, .h1,
    header,
    .hero-title,
    .title-line {
        font-size: 1.5rem !important;           /* 24px */
        letter-spacing: 0.5px !important;
    }
    
    h2, .h2 {
        font-size: 1.25rem !important;          /* 20px */
    }
    
    h3, .h3 {
        font-size: 1.125rem !important;         /* 18px */
    }
    
    .cosmic-news-title,
    .news-title-main {
        font-size: 1.25rem !important;          /* 20px */
    }
    
    .holiday-popup-title {
        font-size: 1.25rem !important;          /* 20px */
    }
    
    .holiday-popup-emoji {
        font-size: 2.5rem !important;           /* 40px */
    }
    
    .modal-title,
    .preview-title {
        font-size: 1.125rem !important;         /* 18px */
    }
    
    .nav-logo {
        font-size: 0.9375rem !important;        /* 15px */
    }
    
    .category-pill {
        font-size: 0.6875rem !important;        /* 11px */
        padding: 0.25rem 0.625rem !important;
    }
    
    .cta-btn,
    .primary-cta,
    .secondary-cta {
        font-size: 0.8125rem !important;        /* 13px */
        padding: 0.625rem 1rem !important;
    }
}

/* ===== ACCESSIBILITY & REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    body {
        font-size: 12pt !important;
    }
    
    h1 { font-size: 18pt !important; }
    h2 { font-size: 16pt !important; }
    h3 { font-size: 14pt !important; }
    p { font-size: 11pt !important; }
}