/* ============================================
   MetFix Mobile CSS Fixes
   Loaded on ALL pages for consistent mobile UX
   ============================================ */

/* === 1. BUTTON TOUCH TARGETS (44px minimum) === */
@media (max-width: 768px) {
    /* Tab buttons in modules 1-2 */
    .tab-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    /* Stage buttons in canvas modules 3-8 */
    .stage-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
        font-size: 0.75rem;
    }

    /* Nav buttons (prev/next/module list) */
    .nav-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Start buttons on index page */
    .start-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
    }

    /* Home link in module nav */
    .home-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer links */
    .footer-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 4px;
    }

    /* Control buttons in canvas modules */
    .control-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
    }

    /* Mobile overlay button */
    .mobile-overlay-btn {
        min-height: 44px;
        padding: 14px 28px;
    }

    /* Fullscreen button */
    .fullscreen-btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Modal close button */
    .modal-close {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
    }

    /* Auth bar buttons */
    #metfix-auth-bar button {
        min-height: 36px;
        min-width: 44px;
        padding: 6px 12px;
    }

    /* Gate overlay buttons */
    #metfix-gate-box .gate-signup-btn {
        min-height: 44px;
        padding: 14px 28px;
    }

    #metfix-gate-box .gate-login-link {
        min-height: 44px;
        padding: 10px;
        display: inline-flex;
        align-items: center;
    }

    /* Auth modal tabs */
    .auth-tab {
        min-height: 44px;
        padding: 10px;
    }

    /* Auth form submit buttons */
    .auth-form button[type="submit"] {
        min-height: 44px;
    }

    /* Lead capture form buttons */
    #metfix-lead-form button[type="submit"] {
        min-height: 44px;
    }

    /* Close button for lead capture */
    #metfix-lead-close {
        min-height: 44px;
        min-width: 44px;
    }
}

/* === 2. MOBILE NAVIGATION STACKING === */
@media (max-width: 400px) {
    /* Module nav stacks vertically on very small phones */
    .module-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px !important;
        gap: 8px !important;
    }

    .module-nav-left,
    .module-nav-center,
    .module-nav-right {
        justify-content: center !important;
        flex-wrap: wrap;
    }

    /* Prev/Next buttons go full width */
    .module-nav-right {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .module-nav-right .nav-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Stage nav scrollable horizontally */
    .stage-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .stage-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Tab nav scrollable horizontally */
    .tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        justify-content: flex-start !important;
    }

    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Index page modules stack */
    .modules {
        margin-left: 30px !important;
        margin-right: 5px !important;
    }

    /* Footer links stack */
    .footer-links {
        flex-direction: column;
        gap: 4px !important;
    }
}

/* === 3. WCAG COLOR CONTRAST FIXES === */

/* Footer links: #6e7681 -> #8b949e (4.5:1 on #0d1117) */
.footer-links a {
    color: #8b949e;
}

.footer-links a:hover {
    color: #58a6ff;
}

/* Footer copyright: #484f58 -> #8b949e for 4.5:1+ contrast */
.footer-copyright {
    color: #8b949e;
}

/* Footer copyright links */
.footer-copyright a {
    color: #8b949e;
}

/* Module meta text: #6e7681 -> #8b949e */
.module-meta {
    color: #8b949e;
}

/* Tool features: #6e7681 -> #8b949e */
.tool-feature {
    color: #8b949e;
}

/* Supporting note: #6e7681 -> #8b949e */
.supporting-note {
    color: #8b949e;
}

/* Author org: ensure readable */
.author-org a {
    color: #8b949e !important;
}

/* Legend text in canvas modules */
.legend-item {
    color: #b0bec5;
}

/* Control labels in canvas modules */
.control-group label {
    color: #b0bec5;
}

/* === 4. AUTH BAR Z-INDEX FIX (handled in auth.js) === */

/* === 5. LEAD CAPTURE LANDSCAPE FIX (handled in lead-capture.js) === */

/* === 8. FONT SIZE MINIMUM === */
@media (max-width: 768px) {
    /* Body text minimum 16px on mobile (prevents iOS auto-zoom) */
    body {
        font-size: 16px;
    }

    /* Paragraph text */
    p {
        font-size: 1rem;
    }

    /* Panel/tab content text */
    .panel p,
    .panel li,
    .tab-content p,
    .tab-content li {
        font-size: 0.95rem;
    }

    /* Explanation text in canvas modules */
    .explanation p {
        font-size: 0.95rem;
    }

    /* Key points and info boxes */
    .key-point,
    .info-box,
    .warning-box,
    .danger-box,
    .success-box {
        font-size: 0.95rem;
    }

    /* Form inputs 16px to prevent iOS zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* === 9. SAFE AREA INSETS (iPhone notch) === */

/* Fixed elements need safe area padding */
#metfix-auth-bar {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

/* Auth bar body padding accounts for safe area */
body.metfix-has-auth-bar {
    padding-top: calc(44px + env(safe-area-inset-top, 0px)) !important;
}

/* Bottom fixed elements need safe area */
#metfix-lead-overlay {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* Footer safe area */
.site-footer {
    padding-bottom: max(30px, calc(30px + env(safe-area-inset-bottom)));
}

/* Gate overlay safe area */
#metfix-gate-overlay {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Auth modal overlay safe area */
#metfix-auth-modal-overlay {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Module navigation (if fixed/sticky) */
@media (max-width: 768px) {
    .module-nav {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
}