/* ==========================================================================
   page-county.css
   Purpose: County/city landing page modules (hero, stat grid, cards, FAQs,
            CTA bar, related nav, and county-template grid links).
   Scope: Burlington city page, county landing pages, and related templates.
   ========================================================================== */

/* ==========================================================================
   0. Layout / Overflow Overrides (Houzez parent theme fixes)
   ========================================================================== */

/* Houzez sets overflow: hidden on .entry-content and .page-content-wrap, which
   creates a scroll container that clips icon-nav's overflow-x: auto and breaks
   position: sticky relative to the viewport. overflow-x: clip avoids both
   problems — it clips visually but does NOT create a scroll container. */
body.page-template-page-county .page-content-wrap,
body.page-template-page-county-php .page-content-wrap,
body.page-template-page-county .entry-content,
body.page-template-page-county-php .entry-content,
body.page-template-page-county .post-content,
body.page-template-page-county-php .post-content {
  overflow-x: clip !important;
}

/* ==========================================================================
   1. Hero – Burlington
   ========================================================================== */

.hero-burlington {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  background-color: var(--kaplon-blue);
  color: var(--white);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hero-burlington:first-child {
  margin-top: 0 !important;
}

.hero-content {
  flex: 1 1 min(100%, 520px);
  max-width: 600px;
  color: var(--white);
  text-shadow: var(--shadow-text-strong);
}

.hero-media {
  flex: 1 1 min(100%, 380px);
  max-width: 560px;
}

.hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-2, 12px);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.hero-burlington h1 {
  margin: 0 0 var(--space-2);
  color: var(--white);
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  text-shadow: var(--shadow-text-strong);
}

.hero-burlington .lead {
  max-width: 60ch;
  margin: 0 0 var(--space-3);
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.5;
}

.hero-burlington .hero-content p {
  max-width: min(60ch, 680px);
}

.hero-burlington .btn-primary {
  box-shadow: var(--shadow-lift-md);
}

/* Ghost/outlined secondary CTA on dark hero background */
.hero-burlington .btn-secondary,
.hero-burlington a.btn-secondary {
  background-color: transparent !important;
  border: 2px solid var(--white) !important;
  box-shadow: none;
  color: var(--white) !important;
}

.hero-burlington .btn-secondary:hover,
.hero-burlington a.btn-secondary:hover,
.hero-burlington .btn-secondary:focus-visible,
.hero-burlington a.btn-secondary:focus-visible {
  background-color: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--kaplon-blue) !important;
}

/* Light variant */
.hero-burlington.hero--light {
  background-color: var(--surface-soft);
  color: var(--kaplon-blue);
}

.hero-burlington.hero--light .hero-content,
.hero-burlington.hero--light h1,
.hero-burlington.hero--light .lead {
  color: var(--kaplon-blue) !important;
  text-shadow: none !important;
}

/* ==========================================================================
   2. Trust Signals (inside hero and CTA bar)
   ========================================================================== */

.trust-note {
  margin: var(--space-2) 0 0;
  color: var(--white-85);
  font-size: 0.88rem;
  font-style: italic;
}

.trust-checks {
  display: flex;
  flex-direction: column;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  gap: 0.35rem;
}

.trust-checks li {
  color: var(--white-90);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Scoped overrides: trust signals live inside the dark hero — must be white */
.hero-burlington .trust-note {
  color: var(--white-85) !important;
}

.hero-burlington .trust-checks li {
  color: var(--white-90) !important;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 var(--space-3);
  gap: var(--space-2);
}

/* ==========================================================================
   3. Section Block (page section wrapper)
   ========================================================================== */

.section-block {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 1.5rem);
}

.section-block > h2 {
  color: var(--kaplon-blue) !important;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700 !important;
}

/* ==========================================================================
   4. Stat Grid
   ========================================================================== */

.stat-grid {
  display: grid;
  margin: var(--space-4) 0;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

@media (min-width: 580px) {
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--surface-soft);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-2, 10px);
  text-align: center;
}

.stat-card h3 {
  margin: 0 0 0.25rem;
  color: var(--kaplon-blue);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.stat-card p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* ==========================================================================
   5. Icon List (lifestyle/feature bullets)
   ========================================================================== */

.icon-list {
  display: flex;
  flex-direction: column;
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
  gap: var(--space-2);
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.icon-list li span {
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1.2;
}

.icon-list li div {
  color: var(--gray-700);
  font-size: 1rem;
  line-height: 1.6;
}

/* ==========================================================================
   6. Card Grid (multi-column card layout)
   ========================================================================== */

.card-grid {
  display: grid;
  margin: var(--space-3) 0;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ==========================================================================
   7. Info Card (content card inside card-grid)
   ========================================================================== */

.info-card {
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--surface-soft);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-2, 10px);
  box-shadow: var(--shadow-sm);
}

.info-card h3 {
  margin: 0 0 0.5rem;
  color: var(--kaplon-blue);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.info-card p {
  margin: 0 0 0.5rem;
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.6;
}

.info-card p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   8. Testimonial Grid
   ========================================================================== */

.testimonial-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Center orphaned last card — only when 2-column layout is active.
   grid-column: 1/-1 at wider viewports would shrink auto-fit track count. */
@media (max-width: 719px) {
  .card-grid.three > *:last-child:nth-child(odd) {
    max-width: 50%;
    margin: 0 auto;
    grid-column: 1 / -1;
  }
}

@media (max-width: 839px) {
  .card-grid:not(.three) > *:last-child:nth-child(odd),
  .testimonial-grid > *:last-child:nth-child(odd) {
    max-width: 50%;
    margin: 0 auto;
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   9. FAQ Grid & FAQ Card
   ========================================================================== */

.faq-grid {
  display: grid;
  margin: var(--space-3) 0;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.faq-card {
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-2, 10px);
  box-shadow: var(--shadow-sm);
}

.faq-card h3 {
  margin: 0 0 0.5rem;
  color: var(--kaplon-blue);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.faq-card p {
  margin: 0;
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ==========================================================================
   10. Mini List (compact bullet list inside cards)
   ========================================================================== */

.mini-list {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.mini-list li {
  padding: 0.2rem 0;
  color: var(--gray-700);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mini-list li+li {
  margin-top: 0.1rem;
}

/* ==========================================================================
   11. Highlight Bar (inline callout inside a card)
   ========================================================================== */

.highlight-bar {
  display: grid;
  margin-top: var(--space-3);
  padding: var(--space-3) clamp(1rem, 2vw, 1.5rem);
  background: var(--kaplon-blue) !important;
  border-radius: var(--radius-2, 10px);
  color: var(--white);
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.highlight-bar div {
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.5;
}

.highlight-bar strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--white);
  font-weight: 700;
}

/* ==========================================================================
   12. IDX Kicker (helper text above IDX widget)
   ========================================================================== */

.idx-kicker {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--gray-600);
  font-size: 0.9rem;
  font-style: italic;
}

/* ==========================================================================
   13. CTA Bar
   ========================================================================== */

.cta-bar {
  padding: clamp(var(--space-4), 5vw, var(--space-6)) 0;
  background: var(--kaplon-blue);
  color: var(--white);
}

.cta-bar .cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-3), 3vw, var(--space-4));
}

.cta-bar h3 {
  margin: 0 0 var(--space-2);
  color: var(--white);
  font-size: clamp(18px, 3vw, 24px);
}

.cta-bar .lead {
  max-width: 60ch;
  margin: 0 auto var(--space-3);
  color: var(--white-90);
}

.cta-trust {
  display: flex;
  flex-wrap: wrap;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  gap: 0.35rem var(--space-3);
}

.cta-trust li {
  color: var(--white-90);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ==========================================================================
   14. Related Areas Nav
   ========================================================================== */

.related-areas {
  padding: var(--space-3) 0;
  background: var(--surface-alt);
}

.related-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-3), 3vw, var(--space-4));
}

.related-areas .community-links {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-3), 3vw, var(--space-4));
  list-style: none;
  gap: var(--space-1) var(--space-3);
}

