/* ============================================================================
   County hub add-on styles.

   Loaded by template-v2-county.php AFTER v2-city.css, which stays the base and is
   not touched. Everything here is either a brand new .cty-* class (the county
   ledger, which no other page has) or a county-scoped tweak under .mhp-v2-county.
   Nothing already declared in v2-city.css is redeclared, so this file cannot drift
   away from the shared design system or fight another build's edits.

   Tokens (--navy, --teal, --gold, --ground-2, --disp, --body, --hairline...) all
   come from the :root block in v2-city.css.
   ========================================================================== */

/* ================= THE LEDGER BAND ================= */
.cty-ledger{
  background:var(--ground-2);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:clamp(64px,8vw,118px) 0;
}
.cty-ledger .cty-head{ max-width:760px; margin-bottom:clamp(34px,4vw,54px); }
.cty-ledger .cty-head h2{ margin-bottom:20px; }
.cty-ledger .cty-head .dek{
  font-family:var(--body); font-size:clamp(17px,1.5vw,19.5px);
  line-height:1.66; color:var(--ink-soft); max-width:64ch;
}

/* --- the derived county total --- */
.cty-total{
  display:flex; align-items:center; gap:clamp(20px,3vw,38px);
  flex-wrap:wrap;
  background:var(--navy);
  border-radius:4px;
  padding:clamp(26px,3.4vw,40px) clamp(24px,3.4vw,44px);
  margin-bottom:clamp(34px,4vw,52px);
  box-shadow:0 26px 54px -30px rgba(15,29,45,.6);
}
.cty-total .num{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(58px,8vw,104px); line-height:.88;
  letter-spacing:-.035em; color:var(--gold);
  flex-shrink:0;
}
.cty-total .num .u{ font-size:.48em; vertical-align:.42em; margin-left:.02em; }
.cty-total-copy{ min-width:0; flex:1 1 320px; }
.cty-total .lbl{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(15px,1.5vw,19px); line-height:1.35;
  letter-spacing:.02em; color:#fff; margin-bottom:10px;
}
.cty-total .sub{
  font-family:var(--body); font-size:15.5px; line-height:1.6;
  color:rgba(255,255,255,.72); max-width:56ch;
}

/* --- route groups ---
   One full-width card per route, with the town rows flowing across as many columns as
   the viewport allows. Counties differ a lot in shape (San Joaquin is one route of seven
   towns, Amador is two routes of ten and three), and a card-per-route grid left either a
   dead column or one very tall single column. Letting the ROWS wrap instead keeps every
   county dense at 1440 and stacks cleanly at 390. */
.cty-routes{ display:flex; flex-direction:column; gap:clamp(16px,1.8vw,24px); }
.cty-route{
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,30px) clamp(14px,1.6vw,20px);
  min-width:0;
}
.cty-route h3{
  font-family:var(--disp); font-weight:700; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal-deep);
  padding-bottom:13px; margin-bottom:6px;
  border-bottom:2px solid var(--gold);
  display:inline-block;
}
.cty-rows{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  column-gap:clamp(22px,3vw,52px);
}
.cty-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  padding:13px 0;
  border-bottom:1px solid var(--hairline);
  min-width:0;
}
.cty-row .t{
  font-family:var(--disp); font-weight:600; font-size:16px;
  line-height:1.35; color:var(--navy); text-decoration:none;
  min-width:0; overflow-wrap:anywhere;
}
.cty-row a.t{ transition:color .16s ease; }
.cty-row a.t:hover{ color:var(--teal-deep); text-decoration:underline; text-underline-offset:3px; }
.cty-row .t-plain{ color:var(--ink-faint); font-weight:500; }
.cty-row .c{
  flex-shrink:0;
  font-family:var(--disp); font-weight:700; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--teal-deep); background:rgba(20,144,127,.10);
  border-radius:999px; padding:4px 11px; white-space:nowrap;
}

.cty-foot{
  margin-top:clamp(26px,3vw,40px);
  font-family:var(--body); font-size:17px; line-height:1.7;
  color:var(--ink-soft); max-width:72ch;
}
.cty-foot a{ color:var(--teal-deep); font-weight:600; }

/* ================= COUNTY-SCOPED TWEAKS ================= */
/* The county hero carries a longer H1 than a town hero ("Cabinet Painting &
   Refinishing in Calaveras County"), so let it wrap on its own terms instead of
   running past the scrim on a phone. */
.mhp-v2-county .hero h1{ text-wrap:balance; }

/* Long county names in the FAQ heading and the pullband, same reason. */
.mhp-v2-county .faq .sticky h2{ text-wrap:balance; }

@media (max-width:760px){
  .cty-total{ gap:14px; }
  .cty-total .num{ line-height:.9; }
  .cty-rows{ grid-template-columns:1fr; column-gap:0; }
}