/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   Tree Service Jonesboro AR
   Covers all breakpoints: 1024px, 768px, 480px, 360px
   ========================================================================== */

/* ==========================================
   TABLET (max-width: 1024px)
   ========================================== */
@media (max-width: 1024px) {

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

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .case-card,
    .case-card:nth-child(even) {
        grid-template-columns: 1fr !important;
    }

    .case-card:nth-child(even) .case-img-wrap,
    .case-card:nth-child(even) .case-content {
        order: unset !important;
    }

    .case-img-wrap { min-height: 240px; }

    .nav-links { gap: 18px; }

    /* Area/Service hero tablet */
    .service-hero { padding: 140px 20px 70px !important; }
    .area-hero    { padding: 140px 20px 70px !important; }
}


/* ==========================================
   SMALL TABLET / LARGE PHONE (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {

    :root {
        --section-padding: 60px 16px;
    }

    /* ---- BASE ---- */
    .container { padding: 0 16px; }

    h1 { font-size: clamp(26px, 7vw, 40px) !important; }
    h2 { font-size: clamp(22px, 5vw, 32px); }
    h3 { font-size: clamp(18px, 4vw, 22px); }

    /* ---- HEADER ---- */
    .nav-links   { display: none !important; }
    .nav-cta     { display: none !important; }
    .hamburger   { display: flex !important; }

    /* ---- HOMEPAGE HERO ---- */
    .hero {
        min-height: 90vh !important;
        padding: 110px 16px 80px !important;
        text-align: center;
        background-position: center top !important;
    }

    .hero-content { text-align: center; }
    .hero h1 { font-size: clamp(26px, 7.5vw, 42px) !important; }
    .hero p  { font-size: 15px; margin: 0 auto 32px; }
    .hero-rating { font-size: 13px; }
    .hero .btn-group { justify-content: center; flex-direction: column; align-items: center; }

    /* ---- SERVICE / INNER PAGE HERO ---- */
    .service-hero {
        min-height: 360px !important;
        padding: 110px 16px 56px !important;
        background-position: center top !important;
    }

    .service-hero h1 { font-size: clamp(22px, 6vw, 34px) !important; }
    .service-hero-text { font-size: 15px; margin-bottom: 24px; }
    .service-hero .btn-group { flex-direction: column; }
    .service-hero .btn { width: 100% !important; }

    /* ---- AREA HERO ---- */
    .area-hero {
        min-height: 360px !important;
        padding: 110px 16px 56px !important;
        background-position: center top !important;
    }

    .area-hero h1 { font-size: clamp(22px, 6vw, 34px) !important; }
    .area-hero-text { font-size: 15px !important; margin-bottom: 24px !important; }
    .area-hero .btn-group { flex-direction: column !important; }
    .area-hero .btn { width: 100% !important; }

    /* ---- ABOUT / CONTACT HERO ---- */
    .about-hero,
    .contact-hero {
        padding: 110px 16px 56px !important;
        min-height: 360px !important;
        background-position: center top !important;
    }

    /* ---- BUTTONS ---- */
    .btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
        justify-content: center;
        padding: 15px 24px;
    }

    /* ---- GRIDS → SINGLE COLUMN ---- */
    .features-grid          { grid-template-columns: 1fr !important; gap: 16px; }
    .process-grid           { grid-template-columns: 1fr !important; }
    .case-grid              { grid-template-columns: 1fr !important; }
    .case-card,
    .case-card:nth-child(even) {
        grid-template-columns: 1fr !important;
    }
    .case-card:nth-child(even) .case-img-wrap,
    .case-card:nth-child(even) .case-content { order: unset !important; }

    /* ---- INLINE GRID OVERRIDES ---- */
    /* 2-col grids */
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:1fr 2fr"],
    div[style*="grid-template-columns: 1fr 2fr"],
    div[style*="grid-template-columns:1fr 420px"],
    div[style*="grid-template-columns: 1fr 420px"],
    div[style*="grid-template-columns:1fr 340px"],
    div[style*="grid-template-columns: 1fr 340px"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* 4-col footer grids */
    div[style*="grid-template-columns:2fr 1fr 1fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
        padding-bottom: 32px !important;
    }

    /* ---- TRUST BAR ---- */
    .trust-bar-inner {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 0;
    }

    .trust-divider { display: none !important; }
    .trust-item { padding: 4px 12px; font-size: 13px; }

    /* ---- FOOTER ---- */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    /* ---- CARDS ---- */
    .card { padding: 24px 18px; }

    /* ---- SECTION INTRO ---- */
    .section-intro { font-size: 15px; margin-bottom: 28px; }

    /* ---- SERVICE PAGE SIDEBAR ---- */
    .service-sidebar  { position: static !important; }
    .service-grid     { grid-template-columns: 1fr !important; }

    /* ---- AREA/SERVICE PAGE WIDGET ---- */
    .widget { padding: 24px 18px; }

    /* ---- BLOG GRID ---- */
    .blog-grid { grid-template-columns: 1fr !important; }

    /* ---- BEFORE & AFTER GRID ---- */
    .before-after-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .ba-image-wrap img { height: 180px; }

    /* ---- TESTIMONIALS ---- */
    .testimonials-grid { grid-template-columns: 1fr !important; }

    /* ---- PROCESS STEPS ---- */
    .process-step { padding: 28px 20px; }

    /* ---- FAQ ---- */
    .faq-question { padding: 16px 14px; font-size: 15px; }
    /* Reduce side padding on both collapsed and expanded faq-answer on mobile */
    .faq-answer { padding: 0 14px; }
    .faq-item.active .faq-answer { padding: 0 14px 18px; }

    /* ---- CASE STUDY CONTENT ---- */
    .case-content { padding: 24px 20px; }
    .case-img-wrap { min-height: 220px; }

    /* ---- AREA / ZIP TAGS ---- */
    .area-tag, .zip-tag { font-size: 12px; padding: 5px 12px; }

    /* ---- CTA BANNERS ---- */
    .cta-banner { padding: 40px 24px; }
    .cta-banner h2 { font-size: clamp(22px, 6vw, 32px); }

    /* ---- BACK TO TOP ---- */
    .back-to-top { bottom: 20px; right: 16px; }

    /* ---- AREA PAGE SPECIFIC ---- */
    .area-about-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .area-facts      { grid-template-columns: 1fr 1fr !important; }
    .area-service-card { padding: 22px 18px; }

    /* ---- FOOTER BOTTOM BAR (inline style — no class) ---- */
    /* Targets the inline-styled footer bottom div on all pages */
    footer div[style*="justify-content:space-between"],
    footer div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
    }
}


