/* ======================================================
   Communities Page Styling
   Scoped to .communities-page wrapper for safety

   Table of Contents:
   1. Intro Block
   2. Grid of County Cards
   3. County Highlights Section
   4. CTA Links Row
   5. Communities Page Rules (moved from style.css)
   ====================================================== */

/* ======================================================
   Developer Notes
   - Light-first approach: cards default to light surfaces; dark mode handled via media query.
   - Specificity strategy: scope to `.communities-page` to avoid bleed; use `!important` sparingly but consistently where theme CSS is aggressive.
   - Ordering matters: later rules (e.g., typography resets for `.card-xl`) can override earlier color choices. See comments near `card-xl` headings.
   - Tokens: relies on CSS variables (e.g., --kaplon-blue, --kaplon-red). If a token is missing, fallback values are provided where critical.
   ====================================================== */

/* -----------------------------------
   1. Intro Block
----------------------------------- */

.communities-page {
  padding: clamp(1.25rem, 2vw, 2.5rem);
  background-color: var(--surface-1, var(--white));
  border-radius: var(--radius-4, 12px);
  box-shadow: var(--shadow-card-xl);
}

/* Intro block container styling (background, padding, layout) */
.communities-page .intro-block {
  max-width: min(95%, 1400px);
  /* updated */
  margin: var(--space-4) auto;
  padding: var(--space-6);
  background-color: var(--kaplon-blue-dark, var(--kaplon-blue)) !important;
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-md);
  color: var(--kaplon-white) !important;
  text-align: center;
  /* Locally override theme variables that force dark text */
  --gray-text: var(--white);
  --gray-text-base: var(--white);
  --bs-body-color: var(--white);
}

/* Intro block heading (styled in Kaplon Red) */

.communities-page .intro-block h2 {
  margin-bottom: 1rem;
  color: var(--kaplon-red) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

/* Intro block H1 (main headline) */
.communities-page .intro-block h1 {
  margin-bottom: 1rem;
  color: var(--kaplon-white) !important;
  font-size: clamp(2rem, 4vw, 2.75rem);
  text-shadow: var(--shadow-text-soft) !important;
}

/* Intro block paragraph text (white, improved readability) */
.communities-page .intro-block p {
  margin-bottom: 1.5rem;
  color: var(--kaplon-white) !important;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Ensure emphasis and inline elements stay readable on dark surface */
.communities-page :where(.intro-block) :where(p) :where(strong),
.communities-page :where(.intro-block) :where(p) :where(b),
.communities-page :where(.intro-block) :where(p) :where(em),
.communities-page :where(.intro-block) :where(p) :where(span),
.communities-page :where(.intro-block) :where(span),
.communities-page :where(.intro-block) :where(li) {
  color: var(--kaplon-white) !important;
}

/* Hard override for any text elements inside the intro block, excluding buttons */
.communities-page :where(.intro-block) :is(:where(p), :where(span), :where(em), :where(strong), :where(small), :where(li), :where(a):not(.btn-brand)) {
  color: var(--kaplon-white) !important;
}

/* Extra specificity to beat Elementor kit/global body rules */
.communities-page :where(.intro-block) :where(p),
.communities-page :where(.intro-block) .elementor-widget-text-editor,
.communities-page :where(.intro-block) .elementor-widget-text-editor :where(p) {
  color: var(--kaplon-white) !important;
}

/* Keep links readable and consistent on dark background */
.communities-page :where(.intro-block) :where(a) {
  text-decoration: underline;
}

/* Non-button links should also be white on the dark intro surface */
.communities-page :where(.intro-block) :where(a):not(.btn-brand) {
  color: var(--kaplon-white) !important;
}

/* Guard against muted/low-contrast utilities */
.communities-page :where(.intro-block) .text-muted,
.communities-page :where(.intro-block) [class*="text-"],
.communities-page :where(.intro-block) [style*="color:"] {
  color: var(--kaplon-white) !important;
}

.communities-page .intro-block .btn-brand {
  background-color: var(--btn-primary-bg, var(--button-red-bg)) !important;
  border-color: var(--btn-primary-border, var(--button-red-border)) !important;
  color: var(--btn-primary-text, var(--color-on-secondary, var(--white))) !important;
}

.communities-page .intro-block .btn-brand:where(:hover, :focus-visible) {
  background-color: var(--btn-primary-hover-bg, var(--button-red-bg-hover)) !important;
  border-color: var(--btn-primary-hover-border, var(--button-red-bg-hover)) !important;
}

/* -----------------------------------
   2. Grid of County Cards
----------------------------------- */
/* Grid layout for county cards */
.communities-page .communities-grid {
  display: grid;
  justify-content: center;
  max-width: min(92%, 1260px);
  margin-top: calc(var(--space-6) + var(--space-1));
  margin-right: auto;
  margin-bottom: calc(var(--space-6) + var(--space-1));
  margin-left: auto;
  gap: clamp(2rem, 2.5vw, 3rem);
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(320px, min(540px, 100%)));
  justify-items: stretch;
}

/* Communities page cards inherit global .card-md styling from cards.css */
.communities-page .communities-grid .card-md {
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: clamp(2rem, 3vw, 2.75rem);
  border: 1px solid var(--card-border-soft, transparent);
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-card-md);
}

