/**
 * Mobile-Only Responsive Fixes
 * Only affects devices with screen width 767px and below
 * Preserves all desktop styles
 */

/* ============================================
   MOBILE BOTTOM CTA BAR - Removed (styles in header.php)
   ============================================ */
/* Mobile CTA bar styles have been moved to header.php for better control */
/* This section intentionally left empty to prevent conflicts */

/* ============================================
   CRITICAL FIXES - Prevent Breaking Issues
   ============================================ */

/* Only apply to mobile phones, not tablets or desktop */
@media only screen and (max-width: 767px) {

    /* 1. PREVENT HORIZONTAL SCROLL - Critical */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    /* Adjust body padding for mobile CTA bar */
    body {
        padding-bottom: 55px !important;
    }

    /* Ensure nothing can cause overflow */
    * {
        max-width: 100vw;
    }

    /* 2. CONTAINER FIXES - Prevent overflow */
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        overflow-x: hidden;
    }

    /* 3. IMAGE FIXES - Maintain aspect ratio and prevent overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Fix gallery images specifically */
    .gallery-item img,
    .gallery-grid img {
        width: 100%;
        height: auto;
        max-height: 250px;
        object-fit: cover;
    }

    /* 4. TYPOGRAPHY SCALING - Better readability */
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    p {
        font-size: 1rem;
        line-height: 1.6;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* 5. HERO SECTION FIXES */
    .hero-section {
        padding: 60px 0 40px;
        min-height: auto;
    }

    .hero-content {
        padding: 0 15px;
    }

    .hero-content h1 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .hero-intro {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    /* 6. BUTTON FIXES - Already implemented but ensuring consistency */
    .hero-cta,
    .hero-cta-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0;
    }

    .cta-button,
    .cta-button-outline,
    .hero-cta a,
    .hero-cta-group a,
    .hero-phone {
        width: calc(100% - 30px);
        max-width: 280px;
        text-align: center;
        padding: 14px 20px;
        margin: 0 auto;
        box-sizing: border-box;
        font-size: 1rem;
    }

    /* 7. NAVIGATION FIXES */
    .nav-menu {
        width: 100%;
        max-width: 100%;
    }

    .mobile-menu {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 8. SERVICE CARDS & GRIDS */
    .services-list,
    .service-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0;
    }

    .service-item,
    .service-card {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    /* 9. GALLERY GRIDS */
    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* 10. SECTION SPACING */
    section {
        padding: 40px 0;
    }

    .services-section,
    .intro-section,
    .why-choose-section,
    .service-areas-section,
    .final-cta-section {
        padding: 40px 0;
    }

    /* 11. WHY CHOOSE GRID */
    .why-choose-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .why-choose-item {
        width: 100%;
        margin: 0;
        padding: 20px;
    }

    /* 12. AREA CARDS - Location pages */
    .surrounding-areas {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .area-card,
    a.area-card {
        width: 100%;
        margin: 0;
        padding: 20px;
        box-sizing: border-box;
    }

    /* 13. FORM ELEMENTS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        width: 100%;
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        box-sizing: border-box;
    }

    /* 14. TABLE FIXES */
    table {
        width: 100%;
        overflow-x: auto;
        display: block;
    }

    /* 15. PROCESS STEPS */
    .process-steps {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .process-step {
        width: 100%;
        margin: 0;
        padding: 20px;
    }

    /* 16. TESTIMONIAL CARDS */
    .testimonial-slider,
    .testimonials-grid {
        padding: 0;
    }

    .testimonial-card {
        width: 100%;
        margin: 0 0 20px 0;
        padding: 20px;
        box-sizing: border-box;
    }

    /* 17. CTA SECTIONS */
    .cta-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
    }

    .cta-button-white,
    .cta-phone-white {
        width: calc(100% - 30px);
        max-width: 280px;
        margin: 0 auto;
    }

    /* 18. PATIO OPTIONS */
    .options-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .option-item {
        width: 100%;
        padding: 15px;
        margin: 0;
    }

    /* 19. FEATURE ITEMS */
    .service-features {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-item {
        width: 100%;
        padding: 20px;
        margin: 0;
    }

    /* 20. FOOTER FIXES */
    .footer-content {
        padding: 30px 15px;
    }

    .footer-columns {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* 21. PREVENT FIXED WIDTHS FROM BREAKING LAYOUT */
    [style*="width:"] {
        max-width: 100% !important;
    }

    /* Override inline styles that cause overflow */
    [style*="width:"][style*="px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 22. FIX SPECIFIC MEASUREMENT UNITS */
    .services-list,
    .patio-options,
    .why-choose-grid,
    .surrounding-areas {
        width: 100%;
        max-width: 100%;
    }

    /* 23. TOUCH-FRIENDLY SPACING */
    a.service-item,
    .area-card,
    .cta-button,
    .cta-button-outline {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 24. REMOVE HORIZONTAL MARGINS THAT MIGHT CAUSE OVERFLOW */
    .container > * {
        margin-left: 0;
        margin-right: 0;
    }

    /* 25. PHOTO GALLERY SECTION SPECIFIC */
    .photo-gallery-section {
        padding: 30px 0;
    }

    .photo-gallery-section h2 {
        font-size: 1.5rem;
        padding: 0 15px;
        margin-bottom: 25px;
    }
}

/* ============================================
   VERY SMALL DEVICES (max-width: 375px)
   iPhone SE, small Android phones
   ============================================ */
@media only screen and (max-width: 375px) {
    /* Even smaller spacing for very small phones */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    .cta-button,
    .cta-button-outline {
        font-size: 0.95rem;
        padding: 12px 15px;
    }

    section {
        padding: 30px 0;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION FIXES
   ============================================ */
@media only screen and (max-width: 767px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape mode */
    .hero-section {
        padding: 40px 0 30px;
        min-height: auto;
    }

    section {
        padding: 30px 0;
    }

    h1 {
        font-size: 1.5rem;
    }
}

/* ============================================
   ACCESSIBILITY & USABILITY
   ============================================ */
@media only screen and (max-width: 767px) {
    /* Ensure tap targets are large enough */
    button,
    .button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Improve link tap targets */
    a {
        display: inline-block;
        min-height: 24px;
    }

    /* Focus states for mobile */
    *:focus {
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }
}

/* ============================================
   iOS SPECIFIC FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {
    @media only screen and (max-width: 767px) {
        /* Prevent iOS zoom on form focus */
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        textarea,
        select {
            font-size: 16px;
        }

        /* Smooth scrolling on iOS */
        .mobile-menu,
        .overflow-scroll {
            -webkit-overflow-scrolling: touch;
        }
    }
}