/* ==========================================================================
   Best Coast Plumbing — Mobile responsive retrofit
   --------------------------------------------------------------------------
   These pages were authored as fixed 1160px desktop layouts with inline
   styles. This sheet layers responsive behavior on top WITHOUT touching the
   desktop design: every rule is gated behind a max-width media query, so at
   widths > 1160px nothing here applies.

   IMPORTANT: the Design-Composer runtime re-serializes every inline style
   through the CSSOM, so authored "prop:value" becomes "prop: value" (a space
   after each colon) in the live DOM, while commas inside values are kept
   (e.g. "repeat(3, 1fr)"). All [style*="…"] selectors below therefore use the
   normalized colon-space form so they match at runtime. A few .bcp-* class
   hooks on the shared masthead + split rows handle what substrings can't.
   ========================================================================== */

/* Never allow a stray fixed element to force sideways scroll on a phone. */
html, body { max-width: 100%; }
@media (max-width: 1160px) { html, body { overflow-x: hidden; } }

/* Mobile-nav elements are inert on desktop. */
.bcp-burger { display: none; }

/* --------------------------------------------------------------------------
   1160px — release the fixed-width shell so the viewport can drive width
   -------------------------------------------------------------------------- */
@media (max-width: 1160px) {
  .bcp-shell,
  [style*="min-width: 1160px"] { min-width: 0 !important; }
}