.related-areas .community-links a {
  color: var(--kaplon-blue);
  font-size: 0.95rem;
  text-decoration: none;
}

.related-areas .community-links a:hover {
  color: var(--kaplon-red);
  text-decoration: underline;
}

.browse-all {
  max-width: 1100px;
  margin: var(--space-2) auto 0;
  padding: 0 clamp(var(--space-3), 3vw, var(--space-4));
  font-size: 0.95rem;
}

.browse-all a {
  color: var(--kaplon-blue);
  font-weight: 600;
  text-decoration: none;
}

.browse-all a:hover {
  color: var(--kaplon-red);
  text-decoration: underline;
}

/* ==========================================================================
   15. IDX Wrap
   ========================================================================== */

.kaplon-idx-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-3), 3vw, var(--space-4));
}

/* ==========================================================================
   16. Note Typography
   ========================================================================== */

.note {
  margin-top: var(--space-2);
  color: var(--gray-600);
  font-size: 0.95rem;
}

/* ==========================================================================
   17. Burlington Listings Section
   ========================================================================== */

.burlington-listings {
  padding: clamp(var(--space-4), 5vw, var(--space-6)) 0;
}

/* ==========================================================================
   18. Exact Match Intro
   ========================================================================== */

.exact-match-intro {
  padding: var(--space-4) 0;
  background: var(--surface-soft);
}

.exact-match-intro .exact-match-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-3), 3vw, var(--space-4));
}

.featured-properties-section.hide-section {
  display: none !important;
}

/* ==========================================================================
   19. Local Authority Bar
   ========================================================================== */

.local-authority-bar {
  padding: var(--space-4) 0;
  background: var(--surface-soft);
}

.local-authority-bar .lab-inner {
  display: grid;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  gap: clamp(16px, 3vw, 48px);
  grid-template-columns: 1fr 1fr;
}

.local-authority-bar h3 {
  margin-top: 0;
}

.local-authority-bar .map-embed {
  border: 0;
  border-radius: 12px;
}

.local-authority-bar .note {
  margin: 0.6em 0 0;
  font-size: 0.98em;
}

/* ==========================================================================
   20. Testimonial Card
   ========================================================================== */

.testimonial-card {
  margin: 0.7em 0;
  padding: 1.5em;
  background: var(--surface-alt);
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  box-shadow: var(--shadow-card-xl);
  color: var(--gray-700);
  text-align: left;
}

.testimonial-card blockquote {
  margin: 0 0 1.3em;
  padding: 0;
  border: none;
  font-size: 1.13em;
  font-style: italic;
}

.testimonial-card blockquote:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   21. County Content Modules
   ========================================================================== */

.county-section {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(0.5rem, 1vw, 1rem);
}

.county-outer-card {
  max-width: 1200px;
  margin: var(--space-5) auto;
  box-shadow: var(--shadow-md);
}

.county-outer-card .county-section {
  max-width: none;
  padding: clamp(16px, 2vw, 24px);
}

/* ==========================================================================
   22. H2 With Icon (section headings with SVG mask icons)
   ========================================================================== */

.h2-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 1.75em;
  gap: 8px;
}

.h2-with-icon::before {
  position: absolute;
  top: 0.05em;
  left: 0;
  display: inline-block;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  opacity: 0.9;
  background: currentColor;
  font-size: 0.9em;
  content: "";
}

.icon-schools.h2-with-icon::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3 1 9l11 6 9-4.91V17h2V9L12 3zm0 13L5 12v5l7 4 7-4v-5l-7 4z'/></svg>") no-repeat center / contain;
}

.icon-lifestyle.h2-with-icon::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M10 2 8 8 2 10l6 2 2 6 2-6 6-2-6-2-2-6zm8 2-1 3-3 1 3 1 1 3 1-3 3-1-3-1-1-3zm-2 10-1 2-2 1 2 1 1 2 1-2 2-1-2-1-1-2z'/></svg>") no-repeat center / contain;
}

.icon-neighborhoods.h2-with-icon::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l9 6v12h-6V15H9v6H3V9l9-6z'/></svg>") no-repeat center / contain;
}

.icon-home-types.h2-with-icon::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></svg>") no-repeat center / contain;
}

.icon-commute.h2-with-icon::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l4 20h-2l-1-5H11l-1 5H8l4-20zM5 22h14v-2H5v2z'/></svg>") no-repeat center / contain;
}

.icon-construction.h2-with-icon::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 22l4-4h3l3-3-4-4 3-3-2-2 2-2 2 2 2-2 2 2-2 2 3 3-3 3h-3l-4 4v3H2z'/></svg>") no-repeat center / contain;
}

