/* CAL COAST — MOBILE RESPONSIVENESS PATCH LAYER
 * Applies safe overrides to fix the most common mobile breakage patterns
 * across all 188 pages without surgically editing each one.
 * Load this CSS LAST so it overrides page-level styles.
 */

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

    /* Prevent horizontal scroll on any page */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Default body padding on small screens */
    body {
        font-size: 16px;
        line-height: 1.55;
    }

    /* Headings should not overflow on small viewports */
    h1, h2, h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    h1 { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
    h3 { font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important; }

    /* Force images to fit their container */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Buttons and CTAs should fit on screen */
    .btn, .btn-primary, .btn-secondary,
    .nav-phone, .header-cta, .cta-phone,
    .form-submit, .calc-submit,
    button[type="submit"] {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }

    /* Phone numbers in CTAs: ensure they wrap if needed */
    .phone-big-number,
    .nav-phone {
        font-size: clamp(1rem, 4vw, 1.4rem) !important;
    }

    /* Hide secondary nav items on small screens (phone button stays) */
    .nav a:not(.nav-phone):not(.sysa-nav-phone),
    .sysa-nav a:not(.sysa-nav-phone),
    .header nav a:not(.nav-phone) {
        display: none !important;
    }

    /* Center the logo + phone on mobile header */
    .header, .sysa-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 10px 4% !important;
    }

    .logo, .sysa-logo {
        height: 36px !important;
    }

    /* Forms should be full-width on mobile */
    form input, form textarea, form select,
    .calc-input {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    /* Grid containers: collapse to single column */
    .contact-grid,
    .calc-options,
    .footer-grid,
    .grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* Service cards, why-cards, etc — ensure they fit */
    .service-card, .why-card, .info-card,
    .content-card, .card,
    .cc-job-card {
        max-width: 100%;
        padding: 1.5rem 1.25rem !important;
    }

    /* Container padding for tight screens */
    .container, .inner, .section-inner,
    .calc-container,
    .contact-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Reduce hero section padding on mobile */
    .hero, .page-hero {
        padding-top: 3rem !important;
        padding-bottom: 2.5rem !important;
    }

    .hero p.lead, .page-hero p {
        font-size: 1rem !important;
    }

    /* Tables: make scrollable */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Emergency banner: reduce padding so it doesn't dominate */
    .emergency-banner {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* Trust strip: stack tighter */
    .cc-trust-inner {
        gap: 0.85rem !important;
        padding: 0.5rem 0;
    }
    .cc-trust-block {
        flex: 1 1 calc(50% - 0.5rem) !important;
    }

    /* Recent jobs: tighter grid */
    .cc-jobs-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer: stack on mobile */
    .footer-main-row {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    /* Honeypot stays hidden */
    .honeypot, [aria-hidden="true"] {
        position: absolute !important;
        left: -9999px !important;
    }

    /* Chat widget: smaller launcher on mobile */
    .cc-chat-launcher {
        width: 56px !important;
        height: 56px !important;
        bottom: 12px !important;
        right: 12px !important;
    }

    /* Chat panel: fullscreen-ish on mobile */
    .cc-chat-panel {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
        bottom: 78px !important;
        height: calc(100vh - 100px) !important;
        max-height: calc(100vh - 100px) !important;
    }
}

/* ===== TIGHTER FIXES FOR VERY SMALL SCREENS (iPhone SE et al.) ===== */
@media (max-width: 380px) {
    .header, .sysa-header { padding: 8px 3% !important; }
    .logo, .sysa-logo { height: 32px !important; }
    .nav-phone, .sysa-nav-phone {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    .emergency-banner {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
}

/* ===== TABLET ADJUSTMENTS (768px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container, .inner, .section-inner {
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .nav { gap: 16px; }
    .nav a { font-size: 14px; }
}

/* ===== TOUCH TARGET MINIMUM SIZE (Apple/Google guideline: 44x44px) ===== */
@media (max-width: 768px) {
    a, button, input[type="submit"], input[type="button"],
    .btn, .calc-option, .nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Don't wreck inline links inside paragraphs */
    p a, li a {
        min-height: auto;
        display: inline;
    }
}