/* ============================================================
   MOBILE FIXES — Best Crew Construction
   /mobile-fixes.css — linked from all 38 pages
   Handles: reveal animation, form grid, section padding,
   CTA width, hero height, HIC badge, comparison tables
   ============================================================ */

/* ---- 1. KILL REVEAL ANIMATIONS ON MOBILE ---- */
/* Elements with .reveal start at opacity:0. IntersectionObserver
   doesn't reliably fire on mobile, leaving content invisible.
   Override: force all reveal elements visible below 768px.       */
@media (max-width: 767px) {
  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- 2. GLOBAL SECTION PADDING REDUCTION ---- */
/* Desktop uses --space-3xl (96px). Mobile should use ~48-56px.   */
@media (max-width: 600px) {
  .section,
  #contact-form-section,
  #service-map,
  #hours-info,
  #pain-points,
  #process,
  #materials,
  #why,
  #testimonials,
  #faq,
  #final-cta,
  #local-seo,
  #estimator,
  #services,
  #promise,
  #comparison,
  #quick-answer-section,
  #coverage-section,
  #why-choose,
  #service-details,
  #benefits,
  #overview,
  #cta-section,
  #guide-body,
  #county-services,
  #town-context,
  #why-us,
  section[aria-label] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  #contact-options {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Keep footer at normal padding */
  #footer {
    padding-top: 48px !important;
  }
}

/* ---- 3. FORM GRID — SINGLE COLUMN ON MOBILE ---- */
/* .form-grid is 1fr 1fr with no mobile breakpoint.               */
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .form-full {
    grid-column: 1 !important;
  }
  .contact-form-box {
    padding: 24px 20px !important;
  }
  .form-layout {
    gap: 32px !important;
  }
  .form-side-info {
    padding-top: 0 !important;
  }
}

/* ---- 4. CTA BUTTONS — FULL WIDTH ON MOBILE ---- */
@media (max-width: 600px) {
  .btn-orange {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Hero CTA rows */
  .hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .hero-cta-row .btn-orange {
    width: 100% !important;
  }
  .hero-cta-secondary {
    text-align: center !important;
  }

  /* Inner page CTAs */
  .final-cta-inner .btn-orange,
  .page-hero-content .btn-orange {
    width: 100% !important;
  }
}

/* ---- 5. PAGE HERO — REDUCE HEIGHT ON MOBILE ---- */
/* min-height:65vh is designed for desktop. On 390px phones
   this pushes content too far down.                              */
@media (max-width: 600px) {
  #page-hero {
    min-height: auto !important;
    padding-top: calc(var(--nav-h, 72px) + 36px) !important;
    padding-bottom: 40px !important;
  }
  .page-hero-h1 {
    font-size: clamp(2.4rem, 9vw, 4rem) !important;
    margin-bottom: 12px !important;
  }
  .page-hero-sub {
    font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
    margin-bottom: 24px !important;
  }
  .page-hero-trust {
    gap: 8px !important;
    margin-top: 20px !important;
  }
  .page-hero-trust-item {
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
  }
}

/* ---- 6. HIC BADGE — HIDE ON MOBILE ---- */
/* License number already appears in footer. The floating badge
   disrupts hero layout on small screens when unstuck.            */
@media (max-width: 768px) {
  .hic-badge {
    display: none !important;
  }
}

/* ---- 7. COMPARISON TABLE — STACK ON MOBILE ---- */
@media (max-width: 600px) {
  .comp-cols {
    grid-template-columns: 1fr !important;
  }
  .comp-col.us {
    border-top: 1px solid rgba(224, 123, 26, 0.3) !important;
  }
  .comp-col.them {
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
  }
}

/* ---- 8. STATS BAR — TIGHTER PADDING ---- */
@media (max-width: 600px) {
  .stat-item {
    padding: 24px 12px !important;
  }
  .stat-num {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }
  .stat-label {
    font-size: 0.75rem !important;
  }
}

/* ---- 9. SECTION TITLES — PREVENT OVERFLOW ---- */
@media (max-width: 600px) {
  .section-title {
    font-size: clamp(1.9rem, 7vw, 3rem) !important;
  }
  .section-sub {
    font-size: 0.9rem !important;
    margin-bottom: 28px !important;
  }
  /* Inner page hero h1 */
  h1.page-hero-h1,
  .hero-h1 {
    font-size: clamp(2.2rem, 9vw, 4rem) !important;
  }
}

/* ---- 10. SERVICE MAP IFRAME — SHORTER ON MOBILE ---- */
@media (max-width: 600px) {
  #service-map iframe,
  iframe[title*="service area"],
  iframe[title*="map"] {
    height: 260px !important;
  }
}

/* ---- 11. FOOTER — OPTIMIZE FOR MOBILE ---- */
@media (max-width: 600px) {
  .footer-grid {
    gap: 32px !important;
  }
  .footer-desc {
    max-width: 100% !important;
  }
  .footer-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .footer-tagline {
    font-size: 1.1rem !important;
  }
}