.icon-expertise.h2-with-icon::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 2a8 8 0 110 16 8 8 0 010-16zm3 5l-2.5 6.5L6 15l2.5-6.5L15 9z'/></svg>") no-repeat center / contain;
}

.icon-search.h2-with-icon::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.71.71l.27.28v.79l5 5L20.5 19l-5-5zm-6 0C8 14 6 12 6 9.5S8 5 10.5 5 15 7 15 9.5 13 14 10.5 14z'/></svg>") no-repeat center / contain;
}

.icon-featured-town.h2-with-icon::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>") no-repeat center / contain;
}

.county-card>h2::before {
  position: relative;
  display: inline-block;
  margin-right: 0.5em;
  transform: translateY(-1px);
}

/* ==========================================================================
   23. RankMath FAQ Block
   ========================================================================== */

.wp-block-rank-math-faq-block {
  max-width: 900px;
  margin: 0;
}

.wp-block-rank-math-faq-block .rank-math-faq-item {
  margin-bottom: var(--space-3);
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-sm);
}

.wp-block-rank-math-faq-block .rank-math-question {
  margin: 0 0 0.5rem;
  color: var(--kaplon-blue);
  font-size: 1.125rem;
}

.wp-block-rank-math-faq-block .rank-math-answer {
  color: var(--gray-700);
  line-height: 1.6;
}

.card.faq-wrap .wp-block-rank-math-faq-block {
  margin: 0 !important;
}

.card.faq-wrap .rank-math-faq-item {
  margin: 0 !important;
}

/* ==========================================================================
   24. Location Section & Grid Links
   ========================================================================== */

.location-section {
  max-width: 800px;
  margin: 40px auto;
  text-align: center;
}

.location-section h2 {
  font-size: 1.4rem;
}

.location-section h3 {
  margin-bottom: 20px;
  color: var(--kaplon-blue);
  font-size: 1.5rem;
  font-weight: 700;
}

.intro-subtext {
  padding: 0 10px;
  font-size: 0.95rem;
}

.city-grid-links a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  padding: 6px 14px;
  background-color: var(--kaplon-red);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  color: var(--white);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
  gap: 6px;
}

.city-grid-links a:hover {
  background-color: var(--kaplon-red-dark);
  transform: translateY(-2px);
}

.city-grid-links a span {
  white-space: nowrap;
}

.county-grid-links {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  justify-items: center;
}

.county-grid-links a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  padding: 6px 14px;
  background-color: var(--kaplon-blue);
  border-radius: 24px;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease;
  gap: 6px;
}

.county-grid-links a:hover {
  background-color: var(--kaplon-blue-light);
}

.city-grid-links a span:last-child,
.county-grid-links a span:last-child {
  font-size: 0.85em;
}

/* ==========================================================================
   25. Responsive Breakpoints
   ========================================================================== */

@media screen and (max-width: 480px) {

  .city-grid-links a,
  .county-grid-links a {
    flex: 1 1 100%;
  }

  .location-section h2 {
    font-size: 1.4rem;
  }

  .location-section h3 {
    font-size: 1.2rem;
  }

  .intro-subtext {
    padding: 0 10px;
    font-size: 0.95rem;
  }
}

