/* ==========================================================================
   TNAADO Mobile Global Fixes
   Comprehensive mobile responsiveness — applies to ALL pages
   Loaded via main.css import
   ========================================================================== */

/* ==========================================================================
   1. PREVENT HORIZONTAL OVERFLOW — #1 cause of broken mobile layouts
   ========================================================================== */
html {
    overflow-x: hidden;
    max-width: 100%;
}

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

/* Catch common elements causing overflow — avoid * which breaks icons/flex */
section, article, aside, main, div, p, blockquote, figure, figcaption,
ul, ol, dl, dd, dt, fieldset, form, details, summary {
    max-width: 100%;
    box-sizing: border-box;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* SVGs used as content images (not inline icons) */
svg:not([width]):not([class*="fa"]):not(.icon) {
    max-width: 100%;
    height: auto;
}

/* Tables: horizontal scroll instead of breaking layout */
table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Code blocks: prevent overflow */
pre, code {
    overflow-x: auto;
    max-width: 100%;
    word-break: break-word;
}

/* Inputs should not exceed container */
input, select, textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   2. HEADER CLEARANCE — ensure content never hides under fixed header
   ========================================================================== */
.tnaado-header-spacer {
    display: block !important;
    height: 80px;
    width: 100%;
}

@media (max-width: 768px) {
    .tnaado-header-spacer {
        height: 70px;
    }
}

/* For pages that don't have a spacer, use padding-top on first sections */
@media (max-width: 768px) {
    /* Pages with #header-include directly above content */
    #header-include + section,
    #header-include + main,
    #header-include + div,
    #header-placeholder + section,
    #header-placeholder + main,
    #tnaado-header + section,
    #tnaado-header + main {
        padding-top: 80px;
    }
}

/* ==========================================================================
   3. GLOBAL CONTAINER & SECTION — mobile padding
   ========================================================================== */