/* ==========================================
   PHONE (max-width: 480px)
   ========================================== */
@media (max-width: 480px) {

    :root {
        --section-padding: 50px 14px;
    }

    .container { padding: 0 14px; }

    /* ---- LOGO ---- */
    .logo       { font-size: 17px !important; }
    .logo-icon  { width: 30px !important; height: 30px !important; }

    /* ---- HEADER ---- */
    .site-header { padding: 14px 0; }

    /* ---- HOMEPAGE HERO ---- */
    .hero {
        min-height: 85vh !important;
        padding: 95px 14px 70px !important;
    }
    .hero h1 { font-size: clamp(24px, 8vw, 34px) !important; }
    .hero p { font-size: 14px; }
    .hero-rating { font-size: 12px; padding: 5px 14px; }

    /* ---- INNER PAGE HEROES ---- */
    .service-hero {
        min-height: 320px !important;
        padding: 95px 14px 48px !important;
    }
    .service-hero h1 { font-size: clamp(20px, 7vw, 28px) !important; }
    .service-hero-text { font-size: 14px; }

    .area-hero {
        min-height: 320px !important;
        padding: 95px 14px 48px !important;
    }
    .area-hero h1 { font-size: clamp(20px, 7vw, 28px) !important; }

    .about-hero,
    .contact-hero {
        padding: 95px 14px 48px !important;
        min-height: 320px !important;
    }

    /* ---- BUTTONS ---- */
    .btn { padding: 14px 20px; font-size: 14px; }

    /* ---- SECTION LABELS ---- */
    .section-label { font-size: 11px; letter-spacing: 1.5px; padding: 5px 14px; }

    /* ---- MOBILE MENU ---- */
    .mobile-menu { padding: 80px 20px 32px; gap: 20px; }
    .mobile-menu a { font-size: 20px; }

    /* ---- CARDS ---- */
    .card { padding: 20px 16px; }

    /* ---- HEADINGS ---- */
    h1 { font-size: clamp(22px, 8vw, 32px) !important; }
    h2 { font-size: clamp(20px, 6vw, 28px); }

    /* ---- TRUST BAR ---- */
    .trust-item { font-size: 12px; gap: 8px; }

    /* ---- PROCESS NUMBER ---- */
    .process-number { font-size: 32px; }

    /* ---- SECTION INTRO ---- */
    .section-intro { font-size: 14px; }

    /* ---- WIDGET CTA ---- */
    .widget-cta { padding: 24px 18px; }

    /* ---- FOOTER ---- */
    div[style*="grid-template-columns:2fr 1fr 1fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- AREA PAGE ---- */
    .area-facts { grid-template-columns: 1fr !important; }
    .area-service-card { padding: 18px 16px; }
}


/* ==========================================
   VERY SMALL PHONES (max-width: 360px)
   ========================================== */
@media (max-width: 360px) {

    .container { padding: 0 12px; }

    .hero {
        padding: 90px 12px 60px !important;
    }
    .hero h1  { font-size: clamp(20px, 9vw, 28px) !important; }

    .service-hero {
        padding: 90px 12px 44px !important;
    }
    .service-hero h1 { font-size: clamp(18px, 8vw, 26px) !important; }

    .area-hero { padding: 90px 12px 44px !important; }

    .about-hero,
    .contact-hero {
        padding: 90px 12px 44px !important;
    }

    .btn { padding: 13px 18px; font-size: 13px; }

    .mobile-menu { padding: 75px 16px 28px; }
    .mobile-menu a { font-size: 18px; }

    .logo { font-size: 15px !important; }
}