/* Optional button group wrapper: keep buttons pinned to base if used */
.communities-page .card-md .fc-list {
  margin-top: auto;
}

/* -----------------------------------
   3. County Highlights Section
----------------------------------- */
/* Dark-blue feature panels: content on brand surface */
.communities-page .card-xl,
.card-xl.cta-card {
  max-width: min(95%, 1400px);
  margin: calc(var(--space-6) + var(--space-1)) auto;
  padding: var(--space-6);
  background-color: var(--surface-1, var(--white)) !important;
  border: 1px solid var(--card-border-soft, transparent);
  border-radius: var(--radius-4, 12px);
  box-shadow: var(--shadow-lg);
  color: var(--gray-900) !important;
  text-align: left;
}

/* Ensure readability of text inside dark-blue feature cards */
.communities-page .card-xl p,
.communities-page .card-xl ul,
.communities-page .card-xl li,
.card-xl.cta-card p,
.card-xl.cta-card ul,
.card-xl.cta-card li {
  color: var(--gray-900) !important;
  /* keep light text */
}

/* Headings inside feature cards should be red */
.communities-page .card-xl h2,
.communities-page .card-xl h3,
.card-xl.cta-card h2,
.card-xl.cta-card h3 {
  color: var(--kaplon-red) !important;
}

/* Inner text in feature panels: keep body copy white; headings handled separately */
/* duplicate of earlier readable text rule removed for consistency */

/* Secondary heading inside feature panel (styled red) */
.communities-page .card-xl .county-highlight-title,
.card-xl.cta-card .county-highlight-title {
  color: var(--kaplon-red) !important;
}

/* Headings inside card-xl */
.communities-page .card-xl :where(h2),
.communities-page .card-xl :where(h2.heading-md),
.card-xl.cta-card :where(h2),
.card-xl.cta-card :where(h2.heading-md) {
  margin-bottom: 1.5rem;
  color: var(--kaplon-red) !important;
  font-size: 2rem;
  text-align: left;
}

.communities-page .heading-highlight {
  margin-bottom: var(--space-3);
  color: var(--kaplon-blue-dark, var(--kaplon-blue)) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  text-align: center;
}

.communities-page .card-xl .heading-highlight,
.card-xl.cta-card .heading-highlight {
  color: var(--kaplon-red) !important;
  text-align: left;
}

.communities-page .card-xl .highlights-grid,
.card-xl.cta-card .highlights-grid {
  display: grid;
  margin-top: var(--space-3);
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.communities-page .card-xl .county-highlight,
.card-xl.cta-card .county-highlight {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--surface-soft, var(--white));
  border: 1px solid var(--card-border-soft, color-mix(in srgb, var(--kaplon-blue) 12%, transparent));
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-sm);
  color: var(--gray-900);
  text-align: left;
  gap: 0.5rem;
}

.communities-page .card-xl .county-highlight a,
.card-xl.cta-card .county-highlight a {
  color: var(--kaplon-red) !important;
  font-weight: 600;
  text-decoration: none;
}

.communities-page .card-xl .county-highlight a:hover,
.card-xl.cta-card .county-highlight a:hover {
  text-decoration: underline;
}

.communities-page .county-highlight h3,
.card-xl.cta-card .county-highlight h3 {
  margin-bottom: 0.5rem;
  color: var(--kaplon-red);
  font-size: 1.25rem;
}

.communities-page .county-highlight p,
.card-xl.cta-card .county-highlight p {
  margin: 0;
  color: var(--gray-900);
  line-height: 1.55;
}