@media (max-width: 768px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .section {
        padding: 60px 0 !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .section {
        padding: 40px 0 !important;
    }
}

/* ==========================================================================
   4. HERO SECTIONS — collapse 2-column to single column on mobile
   ========================================================================== */
@media (max-width: 1024px) {
    /* Generic content grid — hero layout with 2 columns */
    .content-grid,
    .hero-content-wrapper .content-grid,
    [class*="hero"] .content-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .hero-visual {
        height: auto !important;
        min-height: 250px !important;
    }
}

@media (max-width: 768px) {
    /* Hero wrapper padding */
    .hero-content-wrapper,
    [class*="hero-content-wrapper"] {
        padding: 2rem 1.25rem !important;
        min-height: auto !important;
    }

    /* Hero section padding */
    .hero,
    [id*="hero"],
    [class*="hero-section"] {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        min-height: auto !important;
    }

    /* Index.html inline hero override */
    #hero-section-custom {
        padding: 100px 16px 60px !important;
        min-height: auto !important;
    }

    /* Hero headings */
    .heading-enhanced,
    [class*="hero"] h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }

    [class*="hero"] p {
        font-size: 1rem !important;
        max-width: 100% !important;
    }

    /* Hero CTA buttons */
    .cta-group,
    [class*="cta-group"],
    [class*="hero"] nav {
        flex-direction: column !important;
        width: 100% !important;
    }

    .cta-group a,
    .cta-group button,
    .btn-primary-hero,
    .btn-secondary-enhanced {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Hero visual panel */
    .hero-visual,
    .code-window {
        height: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Hero stats */
    .hero-stats,
    .stats-grid,
    [class*="stats-row"],
    [class*="stats-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    [id*="hero"],
    [class*="hero-section"],
    #hero-section-custom {
        padding: 90px 12px 40px !important;
    }

    .heading-enhanced,
    [class*="hero"] h1 {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }

    .hero-stats,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   5. SERVICE / CONTENT SECTIONS — multi-column grids
   ========================================================================== */
@media (max-width: 768px) {
    /* 2-column grids → single column */
    .services-grid,
    .features-grid,
    .benefits-grid,
    .solutions-grid,
    .process-grid,
    .team-grid,
    .cards-grid,
    [class*="-grid"]:not(.stats-grid):not(.hero-stats) {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* 3-4 column grids */
    .grid-3,
    .grid-4,
    [class*="col-3"],
    [class*="col-4"],
    [class*="three-col"],
    [class*="four-col"] {
        grid-template-columns: 1fr !important;
    }

    /* Two-column layouts */
    .two-col,
    .two-column,
    [class*="two-col"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Three-column */
    .three-col,
    .three-column,
    [class*="three-col"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Flex rows that should stack */
    .flex-row,
    [class*="flex-row"] {
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    /* Even 2-col grids that should be single */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Buttons in flex containers */
    [class*="-buttons"],
    [class*="button-group"],
    [class*="btn-group"] {
        flex-direction: column !important;
        width: 100% !important;
    }

    [class*="-buttons"] a,
    [class*="-buttons"] button,
    [class*="button-group"] a,
    [class*="button-group"] button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   6. TYPOGRAPHY — responsive font scaling
   ========================================================================== */
@media (max-width: 768px) {
    h1 { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
    h3 { font-size: clamp(1.25rem, 4vw, 1.5rem) !important; }

    .section-title {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
    }

    /* Prevent long URLs/strings from breaking layout */
    p, li, td, th {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

@media (max-width: 480px) {
    h1 { font-size: clamp(1.5rem, 7vw, 1.875rem) !important; }
    h2 { font-size: clamp(1.25rem, 6vw, 1.625rem) !important; }
    h3 { font-size: clamp(1.1rem, 5vw, 1.375rem) !important; }
}

/* ==========================================================================
   7. SECTION SPECIFIC — pages/services/ hero fixes
   ========================================================================== */
@media (max-width: 1024px) {
    /* Service page hero grid collapse */
    .hero .content-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
    }

    .hero .hero-content,
    .hero .hero-left {
        order: 1;
    }

    .hero .hero-visual,
    .hero .hero-right {
        order: 2;
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Service sections */
    .tch-section,
    [class*="tch-section"] {
        padding: 60px 16px !important;
    }

    .tch-container,
    [class*="tch-container"] {
        padding: 0 !important;
    }

    /* Pricing cards */
    .pricing-grid,
    [class*="pricing-grid"],
    [class*="plans-grid"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Process steps */
    .process-steps,
    [class*="process-steps"],
    [class*="steps-grid"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Tables → horizontal scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    /* Comparison tables */
    .comparison-table,
    [class*="comparison-table"] {
        display: block !important;
        overflow-x: auto !important;
    }

    /* Image + text layouts */
    .image-text,
    .text-image,
    [class*="image-text"],
    [class*="text-image"] {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    /* Testimonials */
    .testimonials-grid,
    [class*="testimonials-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Portfolio */
    .portfolio-grid,
    [class*="portfolio-grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   8. HEADER — mobile improvements
   ========================================================================== */
@media (max-width: 768px) {
    #tnaadoStickyHeader .header-container {
        width: calc(100% - 24px) !important;
    }

    #tnaadoStickyHeader nav {
        padding: 10px 16px !important;
    }

    /* Prevent logo overflow */
    #tnaadoStickyHeader .logo-container img {
        height: 38px !important;
        max-width: 120px !important;
    }
}

@media (max-width: 375px) {
    #tnaadoStickyHeader .header-container {
        width: calc(100% - 16px) !important;
    }

    #tnaadoStickyHeader nav {
        padding: 8px 12px !important;
    }

    #tnaadoStickyHeader .logo-container img {
        height: 32px !important;
    }
}

/* ==========================================================================
   9. FOOTER — mobile fixes
   ========================================================================== */
@media (max-width: 768px) {
    .tnaado-footer-wrapper {
        padding: 40px 16px 20px !important;
    }

    .tnaado-footer-wrapper .footer-column {
        width: 100% !important;
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   10. TOOLS PAGES — calculator/tool layout fixes
   ========================================================================== */
@media (max-width: 768px) {
    /* Tool hero sections */
    .tools-hero {
        padding: 80px 16px 50px !important;
    }

    .tools-hero h1 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    /* Calculator inputs */
    .calc-grid,
    .calculator-grid,
    [class*="calc-grid"],
    [class*="calculator-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Results panels */
    .results-grid,
    [class*="results-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Tool navigation */
    .tool-nav,
    [class*="tool-nav"],
    .tools-nav {
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Tool category grids */
    .tools-grid,
    [class*="tools-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* PDF generator forms */
    .form-row,
    [class*="form-row"] {
        grid-template-columns: 1fr !important;
    }

    /* Dev tools: editor panels side by side */
    .editor-grid,
    .editor-panel,
    [class*="editor-panel"],
    [class*="editor-grid"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    /* Tool category grids → single column */
    .tools-grid,
    [class*="tools-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Single tool input forms */
    .input-group,
    [class*="input-group"] {
        flex-direction: column !important;
    }

    .input-group input,
    .input-group select,
    .input-group button {
        width: 100% !important;
    }
}

/* ==========================================================================
   11. CARDS — universal card fixes
   ========================================================================== */
@media (max-width: 768px) {
    .card {
        padding: 1.25rem !important;
    }

    /* Cards with internal grids */
    .card-grid,
    [class*="card-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Feature cards */
    .feature-card,
    [class*="feature-card"] {
        padding: 1.5rem 1.25rem !important;
    }
}

/* ==========================================================================
   12. SPECIFIC PAGE FIXES
   ========================================================================== */

/* Affiliates page */
@media (max-width: 768px) {
    .affiliate-grid,
    [class*="affiliate-grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* Contact page */
@media (max-width: 768px) {
    .contact-grid,
    [class*="contact-grid"],
    .contact-wrapper,
    [class*="contact-wrapper"] {
        grid-template-columns: 1fr !important;
    }
}

/* Portfolio page */
@media (max-width: 768px) {
    .portfolio-item,
    [class*="portfolio-item"] {
        flex-direction: column !important;
    }
}

/* Pricing page */
@media (max-width: 768px) {
    .pricing-card,
    [class*="pricing-card"] {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Transparency / legal pages */
@media (max-width: 768px) {
    .legal-container,
    [class*="legal-container"],
    [class*="policy-container"] {
        padding: 80px 16px 40px !important;
    }
}

/* ==========================================================================
   13. UTILITY CLASSES — mobile helpers
   ========================================================================== */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .show-mobile-flex { display: flex !important; }
    .text-center-mobile { text-align: center !important; }
    .full-width-mobile { width: 100% !important; max-width: 100% !important; }
    .stack-mobile { flex-direction: column !important; }
    .no-gap-mobile { gap: 0 !important; }
}

@media (max-width: 480px) {
    .hide-sm { display: none !important; }
    .show-sm { display: block !important; }
    .text-center-sm { text-align: center !important; }
}


/* ==========================================================================
   14. FOOTER CONTAINER — inline style overrides for calc() widths
   ========================================================================== */
@media (max-width: 768px) {
    /* Override inline calc(100% - 100px) which leaves too much padding on mobile */
    .tnaado-footer-wrapper div[style*="calc(100% - 100px)"] {
        width: calc(100% - 32px) !important;
        padding: 0 !important;
    }

    /* Footer inner padding override */
    .tnaado-footer-wrapper div[style*="padding:0 50px"],
    .tnaado-footer-wrapper div[style*="padding: 0 50px"] {
        padding: 0 16px !important;
    }

    /* Footer legal links — stack vertically */
    .tnaado-footer-wrapper .footer-legal-links,
    .tnaado-footer-wrapper div[style*="inline-flex"][style*="gap: 30px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .tnaado-footer-wrapper div[style*="calc(100% - 100px)"] {
        width: calc(100% - 24px) !important;
    }
}

/* ==========================================================================
   15. HEADER CONTAINER — small screen calc fix
   ========================================================================== */
@media (max-width: 375px) {
    #tnaadoStickyHeader .header-container {
        width: calc(100% - 16px) !important;
    }

    #tnaadoStickyHeader nav {
        padding: 8px 12px !important;
    }
}

/* ==========================================================================
   16. INLINE STYLE OVERRIDES — common problematic inline patterns
   ========================================================================== */
@media (max-width: 768px) {
    /* Hero section with inline padding */
    #hero-section-custom {
        padding: 100px 16px 60px 16px !important;
    }

    /* Stats grid - override inline grid-template-columns */
    .stats-grid,
    div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Any flex container with large gap */
    .content-grid,
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 4rem"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Paragraphs with max-width that might be too narrow */
    p[style*="max-width: 500px"],
    p[style*="max-width:500px"] {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    #hero-section-custom {
        padding: 90px 12px 40px 12px !important;
    }

    .stats-grid,
    div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }
}