/* ============================================
   Mobile Responsive Fixes — All Pages
   Priority: Typography, Touch Targets, Spacing
   Applied AFTER inline <style> to override.

   IMPORTANT: Touch-target and display overrides
   are scoped to mobile via @media (max-width: 768px).
   Do NOT apply display:inline-flex globally — it
   breaks page-specific button/link layouts.
   ============================================ */

/* ─── GLOBAL TYPOGRAPHY (all viewports) ───────────────────────────── */

body {
    font-size: 16px; /* Minimum 16px avoids iOS auto-zoom */
    line-height: 1.5;
}

/* ─── HEADINGS — responsive clamp (all viewports) ─────────────────── */

h1 {
    font-size: clamp(1.75rem, 5vw, 6rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.25rem, 4vw, 2.2rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.1rem, 3vw, 1.75rem);
    line-height: 1.3;
}

/* ─── PREVENT HORIZONTAL SCROLL (all viewports) ──────────────────── */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

img, video, iframe, .iframe-container {
    max-width: 100%;
    height: auto;
}

/* ─── FORM INPUT FONT (all viewports — prevents iOS zoom) ────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-size: 16px; /* Avoid iOS zoom on input focus */
}

/* ================================================================== */
/* ─── MOBILE-ONLY RULES (max-width: 768px) ────────────────────────── */
/* ================================================================== */

@media (max-width: 768px) {

    /* ── Container padding ──────────────────────────────────────────── */
    .container {
        padding: 0 16px;
    }

    /* ── Touch targets — 44×44px minimum ────────────────────────────── */
    /* Only min-height/padding — do NOT override display property */

    a, button, .btn, input[type="button"], input[type="submit"],
    [role="button"], .clickable, [onclick] {
        min-height: 44px;
    }

    /* Buttons */
    .nav-cta, .btn-primary, .btn-secondary, .btn-signin,
    button, input[type="button"], input[type="submit"] {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 1rem;
    }

    /* Links — keep their display property, only add min-height */
    a[href], nav a {
        min-height: 44px;
    }

    nav a {
        padding: 12px 8px;
    }

    /* Form controls */
    input, textarea, select {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }

    input[type="checkbox"], input[type="radio"] {
        min-width: 24px !important;
        min-height: 24px !important;
        margin-right: 8px;
    }

    /* ── Card text — minimum 14px ───────────────────────────────────── */
    .card-text, .card-description, .card-body {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .caption, .label, .small-text, .fine-print, small {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* ── Spacing & Padding ──────────────────────────────────────────── */
    section { margin-bottom: 48px; }

    /* ── Button groups ──────────────────────────────────────────────── */
    .cta-group, .button-group, .button-row,
    .hero-cta-group {
        gap: 12px;
        flex-direction: column;
    }

    .cta-group a, .cta-group button, .button-group a, .button-group button {
        width: 100%;
        justify-content: center;
    }

    .hero-cta-group { flex-direction: column; }
    .hero-cta { width: 100%; }

    /* ── Nav / Header ───────────────────────────────────────────────── */
    nav .logo {
        font-size: 1.2rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    nav .nav-links a {
        min-height: 48px;
        padding: 12px 8px;
        font-size: 1rem;
    }

    nav .nav-cta {
        min-height: 48px;
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
        width: 100%;
        justify-content: center;
    }

    nav button[aria-label] {
        min-height: 48px;
        min-width: 48px;
        padding: 8px;
    }

    /* ── Form elements ──────────────────────────────────────────────── */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        min-height: 44px;
        padding: 12px 16px;
        width: 100%;
        max-width: 100%;
    }

    textarea {
        min-height: 80px;
        resize: vertical;
    }

    label {
        display: block;
        margin-bottom: 8px;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
    }

    .form-group {
        margin-bottom: 20px;
    }

    /* ── Microphone buttons ─────────────────────────────────────────── */
    .btn-mic, [class*="mic"], [class*="voice"], button[aria-label*="mic"],
    button[aria-label*="voice"], button[aria-label*="parler"] {
        min-height: 52px !important;
        min-width: 52px !important;
        padding: 12px !important;
        font-size: 1.2rem;
        border-radius: 8px;
    }

    /* ── Tabs ───────────────────────────────────────────────────────── */
    .tab-nav, .tabs, [role="tablist"] {
        gap: 8px;
        flex-wrap: wrap;
    }

    .tab-nav button, [role="tab"] {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.95rem;
    }

    /* ── Page-specific ──────────────────────────────────────────────── */

    /* Forge */
    .forge-form input, .forge-form textarea, .forge-form select {
        font-size: 16px;
        min-height: 44px;
    }

    .forge-output, .result-box {
        padding: 16px;
        font-size: 1rem;
        line-height: 1.6;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Mentalisme */
    .mentalism-tabs { gap: 8px; }
    .mentalism-tabs button { min-height: 44px; padding: 10px 16px; font-size: 0.95rem; }

    /* History/Magicians */
    .magician-card, .history-card, .figure-card {
        padding: 16px;
    }
    .magician-card h3, .history-card h3, .figure-card h3 {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    .magician-card p, .history-card p, .figure-card p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Show Builder */
    .show-builder-form input, .show-builder-form textarea, .show-builder-form select {
        font-size: 16px;
        min-height: 44px;
    }

    /* Auth pages */
    .login-form, .signup-form, .auth-form {
        max-width: 100%;
    }
    .login-form input, .signup-form input, .auth-form input {
        font-size: 16px;
        min-height: 44px;
        margin-bottom: 12px;
    }
    .login-form button, .signup-form button, .auth-form button {
        min-height: 48px;
        font-size: 1rem;
        width: 100%;
    }
}

/* ─── DESKTOP CONTAINER ──────────────────────────────────────────── */

@media (min-width: 769px) {
    .container {
        padding: 0 28px;
    }
}

/* ─── PRINT ──────────────────────────────────────────────────────── */

@media print {
    body { font-size: 12pt; }
    a { text-decoration: underline; }
}