/* ============================================================
   ThemeConverter — Global Mobile Responsive Stylesheet
   Loaded on every page after Tailwind to refine the
   mobile/tablet experience without touching page markup.
   ============================================================ */

/* --- Universal fixes --- */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, video, svg {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
    display: block;
}

/* Prevent iOS auto-zoom on input focus (font-size must be >=16px) */
@media (max-width: 640px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* --- Tap target sizing --- */
@media (max-width: 640px) {
    button,
    a.btn,
    .btn,
    [role="button"] {
        min-height: 44px;
    }
}

/* ============================================================
   AUTHORITY BAR / NAVBAR
   ============================================================ */
@media (max-width: 640px) {
    /* Header padding tight on small screens */
    header > div.max-w-7xl,
    header .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    header .h-16 {
        height: 3.5rem;
    }

    /* Authority bar text smaller on mobile */
    .bg-gradient-to-r.from-slate-900 .text-sm {
        font-size: 12px;
        line-height: 1.4;
    }

    /* Header brand logo block - tighten gap */
    header .gap-3 {
        gap: 0.5rem;
    }

    header .w-11.h-11 {
        width: 2.25rem;
        height: 2.25rem;
    }

    header span.text-lg {
        font-size: 1rem;
    }

    /* Mobile menu - tighter padding */
    #mobileMenu nav {
        padding: 1rem 1rem 1.25rem !important;
    }

    #mobileMenu a,
    #mobileMenu button {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        display: block;
    }
}

/* Dropdown nav - prevent overflow on mid-sized screens */
@media (min-width: 768px) and (max-width: 1023px) {
    #migrationMenu {
        width: 480px !important;
    }
}

/* ============================================================
   HOMEPAGE — Hero platform picker
   ============================================================ */
@media (max-width: 640px) {
    .hero-migration {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .hero-migration h1 {
        font-size: 1.875rem !important;
        line-height: 1.15 !important;
    }

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

    .platform-picker-btn,
    .platform-dest-box {
        min-height: 64px;
        padding: 12px 14px;
        gap: 10px;
    }

    .platform-logo-box {
        width: 38px;
        height: 38px;
    }

    .platform-picker-btn span.text-lg,
    .platform-dest-box span.text-lg {
        font-size: 1rem;
    }

    .platform-arrow-bridge svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* CTA buttons full width on mobile */
    .hero-migration a.px-8,
    .hero-migration button.px-8 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        font-size: 0.8rem;
    }

    /* Trust badge wraps cleanly */
    .hero-migration .inline-flex.items-center.gap-2\.5 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 0.75rem;
        line-height: 1.3;
        max-width: 100%;
    }
}

/* ============================================================
   GENERIC SECTIONS — sane padding and typography on mobile
   ============================================================ */
@media (max-width: 640px) {
    /* Section padding */
    section {
        padding-left: 0;
        padding-right: 0;
    }

    /* Generic container x-padding (Tailwind max-w-* wrappers) */
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Cap oversized headings */
    h1.text-5xl,
    h1.text-6xl,
    h1.text-7xl {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    h2.text-4xl,
    h2.text-5xl {
        font-size: 1.625rem !important;
        line-height: 1.2 !important;
    }

    h3.text-3xl,
    h3.text-4xl {
        font-size: 1.375rem !important;
        line-height: 1.25 !important;
    }

    /* Body copy line-height */
    p {
        line-height: 1.6;
    }
}

/* ============================================================
   GRIDS — collapse multi-column grids on mobile gracefully
   ============================================================ */
@media (max-width: 640px) {
    /* Anything declaring more than 2 cols should be 1 on mobile */
    .grid.grid-cols-3,
    .grid.grid-cols-4,
    .grid.grid-cols-5,
    .grid.grid-cols-6,
    .grid.sm\:grid-cols-3,
    .grid.sm\:grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* ============================================================
   MIGRATION DETAIL PAGES — tabs, calculator, FAQ
   ============================================================ */
@media (max-width: 640px) {
    /* Horizontally scrollable tab strip */
    .tab-strip,
    nav[role="tablist"],
    .flex.gap-2.border-b,
    .flex.gap-3.border-b {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .tab-btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* From → To badges wrap properly */
    .flex.items-center.justify-center.gap-4.flex-wrap > div {
        padding: 0.65rem 1rem !important;
    }

    .flex.items-center.justify-center.gap-4.flex-wrap .w-10.h-10 {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* Calculator: stack input row + result panel */
@media (max-width: 768px) {
    #price-estimator .grid,
    .price-estimator .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
@media (max-width: 768px) {
    /* Pricing tiers stack */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ============================================================
   TABLES — horizontal scroll instead of overflow break
   ============================================================ */
@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 640px) {
    footer .grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem 1rem !important;
    }

    footer .grid > div:first-child {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   AUDIT MODAL — full screen on small phones
   ============================================================ */
@media (max-width: 480px) {
    #audit-modal-panel {
        max-width: 100% !important;
        margin: 0;
        border-radius: 1rem;
    }

    #audit-modal .min-h-screen {
        padding: 1rem !important;
    }

    #audit-modal h3 {
        font-size: 1.375rem !important;
    }
}

/* ============================================================
   BLOG, COMPARISON, LONG-FORM PAGES
   ============================================================ */
@media (max-width: 640px) {
    article img,
    .blog-post img,
    .prose img {
        border-radius: 0.5rem;
    }

    /* Comparison page two-column flips to one */
    .comparison-grid,
    .grid.lg\:grid-cols-2,
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Restore 2-col on tablet+ */
@media (min-width: 641px) {
    .grid.md\:grid-cols-2,
    .grid.lg\:grid-cols-2 {
        /* leave Tailwind classes intact */
    }
}

/* ============================================================
   SUPER-SMALL PHONES (<=380px)
   ============================================================ */
@media (max-width: 380px) {
    header span.text-lg {
        font-size: 0.9rem;
    }

    .platform-picker-btn,
    .platform-dest-box {
        padding: 10px 12px;
    }
}