/* -----------------------------------
   3a. Typography Cleanup
----------------------------------- */
.communities-page .county-highlight-title {
  margin-bottom: var(--space-1);
  /* 0.5rem */
  color: var(--color-on-secondary, var(--white));
  font-size: 1.25rem;
}

.communities-page :where(.cta-text) {
  margin-top: var(--space-5);
  font-size: 1.125rem;
  /* 2rem */
  text-align: center;
}

.communities-page .list-spaced {
  margin-bottom: var(--space-4);
  padding-left: calc(var(--space-2) + var(--space-1));
  /* 1.5rem */
  line-height: 1.5;
}

/* -----------------------------------
   4. CTA Links Row (Cleaned Up)
----------------------------------- */
/* Flexbox layout for CTA links row */
.communities-page .community-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  /* 2rem */
  max-width: min(95%, 1400px);
  /* spacing tuned for CTA banner fit */
  margin-top: var(--space-5);
  margin-right: auto;
  /* 2rem */
  margin-bottom: var(--space-5);
  margin-left: auto;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background-color: var(--surface-soft);
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-lg);
  gap: 0.75rem !important;
}

.communities-page .community-links :where(.btn-brand) {
  display: flex !important;
  flex: 1 1 220px !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 180px !important;
  max-width: 260px !important;
  margin: 0 !important;
  /* Ensure community CTAs always show brand red (override other .btn-brand defaults) */
  background: var(--kaplon-red) !important;
  border-color: var(--kaplon-red) !important;
  box-shadow: var(--shadow-card-md);
  color: var(--white) !important;
  white-space: nowrap;
  box-sizing: border-box !important;
}

.communities-page .communities-grid .card-md::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  opacity: 0;
  background: transparent;
  border-radius: var(--radius-2, 8px) var(--radius-2, 8px) 0 0;
  pointer-events: none;
  content: "";
}

.communities-page .community-links :where(.btn-brand):hover,
.communities-page .community-links :where(.btn-brand):focus {
  background: var(--kaplon-red-dark) !important;
  border-color: var(--kaplon-red-dark) !important;
}

/* Dark mode overrides for communities page */
/* Invert surfaces and maintain contrast for dark scheme */

/* -----------------------------------
   Global Section Spacing for Communities Page
----------------------------------- */
.card-xl.cta-card+.communities-page {
  margin-top: clamp(var(--space-5), 3vw, calc(var(--space-6) + var(--space-2)));
}

.communities-page+.card-xl.cta-card {
  margin-top: clamp(var(--space-5), 3vw, calc(var(--space-6) + var(--space-2)));
}

.communities-page .communities-grid,
.communities-page .card-xl,
.card-xl.cta-card,
.communities-page .community-links {
  margin-top: calc(var(--space-6) + var(--space-4));
  /* 4rem */
  margin-bottom: calc(var(--space-6) + var(--space-4));
  /* 4rem */
}

/* ======================================================
   Hotfix: Community Links Button Spacing & Wrapping
   Purpose: avoid cramped buttons under CTA banner
   ====================================================== */
/* Ensure each button has a sane min/max width and centers text */
/* (merged into primary block above) */

/* Tablet: create 2-up layout before full stacking */
@media (max-width: 992px) {
  .communities-page .community-links :where(.btn-brand) {
    flex-basis: 45% !important;
    /* two buttons per row when possible */
  }
}

/* ======================================================
   Spacing Polish: CTA Banner & Community Links
   ====================================================== */
/* Increase vertical padding on the CTA banner without affecting other XL cards */
.communities-page .card-xl.cta-card {
  padding-block: clamp(var(--space-5),
      3vw,
      calc(var(--space-6) + var(--space-1))) !important;
  /* 2–3rem based on viewport */
}

/* Ensure the line of copy above the buttons has a little space */
.communities-page .card-xl.cta-card :where(.cta-text) {
  margin-bottom: 1.25rem !important;
}

/* Give the button group extra air inside the banner */
.communities-page .card-xl.cta-card :where(.community-links) {
  margin-top: var(--space-6) !important;
  /* more space from the copy */
  gap: var(--space-3) !important;
  /* 1rem */
}

/* ======================================================
   County Jump Navigation
   ====================================================== */
.communities-page .county-jump-wrap {
  max-width: min(95%, 1400px);
  margin: 2rem auto;
  text-align: center;
}

.communities-page .county-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.75rem;
  gap: 0.75rem 1rem;
}