@media screen and (max-width: 768px) {

  .city-grid-links a,
  .county-grid-links a {
    flex: 1 1 48%;
  }

  .hero-burlington {
    flex-direction: column;
  }

  .hero-content,
  .hero-media {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .hero-media {
    order: -1;
  }

  .hero-media img {
    max-height: 280px;
    object-position: center 30%;
  }

  .cta-row {
    flex-direction: column;
  }
}

@media (max-width: 1024px) {

  body.page-template-page-county,
  body.page-template-page-county-php {
    position: relative !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .county-outer-card {
    max-width: 100%;
    margin: 1rem auto;
  }

  .local-authority-bar .lab-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  body.page-template-page-county .page-content-wrap,
  body.page-template-page-county-php .page-content-wrap {
    padding: clamp(8px, 3vw, 16px);
  }

  body.page-template-page-county .county-outer-card .county-section,
  body.page-template-page-county-php .county-outer-card .county-section {
    padding: clamp(12px, 3.2vw, 16px);
  }

  body.page-template-page-county .card-container,
  body.page-template-page-county-php .card-container {
    gap: var(--space-1);
  }

  body.page-template-page-county .featured-town-card,
  body.page-template-page-county-php .featured-town-card {
    margin-top: var(--space-1);
  }

  body.page-template-page-county .county-outer-card,
  body.page-template-page-county-php .county-outer-card {
    margin: 0.75rem auto;
  }

  body.page-template-page-county .county-card .card-body,
  body.page-template-page-county-php .county-card .card-body,
  body.page-template-page-county .featured-town-card .card-body,
  body.page-template-page-county-php .featured-town-card .card-body {
    padding-inline: var(--space-2);
  }

  body.page-template-page-county .page-content-wrap .IDX-wrapper-standard,
  body.page-template-page-county-php .page-content-wrap .IDX-wrapper-standard {
    padding: 0 8px;
  }

  body.page-template-page-county .IDX-wrapper-standard .IDX-results--cell,
  body.page-template-page-county-php .IDX-wrapper-standard .IDX-results--cell {
    width: 100% !important;
    min-width: 100% !important;
    padding: 0.5rem 0;
  }
}

/* ==========================================================================
   26. Mode-Agnostic Defaults (county page template)
       Layout/spacing rules shared between light and dark modes.
   ========================================================================== */

body.page-template-page-county .rank-math-faq-item.faq-card {
  margin: 0 0 var(--space-3) 0;
}

body.page-template-page-county .card.faq-wrap {
  margin-top: var(--space-4);
  padding-top: var(--space-1);
}

body.page-template-page-county .card.faq-wrap .wp-block-rank-math-faq-block,
body.page-template-page-county .card.faq-wrap .rank-math-faq-item {
  margin: 0 !important;
}

body.page-template-page-county .centered-figure {
  display: block;
  margin: 2rem auto;
  text-align: center;
}

body.page-template-page-county .centered-figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

body.page-template-page-county p:empty {
  display: none !important;
}

body.page-template-page-county .county-card {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
}

body.page-template-page-county .exact-match-intro,
body.page-template-page-county .exact-match-inner {
  padding: 2rem;
}

body.page-template-page-county .local-authority-bar,
body.page-template-page-county .lab-inner {
  padding: 2rem;
}

body.page-template-page-county .testimonial-card {
  margin-bottom: 1rem;
  padding: 1.5rem;
}

body.page-template-page-county .testimonial-card blockquote {
  margin: 0 !important;
}

body.page-template-page-county .testimonial-card blockquote p {
  margin-bottom: 1rem !important;
}

body.page-template-page-county .local-authority-bar .note,
body.page-template-page-county .lab-inner .note {
  font-size: 0.9rem !important;
}

/* ==========================================================================
   27. Dark Mode Enhancements (colors only — no layout/spacing here)
   ========================================================================== */

@media (prefers-color-scheme: dark) {

  /* --- Hero --- */
  html[data-kaplon-color-mode=system] .hero-burlington {
    background-color: var(--gray-darker) !important;
    color: var(--gray-100) !important;
  }

  html[data-kaplon-color-mode=system] .hero-burlington h1,html[data-kaplon-color-mode=system] 
  .hero-content h1 {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .hero-burlington .lead,html[data-kaplon-color-mode=system] 
  .hero-content .lead {
    color: var(--white-85) !important;
  }

  html[data-kaplon-color-mode=system] .hero-content {
    background-color: transparent !important;
    color: var(--white-90) !important;
  }

  html[data-kaplon-color-mode=system] .trust-note {
    color: var(--white-75) !important;
  }

  html[data-kaplon-color-mode=system] .trust-checks li {
    color: var(--white-85) !important;
  }

  /* --- Stat Cards --- */
  html[data-kaplon-color-mode=system] .stat-card {
    background: var(--gray-800) !important;
    border-color: var(--gray-border-dark) !important;
  }

  html[data-kaplon-color-mode=system] .stat-card h3 {
    color: var(--kaplon-blue-light) !important;
  }

  html[data-kaplon-color-mode=system] .stat-card p {
    color: var(--gray-400) !important;
  }

  /* --- Info Cards --- */
  html[data-kaplon-color-mode=system] .info-card {
    background: var(--gray-800) !important;
    border-color: var(--gray-border-dark) !important;
  }

  html[data-kaplon-color-mode=system] .info-card h3 {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .info-card p {
    color: var(--white-85) !important;
  }

  /* --- FAQ Cards --- */
  html[data-kaplon-color-mode=system] .faq-card {
    background: var(--gray-800) !important;
    border-color: var(--gray-border-dark) !important;
  }

  html[data-kaplon-color-mode=system] .faq-card h3 {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .faq-card p {
    color: var(--white-85) !important;
  }

  /* --- Mini List --- */
  html[data-kaplon-color-mode=system] .mini-list li,html[data-kaplon-color-mode=system] 
  .info-card .mini-list li,html[data-kaplon-color-mode=system] 
  .faq-card .mini-list li,html[data-kaplon-color-mode=system] 
  .testimonial-card .mini-list li {
    color: var(--white-85) !important;
  }

  /* --- Highlight Bar --- */
  html[data-kaplon-color-mode=system] .highlight-bar {
    background: var(--kaplon-blue-dark) !important;
  }

  html[data-kaplon-color-mode=system] .highlight-bar div,html[data-kaplon-color-mode=system] 
  .highlight-bar strong {
    color: var(--white) !important;
  }

  /* --- CTA Trust --- */
  html[data-kaplon-color-mode=system] .cta-trust li {
    color: var(--white-85) !important;
  }

  /* --- Related Areas --- */
  html[data-kaplon-color-mode=system] .related-areas {
    background-color: var(--gray-darker) !important;
  }

  html[data-kaplon-color-mode=system] .related-areas .community-links a {
    color: var(--kaplon-red) !important;
  }

  html[data-kaplon-color-mode=system] .browse-all a {
    color: var(--kaplon-red) !important;
  }

  /* --- Icon List --- */
  html[data-kaplon-color-mode=system] .icon-list li div {
    color: var(--white-85) !important;
  }

  /* --- FAQ Block --- */
  html[data-kaplon-color-mode=system] .wp-block-rank-math-faq-block .rank-math-faq-item {
    background: var(--gray-900) !important;
    border-color: var(--gray-700) !important;
    box-shadow: var(--shadow-dark-sm) !important;
  }

  html[data-kaplon-color-mode=system] .wp-block-rank-math-faq-block .rank-math-question {
    color: var(--white-90) !important;
  }

  html[data-kaplon-color-mode=system] .wp-block-rank-math-faq-block .rank-math-answer {
    color: var(--white-85) !important;
  }

  html[data-kaplon-color-mode=system] .entry-content div[style*="color: #333"] {
    color: var(--gray-300) !important;
  }

  html[data-kaplon-color-mode=system] .entry-content a {
    color: var(--color-link-hover-blue) !important;
  }

  /* --- Card Elements --- */
  html[data-kaplon-color-mode=system] .card,html[data-kaplon-color-mode=system] 
  .county-card,html[data-kaplon-color-mode=system] 
  .faq-card,html[data-kaplon-color-mode=system] 
  .testimonial-card {
    background-color: var(--gray-darkest) !important;
    border-color: var(--gray-dark) !important;
  }

  html[data-kaplon-color-mode=system] .form-control,html[data-kaplon-color-mode=system] 
  input[type="text"],html[data-kaplon-color-mode=system] 
  input[type="email"],html[data-kaplon-color-mode=system] 
  textarea,html[data-kaplon-color-mode=system] 
  select {
    background-color: var(--gray-dark) !important;
    border-color: var(--gray) !important;
    color: var(--gray-100) !important;
  }

  html[data-kaplon-color-mode=system] .form-control:focus,html[data-kaplon-color-mode=system] 
  input[type="text"]:focus,html[data-kaplon-color-mode=system] 
  input[type="email"]:focus,html[data-kaplon-color-mode=system] 
  textarea:focus,html[data-kaplon-color-mode=system] 
  select:focus {
    background-color: var(--gray) !important;
    border-color: var(--kaplon-red) !important;
  }

  html[data-kaplon-color-mode=system] .rank-math-faq-item,html[data-kaplon-color-mode=system] 
  .faq-wrap {
    background-color: var(--gray-darkest) !important;
    color: var(--gray-100) !important;
  }

  html[data-kaplon-color-mode=system] .rank-math-question {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .rank-math-answer {
    color: var(--gray-200) !important;
  }

  /* --- Page Title & Breadcrumbs --- */
  html[data-kaplon-color-mode=system] .page-title-wrap,html[data-kaplon-color-mode=system] 
  .breadcrumb-wrap,html[data-kaplon-color-mode=system] 
  .page-title {
    background-color: var(--gray-darker) !important;
    color: var(--gray-100) !important;
  }

  html[data-kaplon-color-mode=system] .breadcrumb .breadcrumb-item,html[data-kaplon-color-mode=system] 
  .breadcrumb .breadcrumb-item a {
    color: var(--gray-400) !important;
  }

  html[data-kaplon-color-mode=system] .breadcrumb .breadcrumb-item.active {
    color: var(--white) !important;
  }

  /* --- Map Embeds --- */
  html[data-kaplon-color-mode=system] .map-embed,html[data-kaplon-color-mode=system] 
  iframe {
    filter: invert(0.9) hue-rotate(180deg) !important;
  }

  html[data-kaplon-color-mode=system] iframe[src*="google.com/maps"] {
    filter: invert(0.9) hue-rotate(180deg) saturate(0.8) brightness(0.7) !important;
  }

  /* --- Layout Backgrounds --- */
  html[data-kaplon-color-mode=system] body,html[data-kaplon-color-mode=system] 
  .main-wrap,html[data-kaplon-color-mode=system] 
  .page-wrap,html[data-kaplon-color-mode=system] 
  .container {
    background-color: var(--gray-darker) !important;
    color: var(--gray-100) !important;
  }

  html[data-kaplon-color-mode=system] .exact-match-intro,html[data-kaplon-color-mode=system] 
  .seo-copy,html[data-kaplon-color-mode=system] 
  .local-authority-bar,html[data-kaplon-color-mode=system] 
  .cta-bar {
    background-color: var(--gray-darker) !important;
    color: var(--gray-100) !important;
  }

  html[data-kaplon-color-mode=system] .county-stats ul,html[data-kaplon-color-mode=system] 
  .county-stats li,html[data-kaplon-color-mode=system] 
  ul li {
    color: var(--gray-200) !important;
  }

  html[data-kaplon-color-mode=system] strong,html[data-kaplon-color-mode=system] 
  b {
    color: var(--white) !important;
  }

  /* --- County Title --- */
  html[data-kaplon-color-mode=system] .county-title,html[data-kaplon-color-mode=system] 
  .seo-copy .county-title {
    color: var(--kaplon-red) !important;
  }

  /* --- Exact Match Intro --- */
  html[data-kaplon-color-mode=system] .exact-match-intro,html[data-kaplon-color-mode=system] 
  .exact-match-inner {
    background-color: var(--gray-800) !important;
    border: 1px solid var(--gray-border-dark) !important;
    color: var(--white-90) !important;
  }

  html[data-kaplon-color-mode=system] .exact-match-intro h2,html[data-kaplon-color-mode=system] 
  .exact-match-inner h2 {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .exact-match-intro p,html[data-kaplon-color-mode=system] 
  .exact-match-inner p {
    color: var(--white-90) !important;
  }

  /* --- SEO Copy & County Stack --- */
  html[data-kaplon-color-mode=system] .seo-copy,html[data-kaplon-color-mode=system] 
  .county-stack {
    background-color: var(--gray-900) !important;
    color: var(--white-90) !important;
  }

  html[data-kaplon-color-mode=system] .seo-copy p,html[data-kaplon-color-mode=system] 
  .seo-copy li {
    color: var(--white-85) !important;
  }

  /* --- County Card --- */
  html[data-kaplon-color-mode=system] .county-card {
    background-color: var(--gray-800) !important;
    border: 1px solid var(--gray-border-dark) !important;
  }

  html[data-kaplon-color-mode=system] .county-card h2 {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .county-card p {
    color: var(--white-85) !important;
  }

  html[data-kaplon-color-mode=system] .county-stats ul,html[data-kaplon-color-mode=system] 
  .county-stats li {
    color: var(--white-85) !important;
  }

  html[data-kaplon-color-mode=system] .county-stats strong {
    color: var(--white) !important;
  }

  /* --- Local Authority Bar --- */
  html[data-kaplon-color-mode=system] .local-authority-bar,html[data-kaplon-color-mode=system] 
  .lab-inner {
    background-color: var(--gray-800) !important;
    border: 1px solid var(--gray-border-dark) !important;
    color: var(--white-90) !important;
  }

  html[data-kaplon-color-mode=system] .local-authority-bar h3,html[data-kaplon-color-mode=system] 
  .lab-inner h3 {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .local-authority-bar p,html[data-kaplon-color-mode=system] 
  .lab-inner p {
    color: var(--white-85) !important;
  }

  html[data-kaplon-color-mode=system] .local-authority-bar a,html[data-kaplon-color-mode=system] 
  .lab-inner a {
    color: var(--kaplon-red) !important;
  }

  html[data-kaplon-color-mode=system] .local-authority-bar a:hover,html[data-kaplon-color-mode=system] 
  .lab-inner a:hover {
    color: var(--kaplon-red-dark) !important;
  }

  /* --- Testimonial Card --- */
  html[data-kaplon-color-mode=system] .testimonial-card {
    background-color: var(--gray-750) !important;
    border: 1px solid var(--gray-border-dark) !important;
  }

  html[data-kaplon-color-mode=system] .testimonial-card blockquote {
    color: var(--white-85) !important;
  }

  html[data-kaplon-color-mode=system] .testimonial-card blockquote p {
    color: var(--white-85) !important;
  }

  html[data-kaplon-color-mode=system] .testimonial-card strong {
    color: var(--white) !important;
  }

  /* --- Map Embed Border --- */
  html[data-kaplon-color-mode=system] .map-embed {
    border: 1px solid var(--gray-border-dark) !important;
  }

  /* --- Local Authority Note --- */
  html[data-kaplon-color-mode=system] .local-authority-bar .note,html[data-kaplon-color-mode=system] 
  .lab-inner .note {
    color: var(--white-75) !important;
  }
}

/* --- Hero --- */

/* --- Stat Cards --- */

/* --- Info Cards --- */

/* --- FAQ Cards --- */

/* --- Mini List --- */

/* --- Highlight Bar --- */

/* --- CTA Trust --- */

/* --- Related Areas --- */

/* --- Icon List --- */

/* --- FAQ Block --- */

/* --- Card Elements --- */

/* --- Page Title & Breadcrumbs --- */

/* --- Map Embeds --- */

/* --- Layout Backgrounds --- */

/* --- County Title --- */

/* --- Exact Match Intro --- */

/* --- SEO Copy & County Stack --- */

/* --- County Card --- */

/* --- Local Authority Bar --- */

/* --- Testimonial Card --- */

/* --- Map Embed Border --- */

/* --- Local Authority Note --- */

/* --- Hero --- */

html[data-kaplon-color-mode=dark] .hero-burlington {
    background-color: var(--gray-darker) !important;
    color: var(--gray-100) !important;
  }

html[data-kaplon-color-mode=dark] .hero-burlington h1,html[data-kaplon-color-mode=dark] 
  .hero-content h1 {
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .hero-burlington .lead,html[data-kaplon-color-mode=dark] 
  .hero-content .lead {
    color: var(--white-85) !important;
  }

html[data-kaplon-color-mode=dark] .hero-content {
    background-color: transparent !important;
    color: var(--white-90) !important;
  }

html[data-kaplon-color-mode=dark] .trust-note {
    color: var(--white-75) !important;
  }

html[data-kaplon-color-mode=dark] .trust-checks li {
    color: var(--white-85) !important;
  }

/* --- Stat Cards --- */

html[data-kaplon-color-mode=dark] .stat-card {
    background: var(--gray-800) !important;
    border-color: var(--gray-border-dark) !important;
  }

html[data-kaplon-color-mode=dark] .stat-card h3 {
    color: var(--kaplon-blue-light) !important;
  }

html[data-kaplon-color-mode=dark] .stat-card p {
    color: var(--gray-400) !important;
  }

/* --- Info Cards --- */

html[data-kaplon-color-mode=dark] .info-card {
    background: var(--gray-800) !important;
    border-color: var(--gray-border-dark) !important;
  }

html[data-kaplon-color-mode=dark] .info-card h3 {
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .info-card p {
    color: var(--white-85) !important;
  }

/* --- FAQ Cards --- */

html[data-kaplon-color-mode=dark] .faq-card {
    background: var(--gray-800) !important;
    border-color: var(--gray-border-dark) !important;
  }

html[data-kaplon-color-mode=dark] .faq-card h3 {
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .faq-card p {
    color: var(--white-85) !important;
  }

/* --- Mini List --- */

html[data-kaplon-color-mode=dark] .mini-list li,html[data-kaplon-color-mode=dark] 
  .info-card .mini-list li,html[data-kaplon-color-mode=dark] 
  .faq-card .mini-list li,html[data-kaplon-color-mode=dark] 
  .testimonial-card .mini-list li {
    color: var(--white-85) !important;
  }

/* --- Highlight Bar --- */

html[data-kaplon-color-mode=dark] .highlight-bar {
    background: var(--kaplon-blue-dark) !important;
  }

html[data-kaplon-color-mode=dark] .highlight-bar div,html[data-kaplon-color-mode=dark] 
  .highlight-bar strong {
    color: var(--white) !important;
  }

/* --- CTA Trust --- */

html[data-kaplon-color-mode=dark] .cta-trust li {
    color: var(--white-85) !important;
  }

/* --- Related Areas --- */

html[data-kaplon-color-mode=dark] .related-areas {
    background-color: var(--gray-darker) !important;
  }

html[data-kaplon-color-mode=dark] .related-areas .community-links a {
    color: var(--kaplon-red) !important;
  }

html[data-kaplon-color-mode=dark] .browse-all a {
    color: var(--kaplon-red) !important;
  }

/* --- Icon List --- */

html[data-kaplon-color-mode=dark] .icon-list li div {
    color: var(--white-85) !important;
  }

/* --- FAQ Block --- */

html[data-kaplon-color-mode=dark] .wp-block-rank-math-faq-block .rank-math-faq-item {
    background: var(--gray-900) !important;
    border-color: var(--gray-700) !important;
    box-shadow: var(--shadow-dark-sm) !important;
  }

html[data-kaplon-color-mode=dark] .wp-block-rank-math-faq-block .rank-math-question {
    color: var(--white-90) !important;
  }

html[data-kaplon-color-mode=dark] .wp-block-rank-math-faq-block .rank-math-answer {
    color: var(--white-85) !important;
  }

html[data-kaplon-color-mode=dark] .entry-content div[style*="color: #333"] {
    color: var(--gray-300) !important;
  }

html[data-kaplon-color-mode=dark] .entry-content a {
    color: var(--color-link-hover-blue) !important;
  }

/* --- Card Elements --- */

html[data-kaplon-color-mode=dark] .card,html[data-kaplon-color-mode=dark] 
  .county-card,html[data-kaplon-color-mode=dark] 
  .faq-card,html[data-kaplon-color-mode=dark] 
  .testimonial-card {
    background-color: var(--gray-darkest) !important;
    border-color: var(--gray-dark) !important;
  }

html[data-kaplon-color-mode=dark] .form-control,html[data-kaplon-color-mode=dark] 
  input[type="text"],html[data-kaplon-color-mode=dark] 
  input[type="email"],html[data-kaplon-color-mode=dark] 
  textarea,html[data-kaplon-color-mode=dark] 
  select {
    background-color: var(--gray-dark) !important;
    border-color: var(--gray) !important;
    color: var(--gray-100) !important;
  }

html[data-kaplon-color-mode=dark] .form-control:focus,html[data-kaplon-color-mode=dark] 
  input[type="text"]:focus,html[data-kaplon-color-mode=dark] 
  input[type="email"]:focus,html[data-kaplon-color-mode=dark] 
  textarea:focus,html[data-kaplon-color-mode=dark] 
  select:focus {
    background-color: var(--gray) !important;
    border-color: var(--kaplon-red) !important;
  }

html[data-kaplon-color-mode=dark] .rank-math-faq-item,html[data-kaplon-color-mode=dark] 
  .faq-wrap {
    background-color: var(--gray-darkest) !important;
    color: var(--gray-100) !important;
  }

html[data-kaplon-color-mode=dark] .rank-math-question {
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .rank-math-answer {
    color: var(--gray-200) !important;
  }

/* --- Page Title & Breadcrumbs --- */

html[data-kaplon-color-mode=dark] .page-title-wrap,html[data-kaplon-color-mode=dark] 
  .breadcrumb-wrap,html[data-kaplon-color-mode=dark] 
  .page-title {
    background-color: var(--gray-darker) !important;
    color: var(--gray-100) !important;
  }

html[data-kaplon-color-mode=dark] .breadcrumb .breadcrumb-item,html[data-kaplon-color-mode=dark] 
  .breadcrumb .breadcrumb-item a {
    color: var(--gray-400) !important;
  }

html[data-kaplon-color-mode=dark] .breadcrumb .breadcrumb-item.active {
    color: var(--white) !important;
  }

/* --- Map Embeds --- */

html[data-kaplon-color-mode=dark] .map-embed,html[data-kaplon-color-mode=dark] 
  iframe {
    filter: invert(0.9) hue-rotate(180deg) !important;
  }

html[data-kaplon-color-mode=dark] iframe[src*="google.com/maps"] {
    filter: invert(0.9) hue-rotate(180deg) saturate(0.8) brightness(0.7) !important;
  }

/* --- Layout Backgrounds --- */

html[data-kaplon-color-mode=dark] body,html[data-kaplon-color-mode=dark] 
  .main-wrap,html[data-kaplon-color-mode=dark] 
  .page-wrap,html[data-kaplon-color-mode=dark] 
  .container {
    background-color: var(--gray-darker) !important;
    color: var(--gray-100) !important;
  }

html[data-kaplon-color-mode=dark] .exact-match-intro,html[data-kaplon-color-mode=dark] 
  .seo-copy,html[data-kaplon-color-mode=dark] 
  .local-authority-bar,html[data-kaplon-color-mode=dark] 
  .cta-bar {
    background-color: var(--gray-darker) !important;
    color: var(--gray-100) !important;
  }

html[data-kaplon-color-mode=dark] .county-stats ul,html[data-kaplon-color-mode=dark] 
  .county-stats li,html[data-kaplon-color-mode=dark] 
  ul li {
    color: var(--gray-200) !important;
  }

html[data-kaplon-color-mode=dark] strong,html[data-kaplon-color-mode=dark] 
  b {
    color: var(--white) !important;
  }

/* --- County Title --- */

html[data-kaplon-color-mode=dark] .county-title,html[data-kaplon-color-mode=dark] 
  .seo-copy .county-title {
    color: var(--kaplon-red) !important;
  }

/* --- Exact Match Intro --- */

html[data-kaplon-color-mode=dark] .exact-match-intro,html[data-kaplon-color-mode=dark] 
  .exact-match-inner {
    background-color: var(--gray-800) !important;
    border: 1px solid var(--gray-border-dark) !important;
    color: var(--white-90) !important;
  }

html[data-kaplon-color-mode=dark] .exact-match-intro h2,html[data-kaplon-color-mode=dark] 
  .exact-match-inner h2 {
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .exact-match-intro p,html[data-kaplon-color-mode=dark] 
  .exact-match-inner p {
    color: var(--white-90) !important;
  }

/* --- SEO Copy & County Stack --- */

html[data-kaplon-color-mode=dark] .seo-copy,html[data-kaplon-color-mode=dark] 
  .county-stack {
    background-color: var(--gray-900) !important;
    color: var(--white-90) !important;
  }

html[data-kaplon-color-mode=dark] .seo-copy p,html[data-kaplon-color-mode=dark] 
  .seo-copy li {
    color: var(--white-85) !important;
  }

/* --- County Card --- */

html[data-kaplon-color-mode=dark] .county-card {
    background-color: var(--gray-800) !important;
    border: 1px solid var(--gray-border-dark) !important;
  }

html[data-kaplon-color-mode=dark] .county-card h2 {
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .county-card p {
    color: var(--white-85) !important;
  }

html[data-kaplon-color-mode=dark] .county-stats ul,html[data-kaplon-color-mode=dark] 
  .county-stats li {
    color: var(--white-85) !important;
  }

html[data-kaplon-color-mode=dark] .county-stats strong {
    color: var(--white) !important;
  }

/* --- Local Authority Bar --- */

html[data-kaplon-color-mode=dark] .local-authority-bar,html[data-kaplon-color-mode=dark] 
  .lab-inner {
    background-color: var(--gray-800) !important;
    border: 1px solid var(--gray-border-dark) !important;
    color: var(--white-90) !important;
  }

html[data-kaplon-color-mode=dark] .local-authority-bar h3,html[data-kaplon-color-mode=dark] 
  .lab-inner h3 {
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .local-authority-bar p,html[data-kaplon-color-mode=dark] 
  .lab-inner p {
    color: var(--white-85) !important;
  }

html[data-kaplon-color-mode=dark] .local-authority-bar a,html[data-kaplon-color-mode=dark] 
  .lab-inner a {
    color: var(--kaplon-red) !important;
  }

html[data-kaplon-color-mode=dark] .local-authority-bar a:hover,html[data-kaplon-color-mode=dark] 
  .lab-inner a:hover {
    color: var(--kaplon-red-dark) !important;
  }

/* --- Testimonial Card --- */

html[data-kaplon-color-mode=dark] .testimonial-card {
    background-color: var(--gray-750) !important;
    border: 1px solid var(--gray-border-dark) !important;
  }

html[data-kaplon-color-mode=dark] .testimonial-card blockquote {
    color: var(--white-85) !important;
  }

html[data-kaplon-color-mode=dark] .testimonial-card blockquote p {
    color: var(--white-85) !important;
  }

html[data-kaplon-color-mode=dark] .testimonial-card strong {
    color: var(--white) !important;
  }

/* --- Map Embed Border --- */

html[data-kaplon-color-mode=dark] .map-embed {
    border: 1px solid var(--gray-border-dark) !important;
  }

/* --- Local Authority Note --- */

html[data-kaplon-color-mode=dark] .local-authority-bar .note,html[data-kaplon-color-mode=dark]
  .lab-inner .note {
    color: var(--white-75) !important;
  }

/* ==========================================================================
   28. Home Buying Page
   ========================================================================== */

/* ---- Intro / Hero ---- */

.page-home-buying .hb-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.page-home-buying .hb-intro-text {
  flex: 1 1 min(100%, 500px);
}

.page-home-buying .hb-eyebrow {
  margin: 0 0 0.6rem;
  color: var(--kaplon-blue);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.page-home-buying .county-title {
  margin: 0 0 1rem;
  color: var(--color-header-h1);
  font-size: clamp(1.65rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
}

.page-home-buying .hb-lead {
  margin: 0 0 0.85rem;
  color: var(--gray-700);
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.65;
}

.page-home-buying .hb-intro-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  gap: var(--space-3);
}

.page-home-buying .hb-intro-figure {
  flex: 1 1 min(100%, 320px);
  max-width: 460px;
  margin: 0;
}

.page-home-buying .hb-intro-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.page-home-buying .hb-intro-figure figcaption {
  margin-top: var(--space-2);
  color: var(--gray-500);
  font-size: 0.82rem;
  font-style: italic;
  text-align: center;
}

/* ---- Numbered Steps ---- */

.hb-steps {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: hb-step;
}

.hb-steps li {
  display: flex;
  align-items: flex-start;
  padding: clamp(0.75rem, 1.5vw, 1rem) 0;
  border-bottom: 1px solid var(--gray-border);
  line-height: 1.6;
  counter-increment: hb-step;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.hb-steps li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.hb-steps li::before {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--kaplon-blue);
  border-radius: 50%;
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  content: counter(hb-step);
}

/* ---- Guide Download Cards ---- */

.hb-guide-grid {
  display: grid;
  margin-top: var(--space-4);
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hb-guide-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--surface-soft);
  border: 1.5px solid var(--kaplon-blue);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  gap: var(--space-2);
}

.hb-guide-card:hover {
  background: color-mix(in oklab, var(--kaplon-blue) 6%, var(--white));
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.hb-guide-card .hb-guide-title {
  color: var(--kaplon-blue);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.hb-guide-card .hb-guide-dl {
  color: var(--kaplon-red);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- Resource Items ---- */

.resource-item {
  display: flex;
  align-items: flex-start;
  padding: clamp(0.75rem, 1.5vw, 1rem) 0;
  border-bottom: 1px solid var(--gray-border);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.resource-item:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

.resource-item img {
  flex-shrink: 0;
  border-radius: var(--radius-1);
  object-fit: cover;
}

.resource-body h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.resource-body h3 a {
  color: var(--kaplon-blue);
  text-decoration: none;
  transition: color 0.15s ease;
}

.resource-body h3 a:hover {
  color: var(--kaplon-red);
  text-decoration: underline;
}

.resource-body p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.9rem;
  line-height: 1.55;
}

.resource-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-border);
}

/* ---- CTA Card ---- */

.card.county-card.county-card--cta {
  background: var(--kaplon-blue) !important;
  border-color: var(--kaplon-blue) !important;
  color: var(--white);
}

.card.county-card.county-card--cta h2 {
  color: var(--white) !important;
}

.card.county-card.county-card--cta p {
  color: var(--white-90) !important;
}

.card.county-card.county-card--cta a {
  color: var(--white) !important;
  font-weight: 600;
  text-decoration: underline;
}

.card.county-card.county-card--cta em {
  color: var(--white-85) !important;
}

/* ---- Mobile ---- */

@media (max-width: 640px) {
  .page-home-buying .hb-intro-figure {
    flex: 1 1 100%;
    order: -1;
    max-width: 100%;
  }

  .page-home-buying .hb-intro-actions {
    flex-direction: column;
  }

  .page-home-buying .hb-intro-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* ---- Dark Mode (colors only) ---- */

@media (prefers-color-scheme: dark) {
  html[data-kaplon-color-mode=system] .page-home-buying .hb-eyebrow {
    color: var(--kaplon-blue-light) !important;
  }

  html[data-kaplon-color-mode=system] .page-home-buying .county-title {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .page-home-buying .hb-lead {
    color: var(--white-85) !important;
  }

  html[data-kaplon-color-mode=system] .page-home-buying .hb-intro-figure figcaption {
    color: var(--dark-text-subtle) !important;
  }

  html[data-kaplon-color-mode=system] .hb-steps li {
    border-bottom-color: var(--dark-border) !important;
  }

  html[data-kaplon-color-mode=system] .hb-guide-card {
    background: var(--dark-surface-alt) !important;
    border-color: var(--kaplon-blue-light) !important;
  }

  html[data-kaplon-color-mode=system] .hb-guide-card:hover {
    background: color-mix(in oklab, var(--kaplon-blue-light) 12%, var(--dark-surface-alt)) !important;
  }

  html[data-kaplon-color-mode=system] .hb-guide-card .hb-guide-title {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .resource-item {
    border-bottom-color: var(--dark-border) !important;
  }

  html[data-kaplon-color-mode=system] .resource-body h3 a {
    color: var(--kaplon-blue-light) !important;
  }

  html[data-kaplon-color-mode=system] .resource-body p {
    color: var(--white-85) !important;
  }

  html[data-kaplon-color-mode=system] .resource-footer {
    border-top-color: var(--dark-border) !important;
  }
}

html[data-kaplon-color-mode=dark] .page-home-buying .hb-eyebrow {
  color: var(--kaplon-blue-light) !important;
}

html[data-kaplon-color-mode=dark] .page-home-buying .county-title {
  color: var(--white) !important;
}

html[data-kaplon-color-mode=dark] .page-home-buying .hb-lead {
  color: var(--white-85) !important;
}

html[data-kaplon-color-mode=dark] .page-home-buying .hb-intro-figure figcaption {
  color: var(--dark-text-subtle) !important;
}

html[data-kaplon-color-mode=dark] .hb-steps li {
  border-bottom-color: var(--dark-border) !important;
}

html[data-kaplon-color-mode=dark] .hb-guide-card {
  background: var(--dark-surface-alt) !important;
  border-color: var(--kaplon-blue-light) !important;
}

html[data-kaplon-color-mode=dark] .hb-guide-card:hover {
  background: color-mix(in oklab, var(--kaplon-blue-light) 12%, var(--dark-surface-alt)) !important;
}

html[data-kaplon-color-mode=dark] .hb-guide-card .hb-guide-title {
  color: var(--white) !important;
}

html[data-kaplon-color-mode=dark] .resource-item {
  border-bottom-color: var(--dark-border) !important;
}

html[data-kaplon-color-mode=dark] .resource-body h3 a {
  color: var(--kaplon-blue-light) !important;
}

html[data-kaplon-color-mode=dark] .resource-body p {
  color: var(--white-85) !important;
}

html[data-kaplon-color-mode=dark] .resource-footer {
  border-top-color: var(--dark-border) !important;
}