/* Rockville MD Expert Plumbers - shared stylesheet
   Visual identity carried over from the supplied D21 design reference (Section 4F.3):
   tokens, Dela Gothic One + IBM Plex Sans, 2px borders, hard offset shadows,
   yellow nav band, rotating card top borders, rotated sticker CTA.
   Every Batch 0 defect (B0-01 to B0-17) is fixed here or in the template, at source. */

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=IBM+Plex+Sans:wght@400;700&display=swap');

:root{
  --bg:#F5F0E8;
  --magenta:#FF1493;
  --green:#00FF88;
  --yellow:#FFE500;
  --dark:#0A0A0A;
  --maxw:1120px;
  --prose:820px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Sans',sans-serif;color:var(--dark);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--dark)}

.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--yellow);color:#000;padding:.6rem 1rem;font-weight:700;text-decoration:none;border:2px solid #000}
.skip-link:focus{left:0}

/* ---------- masthead ---------- */
.masthead{background:#fff;border-bottom:2px solid var(--dark)}
.masthead-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem;flex-wrap:wrap}
.brand{font-family:'Dela Gothic One',sans-serif;font-size:.95rem;color:var(--dark);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.brand span{color:var(--magenta)}
.brand-logo{display:block;height:52px;width:auto;flex:0 0 auto;object-fit:contain}
.footer-brand .brand-logo{background:#fff;border:2px solid #fff;border-radius:6px;padding:3px;height:58px}
.masthead-tag{font-size:.78rem}

/* ---------- nav ---------- */
.nav{background:var(--yellow);border-bottom:2px solid var(--dark)}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;padding:0 1.25rem}
.nav-toggle{display:none}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex:1}
.nav-item{position:relative;display:flex}
.nav-link{padding:.7rem .85rem;color:var(--dark);text-decoration:none;font-size:.8rem;font-weight:700;text-transform:uppercase;border:0;background:none;cursor:pointer;font-family:'IBM Plex Sans',sans-serif}
.nav-link:hover{background:var(--magenta);color:#fff}
.nav-caret{font-size:.7rem;margin-left:.25rem}
.dropdown{position:absolute;top:100%;left:0;z-index:60;min-width:280px;background:#fff;border:2px solid var(--dark);box-shadow:4px 4px 0 #000;padding:.5rem;display:none}
/* B0-05 fix: hover AND focus-within, so the dropdown is keyboard reachable.
   Scoped to the desktop breakpoint deliberately. Left unscoped, :focus-within
   fires on mobile too: focusing the toggle button after Escape re-opened the
   panel, which broke Escape handling and also masked whether the
   .nav-item.open rule below was doing any work at all. Hover and focus-within
   are desktop affordances; mobile uses the explicit .open class only. */
@media (min-width:768px){
  .nav-item:hover>.dropdown,
  .nav-item:focus-within>.dropdown{display:block}
}
.dropdown a{display:block;padding:.45rem .6rem;color:var(--dark);text-decoration:none;font-size:.85rem;font-weight:700}
.dropdown a:hover,.dropdown a:focus{background:var(--yellow)}
.dropdown-group{margin:0 0 .4rem}
.dropdown-group:last-child{margin-bottom:0}
.dropdown-group h3{font-family:'IBM Plex Sans',sans-serif;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#555;margin:.5rem .6rem .15rem;border-bottom:1px solid #ddd;padding-bottom:.2rem}
.dropdown .view-all{margin-top:.4rem;border-top:2px solid var(--dark);padding-top:.5rem;color:var(--magenta)}
.nav-phone{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;min-height:44px;background:var(--magenta);color:#fff;border:2px solid var(--dark);text-decoration:none;font-weight:700;white-space:nowrap}
.nav-phone-icon{font-size:1rem;line-height:1}
.nav-phone-label{font-size:.85rem}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.section{padding:3rem 0}
.band{background:#fff;border-top:2px solid var(--dark);border-bottom:2px solid var(--dark)}
.crumbs{font-size:.85rem;padding:.9rem 0 0}
.crumbs a{color:var(--dark);text-decoration:underline}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li+li::before{content:"/ ";color:#777}

/* ---------- hero ---------- */
.hero{background:var(--bg);padding:3.5rem 0 2.5rem}
.hero .eyebrow{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dark);font-weight:700;margin:0}
h1{font-family:'Dela Gothic One',sans-serif;font-size:56px;line-height:1.1;margin:.6rem 0 1.1rem;color:var(--dark);max-width:20ch}
/* B0-16 note: highlight spans are rendered statically in the template, not injected by JS */
h1 .hl1{background:var(--magenta);color:#fff;padding:0 .2rem}
h1 .hl2{background:var(--yellow);color:#000;padding:0 .2rem}
.hero p{max-width:60ch;font-size:1.05rem;color:#222;margin:0 0 1.3rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem}

h2{font-family:'Dela Gothic One',sans-serif;font-size:1.7rem;color:var(--dark);margin:0 0 .8rem;line-height:1.25}
h2.ruled{position:relative;padding-bottom:.6rem}
h2.ruled::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:4px;background:var(--magenta)}
h3{font-family:'Dela Gothic One',sans-serif;font-size:1.05rem;margin:0 0 .5rem;color:var(--dark);line-height:1.3}
p{margin:0 0 1.2rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.5rem;text-decoration:none;font-weight:700;min-height:48px;border:2px solid var(--dark);box-shadow:4px 4px 0 #000;transition:box-shadow .08s,transform .08s;font-family:'IBM Plex Sans',sans-serif;text-transform:uppercase;font-size:.9rem}
.btn:hover{box-shadow:2px 2px 0 #000;transform:translate(2px,2px)}
.btn-accent{background:var(--magenta);color:#fff}
.btn-ghost{background:var(--green);color:#000}
.cta-inline{margin:1.6rem 0;text-align:center}

/* ---------- B0-08 fix: .prose and .lede had no CSS rule at all.
   Also satisfies E29, body copy in a centered boxed container by default. ---------- */
.prose{max-width:var(--prose);margin:0 auto;background:#fff;border:2px solid var(--dark);box-shadow:4px 4px 0 #000;padding:1.6rem 1.75rem}
.prose>*:last-child{margin-bottom:0}
.prose p,.prose li{max-width:72ch}
.lede{font-size:1.05rem;font-weight:700;max-width:68ch;margin:0 0 1.2rem}

/* ---------- grids and cards ---------- */
/* A boxed .prose intro followed by a card grid (the /services/ hub) otherwise
   sits flush on the cards' top borders. Spacing belongs to the pairing, not
   to either element, so neither is changed where it appears alone. */
.prose+.grid{margin-top:1.6rem}
.grid{display:grid;gap:1.2rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:2px solid var(--dark);box-shadow:4px 4px 0 #000;padding:1.2rem;position:relative;border-top:6px solid var(--magenta)}
.card:nth-child(3n+2){border-top-color:var(--yellow)}
.card:nth-child(3n){border-top-color:var(--green)}
.card h3 a{color:var(--dark);text-decoration:none}
.card:hover h3 a{text-shadow:2px 0 0 #ff00ff,-2px 0 0 #00ffff}
.card p{font-size:.94rem}
.card .card-link{margin-top:.6rem;font-weight:700;font-size:.88rem;color:var(--dark);text-decoration:underline;display:inline-block}
.feature{margin:0 0 1.4rem;background:#fff;border:2px solid var(--dark);box-shadow:4px 4px 0 #000;padding:1.25rem}
.feature:last-child{margin-bottom:0}
.feature ul{margin:.4rem 0 0;padding-left:1.1rem}
.feature li{margin:0 0 .35rem}

/* fact list, a non-prose scannable element */
.facts{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.facts li{overflow-wrap:anywhere;background:var(--bg);border:2px solid var(--dark);padding:.7rem .9rem;font-size:.94rem}
.facts strong{display:block;font-family:'Dela Gothic One',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem}

/* B0 extra: table wrapper so a wide table cannot blow out the viewport */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:2px solid var(--dark);box-shadow:4px 4px 0 #000;background:#fff}
.table-wrap table{border-collapse:collapse;width:100%}
.table-wrap th,.table-wrap td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid #ddd;font-size:.92rem}
.table-wrap th{font-family:'Dela Gothic One',sans-serif;font-size:.78rem;text-transform:uppercase;background:var(--yellow);border-bottom:2px solid var(--dark)}
.table-wrap tr:last-child td{border-bottom:0}

/* ---------- image slots (Section 4H, slots only, no real photography) ---------- */

/* ---------- FAQ ---------- */
.faq details{border:2px solid var(--dark);box-shadow:4px 4px 0 #000;padding:.2rem;margin:0 0 1rem;background:#fff}
.faq summary{cursor:pointer;padding:.85rem 1rem;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:'IBM Plex Sans',sans-serif}
.faq summary::-webkit-details-marker{display:none}
/* B0-09 fix: plain hyphen and plus, no en-dash glyph anywhere */
.faq summary::after{content:"+";color:var(--magenta);font-size:1.3rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"-"}
.faq .faq-body{padding:.25rem 1rem .5rem}
.faq .faq-body>*:last-child{margin-bottom:.5rem}

/* ---------- areas ---------- */
.area-cols{columns:2;column-gap:2rem}
.area-cols ul{list-style:none;margin:0;padding:0}
.area-cols li{margin:0 0 .35rem;break-inside:avoid}
.area-cols a{color:var(--dark);text-decoration:underline;font-weight:700;font-size:.92rem}
.zipcard{background:var(--yellow);border:2px solid var(--dark);box-shadow:4px 4px 0 #000;padding:1.1rem 1.25rem;margin-top:1.4rem}
.zipcard h3{margin-bottom:.4rem}
.zipcard p{margin-bottom:.6rem;font-size:.94rem}
.zipcard .ziplist{font-family:'Dela Gothic One',sans-serif;font-size:1rem;letter-spacing:.04em;margin:0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--yellow);border-top:2px solid var(--dark)}
/* B0-06 fix: .sticker is rendered in the markup, not created by JS at runtime */
.cta-band .sticker{background:#fff;border:3px solid var(--dark);box-shadow:8px 8px 0 var(--magenta);padding:2rem;transform:rotate(1.5deg);max-width:640px}
.cta-band h2{color:var(--dark)}
.cta-band p{color:#222}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:#eee}
.site-footer .container{padding-top:2.4rem;padding-bottom:1.4rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.6rem}
.footer-brand .brand{color:#fff}
.footer-brand p{font-size:.88rem;color:#ccc}
.site-footer h3{color:var(--yellow);font-size:.85rem;text-transform:uppercase;font-family:'Dela Gothic One',sans-serif;margin-bottom:.6rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 .4rem}
.site-footer a{color:#ccc;text-decoration:none;font-size:.88rem}
.site-footer a:hover,.site-footer a:focus{color:#fff;text-decoration:underline}
.footer-phone{display:inline-flex;align-items:center;min-height:44px;font-family:'Dela Gothic One',sans-serif;font-size:1.05rem;color:#fff;text-decoration:none;margin:.2rem 0}
.footer-email{display:inline-flex;align-items:center;min-height:44px;font-size:.88rem;color:#ccc;margin-bottom:.2rem}
.footer-nap{font-size:.85rem;color:#bbb;margin:.3rem 0 0}
.footer-legal{border-top:1px solid #333;margin-top:1.4rem;padding-top:1rem;font-size:.8rem;color:#999;display:grid;gap:.6rem}
.disclaimer{font-size:.78rem;line-height:1.5;color:#8d8d8d;margin:0}

/* ---------- sticky mobile call bar ---------- */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--magenta);border-top:2px solid var(--dark)}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem;color:#fff;text-decoration:none;font-weight:700;min-height:48px}

/* ---------- B0-07 fix: content is visible by default.
   JS opts in to the reveal only when IntersectionObserver exists, by adding
   .reveal-ready to <html>. Nothing is ever hidden by JS alone. ---------- */
.card,.feature{opacity:1;transform:none}
.reveal-ready .card,.reveal-ready .feature{opacity:0;transform:translateY(-24px);transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
.reveal-ready .card.is-in,.reveal-ready .feature.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-ready .card,.reveal-ready .feature{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}

:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}

/* ---------- mobile ---------- */
@media (max-width:767px){
  h1{font-size:34px;max-width:none}
  h2{font-size:1.4rem}
  .btn,.card,.feature,.faq details,.prose,.zipcard,.table-wrap{box-shadow:3px 3px 0 #000}
  .nav-toggle{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;color:var(--dark);font-family:'IBM Plex Sans',sans-serif;font-weight:700;padding:.75rem 0;cursor:pointer;min-height:48px}
  .nav-in{flex-wrap:wrap;align-items:center}
  .nav-list{display:none;flex-direction:column;flex-basis:100%;border-top:2px solid var(--dark)}
  .nav-list.open{display:flex}
  .nav-item{display:block}
  .nav-link{display:block;width:100%;text-align:left;padding:.85rem .25rem;min-height:48px}
  /* B0-01 fix, the Critical one: the JS toggles .open on .nav-item but no CSS
     rule ever revealed the panel, so on a touch device (no hover) every service
     and area link was unreachable. */
  .dropdown{position:static;min-width:0;border:0;border-left:4px solid var(--magenta);box-shadow:none;margin:0 0 .5rem .25rem;padding:.25rem 0 .25rem .6rem;background:transparent}
  .nav-item.open>.dropdown{display:block}
  .dropdown a{padding:.6rem .25rem;min-height:44px;display:flex;align-items:center}
  .dropdown-group h3{margin-left:.25rem}
  .nav-phone{margin:0 0 .6rem auto}
  /* B0-02 fix: .footer-grid had no mobile collapse, so four columns stayed side
     by side and pinned scrollWidth at 445px, overflowing 31 to 125px. */
  .footer-grid{grid-template-columns:1fr;gap:1.4rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .area-cols{columns:1}
  .prose{padding:1.1rem 1.15rem}
  /* Tap targets. 44px is enforced on controls and on link LISTS, where a row of
     links is the interaction. Inline links inside prose are left at their
     natural height: WCAG 2.5.8 exempts links in a sentence, and padding them
     out would wreck the line spacing for no real gain. */
  .area-cols a{display:flex;align-items:center;min-height:44px}
  .area-cols li{margin:0}
  .card .card-link{display:flex;align-items:center;min-height:44px}
  .site-footer li a{display:inline-flex;align-items:center;min-height:44px}
  .cta-band .sticker{transform:none;padding:1.4rem;max-width:none}
  .sticky-cta{display:block}
  body{padding-bottom:56px}
}
@media (min-width:768px) and (max-width:900px){
  .nav-link{padding:.7rem .55rem;font-size:.74rem}
  .nav-phone{padding:.5rem .75rem}
}

/* Tables on phones: stack each row into labelled lines. The previous rule gave
   every table min-width:30rem, so below roughly 520px the right-hand column sat
   behind a sideways scroll inside its wrapper. Page overflow still measured 0px,
   which is why that defect passed every viewport check until 2026-10-16. */
@media (max-width:640px){
  .table-wrap{overflow-x:visible}
  .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap caption{display:block;text-align:left;padding:.7rem .8rem;font-weight:700;border-bottom:2px solid var(--dark)}
  .table-wrap tr{border-bottom:2px solid var(--dark);padding:.35rem 0}
  .table-wrap tr:last-child{border-bottom:0}
  .table-wrap td{border-bottom:0;padding:.3rem .8rem}
  .table-wrap td::before{content:attr(data-label);display:block;font-family:'Dela Gothic One',sans-serif;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.1rem}
}

.map-wrap{position:relative;aspect-ratio:16/10;margin:1.2rem 0;border:2px solid #000;background:#e8e3d8;overflow:hidden;max-width:100%}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- hub coverage map (rules s12) ---------- */
.cmap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.6rem;align-items:start;margin-top:1.4rem}
.cmap-frame{border:2px solid var(--dark);box-shadow:4px 4px 0 #000;background:#fff;overflow:hidden}
.cmap-svg{display:block;width:100%;height:auto}
.cm-bg{fill:#fbf8f1}
.cm-road{fill:none;stroke:#9a9a9a;stroke-width:1.3;stroke-linejoin:round}
.cm-roadlab{font:700 6.5px 'IBM Plex Sans',sans-serif;fill:#6b6b6b}
.cm-dot{fill:var(--magenta);stroke:#000;stroke-width:1.2}
.cm-hit{fill:transparent}
.cm-pin{cursor:pointer;outline:none}
.cm-pin:hover .cm-dot,.cm-pin:focus-visible .cm-dot{fill:var(--yellow);stroke-width:2.2}
.cm-pin:focus-visible .cm-hit{stroke:#000;stroke-width:2;stroke-dasharray:4 3}
.cm-city circle{fill:var(--yellow);stroke:#000;stroke-width:2}
.cm-label{font:700 7.5px 'IBM Plex Sans',sans-serif;fill:#000;paint-order:stroke;stroke:#fbf8f1;stroke-width:2.4px}
.cmap-cap{font-size:.84rem;margin:.6rem 0 .3rem}
.chips{list-style:none;margin:.4rem 0 .8rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{font-family:'Dela Gothic One',sans-serif;font-size:.85rem;letter-spacing:.04em;border:2px solid #000;background:var(--yellow);padding:.2rem .6rem}
.range-callout{border:2px solid #000;background:#fff;box-shadow:3px 3px 0 #000;padding:.9rem 1rem;margin-top:1rem}
.range-callout h3{margin:0 0 .3rem}
@media (max-width:760px){.cmap{grid-template-columns:minmax(0,1fr)}.cm-label{display:none}}
.cmap-list,.cmap-map{min-width:0}

/* Stage 2 content images (namespaced; no effect on links, buttons or logos) */
.media{margin:1.5rem auto;width:100%}
.media img{display:block;width:100%;height:auto;margin:0 auto;border:2px solid var(--dark)}
.media figcaption{font-size:.9rem;line-height:1.45;color:#374151;margin:.5rem auto 0;padding:0 .25rem}
.media-body{clear:both}
.media-hero img{aspect-ratio:16/9;object-fit:cover;object-position:var(--op,50% 50%)}
@media (max-width:600px){.media-hero img{aspect-ratio:4/3}}