/* --------------------------------------------------------------------------
   1024px — tablet: tighten gutters, 3/4/5-up grids become 2-up, let flex/grid
   children shrink below their desktop min-widths
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  [style*="max-width: 1240px"],
  [style*="max-width: 1180px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1000px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="min-width: 480px"],
  [style*="min-width: 460px"],
  [style*="min-width: 360px"],
  [style*="min-width: 340px"],
  [style*="min-width: 300px"],
  [style*="min-width: 280px"] { min-width: 0 !important; }
}

/* --------------------------------------------------------------------------
   860px — swap the desktop nav for a hamburger; stack hero + split rows
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {

  /* --- masthead → logo left, hamburger right --- */
  .bcp-navwrap {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 64px;
  }
  .bcp-util, .bcp-mainnav { display: none !important; }
  .bcp-logo {
    position: static !important;
    order: -1;
    width: 138px !important;
    filter: none !important;
  }
  .bcp-burger { display: block; position: relative; }
  .bcp-burger > summary {
    list-style: none;
    cursor: pointer;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: #131313; border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.22);
  }
  .bcp-burger > summary::-webkit-details-marker { display: none; }
  .bcp-burger > summary svg { display: block; }
  .bcp-burger > summary .bcp-x { display: none; }
  .bcp-burger[open] > summary .bcp-x { display: block; }
  .bcp-burger[open] > summary .bcp-bars { display: none; }
  .bcp-menu {
    /* Centered on the window at 90% width. Fixed to the viewport (the burger's
       transform was removed above so `fixed` resolves against the viewport, not
       the burger). Symmetric 5vw gutters center it; width = 100vw - 10vw = 90vw.
       border-box keeps the padding inside that 90%. top clears the masthead:
       the burger sits at a constant bottom:96px across every mobile breakpoint,
       +25px breathing room. */
    position: fixed;
    top: 121px;
    left: 5vw;
    right: 5vw;
    width: auto;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 14px;
    border-top: 5px solid #F7A81B;
    box-shadow: 0 22px 48px rgba(19,19,19,0.28);
    padding: 10px;
    z-index: 120;
    /* A fixed child escapes the native <details> collapse, so gate visibility
       on [open] explicitly instead of relying on the <details> toggle. */
    display: none;
  }
  .bcp-burger[open] > .bcp-menu { display: block; }
  .bcp-menu a {
    display: block;
    padding: 13px 15px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #131313 !important;
    text-transform: uppercase;
  }
  .bcp-menu a:hover { background: #FFF3D6; }
  .bcp-menu .bcp-menu-call {
    margin-top: 6px;
    background: #131313;
    color: #FFC93F !important;
    text-align: center;
  }
  .bcp-menu .bcp-menu-cta {
    margin-top: 6px;
    background: #0E8899;
    color: #FFFFFF !important;
    text-align: center;
  }
  .bcp-menu hr { border: none; border-top: 1px solid rgba(19,19,19,0.10); margin: 6px 4px; }

  /* --- hero + explicit split rows stack --- */
  .bcp-stack { flex-direction: column !important; align-items: stretch !important; }
  .bcp-stack > * { min-width: 0 !important; }
  [style*="display: flex"][style*="gap: 44px"] { flex-direction: column !important; align-items: stretch !important; }
  [style*="min-height: 440px"] { min-height: 280px !important; }

  /* --- horizontal trust/info rows wrap and center --- */
  [style*="justify-content: space-between"][style*="flex-wrap: nowrap"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px 26px !important;
  }

  /* --- two-column split grids collapse --- */
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.35fr 1fr"],
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1fr 1.02fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.04fr 0.96fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 3fr 5fr"],
  [style*="grid-template-columns: 360px 1fr"],
  [style*="grid-template-columns: 1fr 340px"] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   860px — masthead polish: centered logo + sunburst, flat rope, menu hovers
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {

  /* --- logo centered; burger pinned right --- */
  .bcp-navwrap {
    position: relative;
    z-index: 10; /* keep the open menu above the rope divider band (z-index: 2) */
    justify-content: center !important;
    padding-top: 10px !important;
    padding-bottom: 6px !important;
  }
  .bcp-logo {
    order: 0;
    width: 122px !important;
    margin: 0 auto;
  }
  .bcp-burger {
    position: absolute;
    right: 16px;
    top: 50%;
    /* Center vertically with margin (not transform): a `transform` here would
       make the burger the containing block for the fixed .bcp-menu below,
       trapping the dropdown in the burger's box instead of the viewport.
       -23px = half the 46px summary height. */
    margin-top: -23px;
  }

  /* --- rope divider: keep the artwork at DESKTOP scale, cropped to the
         viewport (a centered 1440px-wide window), so the rope + water read
         at the same size relative to the logo as on desktop --- */
  header > div[style*="height: 112px"] {
    height: 88px !important; /* full rope + water visible, never clipped */
    margin-top: -8px;        /* slight pull-up, with clear air below the logo */
    overflow: hidden;
  }
  header > div[style*="height: 112px"] > svg,
  header > div[style*="height: 112px"] > img {
    /* stretched a bit wider than desktop (2160px vs 1440px): keeps the rope's
       thickness while showing a full wave (dip - crest - dip) across the
       viewport; off-center crop centers the crest */
    width: 2160px !important;
    height: 112px !important;
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(calc(-50% + 300px));
  }
  /* the rays layer is anchored to the desktop logo position — off-crop here */
  header > div[style*="height: 112px"] > [data-bc-rays] { display: none !important; }

  /* --- same treatment for the flipped rope divider entering CTA sections --- */
  div[style*="height: 110px"][style*="scaleY(-1)"] { overflow: hidden; }
  div[style*="height: 110px"][style*="scaleY(-1)"] > svg,
  div[style*="height: 110px"][style*="scaleY(-1)"] > img {
    /* same flattening stretch as the header, offset the other way */
    width: 2600px !important;
    height: 110px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(calc(-50% - 300px));
  }
  div[style*="height: 110px"][style*="scaleY(-1)"] > [data-bc-rays] { display: none !important; }

  /* --- sunburst: rebuild centered behind the logo, unclipped --- */
  header > [data-bc-rays] {
    background: repeating-conic-gradient(from calc(-10deg + var(--bca, 0deg)) at 50% 76px, rgba(255,255,255,0.30) 0deg 4deg, rgba(255,255,255,0) 4deg 11deg) !important;
    -webkit-mask-image: radial-gradient(300px 210px at 50% 76px, #000 0%, transparent 72%) !important;
    mask-image: radial-gradient(300px 210px at 50% 76px, #000 0%, transparent 72%) !important;
    -webkit-mask-composite: source-over !important;
    mask-composite: add !important;
  }
  header > div[style*="radial-gradient(440px 300px"] {
    background: radial-gradient(240px 170px at 50% 76px, rgba(255,255,255,0.55), rgba(255,255,255,0) 68%) !important;
  }

  /* --- burger menu link hovers: plain items get cream, buttons darken --- */
  .bcp-menu a:hover { background: #FFF3D6; color: #131313 !important; }
  .bcp-menu .bcp-menu-call:hover { background: #000000; color: #FFD34D !important; }
  .bcp-menu .bcp-menu-cta:hover { background: #0B7280; color: #FFFFFF !important; }
}

/* --------------------------------------------------------------------------
   680px — phone: single column everywhere, fluid display type, tighter rhythm
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  [style*="max-width: 1240px"],
  [style*="max-width: 1180px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1000px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* every remaining multi-column grid → one column */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1.3fr 1.4fr"] {
    grid-template-columns: 1fr !important;
  }

  /* trim big desktop section padding so phones don't scroll dead space */
  [style*="padding: 74px 0px 78px"],
  [style*="padding: 78px 0px"],
  [style*="padding: 76px 32px 80px"],
  [style*="padding: 80px 0px"],
  [style*="padding: 72px 0px"],
  [style*="padding: 74px 0px"] {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  /* hero: tighten the gap between the header rope and the eyebrow */
  section[data-screen-label^="Hero"] > div[style*="max-width"],
  section[data-screen-label="Contact"] > div[style*="max-width"] {
    padding-top: 8px !important;
  }

  /* breadcrumbs are a desktop affordance — hide on phones (schema stays) */
  nav[aria-label="Breadcrumb"] { display: none !important; }

  /* --- center all content on phones --- */
  .bcp-shell { text-align: center; }
  .bcp-shell input,
  .bcp-shell select,
  .bcp-shell textarea { text-align: left; }
  /* wrapped pill/button/badge rows center too */
  [style*="display: flex"][style*="flex-wrap: wrap"] { justify-content: center !important; }
  /* icon + copy bullet rows: keep the pair together, centered as a unit */
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 10px"],
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 11px"],
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 12px"] {
    justify-content: center !important;
  }
  /* breadcrumb centers */
  nav[aria-label="Breadcrumb"] > div { justify-content: center !important; }
  /* icon + text pairs without explicit justification center as a unit */
  [style*="display: flex"][style*="align-items: center"]:not([style*="justify-content"]) {
    justify-content: center !important;
  }
  /* trust badge rows stack icon-above-text, centered */
  section[data-screen-label="Trust Badges"] [style*="max-width"] > [style*="align-items: center"][style*="gap: 16px"],
  section[data-screen-label="Trust Badges"] [style*="max-width"] > [style*="align-items: center"][style*="gap: 14px"],
  section[data-screen-label="Trust Badges"] [style*="max-width"] > [style*="align-items: center"][style*="gap: 12px"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  /* footer brand block: logo + social icons center */
  footer img[style*="margin-bottom: 18px"] { margin-left: auto !important; margin-right: auto !important; }
  footer [style*="display: flex"][style*="gap: 10px"] { justify-content: center !important; }

  /* review star rows center (5-star spans in review cards) */
  [style*="display: inline-flex"][style*="gap: 2px"] {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center;
  }

  /* fixed-size icon tiles center in stacked cards... */
  [style*="width: 52px"][style*="height: 52px"],
  [style*="width: 60px"][style*="height: 60px"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* ...but stay inline when they sit in a row beside their label */
  [style*="display: flex"][style*="align-items: center"] > [style*="width: 52px"][style*="height: 52px"],
  [style*="display: flex"][style*="align-items: center"] > [style*="width: 60px"][style*="height: 60px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* maps: cut height 30-35% on phones (map containers are divs; never an iframe
     — the :not(iframe) guard stops this matching the HCP lead-form iframe, whose
     inline min-height: 520px accidentally contains the "height: 520px" substring) */
  [style*="height: 520px"]:not(iframe),
  [style*="height: 500px"]:not(iframe),
  [style*="height: 480px"]:not(iframe) { height: 340px !important; }
  iframe[src*="maps"] { height: 300px !important; }

  /* fluid display type — clamps beat the fixed inline px */
  h1[style] { font-size: clamp(36px, 10.5vw, 56px) !important; }
  [style*="font-size: 80px"] { font-size: clamp(38px, 12vw, 58px) !important; }
  [style*="font-size: 66px"],
  [style*="font-size: 54px"],
  [style*="font-size: 52px"] { font-size: clamp(32px, 8.5vw, 48px) !important; }
  [style*="font-size: 48px"],
  [style*="font-size: 46px"],
  [style*="font-size: 44px"],
  [style*="font-size: 42px"] { font-size: clamp(27px, 6.8vw, 40px) !important; }
  [style*="font-size: 40px"],
  [style*="font-size: 38px"] { font-size: clamp(25px, 6.4vw, 34px) !important; }
}

/* --------------------------------------------------------------------------
   680px — round 4: hero pills 2x2, hero subcopy tighter, emergency band stack,
   section-subtitle wrap, review-card footer stacking
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  /* hero trust pills: hide the license number, shrink so they sit 2x2 */
  .bcp-lic-num { display: none; }
  span[style*="border-radius: 999px"][style*="padding: 8px 14px"] {
    font-size: 12px !important;
    padding: 7px 8px !important;
    gap: 6px !important;
  }
  section[data-screen-label="Hero"] [style*="flex-wrap: wrap"][style*="margin-top: 28px"] {
    gap: 6px !important;
  }
  /* pair longest pill with shortest so 12px text + dots still sit 2x2:
     row 1 = 24/7 Emergency Response + Free Estimates,
     row 2 = Licensed & Bonded + 10+ Years Experience */
  section[data-screen-label="Hero"] [style*="margin-top: 28px"] > span:nth-child(1) { order: 1; }
  section[data-screen-label="Hero"] [style*="margin-top: 28px"] > span:nth-child(4) { order: 2; }
  section[data-screen-label="Hero"] [style*="margin-top: 28px"] > span:nth-child(2) { order: 3; }
  section[data-screen-label="Hero"] [style*="margin-top: 28px"] > span:nth-child(3) { order: 4; }
  /* hero subcopy: match the 18px hero paragraphs on the other main pages */
  section[data-screen-label="Hero"] p[style*="font-size: 19px"] {
    font-size: 18px !important;
  }
  /* emergency band: stack badge / copy / button, centered */
  section[data-screen-label="Emergency Band"] > div {
    flex-direction: column !important;
    gap: 14px !important;
  }
  section[data-screen-label="Emergency Band"] > div > div[style*="min-width"] {
    min-width: 0 !important;
  }
  /* section subtitles: bump so the second line carries more than one word */
  [style*="text-align: center"] > p[style*="font-size: 17px"] {
    font-size: 18.5px !important;
  }
  /* review cards: name/location centered with the source pill under it */
  section[data-screen-label="Reviews"] div[style*="margin-top: auto"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* --------------------------------------------------------------------------
   sticky bottom CTA bar — phones only
   -------------------------------------------------------------------------- */
.bcp-sticky-cta { display: none; }
@media (max-width: 680px) {
  .bcp-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #131313;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.30);
    /* hidden until the hero (with its own CTAs) scrolls out of view */
    transform: translateY(120%);
    transition: transform 0.28s ease;
  }
  .bcp-sticky-cta.is-visible { transform: translateY(0); }
  .bcp-sticky-cta a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    font-size: 15px;
    padding: 13px 0;
    border-radius: 999px;
  }
  .bcp-sticky-call { background: #131313; color: #FFC93F; border: 2px solid #FFC93F; }
  .bcp-sticky-est { background: #F7A81B; color: #131313; }
  /* keep page content and footer clear of the bar */
  body { padding-bottom: 74px !important; }
}

/* --------------------------------------------------------------------------
   sticky top bar — desktop only, slides in after the masthead scrolls out
   -------------------------------------------------------------------------- */
.bcp-sticky-desk { display: none; }
@media (min-width: 861px) {
  /* anchor jumps land clear of the fixed bar */
  html { scroll-padding-top: 76px; }

  .bcp-sticky-desk {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 70;
    display: block;
    background: rgba(19, 19, 19, 0.97);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    /* -110% only clears the 64px bar itself — the 88px badge overhangs it and
       would still peek into the viewport, so pull the whole bar up further
       than bar + overhang (64px + ~32px) */
    transform: translateY(-210%);
  }
  /* no transition until the head script adds .bcp-anim one frame after load —
     the bar renders parked off-screen with zero animation on page load, then
     both the slide-down AND slide-up animate on scroll */
  /* slow, deliberate slide both directions — ease-in-out so neither the
     entrance nor the exit front-loads its motion */
  .bcp-sticky-desk.bcp-anim { transition: transform 0.67s ease-in-out; }
  .bcp-sticky-desk.is-visible { transform: translateY(0); }
  .bcp-sd-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 28px;
  }
  /* belt-and-suspenders with the -210% translate above: the overhanging badge
     stays invisible unless the bar has actually slid down */
  .bcp-sd-logo {
    display: block; flex: none; align-self: flex-start;
    opacity: 0; transition: opacity 0.18s ease;
  }
  .bcp-sticky-desk.is-visible .bcp-sd-logo { opacity: 1; }
  .bcp-sd-logo img {
    width: 88px; height: auto; display: block; margin-top: 4px;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
  }
  .bcp-sticky-desk nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
  }
  .bcp-sticky-desk nav a {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #F5F1E8;
  }
  .bcp-sticky-desk nav a:hover { color: #FFC93F; }
  .bcp-sd-call {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #FFC93F;
    color: #FFC93F;
    font-weight: 900;
    font-size: 14px;
    padding: 8px 18px;
    border-radius: 999px;
  }
  .bcp-sd-call:hover { background: rgba(255, 201, 63, 0.12); color: #FFD34D; }
  .bcp-sd-est {
    flex: none;
    background: #F7A81B;
    color: #131313;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 10px 20px;
    border-radius: 999px;
    box-shadow: 0 3px 0 #C97F06;
  }
  .bcp-sd-est:hover { background: #FFB52E; color: #131313; }
}

/* --------------------------------------------------------------------------
   440px — very small phones: final tightening
   -------------------------------------------------------------------------- */
@media (max-width: 440px) {
  [style*="max-width: 1240px"],
  [style*="max-width: 1180px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1000px"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ==========================================================================
   Round 6 (2026-07-13) — About/Services/Contact/Blog-post mobile fixes
   ========================================================================== */

/* --- About: stats "trust bar" below the hero owner image — give the four
       items real vertical breathing room once they stack, drop the vertical
       divider rules that only make sense in a row --- */
@media (max-width: 680px) {
  section[data-screen-label="Stats"] > div { gap: 24px 0 !important; }
  section[data-screen-label="Stats"] > div > div {
    border-left: none !important;
    padding: 4px 20px !important;
  }
}

/* --- Licensed/Bonded/Insured band (About "Credentials") + any similar
       icon + copy + CTA band: stack and center on phones, matching the
       homepage Emergency Band treatment --- */
@media (max-width: 680px) {
  section[data-screen-label="Credentials"] > div {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 16px !important;
  }
  section[data-screen-label="Credentials"] > div > div[style*="min-width"] {
    min-width: 0 !important;
  }
}

/* --- Services: cards with a badge stack it ABOVE the icon (column). Left on
       desktop; centered on phones with the rest of the centered card. --- */
@media (max-width: 680px) {
  .bcp-card-tophead { align-items: center !important; }
}

/* --- Contact: the info rows under the phone number — stack the icon ABOVE
       the copy, all centered, on phones --- */
@media (max-width: 680px) {
  section[data-screen-label="Contact"] [style*="align-items: flex-start"][style*="gap: 14px"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 8px !important;
  }
}

/* --- Forms: labels read left-aligned on phones (the site-wide .bcp-shell
       centering otherwise centers the field labels) --- */
@media (max-width: 680px) {
  form { text-align: left !important; }
}

/* --- Blog pagination: keep all controls on one row on the smallest phones --- */
@media (max-width: 440px) {
  .bcp-pagination { gap: 6px !important; }
  .bcp-pagination > * { height: 38px !important; }
  .bcp-pagination > button[style*="border-radius: 50%"] { width: 38px !important; }
  .bcp-pagination > button:first-child,
  .bcp-pagination > button:last-child { padding: 0 12px !important; font-size: 13.5px !important; }
}

/* --------------------------------------------------------------------------
   Single blog post — individual articles read left-aligned (NOT centered like
   the rest of the site), with a tighter header/meta and stacked callout
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  /* left-align the whole article (override the site-wide .bcp-shell centering) */
  article[data-screen-label="Article"] { text-align: left !important; }
  article[data-screen-label="Article"] [style*="flex-wrap: wrap"] {
    justify-content: flex-start !important;
  }

  /* header: smaller title + tighter, cleaner byline/meta row */
  article[data-screen-label="Article"] h1[style] {
    font-size: 26px !important;
    line-height: 1.18 !important;
    margin-bottom: 14px !important;
  }
  article[data-screen-label="Article"] div[style*="gap: 14px"][style*="flex-wrap: wrap"] {
    gap: 5px 10px !important;
    font-size: 12.5px !important;
    margin-bottom: 22px !important;
  }
  /* article hero image: shorter on phones so the top isn't so heavy */
  article[data-screen-label="Article"] div[style*="height: 420px"] {
    height: 210px !important;
    margin-bottom: 24px !important;
  }

  /* mid-article "Fixing the same problem twice?" CTA: stack cleanly */
  article[data-screen-label="Article"] div[style*="gap: 20px"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    text-align: left !important;
  }

  /* author card: stack the avatar ABOVE the bio, centered, on a phone */
  article[data-screen-label="Article"] div[style*="gap: 18px"][style*="align-items: flex-start"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 22px 22px !important;
  }
}

/* --- Water heater hero image: don't leave it over-tall on phones --- */
@media (max-width: 680px) {
  section[data-screen-label="Hero"] [style*="min-height: 480px"] {
    min-height: 300px !important;
  }
}

/* --- Estimate checkmark bullets: read left-aligned with a clean hanging
       indent on phones (the site-wide .bcp-shell centering otherwise centers
       the wrapped sentence lines, which looks ragged next to the checkmark) --- */
@media (max-width: 680px) {
  .bcp-est-checks,
  .bcp-est-checks span { text-align: left !important; }
}

/* --- Round 12 (rev 2, no underlines per Dave): header + footer links change color
       on hover only. !important because the runtime writes link colors as inline
       styles; sticky-desk bar keeps its existing gold color hover above. --- */
.bcp-mainnav > a, .bcp-mainnav span > a, .bcp-util > a { transition: color 0.15s ease; }
/* :not() guard was href$="#estimate-form"; the 2026-07-21 HCP repoint changed
   those hrefs to /contact/, so key on the .bc-book class instead. */
.bcp-mainnav > a:not(.bc-book):hover,
.bcp-mainnav span > a:hover,
.bcp-util > a[href$=".html"]:hover {
  color: #0B7C8A !important;
}
.bcp-mainnav span > a:hover svg { fill: #0B7C8A; }
footer a[style*="font-size:14px"], footer a[style*="font-size: 14px"] { transition: color 0.15s ease; }
footer a[style*="font-size:14px"]:hover,
footer a[style*="font-size: 14px"]:hover {
  color: #FFFFFF !important;
}

/* --- Round 13: blog-post mobile cleanup ---
       (0) The whole article was clipped ~17px on the right in browsers with
       classic (non-overlay) scrollbars: the table wrapper's inline
       max-width:calc(100vw - 30px) is computed from the viewport INCLUDING
       scrollbars, so it forced the article's grid column wider than the space
       that actually exists, and the shell's overflow-x:clip ate the excess.
       Fix at the root instead: let the grid column shrink below its content
       (min-width:0 on the article) and cancel the 100vw cap; the wrapper then
       sizes to the column and the wide table scrolls inside it. --- */
article[data-screen-label="Article"] { min-width: 0 !important; }
article[data-screen-label="Article"] div[style*="overflow-x:auto"],
article[data-screen-label="Article"] div[style*="overflow-x: auto"] { max-width: none !important; }

/* --- Round 14: keep the burger's X with the open menu. The menu panel is
       fixed to the viewport, but the X (the <summary>) lived in the masthead
       and scrolled away with the page, stranding the open menu with no close
       control on screen. While open, pin the X just above the panel's
       top-right corner using the SAME 5vw inset as .bcp-menu, so the two
       track each other exactly regardless of scrollbars. --- */
@media (max-width: 860px) {
  .bcp-burger[open] > summary {
    position: fixed;
    top: 67px;             /* .bcp-menu top:121px minus the 46px button and 8px air */
    right: 5vw;            /* right edges flush with the menu panel */
    z-index: 121;          /* one above the panel's 120 */
  }
}

/* --- Round 25: the "Signs your X is failing" list block on phones. The list
       rows read left (Round 24) but the little uppercase heading stayed
       centered above them, and the intro section's 52px desktop column gap
       became dead space between the list and the glance card once stacked.
       Left-align the heading with its list, tune the row gap, and close the
       stacked gap to the spacing scale's 34px. Applies to the 8 service
       pages + thousand-oaks (same intro grid). --- */
@media (max-width: 680px) {
  div[style*="text-transform: uppercase"][style*="margin-bottom: 14px"],
  div[style*="text-transform:uppercase"][style*="margin-bottom:14px"] {
    text-align: left !important;
  }
  div[style*="gap: 10px 22px"],
  div[style*="gap:10px 22px"] {
    gap: 12px 22px !important;
  }
  [style*="grid-template-columns: 1.35fr 1fr"],
  [style*="grid-template-columns:1.35fr 1fr"] {
    gap: 34px !important;
  }
}

/* --- Round 24: checkmark bullet lists (What's Included / Replacement Options
       cards on the service pages) read left-aligned beside their checks on
       phones; the shell centering otherwise centers each wrapped line into
       a ragged block next to a left-pinned checkmark. --- */
@media (max-width: 680px) {
  div[style*="align-items: flex-start"][style*="gap: 10px"][style*="font-size: 15px"],
  div[style*="align-items:flex-start"][style*="gap:10px"][style*="font-size:15px"] {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* --- Round 23: hero rating rows (stars + "5.0 rating on Google & Yelp") hug
       as ONE centered unit on phones. The review-card star-centering rule
       above gives every gap:2px star span auto side margins; inside the
       hero's flex ROW those absorb the free space and shove the stars away
       from the text. Kill the auto margins there; the row already centers
       via the icon-pair rule. Review cards (gap:14px columns) unaffected. --- */
@media (max-width: 680px) {
  div[style*="gap: 12px"] > span[style*="gap: 2px"],
  div[style*="gap:12px"] > span[style*="gap:2px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* the "5.0 rating on [G] & [Y]" text must never break mid-phrase; if the
     whole row runs out of width, the stars wrap ABOVE the badge instead,
     both centered */
  [style*="gap: 12px"]:has(> span img[src*="google-logo"]),
  [style*="gap:12px"]:has(> span img[src*="google-logo"]) {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  [style*="gap: 12px"] > span:has(img[src*="google-logo"]),
  [style*="gap:12px"] > span:has(img[src*="google-logo"]) {
    white-space: nowrap;
  }
}

/* --- Round 19: "This Service at a Glance" rows on phones: teal icons double
       to 40px and sit vertically centered to the LEFT of their text, text
       left-aligned (the generic icon-pair centering rule made the tiny icon
       float awkwardly beside centered text). Row pattern is unique to the
       glance card on the 8 service pages + thousand-oaks. --- */
@media (max-width: 680px) {
  div[style*="align-items:flex-start"][style*="gap:12px"][style*="padding:12px 0"],
  div[style*="align-items: flex-start"][style*="gap: 12px"][style*="padding: 12px 0"] {
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 16px !important;
  }
  div[style*="align-items:flex-start"][style*="gap:12px"][style*="padding:12px 0"] > svg,
  div[style*="align-items: flex-start"][style*="gap: 12px"][style*="padding: 12px 0"] > svg {
    width: 40px !important;
    height: 40px !important;
    margin-top: 0 !important;
  }
}

/* --- Round 18: blog byline block left-aligns with its header on phones. The
       generic "wrapped flex rows center" rule (above) centered the author/
       date/license rows while the category chips and H1 sit left, so the
       article header read half-left, half-centered. Same !important, later
       in the file, so this scoped rule wins. --- */
@media (max-width: 680px) {
  article[data-screen-label="Article"] div[style*="gap: 14px"][style*="flex-wrap: wrap"],
  article[data-screen-label="Article"] div[style*="gap:14px"][style*="flex-wrap:wrap"] {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* --- Round 17: FAQ accordion cards read consistently on phones. The shell's
       mobile centering made WRAPPED questions center while single-line ones
       sat left (the summary is a flex row, so a short h3 shrink-wraps at
       flex-start), and answers centered raggedly. Left-align both, matching
       the blog-article FAQ treatment. :not(.bcp-burger) keeps the nav menu
       (also a <details>) out of the answer rule. --- */
@media (max-width: 680px) {
  details > summary h3 { text-align: left !important; }
  details:not(.bcp-burger):not(.bc-guarantee-terms) > summary + div { text-align: left !important; }
  /* the runtime-rendered (button-based) FAQ answers on the service pages +
     thousand-oaks center via the shell rule too; left-align them the same
     way (both inline-style serializations) */
  section[data-screen-label="FAQ"] div[style*="padding:0 22px 20px"],
  section[data-screen-label="FAQ"] div[style*="padding: 0px 22px 20px"] {
    text-align: left !important;
  }
}

/* --- Round 16: the service pages' "…plumber near you" area band kept its
       desktop row on phones, squeezing the city chips into a ragged narrow
       column beside the "All service areas" link. Stack it: label, centered
       chip rows full-width, link underneath. --- */
@media (max-width: 680px) {
  section[data-screen-label="Related Services"] div[style*="padding:22px 26px"][style*="flex-wrap:wrap"],
  section[data-screen-label="Related Services"] div[style*="padding: 22px 26px"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  section[data-screen-label="Related Services"] div[style*="padding:22px 26px"] > div[style*="flex:1"],
  section[data-screen-label="Related Services"] div[style*="padding: 22px 26px"] > div[style*="flex: 1"] {
    justify-content: center !important;
    width: 100%;
  }
}

/* --- Round 15: numbered process-step circles center with their step text on
       phones (the ≤680 .bcp-shell centering centers the text, but the
       fixed-width badge stayed pinned left in its stacked flex column).
       Scoped to the gold 54px badges; matches both style serializations. --- */
@media (max-width: 680px) {
  div[style*="width:54px"][style*="border-radius:50%"][style*="#F7A81B"],
  div[style*="width: 54px"][style*="border-radius: 50%"][style*="rgb(247, 168, 27)"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- Round 13 (cont.): blog-post mobile cleanup ---
       (1) Comparison tables are wider than a phone and scroll sideways inside
       their wrapper, but they clip mid-word with no cue that more columns
       exist. Add a visible swipe hint that stays on-screen while the reader
       scrolls (position:sticky against the wrapper's own scrollport).
       (2) The byline row's decorative "|" separators dangle at line ends once
       the row wraps on a phone; the flex gap already separates the items.
       Selectors match both serializations of the inline styles (raw HTML has
       no space after ":", the runtime re-writes them with a space). --- */
@media (max-width: 680px) {
  article[data-screen-label="Article"] div[style*="overflow-x:auto"]::before,
  article[data-screen-label="Article"] div[style*="overflow-x: auto"]::before {
    content: "Swipe to see the full table \2192";
    display: block;
    position: sticky;
    left: 0;
    padding: 9px 14px 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #7A4517;
    background: #FBF4E4;
    border-bottom: 1px solid rgba(122, 69, 23, 0.14);
  }
  article[data-screen-label="Article"] div[style*="flex-wrap:wrap"][style*="margin-bottom:26px"] > span[style*="opacity"],
  article[data-screen-label="Article"] div[style*="flex-wrap: wrap"][style*="margin-bottom: 26px"] > span[style*="opacity"] {
    display: none !important;
  }
}

/* --- Round 27: center the "Signs your X ..." warning block on phones as
       one unit. The rows read left (Rounds 24-25) but the whole block hugged
       the container's left edge, leaving all the spare width on the right.
       Shrink the heading and the grid to their content width and center
       them; text and warning icons keep their left alignment inside the
       block. Scoped by the #131313 heading color so the teal blog-sidebar
       uppercase headings (Recent Posts etc.) stay untouched. Matches both
       style serializations (raw hex / runtime rgb). --- */
@media (max-width: 680px) {
  div[style*="text-transform:uppercase"][style*="color:#131313"][style*="margin-bottom:14px"],
  div[style*="text-transform: uppercase"][style*="color: rgb(19, 19, 19)"][style*="margin-bottom: 14px"],
  div[style*="gap:10px 22px"],
  div[style*="gap: 10px 22px"] {
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- Round 28 (2026-07-17): contact map is now the Leaflet pins map (was a Google
       place embed). Same 420px desktop frame; shrink to 300px on phones like the
       old iframe rule did. Scoped to the contact Service Area Map section. --- */
@media (max-width: 680px) {
  [data-screen-label="Service Area Map"] div[style*="height: 420px"],
  [data-screen-label="Service Area Map"] div[style*="height:420px"] { height: 300px !important; }
}

/* --- Round 29 (2026-07-17): homepage hero H1 is now the 19px what+where sentence
       (the old slogan h1 was demoted to a div for SEO). The generic h1[style] clamp
       at line ~353 would blow it up to 36px+; pin it to the 18px the old <p> used. --- */
@media (max-width: 680px) {
  section[data-screen-label="Hero"] h1[style*="font-size: 19px"],
  section[data-screen-label="Hero"] h1[style*="font-size:19px"] {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
}


/* --- Round 31 (2026-07-17): services-grid 24/7 + Same-Day pills float to the card's
       upper-right on DESKTOP so all 8 card headers start at the same height; phones
       keep the in-flow pill (the mobile rules center pill + icon as a pair). --- */
@media (min-width: 681px) {
  .bcp-card-pill {
    position: absolute;
    top: 18px;
    right: 18px;
  }
}

/* --- Round 50 (2026-08-07, Dave's 375 review of the Astro build): four mobile
       alignment fixes on the service pages. Root cause for 1-2: the Astro port
       serializes inline styles as "prop: value" with raw hex colors, and the
       old Round 15/27 selectors only matched no-space+hex (prototype source)
       or space+rgb (runtime CSSOM) - so those rules have been DEAD on the
       static build. Variants below match the shipped serialization. --- */
@media (max-width: 680px) {
  /* 1. "Signs your X ..." mini-heading: center the heading text itself
        (supersedes the Round-27 fit-content-left treatment for the heading;
        the signs grid below it keeps its existing centering). */
  div[style*="text-transform: uppercase"][style*="color: #131313"][style*="margin-bottom: 14px"] {
    width: auto !important;
    text-align: center !important;
  }
  /* 2. "What to Expect" gold numbered circles center above their step text. */
  div[style*="width: 54px"][style*="border-radius: 50%"][style*="#F7A81B"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 3. Why Best Coast bullet rows: the teal icon tile stacks ABOVE its
        centered text instead of floating left of it. */
  [data-screen-label="Why Choose Us"] div[style*="display: flex"][style*="gap: 14px"]:has(> div[style*="width: 42px"]) {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  /* 4. Done-Right Guarantee line: the shield icon flows inline right before
        the centered text instead of floating left of the wrapped lines. */
  [data-screen-label="Why Choose Us"] div[style*="align-items: center"][style*="gap: 10px"][style*="margin-top: 20px"] {
    display: block !important;
    text-align: center;
  }
  [data-screen-label="Why Choose Us"] div[style*="align-items: center"][style*="gap: 10px"][style*="margin-top: 20px"] > svg {
    display: inline-block;
    vertical-align: -4px;
    margin-right: 6px;
  }
}