/* ============================================
   Q FACTOR - SHARED MOBILE STYLES
   Version: 2.0 | 2026-01-14
   Based on QFACTOR_UI_STANDARDS_COMPLETE.md
   ============================================ */

/* Mobile Detection Classes */
.show-mobile { display: none; }
.hide-mobile { display: block; }
.hide-desktop { display: block; }

@media (min-width: 769px) {
    .show-mobile { display: none !important; }
    .hide-mobile { display: flex !important; }
    .hide-desktop { display: none !important; }
}

/* ============================================
   MOBILE OVERRIDES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    .show-mobile { display: block !important; }
    .hide-mobile { display: none !important; }
    .hide-desktop { display: flex !important; }

    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* ==========================================
       HEADER - Match stocks-mobile.html
       ========================================== */
    .header, header {
        padding: 0 !important;
    }

    .header-content, .header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 56px !important;
        padding: 0 16px !important;
    }


    /* Detail pages (analysis) - two-row header with back link */
    .header--detail .header-inner {
        flex-direction: column !important;
        height: auto !important;
        padding: 12px 16px !important;
        gap: 8px !important;
    }

    .header--detail .header-top {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .header--detail .nav-links {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Logo - left side, single row */
    .logo {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .logo-mark {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 1rem !important;
    }

    .logo-text {
        font-size: 1rem !important;
    }

    .logo-tagline {
        display: none !important;
    }

    /* Auth container - right side, inline */
    #authContainer {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: auto !important;
    }

    /* Hide auth buttons on mobile */
    #authContainer .auth-btn,
    #authContainer a.auth-btn,
    #authContainer #createAccountBtn,
    #authContainer #authBtn,
    #authContainer > a[href="/signup.html"],
    #authContainer > a[href="/login.html"] {
        display: none !important;
    }

    /* Hide user initials on mobile */
    #authContainer #userInitials {
        display: none !important;
    }

    /* Show hamburger */
    .btn-hamburger,
    .btn-hamburger.hide-desktop,
    button.hide-desktop {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        padding: 8px !important;
        cursor: pointer !important;
        color: var(--text-primary, #f4f4f5) !important;
    }

    /* ==========================================
       TYPOGRAPHY - Per UI Guidelines
       H1: 28px (1.75rem)
       H2: 24px (1.5rem)
       H3: 20px (1.25rem)
       H4: 17.6px (1.1rem)
       Body: 16px (1rem) - NEVER SMALLER
       ========================================== */
    h1, .page-title {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    h2 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
    }

    .hero-title, .section-title {
        font-size: 1.75rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    /* ==========================================
       CONTAINERS
       ========================================== */
    .container, main, .content {
        padding: 0 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ==========================================
       BREADCRUMB
       ========================================== */
    .breadcrumb {
        font-size: 0.875rem !important;
        padding: 12px 16px !important;
    }

    /* ==========================================
       FORMS
       ========================================== */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    button, .btn, input[type="submit"] {
        min-height: 44px !important;
    }

    /* ==========================================
       FOOTER
       ========================================== */
    footer .grid, .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 24px !important;
    }

    .footer-links ul {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 16px !important;
    }
    }

    /* ==========================================
       FOOTER - Center aligned on mobile
       ========================================== */
    footer, .footer,
    footer p, footer div {
        text-align: center !important;
    }

    /* Override inline footer-bottom styles */
    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .footer-bottom p {
        text-align: center !important;
        width: 100% !important;
    }
}

/* Ensure footer text uses text-muted consistently */
.footer-disclaimer p { color: var(--text-tertiary) !important; }
.footer-disclaimer-OLD p,
.footer-bottom p {
    color: var(--text-tertiary) !important;
}
.footer-bottom a {
    color: var(--text-tertiary) !important;
}
.footer-bottom a:hover {
    color: var(--accent-gold) !important;
}
.footer-disclaimer strong {
    color: var(--accent-gold) !important;
}

/* Index page - pricing cards stack on mobile */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        padding: 0 16px !important;
    }
    
    /* Hero card smaller on mobile */
    .hero-visual,
    .hero-score-card {
        transform: scale(0.85) !important;
        transform-origin: top center !important;
    }
}

/* ============================================

/* ============================================
   INDEX PAGE - Mobile Overrides
   ============================================ */
@media (max-width: 768px) {
    /* Pricing cards - stack vertically */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 16px !important;
    }
    
    /* Hero section - prevent overflow */
    .hero-visual {
        width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }
    
    .hero-score-card {
        max-width: 100% !important;
        width: 100% !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent text cutoff */
    .hero-text,
    .hero-text p {
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix body overflow */
    body, html {
        overflow-x: hidden !important;
    }
}

/* Footer disclaimer text - ensure readable */
.footer-disclaimer p {
    color: var(--text-tertiary) !important;
    opacity: 1 !important;
}