.communities-page .county-jump .chip,
.communities-page .county-jump .pill {
  padding: 0.45rem 1rem;
  background-color: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  color: var(--kaplon-red);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.communities-page .county-jump :where(.chip, .pill):hover {
  background-color: var(--kaplon-blue);
  border-color: var(--kaplon-blue);
  color: var(--white);
}

/* -------------------------------------------------------------
   Communities Page – Footer Spacing Adjustment
   Adds bottom breathing room after "Why Each County Stands Out"
   so the blue section clears the dark footer. (Added 2025-10-24)
   Selector targets the final Elementor section/card for resiliency
   across Elementor + Houzez markup.
-------------------------------------------------------------- */
.communities-page :where(.elementor-section:last-of-type,
  .card-xl:last-of-type,
  .card-xl.cta-card:last-of-type) {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
}

/* ======================================================
   Hard Footer Spacing Fix
   Forces visible separation between “Why Each County Stands Out”
   and the footer when Elementor section order breaks :last-of-type.
   (Added 2025-10-25)
   ------------------------------------------------------
   This fix ensures that the last blue card always has extra space
   before the footer, regardless of DOM order or Elementor structure.
   It also adds padding to the footer itself and a universal fallback
   for any element following .communities-page. Responsive layout is
   preserved, and color blending is prevented.
   ====================================================== */
.communities-page .card-xl:last-of-type {
  margin-bottom: 4rem !important;
  padding-bottom: 2rem !important;
}

footer.site-footer {
  padding-top: 3rem !important;
}

.communities-page+* {
  margin-top: 4rem !important;
}

/* ======================================================
   Why Each County Stands Out – Professional Polish
   (Added 2025-10-25)
   ------------------------------------------------------
   Elevates the section with gradient background, accent bar,
   improved typography, grid layout for highlights, and responsive polish.
   ====================================================== */
.communities-page .card-xl.county-standout {
  position: relative;
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--surface-1, var(--white));
  border-radius: var(--radius-3, 12px);
  box-shadow: var(--shadow-card-xl);
}

.communities-page .card-xl.county-standout .heading-highlight {
  margin-bottom: 1.5rem;
  color: var(--kaplon-red);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  text-align: left;
}

.communities-page .card-xl.county-standout .heading-highlight::after {
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 0.75rem;
  background: var(--kaplon-red);
  content: "";
}

.communities-page .county-standout-grid {
  display: grid;
  margin-top: 1.5rem;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.communities-page .county-standout-item {
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding: 1.25rem;
  background: var(--surface-soft, var(--white));
  border: 1px solid var(--card-border-soft, color-mix(in srgb, var(--kaplon-blue) 12%, transparent));
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-sm);
  text-align: left;
  gap: 0.35rem;
}

.communities-page .county-standout-item .county-title {
  margin-bottom: 0.25rem;
  color: var(--kaplon-red);
  font-size: 1.1rem;
  font-weight: 700;
}

