/* ==========================================================================
   ProCharger Cleaning — responsive pass
   Mobile 320–480px · Tablet 481–1024px. Desktop (>1024px) is unchanged.

   Loaded after each page's inline <style> blocks, so equal-specificity rules
   win by source order; !important is used only where it must beat a builder
   inline style="" attribute (inline styles here are never marked !important,
   so an author !important rule overrides them).
   ========================================================================== */

/* ---- Global overflow guards -------------------------------------------- */
img, iframe, video, svg { max-width: 100%; }

/* ---- Navigation: collapse to the hamburger across the whole tablet range.
   The full desktop nav (7 links + phone + CTA) doesn't fit until ~1100px, so it
   overflowed at 1024px; the page's own rule only collapsed it at ≤900px.
   Desktop (>1024px) keeps the full nav, untouched. ----------------------- */
@media (max-width: 1024px) {
  [data-desktop-nav] { display: none !important; }
  [data-desktop-cta] { display: none !important; }
  [data-mobile-toggle] { display: flex !important; }
}
/* Keep every nav item on ONE line — no "SERVICE AREA" stacking. The desktop
   nav only shows >1024px; tighten spacing in the snug 1025–1200 band so the
   full 8-link row still fits on a single line. */
[data-desktop-nav] a { white-space: nowrap !important; }
@media (min-width: 1025px) and (max-width: 1240px) {
  [data-desktop-nav] { gap: 2px !important; }
  [data-desktop-nav] a { padding-left: 9px !important; padding-right: 9px !important; font-size: 13px !important; }
}

/* ---- Card grids: stack un-hooked repeat(3|4) grids on small screens (#4).
   Some section grids (e.g. the trust/promise rows) have no data-attribute hook,
   so they stayed 3- or 4-up and pushed the last card off-screen on phones.
   Matches the rendered inline style ("grid-template-columns: repeat(3, 1fr)"). */
@media (max-width: 760px) {
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
}

/* ---- Google Maps embed: fluid at every width (#3) ---------------------- */
.sc-host[data-sc-name="AreaMap"] iframe,
iframe[src*="google.com/maps"] {
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

/* ==========================================================================
   FOOTER (#1)
   The builder re-serialized inline styles with a space after each colon
   ("grid-template-columns: 1.6fr …"), so the footer's original media queries
   — which matched [style*="grid-template-columns:1.6fr"] (no space) — never
   fired and the four columns stayed side-by-side, pushing Services off-screen.
   Target the grid structurally instead, and let the long email wrap.
   ========================================================================== */
footer > div:first-child > div { min-width: 0; }              /* tracks may shrink */
footer a, footer p { overflow-wrap: anywhere; word-break: break-word; }
footer a[style*="nowrap"] { white-space: normal !important; } /* email no longer forces width */

/* Two columns across the tablet range (brand block spans full width) */
@media (max-width: 1024px) {
  footer > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  footer > div:first-child > div:first-child { grid-column: 1 / -1 !important; }
}

/* One full-width column below 768px */
@media (max-width: 767px) {
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  footer { padding-left: 6vw !important; padding-right: 6vw !important; }
}

/* ==========================================================================
   HERO (#2, Home only) — three-mech lineup
   Desktop shows all three department mechs in a row (Mely/Residential,
   Andy/Carpet, Crimson/Restoration). On tablet the row tightens; on phones it
   stacks into three full-size cards. Each mech sits on a consistent glow +
   shadow pad + bottom scrim so their differing bases read as one grounded look.
   ========================================================================== */
@media (max-width: 900px) {
  [data-tri-row] { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  /* third mech spans full width on the second row so it never sits alone-tiny */
  [data-tri-row] > [data-tri-col]:nth-child(3) { grid-column: 1 / -1 !important; }
  [data-tri-row] > [data-tri-col]:nth-child(3) [data-tri-stage] { height: 320px !important; }
}
@media (max-width: 620px) {
  [data-tri-row] { grid-template-columns: 1fr !important; gap: 30px !important; }
  [data-tri-row] > [data-tri-col]:nth-child(3) { grid-column: auto !important; }
  [data-tri-stage] { height: 300px !important; }
  [data-tri-col] [data-tri-mech] { max-height: 300px !important; }
}

/* ==========================================================================
   OVERFLOW AUDIT tail (#4) — long nowrap lines that force min-content width
   ========================================================================== */
@media (max-width: 600px) {
  [data-est-row] [style*="nowrap"],
  [data-contact-grid] [style*="nowrap"] { white-space: normal !important; }
  [data-est-row] > div { min-width: 0 !important; }
}

/* ==========================================================================
   TAP TARGETS & READABLE TEXT (#6) — phones
   ========================================================================== */
@media (max-width: 600px) {
  /* comfortable 44px touch targets for footer links */
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  footer > div:first-child > div > div > a { line-height: 1.3; }
  /* readable body copy */
  body { font-size: 16px; }
  footer p, footer > div:first-child > div > div { font-size: 15px; }
}