/* ---- 12. CONTACT PAGE SPECIFICS ---- */
@media (max-width: 600px) {
  /* Contact options grid — already stacks via 1fr, just fix padding */
  .contact-col {
    padding: 24px 20px !important;
  }
  .contact-col-value {
    font-size: clamp(1rem, 5vw, 1.4rem) !important;
  }
  /* Contact form section extra breathing room */
  #contact-form-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .form-side-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
  }
}

/* ---- 13. KNOWLEDGE / GUIDE PAGES ---- */
@media (max-width: 600px) {
  /* Quick Answer box horizontal padding */
  [style*="border-left:4px solid #E07B1A"],
  .quick-answer {
    padding: 16px 20px !important;
  }
  /* Table of contents / coverage lists */
  .coverage-list,
  .toc-list {
    padding-left: 0 !important;
  }
  /* Cost table / data grids */
  .cost-table,
  .data-grid {
    display: block !important;
    overflow-x: auto !important;
  }
}

/* ---- 14. MATERIALS / PRICING CARDS ---- */
@media (max-width: 600px) {
  .mat-card {
    padding: 20px !important;
  }
  .mat-name {
    font-size: 1.3rem !important;
  }
  .mat-price {
    font-size: 1.4rem !important;
  }
}

/* ---- 15. CHAT WIDGET — KEEP ACCESSIBLE ON MOBILE ---- */
@media (max-width: 600px) {
  #chat-window {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: 88px !important;
  }
  #chat-btn {
    bottom: 16px !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* ---- 16. NAV HEIGHT OFFSET — PREVENT CONTENT HIDING ---- */
/* Some pages use anchor links — ensure targets aren't hidden     */
@media (max-width: 768px) {
  :target {
    scroll-margin-top: 80px !important;
  }
}

/* ---- 17. INPUT / FORM CONTROLS — PREVENT ZOOM ON FOCUS ---- */
/* iOS zooms in when input font-size < 16px. Prevent that.        */
@media (max-width: 600px) {
  .form-control,
  .addr-input,
  .form-input,
  .chat-inp,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
}

/* ---- 18. HOMEPAGE HERO — FULL WIDTH BTN + BADGE FIX ---- */
@media (max-width: 600px) {
  /* Hero estimator card */
  .estimator-card {
    padding: 24px 16px !important;
  }
  .addr-input {
    padding: 14px 16px 14px 44px !important;
    font-size: 16px !important;
  }
  /* Process steps tighter */
  .process-steps {
    gap: 16px !important;
  }
  .proc-step {
    padding: 20px 16px !important;
  }
  /* Services grid on homepage */
  .services-grid {
    gap: 12px !important;
  }
  .svc-card {
    padding: 20px !important;
  }
}

/* ---- 19. WHY / PAIN POINT / TESTIMONIAL CARDS ---- */
@media (max-width: 600px) {
  .pain-card,
  .why-card {
    padding: 20px !important;
  }
  .testi-card {
    padding: 20px !important;
  }
  .testi-text {
    font-size: 0.9rem !important;
  }
}

/* ---- 20. COUNTY / TOWN PAGE HERO BADGES ---- */
@media (max-width: 600px) {
  .page-hero-trust {
    justify-content: flex-start !important;
  }
  .page-hero-trust-item {
    flex-shrink: 0 !important;
  }
}

/* ---- 21. FAQ ITEMS — LEGIBLE ON MOBILE ---- */
@media (max-width: 600px) {
  .faq-q-text {
    font-size: 1rem !important;
    letter-spacing: 0.02em !important;
  }
  .faq-a p {
    font-size: 0.9rem !important;
  }
}

/* ---- 22. MOBILE MENU — ALREADY WORKS, MINOR TWEAKS ---- */
@media (max-width: 768px) {
  /* Ensure hamburger is always visible */
  .nav-hamburger {
    display: flex !important;
  }
  .nav-links,
  .nav-right,
  .nav-cta {
    display: none !important;
  }
}
@media (min-width: 900px) {
  .nav-hamburger {
    display: none !important;
  }
  .nav-links {
    display: flex !important;
  }
  .nav-right,
  .nav-cta {
    display: flex !important;
  }
}

/* ---- 23. PROMISE GRID — STACK ON MOBILE ---- */
@media (max-width: 600px) {
  .promise-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .promise-copy h2 {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }
}

/* ---- 24. FLAT / SERVICE PAGE SPECIFICS ---- */
@media (max-width: 600px) {
  .materials-grid {
    grid-template-columns: 1fr !important;
  }
  .why-grid {
    grid-template-columns: 1fr !important;
  }
  .testi-grid {
    grid-template-columns: 1fr !important;
  }
  .hours-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 25. QUICK ANSWER BOX — CONSISTENT MOBILE STYLE ---- */
@media (max-width: 600px) {
  div[style*="border-left:4px solid #E07B1A"],
  div[style*="border-left: 4px solid #E07B1A"] {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}