/* ============================================================
   FEHRINGER DIGITAL — MOBILE-FIRST STYLESHEET
   Base styles for 375px, enhanced at 640px, 768px, 1024px
   ============================================================ */

/* ── BASE RESET ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
}

/* ── TYPOGRAPHY SCALE (mobile-first) ─────────────────────── */
body {
    font-size: 16px;
    line-height: 1.6;
}

h1 {
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.3;
}

/* ── TABLET (640px+) ──────────────────────────────────────── */
@media (min-width: 640px) {
    h1 { font-size: 2.75rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
}

/* ── DESKTOP (1024px+) ────────────────────────────────────── */
@media (min-width: 1024px) {
    body { font-size: 17px; }
    h1 { font-size: 4.5rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 1.75rem; }
}

/* ── IMAGES ───────────────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── LAYOUT CONTAINERS ────────────────────────────────────── */
.container {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
    .container { max-width: 1280px; padding-left: 2rem; padding-right: 2rem; }
}

/* ── TAP TARGETS ──────────────────────────────────────────── */
a, button, input[type="submit"], input[type="button"],
label[for], select, [role="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* ── FORMS ────────────────────────────────────────────────── */
input, textarea, select {
    font-size: 16px;
    width: 100%;
    max-width: 100%;
}

/* ── GRID COLLAPSE ────────────────────────────────────────── */
@media (max-width: 639px) {
    .grid {
        grid-template-columns: 1fr !important;
    }

    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .md\:grid-cols-4,
    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .lg\:grid-cols-12 {
        grid-template-columns: 1fr !important;
    }

    .md\:flex-row {
        flex-direction: column !important;
    }

    .md\:p-12, .md\:p-16, .md\:p-20 {
        padding: 1.25rem !important;
    }

    .md\:px-16, .md\:px-20 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-20, .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ── NAVIGATION ───────────────────────────────────────────── */
@media (max-width: 767px) {
    .site-nav-inner {
        padding: 0.875rem 1rem;
    }

    .site-nav-logo img {
        height: 2.5rem;
    }
}

/* ── CARDS & SECTIONS ─────────────────────────────────────── */
@media (max-width: 639px) {
    .tech-card {
        border-radius: 1rem !important;
        padding: 1.25rem !important;
    }

    .rounded-\[2\.5rem\] {
        border-radius: 1rem !important;
    }

    .rounded-\[2rem\] {
        border-radius: 1rem !important;
    }
}

/* ── HERO TEXT ────────────────────────────────────────────── */
@media (max-width: 639px) {
    .text-7xl  { font-size: 2.5rem !important; line-height: 1.1 !important; }
    .text-6xl  { font-size: 2.25rem !important; line-height: 1.1 !important; }
    .text-5xl  { font-size: 2rem !important; line-height: 1.15 !important; }
    .text-4xl  { font-size: 1.75rem !important; line-height: 1.2 !important; }
    .text-3xl  { font-size: 1.5rem !important; line-height: 1.25 !important; }
    .text-2xl  { font-size: 1.25rem !important; }
    .text-xl   { font-size: 1.1rem !important; }
}

/* ── MONO/LABEL TEXT ──────────────────────────────────────── */
@media (max-width: 639px) {
    .font-mono  { font-size: 13px !important; }
    .text-xs    { font-size: 12px !important; }
    .text-sm    { font-size: 14px !important; }
    .tracking-widest { letter-spacing: 0.05em !important; }
}

/* ── BUTTONS ──────────────────────────────────────────────── */
@media (max-width: 639px) {
    .btn-primary, [class*="bg-blue-6"] {
        width: 100%;
        text-align: center;
        padding: 0.875rem 1.5rem !important;
    }
}

/* ── PREVENT HORIZONTAL OVERFLOW ─────────────────────────── */
@media (max-width: 639px) {
    * {
        max-width: 100vw;
    }

    pre, code, table {
        overflow-x: auto;
    }
}

/* ── INTAKE FORM MOBILE ───────────────────────────────────── */
@media (max-width: 639px) {
    .wizard-header svg {
        width: 80px !important;
        height: 80px !important;
    }

    .voice-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .accordion-header {
        min-height: 56px;
        padding: 1rem !important;
    }

    .wizard-nav {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .wizard-next, .wizard-back {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ── CHASSIS CLIENT SITES ─────────────────────────────────── */
@media (max-width: 639px) {
    .hero-img {
        max-height: 240px !important;
        border-radius: 1rem !important;
    }

    .owner-img {
        width: 70px !important;
        height: 70px !important;
    }

    .stat-card {
        padding: 1rem !important;
    }
}

/* ── AUDIT TOOL MOBILE ────────────────────────────────────── */
@media (max-width: 639px) {
    #myke-panel {
        width: calc(100vw - 2rem) !important;
        right: 1rem !important;
    }
}

/* ── H1 SPAN FONT SIZE FIX ───────────────────────────────── */
/* Forces colored accent spans inside H1 to match parent size */
h1 span,
h1 span[class],
h1 > span,
h2 span,
h2 > span {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    display: inline !important;
}

/* Tailwind text size class override inside headings */
h1 [class*="text-"],
h2 [class*="text-"] {
    font-size: inherit !important;
}