/* =============================================================================
   Zenergy Consultants — city / county landing page styles
   Loaded only on generated pages: /service-areas/, /<county>/, /<county>/<city>/
   Extends css/styles.css (design tokens come from there).

   IMPORTANT for this file: any rule that sets `display` on a selector which can
   match a nested .lang-en / .lang-zh span will break the language toggle,
   because `.lang-en,.lang-zh{display:none}` is only (0,1,0) specificity.
   Use child combinators (`>`) for card labels. See .county-index-card>span.
   ========================================================================== */

/* ---------------------------------------------------------------- breadcrumbs */
.crumbs {
  max-width:1180px;
  margin:0 auto;
  padding:26px 6% 0;
  font:500 13px var(--sans);
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.crumbs a {
  color:var(--muted);
  text-decoration:none;
}
.crumbs a:hover {
  color:var(--green);
}
.crumbs [aria-current] {
  color:var(--ink);
  font-weight:600;
}

/* -------------------------------------------------------------------- hero */
.city-hero {
  max-width:1180px;
  margin:0 auto;
  padding:56px 6% 60px;
}
.city-hero h1 {
  /* The global h1 is display-scale (up to 6.8rem); city pages need a tighter fit. */
  font-size:clamp(2.3rem,4.6vw,3.9rem);
  max-width:20ch;
  margin:14px 0 20px;
}
.city-hero .eyebrow {
  color:var(--green);
  letter-spacing:.16em;
  font-size:12px;
  font-weight:700;
}
.city-hero .lede {
  font-size:clamp(1.02rem,1.4vw,1.18rem);
  color:#4d6065;
  max-width:74ch;
  line-height:1.75;
}
.city-hero .actions {
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  align-items:center;
  margin:30px 0 0;
}

/* ----------------------------------------------------------------- fact bar */
.fact-bar {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;
  margin:44px 0 0;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.fact-bar>div {
  background:var(--cream);
  padding:18px 20px;
}
.fact-bar dt {
  font:600 11px var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}
.fact-bar dd {
  margin:0;
  font:600 15px var(--sans);
  color:var(--deep);
  line-height:1.4;
}

/* --------------------------------------------------------------- prose grid */
.prose-grid {
  display:grid;
  gap:22px 3.4%;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:1180px;
}
.prose-grid p {
  color:#4d6065;
  font-size:15px;
  line-height:1.8;
  margin:0;
}

/* --------------------------------------------------------------- check list */
.check-list {
  list-style:none;
  padding:0;
  margin:26px 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px 2.6%;
  max-width:1180px;
}
.check-list li {
  position:relative;
  padding:16px 18px 16px 48px;
  background:#fff;
  border:1px solid #e1e8e4;
  border-radius:8px;
  font-size:14.5px;
  line-height:1.65;
  color:#4d6065;
}
.check-list li::before {
  content:"";
  position:absolute;
  left:19px;
  top:22px;
  width:11px;
  height:6px;
  border-left:2px solid var(--green);
  border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

/* ------------------------------------------------------- verify + process */
.verify-list {
  list-style:none;
  padding:0;
  margin:8px 0 34px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px 2.6%;
  max-width:1180px;
}
.verify-list li {
  position:relative;
  padding:15px 18px 15px 46px;
  background:#fff;
  border:1px solid #e1e8e4;
  border-left:3px solid var(--green);
  border-radius:6px;
  font:600 14.5px var(--sans);
  color:var(--deep);
  line-height:1.55;
}
.verify-list li::before {
  content:"";
  position:absolute;
  left:20px;
  top:21px;
  width:11px;
  height:6px;
  border-left:2px solid var(--green);
  border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

.step-strip {
  list-style:none;
  counter-reset:s;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
  padding:28px 0 0;
  margin:0;
  max-width:1180px;
  border-top:1px solid var(--line);
}
.step-strip li {
  counter-increment:s;
  position:relative;
  padding-top:32px;
  font:600 14.5px var(--sans);
  color:var(--deep);
  line-height:1.5;
}
.step-strip li::before {
  content:counter(s,decimal-leading-zero);
  position:absolute;
  top:0;
  left:0;
  font:700 12px var(--sans);
  letter-spacing:.1em;
  color:var(--green);
}

/* ------------------------------------------------------------- fact table */
.fact-table {
  width:100%;
  max-width:1180px;
  border-collapse:collapse;
  background:#fff;
  border:1px solid #e1e8e4;
  border-radius:9px;
  overflow:hidden;
  font-size:14.5px;
}
.fact-table tr+tr {
  border-top:1px solid #e1e8e4;
}
.fact-table th {
  text-align:left;
  font:600 13px var(--sans);
  letter-spacing:.04em;
  color:var(--muted);
  padding:14px 20px;
  background:var(--cream);
  width:38%;
  vertical-align:top;
}
.fact-table td {
  padding:14px 20px;
  color:var(--deep);
  font-weight:500;
}

/* ------------------------------------------------- card links (city index) */
.nearby-card,
.city-index-item,
.county-index-card {
  display:block;
  text-decoration:none;
  background:#fff;
  border:1px solid #e1e8e4;
  border-radius:9px;
  padding:17px 19px;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.nearby-card:hover,
.city-index-item:hover,
.county-index-card:hover {
  border-color:var(--green);
  transform:translateY(-2px);
  box-shadow:0 10px 24px #20343a0f;
}
/* Cities without their own page render as the same card, minus the link affordance. */
.city-index-static,
.nearby-static {
  cursor:default;
}
.city-index-static:hover,
.nearby-static:hover {
  border-color:#e1e8e4;
  transform:none;
  box-shadow:none;
}
.nearby-card strong,
.city-index-item strong,
.county-index-card strong {
  display:block;
  font:700 15.5px var(--sans);
  color:var(--deep);
  margin-bottom:5px;
}
/* Child combinator is required — see the note at the top of this file. */
.nearby-card>span,
.city-index-item>span,
.county-index-card>span {
  display:block;
  font-size:12.5px;
  color:var(--muted);
}

.nearby-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:14px;
  max-width:1180px;
  margin:8px 0 26px;
}
.city-index {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:10px;
  max-width:1180px;
  margin:8px 0 0;
}
.county-index {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:14px;
  max-width:1180px;
  margin:8px 0 0;
}
.county-index-card {
  background:var(--mint);
  border-color:#d5e3dd;
}
.county-index-card strong {
  font-size:16.5px;
}

/* ------------------------------------------------------------------ faq fix */
/* styles.css sets .faq-a{display:none} for the accordion on the home page.
   City pages render every answer expanded — crawlers and no-JS users must
   see the full text, so this override is required, not cosmetic. */
.city-faq .faq-q {
  display:block;
  cursor:default;
  background:transparent;
  padding:20px 2px 10px;
  font-size:16px;
  color:var(--deep);
}
.city-faq .faq-a {
  display:block;
  padding:0 2px 4px;
  color:#4d6065;
  font-size:14.5px;
  line-height:1.8;
  max-width:none;
}
.city-faq .faq-group {
  padding:22px 26px;
}

/* ---------------------------------------------------------------- cta band */
.city-cta {
  margin-top:10px;
}

/* -------------------------------------------------------------- responsive */
@media (max-width:860px) {
  .city-hero {
    padding:38px 6% 44px;
  }
  .fact-bar {
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  }
}
@media (max-width:560px) {
  .crumbs {
    font-size:12px;
    gap:6px;
  }
  .prose-grid,
  .city-index,
  .county-index,
  .nearby-grid,
  .check-list,
  .verify-list,
  .step-strip,
  .fact-table {
    grid-template-columns:1fr;
  }
  .fact-table th {
    width:auto;
  }
}