.communities-page .county-standout-item .county-desc {
  color: var(--gray-900);
  font-size: 1rem;
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */
@media (max-width: 768px) {
  .communities-page .community-links {
    flex-direction: column;
  }

  .communities-page :where(.elementor-section:last-of-type,
    .card-xl:last-of-type,
    .card-xl.cta-card:last-of-type) {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }
}

@media (max-width: 600px) {

  .communities-page .intro-block,
  .communities-page .card-xl,
  .card-xl.cta-card {
    padding: var(--space-4);
  }

  .communities-page .card-md {
    max-width: none;
  }

  .card-xl.cta-card+.communities-page,
  .communities-page+.card-xl.cta-card {
    margin-top: var(--space-5);
  }

  .communities-page .communities-grid,
  .communities-page .card-xl,
  .card-xl.cta-card,
  .communities-page .community-links {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }

  .communities-page .community-links {
    flex-direction: column !important;
  }

  .communities-page .community-links .btn-brand {
    flex-basis: auto !important;
    width: 100% !important;
  }

  .communities-page .card-xl.cta-card {
    padding: 1.75rem !important;
  }

  .communities-page .card-xl.cta-card :where(.community-links) {
    margin-top: 1.5rem !important;
  }

  .communities-page .card-xl.county-standout {
    padding-block: 2rem;
  }

  .communities-page .county-standout-grid {
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .communities-page .county-standout-item {
    min-height: 120px;
    padding: 1rem 0.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  .communities-page {
    --communities-panel-bg: color-mix(in oklab, var(--dark-surface) 90%, var(--kaplon-blue) 10%);
    --communities-panel-border: color-mix(in srgb, var(--dark-border-mid) 70%, var(--kaplon-blue) 30%);
    background-color: var(--dark-surface);
  }

  .communities-page .intro-block {
    background-color: color-mix(in oklab, var(--dark-surface) 80%, var(--kaplon-blue) 20%) !important;
    background-image: linear-gradient(135deg,
        color-mix(in oklab, var(--dark-surface) 80%, var(--kaplon-blue) 20%),
        color-mix(in oklab, var(--dark-surface-strong) 65%, var(--kaplon-black-transparent))) !important;
    border: 1px solid var(--communities-panel-border);
  }

  .communities-page .intro-block h1,
  .communities-page .intro-block h2,
  .communities-page .intro-block p {
    color: var(--white-90) !important;
  }

  .communities-page .communities-grid .card-md {
    background-color: var(--communities-panel-bg) !important;
    border: 1px solid var(--communities-panel-border);
    color: var(--white-85);
  }

  .communities-page .communities-grid .card-md::before {
    opacity: 1;
    background: linear-gradient(120deg, var(--kaplon-red), color-mix(in oklab, var(--kaplon-red) 35%, var(--kaplon-blue)));
  }

  .communities-page .communities-grid .card-md h2 {
    color: var(--white) !important;
  }

  .communities-page .communities-grid .card-md ul li::marker,
  .communities-page .communities-grid .card-md ul li b {
    color: var(--white-90) !important;
  }

  .communities-page .card-xl,
  .card-xl.cta-card {
    background-color: var(--communities-panel-bg) !important;
    border: 1px solid var(--communities-panel-border);
    color: var(--white-85) !important;
  }

  .communities-page .card-xl h2,
  .communities-page .card-xl h3,
  .card-xl.cta-card h2,
  .card-xl.cta-card h3 {
    color: var(--white) !important;
  }

  .communities-page :where(.heading-md, .heading-highlight, .county-highlight-title) {
    color: var(--white) !important;
  }

  .communities-page .card-xl p,
  .communities-page .card-xl li,
  .card-xl.cta-card p,
  .card-xl.cta-card li {
    color: var(--white-85) !important;
  }

  .communities-page .card-xl .county-highlight,
  .card-xl.cta-card .county-highlight {
    background-color: var(--communities-panel-bg);
    border-color: var(--communities-panel-border);
    color: var(--white-85);
  }

  .communities-page .card-xl .county-highlight h3,
  .card-xl.cta-card .county-highlight h3,
  .communities-page .card-xl .county-highlight a,
  .card-xl.cta-card .county-highlight a {
    color: var(--white) !important;
  }

  .communities-page .card-xl .county-highlight p,
  .card-xl.cta-card .county-highlight p {
    color: var(--white-85) !important;
  }

  .communities-page .county-standout-item {
    background: color-mix(in srgb, var(--white) 8%, transparent);
    color: var(--white);
  }

  .communities-page .county-standout-item .county-title {
    color: var(--kaplon-red-light, var(--kaplon-red));
  }

  .communities-page .community-links {
    background-color: var(--communities-panel-bg);
    border: 1px solid var(--communities-panel-border);
  }

  .communities-page .community-links :where(.btn-brand) {
    background: var(--button-red-bg) !important;
    border-color: var(--button-red-bg) !important;
  }

  .communities-page .community-links :where(.btn-brand):hover,
  .communities-page .community-links :where(.btn-brand):focus {
    background: var(--button-red-bg-hover) !important;
    border-color: var(--button-red-bg-hover) !important;
    color: var(--white) !important;
  }

  .communities-page .county-jump .chip,
  .communities-page .county-jump .pill {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--white) !important;
  }

  .communities-page .county-jump :where(.chip, .pill):hover {
    background-image: linear-gradient(135deg, var(--kaplon-blue), var(--kaplon-red));
    border-color: transparent;
    color: var(--white) !important;
  }

  .communities-page .county-jump .pill {
    background-color: color-mix(in oklab, var(--dark-surface) 80%, var(--kaplon-blue) 20%);
    border-color: var(--communities-panel-border);
    color: var(--white-85);
  }

  .band-dark {
    background-color: var(--gray-900);
  }

  .band-darker {
    background-color: var(--gray-darkest);
  }

  .band-dark h3,
  .band-dark h4,
  .band-darker h3,
  .band-darker h4 {
    color: var(--white);
  }
}