/* ============================================
   MOBILE RESPONSIVENESS FIXES
   Generated for TBM websites
   Date: 2026-02-23

   Purpose: Ensure proper mobile display including
   touch targets, font sizes, form usability,
   responsive images, and layout fixes.
   ============================================ */

/* ============================================
   BASE MOBILE RESET
   ============================================ */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Responsive images globally */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive tables */
table {
    max-width: 100%;
}

/* ============================================
   MOBILE STYLES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* ---- Typography ---- */
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    /* ---- Touch Targets (44px minimum) ---- */
    a, button, input[type="submit"], input[type="button"],
    .btn, [class*="btn-"], [role="button"] {
        min-height: 44px;
    }

    /* Navigation links need proper tap spacing */
    nav a, .nav-links a, .tbm-nav-links a {
        padding: 12px 8px;
        display: inline-flex;
        align-items: center;
    }

    /* ---- Form Usability ---- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS auto-zoom */
        width: 100%;
        max-width: 100%;
        padding: 12px;
        min-height: 44px;
        border-radius: 8px;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Form labels above inputs on mobile */
    label {
        display: block;
        margin-bottom: 4px;
    }

    /* Submit buttons full-width */
    input[type="submit"],
    button[type="submit"],
    .btn-submit,
    .form-submit {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
        font-weight: 600;
        min-height: 48px;
        cursor: pointer;
        touch-action: manipulation;
    }

    /* ---- Responsive Layout ---- */
    .container, .content, .section-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Stack two-column layouts */
    .two-column, .grid-2, .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Stats grids - 2 columns on tablet, 1 on phone */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }

    .values-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- Responsive Tables ---- */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* ---- Click-to-Call Styling ---- */
    a[href^="tel:"] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        min-height: 44px;
        font-weight: 600;
        text-decoration: none;
        touch-action: manipulation;
    }

    /* ---- Footer mobile fixes ---- */
    .footer-container, .tbm-footer-container,
    footer .grid, footer [class*="col-"] {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    /* ---- Hero sections ---- */
    .hero, [class*="hero"] {
        padding: 2rem 1rem;
    }

    .hero h1, [class*="hero"] h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .hero p, [class*="hero"] p {
        font-size: 1rem;
    }

    /* ---- CTA buttons ---- */
    .cta-buttons, .hero-cta, .btn-group {
        flex-direction: column;
        gap: 12px;
    }

    .cta-buttons .btn,
    .hero-cta .btn,
    .btn-group .btn {
        width: 100%;
        text-align: center;
    }

    /* ---- Images ---- */
    img[width], img[style*="width"] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ---- Prevent overflow from fixed-width elements ---- */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
    }

    iframe {
        max-width: 100%;
    }

    /* ---- Service cards / Feature cards ---- */
    .service-card, .feature-card, .card {
        padding: 1.25rem;
    }

    /* ---- Pricing tables ---- */
    .pricing-grid, .pricing-table {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   SMALL PHONE STYLES (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }

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

    /* Even more compact padding */
    .container, .content, .section-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Stack buttons vertically */
    .btn + .btn {
        margin-left: 0;
        margin-top: 8px;
    }
}