/*
 * ShopDPA — CPT Pillar Component Styles (v1.30.0)
 *
 * All visual styling references tokens.css. Zero hardcoded colors / sizes.
 * Loaded only on CPT singles via shopdpa_enqueue_styles_cpt() conditional.
 *
 * Components:
 *   .cpt-pillar           — article wrapper (county/isd/base/city pillars)
 *   .cpt-hero             — top hero on pillar pages
 *   .quick-facts          — fact callout (4-6 cards near top)
 *   .ami-snapshot         — county AMI table block
 *   .loan-limits          — county loan-limits block
 *   .cross-grid           — generic card-grid (cities, ISDs, bases cross-links)
 *   .high-schools         — ISD repeater table
 *   .neighborhoods        — city repeater list
 *   .bah-table            — base BAH ZIP table
 *   .reviewed-by          — Reviewed-by + Last-verified strip
 *   .cpt-form             — Form 3 embed wrapper
 *   .cpt-body             — main editorial body
 *   .base-programs        — VA + TSAHC Heroes side-by-side card pair
 */

/* ============================================================ */
/* Pillar callouts (v1.30.5)                                    */
/*                                                              */
/* Existing pillar pages (.is-pillar-page on body — applied to  */
/* /texas-down-payment-assistance/ and child pillars by         */
/* page-pillar*.php templates) had three visual issues caught   */
/* during v1.30.4 verification:                                 */
/*                                                              */
/*   (1) KEY TAKEAWAYS callout (.pillar-summary inside          */
/*       .pillar-summary-zone) used a white bg via patterns.css */
/*       line 4628 + 7801 — barely visible against cream-light  */
/*       page bg.                                               */
/*   (2) Big intro lede paragraphs after each H2                */
/*       (.prose-block__lede) used transparent bg + amber       */
/*       border-left only — no card edge.                       */
/*   (3) .pillar-toc had thin top + bottom borders that         */
/*       sectioned the page unnecessarily.                      */
/*                                                              */
/* User direction 2026-05-08: "make sure that uses bone as well */
/* to contrast. things like that because they cant stay plain   */
/* white. also i see divider lines on some of these blocks ...  */
/* blog content should basically look like one whole thing and  */
/* not sectioned off like that."                                */
/*                                                              */
/* Fix: outer .pillar-summary-zone stays transparent (page bg   */
/* shows through). Inner .pillar-summary aside gets bone bg +   */
/* amber border-left (no gradient — solid per no-gradients      */
/* rule). .prose-block__lede gets bone bg + padding + radius +  */
/* keeps amber border-left. .pillar-toc loses borders. Explicit */
/* dividers + prose HRs hide.                                   */
/*                                                              */
/* Selectors use `body.is-pillar-page` to match the existing    */
/* patterns.css specificity (0,0,2,1) and load AFTER patterns   */
/* in the cascade.                                              */
/* ============================================================ */

body.is-pillar-page .pillar-summary-zone {
  background-color: transparent !important;
}
body.is-pillar-page .pillar-summary {
  background: var(--c-bg-alt) !important;
  border-left: 4px solid var(--c-accent) !important;
  box-shadow: none !important;
}
body.is-pillar-page .prose-block__lede {
  background-color: var(--c-bg-alt) !important;
  padding: var(--sp-3) !important;
  border-radius: var(--r-md) !important;
}
/* v1.30.5 set bone bg here; v1.30.6 reverts to transparent per user
   direction "toc doesnt need a contrasting background, it was fine
   how it was." Bone bg was bleeding past the content column edge and
   visually overlapping the sticky right sidebar. The TRANSPARENT rule
   is now in the v1.30.6 block at the bottom of this file — kept this
   stub to remove dividers only. */
body.is-pillar-page .pillar-toc.zone--alt,
body.is-pillar-page .pillar-toc {
  border-top: none !important;
  border-bottom: none !important;
}
body.is-pillar-page .pillar-byline-top__divider,
body.is-pillar-page .prose-zone hr,
body.is-pillar-page .pillar-body hr {
  display: none !important;
}

/* ============================================================ */
/* Article wrapper                                              */
/* ============================================================ */

.cpt-pillar {
  background: var(--c-bg);
  color: var(--c-ink);
}

.cpt-pillar > section,
.cpt-pillar > header {
  padding-block: clamp(var(--sp-5), 6vw, var(--sp-7));
}

/* v1.49.22 — Trim bottom padding on card-grid sections specifically. The base
 * rule above (clamp 48-96px) was too generous for cross-grid sections — at
 * desktop it added ~90px of empty space below the last row of cards, which
 * (per Tyler 2026-05-26) made hub pages feel sparse and stretched. 24px gives
 * the cards room to breathe without dead air. Top padding stays full so the
 * H2 + search input have proper space from the section above. */
.cpt-pillar > .cross-grid {
  padding-block-end: var(--sp-3);
}

.cpt-pillar > section.zone--alt,
.cpt-pillar > .quick-facts.zone--alt,
.cpt-pillar > .cpt-form.zone--alt {
  background: var(--c-bg-alt);
}

/* NOTE — Form 3 (Fluent Forms Pro) has a single global styling enforced
   site-wide. Never wrap the form in a custom card, never change its
   surrounding tone with `.zone--dark` or any color-shifting wrapper. The
   form embed renders with its native FF Pro styles on every surface. The
   eyebrow + h2 + lede ABOVE the form can be section-specific marketing
   copy; the form ITSELF is sacred. Rule: `feedback_form3_global_styling.md`. */

/* v1.30.4 — accent strip moved INSIDE the .container so it inherits the
   container's centering + left padding. Strip aligns with eyebrow + title
   text precisely. (v1.30.1 had it on the section's ::before with manual
   margin-left: container-pad, which only aligned at viewport widths < the
   container max-width — wider viewports center the container and the strip
   ended up far to the left.) */
.cpt-pillar > .ami-snapshot > .container::before,
.cpt-pillar > .loan-limits > .container::before,
.cpt-pillar > .high-schools > .container::before,
.cpt-pillar > .bah-table > .container::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  background: var(--c-accent);
  border-radius: var(--r-pill);
  margin: 0 0 var(--sp-3);
}

/* ============================================================ */
/* Hero — DEFAULT for all CPT pillar templates (county, isd,    */
/* base, future city). Navy bg + amber-text eyebrow + white H1, */
/* taking the visual pattern from the existing pillar template  */
/* (`.pillar-hero` on /texas-down-payment-assistance/...).      */
/* Locked v1.30.3: navy hero is the default entry-point for     */
/* every CPT pillar so the page opens with strong contrast      */
/* against the cream-toned middle sections below.               */
/* ============================================================ */

.cpt-hero {
  background: var(--c-primary);
  color: var(--c-ink-inverse);
  padding-block: clamp(4rem, 8vw, 6rem) clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* v1.30.4 — optional Featured-Image background overlay.
   The single-template adds `style="--hero-image: url(...)"` when the post has
   a Featured Image. With no image set, the ::before background-image var is
   undefined and renders as `none`, so no-image heroes look identical to the
   pre-1.30.4 navy-only state. */
.cpt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  z-index: 0;
  pointer-events: none;
}
.cpt-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(2, 33, 78, 0.55) 0%, rgba(0, 12, 36, 0.65) 100%);
  z-index: 0;
  pointer-events: none;
}
.cpt-hero > .container {
  position: relative;
  z-index: 1;
}

.cpt-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(250, 247, 242, 0.65);
  margin-bottom: var(--sp-3);
}
.cpt-hero__breadcrumb a {
  color: rgba(250, 247, 242, 0.65);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cpt-hero__breadcrumb a:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}
.cpt-hero__sep {
  color: rgba(250, 247, 242, 0.4);
}

.cpt-hero__eyebrow {
  display: inline-block;
  background: transparent;
  color: var(--c-accent);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  padding: 0;
  margin: 0 0 var(--sp-3);
}

.cpt-hero__h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink-inverse);
  margin: 0 0 var(--sp-3);
  max-width: 28ch;
}

.cpt-hero__lede {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--sp-3);
  max-width: 70ch;
}

.cpt-hero__verified {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(250, 247, 242, 0.65);
  margin: 0;
}

/* ============================================================ */
/* v1.49.15 — .cpt-hero ↔ .pillar-hero visual unification       */
/* ============================================================ */
/*
 * The hub pages (page-cities.php, page-texas-home-loans.php,
 * page-heroes-home-loan-texas.php) render with [shopdpa_*_hub] shortcodes
 * which emit <header class="cpt-hero"> markup. Pillar pages (Heroes
 * occupations, DPA programs, city pillars) use a separate shopdpa_render_pillar_hero()
 * pattern that emits .pillar-hero markup. The two were styled independently
 * which made the breadcrumb + eyebrow + H1 + lede sit at different horizontal
 * positions and at different sizes — a visible horizontal "shift" when
 * navigating back between them. Tyler called this out 2026-05-26.
 *
 * This block overrides the default .cpt-hero on hub-archive pages to
 * mirror .pillar-hero exactly:
 *   - 100vw full-bleed (escape the Bricks parent inset),
 *   - same navy bg (no ::before image / ::after gradient overlay; pure
 *     `--c-primary` solid),
 *   - same padding-block (sp-4 top, sp-5 bottom),
 *   - same border-block-end + margin-block-end,
 *   - same inner container (max-width: calc(100% - 400px) left-anchored
 *     with 56px left padding so content starts at the same horizontal
 *     position the pillar uses),
 *   - same breadcrumb / eyebrow / H1 / lede sizes + weights + spacings.
 *
 * Scope: ANY `.cpt-pillar` hub-style wrapper. The selector uses `:not()` to
 * exclude the 4 known single-record templates that keep their per-page
 * featured photo hero (--county / --isd / --base / --post). This is
 * future-proof — when a new hub modifier is added (e.g., --resources,
 * --tools), it automatically inherits the mirror with no CSS update, which
 * matches Tyler's "any hub page should look identical to article posts"
 * directive (2026-05-26).
 *
 * History:
 * - v1.49.15: initial mirror, scoped to .cpt-pillar--archive only.
 * - v1.49.16: added !important to .container overrides (Bricks default wins
 *   on cascade without it).
 * - v1.49.17: expanded scope via :not() exclusion list per Tyler's catch
 *   that --programs (DPA hub) was missing the mirror.
 */
/* v1.49.29 — Center the pillar Post article in the viewport, mirroring
 * how pillar Pages get centered by Bricks' parent container (`#brx-content`
 * sits inside a max-width centered wrapper at left=206 width=1100 on a
 * 1512 viewport). single.php Posts have no such Bricks wrapper — the
 * <article class="cpt-pillar--post"> sits as a direct body child and would
 * stretch the full viewport, pushing body content to the left edge and the
 * floated TOC to the right edge with a wide empty middle. This rule gives
 * the article the same 1100px max-width centered footprint as a pillar
 * Page so body + TOC + callouts read in a balanced center column. The
 * pillar-hero inside still escapes to full-bleed 100vw via the existing
 * `width: 100vw; margin-left: calc(50% - 50vw)` rule in patterns.css. */
body.is-pillar-page .cpt-pillar--post {
  display: block;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  box-sizing: border-box;
}

.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  position: relative;
  left: 0;
  background-color: var(--c-primary);
  color: var(--c-ink-inverse);
  padding: var(--sp-4) 0 var(--sp-5);
  border-block-start: none;
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  margin-block-end: var(--sp-4);
}

/* Nullify the inherited .cpt-hero ::before (hero-image placeholder) and
 * ::after (navy gradient overlay) — hubs don't have hero images, and the
 * gradient made the bg shade visibly different from .pillar-hero's flat navy. */
.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero::before,
.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero::after {
  content: none;
  display: none;
  background: none;
}

/* v1.49.16 — Bricks Builder applies `.container { max-width: 1340px }` and
 * `margin-inline: auto` at high specificity (likely with !important in the
 * Bricks core CSS). v1.49.15 attempted the override without !important and
 * lost the cascade — content stayed at left:118 instead of left:56. Adding
 * !important on these properties is the explicit override needed. */
.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero > .container {
  max-width: calc(100% - 400px) !important;
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
  padding-inline: 56px 0 !important;
}

.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero__breadcrumb {
  font-size: 14px;
  color: rgba(250, 247, 242, 0.7);
  margin-block-end: var(--sp-3);
  padding: 0;
  background: transparent;
}

.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.78);
}

.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero__breadcrumb a:hover {
  color: var(--c-accent);
}

.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero__sep {
  color: rgba(255, 255, 255, 0.4);
}

/* Eyebrow: text-only amber (NOT the section-eyebrow pill), to match
 * .pillar-hero__eyebrow. font-weight 600 (not 700) + letter-spacing
 * 0.12em (not 0.18em) — denser/heavier eyebrow read as visually smaller. */
.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero__eyebrow {
  display: block;
  background: transparent;
  color: var(--c-accent);
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.55;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2) 0;
  border-radius: 0;
}

.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero__h1 {
  font-size: 40px;
  line-height: 46px;
  margin: 0 0 var(--sp-2);
  color: #ffffff;
}

.cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero__lede {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--sp-2);
  max-width: none;
}

/* v1.49.19 — Mobile fix for the hub-hero container. The desktop rule uses
 * `max-width: calc(100% - 400px)` to reserve right-side gutter for the
 * (hub-irrelevant) sticky-TOC zone — keeps the H1 left edge aligned with the
 * .pillar-hero left edge on desktop. On mobile (~390px viewport) that calc
 * resolves negative and the content squishes to a thin column with a huge
 * right gutter. Reset at ≤1099px to natural full-width with normal mobile
 * padding-inline (matches pillar-hero's own mobile behavior). */
@media (max-width: 1099px) {
  .cpt-pillar:not(.cpt-pillar--county):not(.cpt-pillar--isd):not(.cpt-pillar--base):not(.cpt-pillar--post) .cpt-hero > .container {
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: clamp(16px, 4vw, 24px) !important;
  }
}

/* v1.49.19 — Single-column body for the region hubs (Tyler caught body content
 * splitting into two columns on /north-texas/ etc.). The v1.44.5 two-column
 * rule on `.cpt-body__inner` was designed for county-page "What Buyers Should
 * Know" prose; region hub body content (admin-edited copy + lists of counties)
 * was being column-split which broke the read. Extend the existing v1.47.3
 * single-column override (programs + scholarship) to cover --region too. */
.cpt-pillar--region .cpt-body__inner {
  column-width: auto;
  column-count: 1;
  column-rule: none;
}
.cpt-pillar--region .cpt-body__inner > p,
.cpt-pillar--region .cpt-body__inner > ul,
.cpt-pillar--region .cpt-body__inner > ol {
  max-width: 72ch;
}

/* ============================================================ */
/* Quick facts callout                                          */
/* ============================================================ */

.quick-facts__inner {
  max-width: 100%;
}
.quick-facts__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--c-primary);
  margin: 0 0 var(--sp-4);
}
.quick-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.quick-facts__card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
}
.quick-facts__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  font-weight: var(--fw-semibold);
}
.quick-facts__value {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  color: var(--c-primary);
  line-height: var(--lh-snug);
}
.quick-facts__cite {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  color: var(--c-ink-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--c-border-strong);
  align-self: flex-start;
  margin-top: var(--sp-half);
}
.quick-facts__cite:hover {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

/* ============================================================ */
/* AMI snapshot                                                 */
/* ============================================================ */

.ami-snapshot__head {
  margin-bottom: var(--sp-4);
}
.ami-snapshot__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 var(--sp-1);
}
.ami-snapshot__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--c-primary);
  margin: 0 0 var(--sp-1);
}
.ami-snapshot__msa {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin: 0;
}
.ami-snapshot__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.ami-snapshot__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.ami-snapshot__table thead {
  background: var(--c-primary);
  color: var(--c-ink-inverse);
}
.ami-snapshot__table th,
.ami-snapshot__table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.ami-snapshot__table thead th {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-bottom: none;
}
.ami-snapshot__col-note {
  display: block;
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xs);
  color: rgba(250, 247, 242, 0.75);
  margin-top: 2px;
}
.ami-snapshot__table tbody th[scope="row"] {
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  background: var(--c-surface-alt);
  width: 18ch;
}
.ami-snapshot__table tbody td {
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.ami-snapshot__table tbody tr:last-child th,
.ami-snapshot__table tbody tr:last-child td {
  border-bottom: none;
}
.ami-snapshot__notes {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.ami-snapshot__notes li {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}
.ami-snapshot__cite {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  margin: var(--sp-3) 0 0;
}
.ami-snapshot__cite a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
  text-underline-offset: 2px;
}
.ami-snapshot__cite a:hover {
  text-decoration-color: var(--c-primary);
}

/* ============================================================ */
/* Loan limits                                                  */
/* ============================================================ */

.loan-limits__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  color: var(--c-primary);
  margin: 0 0 var(--sp-4);
}
.loan-limits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.loan-limits__card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.loan-limits__card-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0;
}
.loan-limits__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
  margin: 0;
}
.loan-limits__list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--c-border);
}
.loan-limits__list > div:last-child {
  border-bottom: none;
}
.loan-limits__list dt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin: 0;
}
.loan-limits__list dd {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.loan-limits__va-note {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  line-height: var(--lh-normal);
  margin: 0;
}
.loan-limits__cite {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  color: var(--c-ink-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--c-border-strong);
  align-self: flex-start;
  margin-top: auto;
}
.loan-limits__cite:hover {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}
.loan-limits__verified {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  margin: var(--sp-3) 0 0;
}

/* ============================================================ */
/* Cross-link card grid                                         */
/* ============================================================ */

.cross-grid__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 var(--sp-1);
}
.cross-grid__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--c-primary);
  margin: 0 0 var(--sp-4);
}
.cross-grid__empty {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--c-ink-muted);
  margin: 0;
  font-style: italic;
}
.cross-grid__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  /* v1.40.2 — override the global `ul { max-width: var(--max-w-content) }` rule
   * from base.css. Without this, the card row caps at 780px inside the 1340px
   * container, leaving ~560px empty space on the right. */
  max-width: none;
}
@media (min-width: 640px) {
  .cross-grid__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .cross-grid__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.cross-grid__card {
  display: flex;
}
.cross-grid__card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--c-ink);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.cross-grid__card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: var(--c-border-strong);
}
.cross-grid__card-image {
  /* v1.49.21 — shrunk from aspect-ratio 16/9 (~229px at 3-col grid) to a
   * fixed 110px height. Cards were ~502px tall in v1.49.20; image dominated.
   * Now total card height ~ 260-280px. */
  aspect-ratio: auto;
  block-size: 110px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-bg-alt);
}
.cross-grid__card-image--city  { background-color: rgba(2, 33, 78, 0.08); }
.cross-grid__card-image--isd   { background-color: rgba(255, 197, 40, 0.18); }
.cross-grid__card-image--base  { background-color: rgba(26, 164, 164, 0.18); }
.cross-grid__card-image--county{ background-color: rgba(2, 33, 78, 0.12); }
.cross-grid__card-body {
  /* v1.49.21 — padding tightened sp-3 (24px) → sp-2 (16px) to match shrunk
   * card. gap shrunk half (4px) for tighter line stack. */
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
  flex-grow: 1;
}
.cross-grid__card-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  /* v1.49.21 — fs-lg (20px) → fs-base (16px) for the new card scale. */
  font-size: var(--fs-base);
  color: var(--c-primary);
  margin: 0;
  line-height: var(--lh-snug);
}
.cross-grid__card-excerpt {
  font-family: var(--font-body);
  /* v1.49.21 — fs-sm (14px) → fs-xs (12px) + 2-line clamp so cards stay tight
   * regardless of excerpt length. Avoids one long excerpt blowing up the row. */
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  line-height: var(--lh-normal);
  margin: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cross-grid__card-cta {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  /* v1.49.21 — fs-sm (14px) → fs-xs (12px) for the smaller scale. */
  font-size: var(--fs-xs);
  color: var(--c-primary);
  margin-top: var(--sp-half);
}

/* v1.46.0 — "Coming soon" hub cards (Loans / Heroes hubs): non-linked topic
   cards for pillars that aren't built yet. Muted, no hover/cursor affordance,
   so the hub can list its full topic set without linking to blank pages. */
.cross-grid__card--soon {
  opacity: 0.72;
}
.cross-grid__card-link--static {
  cursor: default;
  display: block;
  height: 100%;
}
.cross-grid__card-cta--soon {
  display: inline-block;
  color: var(--c-ink-muted);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  font-size: var(--fs-xs);
}

/* v1.49.21 — Show More + data-collapsed pattern retired (Tyler 2026-05-26).
 * Big grids switch directly to scroll mode on render — no click needed.
 * The v1.46.1 collapsed/overflow rules are gone; .cross-grid__more button is
 * no longer emitted by shopdpa_render_card_grid. */

/* v1.49.19 — When user clicks "Show more", the section switches to a fixed-
 * height SCROLLABLE state instead of growing the page downward. All cards
 * render inside the visible cards container; user scrolls within it. Same
 * state applies during search (so matching cards appear in a contained area
 * without bouncing the page).
 *
 * v1.49.20 — fade-cue moved off the scrolling element (where the mask-image
 * floated with content as the user scrolled, appearing mid-section) onto a
 * .cross-grid__cards-wrap parent with `position: relative`; ::after pseudo
 * sits at the visible bottom edge regardless of scroll position. The wrap
 * div is now always emitted around the cards <ul>, so this rule + the
 * scrollbar styles below all target the wrap rather than the list. */
.cross-grid__cards-wrap {
  position: relative;
}
.cross-grid[data-expanded="scroll"] .cross-grid__cards {
  max-height: clamp(420px, 60vh, 720px);
  overflow-y: auto;
  /* Tasteful scrollbar styling — Firefox + WebKit. */
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong, rgba(0, 0, 0, 0.25)) transparent;
  /* Pad so the scrollbar doesn't crowd the last column of cards. */
  padding-inline-end: var(--sp-1);
  /* v1.49.21 — bottom padding tightened sp-3 (24px) → sp-1 (8px) to match the
   * shrunk 28px fade. Cards fully render with just enough breathing room. */
  padding-block-end: var(--sp-1);
}
.cross-grid[data-expanded="scroll"] .cross-grid__cards::-webkit-scrollbar {
  width: 8px;
}
.cross-grid[data-expanded="scroll"] .cross-grid__cards::-webkit-scrollbar-track {
  background: transparent;
}
.cross-grid[data-expanded="scroll"] .cross-grid__cards::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}
.cross-grid[data-expanded="scroll"] .cross-grid__cards::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

/* Fade-out gradient at the visible bottom edge of the scrollable area.
 * Anchored to the wrap (not the scrolling list) so it stays glued to the
 * visible bottom edge regardless of scroll position. Color matches the
 * underlying section bg so cards literally fade into the background.
 *
 * v1.49.21 — height reduced 56px → 28px (Tyler 2026-05-26: "the fade is too
 * high up in the section taking too much space"). Smaller fade = thinner
 * visual cue that doesn't obscure the last visible card. */
.cross-grid[data-expanded="scroll"] .cross-grid__cards-wrap::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 28px;
  background: linear-gradient(to top, var(--c-bg) 0%, transparent 100%);
  pointer-events: none;
}
.cross-grid.zone--alt[data-expanded="scroll"] .cross-grid__cards-wrap::after {
  background: linear-gradient(to top, var(--c-bg-alt) 0%, transparent 100%);
}

/* .cross-grid__more rule retired v1.49.21 — button no longer emitted. */

/* v1.49.19 — Search input above searchable cross-grids. Sits between the
 * .cross-grid__title and the .cross-grid__cards list. Visually a low-key
 * pill input with a search icon on the left. */
.cross-grid__search-wrap {
  margin: 0 0 var(--sp-3);
  max-width: 420px;
}
.cross-grid__search-label {
  position: relative;
  display: block;
}
.cross-grid__search-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--c-ink-muted, rgba(2, 33, 78, 0.55));
}
.cross-grid__search-input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface, #ffffff);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  -webkit-appearance: none;
          appearance: none;
}
.cross-grid__search-input::placeholder {
  color: var(--c-ink-muted, rgba(2, 33, 78, 0.45));
}
.cross-grid__search-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(2, 33, 78, 0.12);
}
/* Hide the type=search clear-X on WebKit so the styling stays clean. */
.cross-grid__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}

/* v1.46.2 — breadcrumb inside the pillar hero (light on navy), so article pages
   show Home › Cities › Dallas in the header like the CPT archive hubs. */
.pillar-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(250, 247, 242, 0.7);
  margin-bottom: var(--sp-3);
}
.pillar-hero__breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pillar-hero__breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.pillar-hero__breadcrumb a {
  color: rgba(250, 247, 242, 0.7);
  text-decoration: none;
}
.pillar-hero__breadcrumb a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}
.pillar-hero__breadcrumb__sep {
  color: rgba(250, 247, 242, 0.4);
}
.pillar-hero__breadcrumb [aria-current="page"] {
  color: var(--c-ink-inverse);
}

/* ============================================================ */
/* High schools table                                           */
/* ============================================================ */

.high-schools__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 var(--sp-1);
}
.high-schools__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  color: var(--c-primary);
  margin: 0 0 var(--sp-4);
}
.high-schools__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.high-schools__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.high-schools__table thead {
  background: var(--c-primary);
  color: var(--c-ink-inverse);
}
.high-schools__table th,
.high-schools__table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.high-schools__table thead th {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-bottom: none;
}
.high-schools__table tbody th[scope="row"] {
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  background: var(--c-surface-alt);
}
.high-schools__table tbody th a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
}
.high-schools__table tbody th a:hover {
  text-decoration-color: var(--c-primary);
}
.high-schools__table tbody td {
  font-variant-numeric: tabular-nums;
}
.high-schools__table tbody tr:last-child th,
.high-schools__table tbody tr:last-child td {
  border-bottom: none;
}
.high-schools__cite {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  margin: var(--sp-3) 0 0;
}
.high-schools__cite a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
}

/* ============================================================ */
/* Neighborhoods                                                */
/* ============================================================ */

.neighborhoods__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 var(--sp-1);
}
.neighborhoods__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  color: var(--c-primary);
  margin: 0 0 var(--sp-4);
}
.neighborhoods__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-3);
}
.neighborhoods__item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
}
.neighborhoods__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.neighborhoods__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--c-primary);
  margin: 0;
}
.neighborhoods__price {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
}
.neighborhoods__isd {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-1);
}
.neighborhoods__isd a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
}
.neighborhoods__profile {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  line-height: var(--lh-normal);
  margin: 0;
}

/* ============================================================ */
/* BAH table                                                    */
/* ============================================================ */

.bah-table__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 var(--sp-1);
}
.bah-table__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  color: var(--c-primary);
  margin: 0 0 var(--sp-4);
}
.bah-table__wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.bah-table__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.bah-table__table thead {
  background: var(--c-primary);
  color: var(--c-ink-inverse);
}
.bah-table__table th,
.bah-table__table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.bah-table__table thead th {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-bottom: none;
}
.bah-table__table tbody th[scope="row"] {
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  background: var(--c-surface-alt);
  font-variant-numeric: tabular-nums;
}
.bah-table__table tbody td {
  font-variant-numeric: tabular-nums;
}
.bah-table__table tbody td a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
}
.bah-table__table tbody tr:last-child th,
.bah-table__table tbody tr:last-child td {
  border-bottom: none;
}
.bah-table__cite {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  margin: var(--sp-3) 0 0;
}
.bah-table__cite a {
  color: var(--c-primary);
  text-decoration: underline;
}

/* ============================================================ */
/* Reviewed-by + Last verified strip                            */
/* ============================================================ */

.reviewed-by {
  padding-block: var(--sp-5);
}
/* v1.34.5 — constrain the reviewed-by card to the locked pillar prose width
 * (720px per `feedback_let_text_breathe.md` Pillar Polish Saga rule). Without
 * this, the bottom-of-pillar card visually overlaps the sticky TOC on the
 * right because the Bricks .container is wider than the prose column.
 *
 * v1.34.6 — left-anchor the inner to match the body prose-block (left:206px
 * via Bricks parent inset). Earlier `margin-inline: auto` centered the 720px
 * inner within the 1100px outer column, creating a visible inward offset
 * compared to the body content above it. The outer `.reviewed-by` already sits
 * flush with the prose column (Bricks .container handles the page-edge inset
 * on the outer); the inner just needs to start at the outer's left edge. */
.reviewed-by .container {
  max-width: 720px;
  margin-inline-start: 0;
  margin-inline-end: auto;
  padding-inline: 0;
}
.reviewed-by__card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.reviewed-by__col { display: flex; flex-direction: column; gap: var(--sp-half); }
.reviewed-by__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  font-weight: var(--fw-semibold);
  margin: 0;
}
.reviewed-by__value {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-ink);
  margin: 0;
}

/* ============================================================ */
/* Form 3 wrapper                                               */
/* ============================================================ */

.cpt-form__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.cpt-form__eyebrow {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  padding: var(--sp-half) var(--sp-2);
  border-radius: var(--r-pill);
  margin: 0 0 var(--sp-3);
}
.cpt-form__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
  line-height: var(--lh-tight);
  color: var(--c-primary);
  margin: 0 0 var(--sp-2);
}
.cpt-form__lede {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  max-width: 60ch;
  margin: 0 auto var(--sp-4);
}
/* No `.cpt-form__embed` wrapper — Form 3 renders with native FF Pro
   global styling. Margin-top + alignment for the form area is handled by
   FF Pro's own stylesheet. Do not re-introduce a wrapper here. */

/* ============================================================ */
/* Editorial body                                               */
/* ============================================================ */

/* v1.40.2 — body inner sits in the same page-width container as Quick Facts /
 * Loan Limits / cross-grid sections (max-w-page = 1340px) and left-aligns with
 * them, instead of capping at max-w-content (780px) and auto-centering. Prose
 * paragraphs + lists below still get their readability cap via separate rules. */
.cpt-body__inner {
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
}
/* Prose readability cap — paragraphs + lists inside the body inner stay narrow
 * for line-length readability while H2/H3 headings and component blocks can
 * stretch to the full container. */
.cpt-body__inner > p,
.cpt-body__inner > ul,
.cpt-body__inner > ol,
.cpt-body__inner > blockquote {
  max-width: var(--max-w-content);
}
.cpt-body__lede {
  font-size: var(--fs-lg);
  color: var(--c-primary);
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-normal);
}
.cpt-body__lede :first-child { margin-top: 0; }
.cpt-body__lede :last-child  { margin-bottom: 0; }
/* v1.30.4 — bone bg + uppercase MISSION prefix for visible card-on-cream contrast */
.cpt-body__mission {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-base);
  color: var(--c-ink);
}
.cpt-body__mission strong {
  color: var(--c-primary);
  font-family: var(--font-heading);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  display: block;
  margin-bottom: var(--sp-half);
}
.cpt-body__inner h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  color: var(--c-primary);
  margin: var(--sp-5) 0 var(--sp-2);
  line-height: var(--lh-snug);
}
.cpt-body__inner h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  color: var(--c-primary);
  margin: var(--sp-4) 0 var(--sp-2);
  line-height: var(--lh-snug);
}
.cpt-body__inner p   { margin: 0 0 var(--sp-2); }
.cpt-body__inner a   { color: var(--c-primary); text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 2px; }
.cpt-body__inner a:hover { text-decoration-color: var(--c-primary); }
.cpt-body__inner ul,
.cpt-body__inner ol  { margin: 0 0 var(--sp-3); padding-left: var(--sp-3); }
.cpt-body__inner li  { margin-bottom: var(--sp-1); }

/* ============================================================ */
/* Base programs (VA + TSAHC Heroes pair)                       */
/* ============================================================ */

.base-programs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-3);
}
.base-programs__card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.base-programs__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 var(--sp-2);
}
.base-programs__body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-ink);
  line-height: var(--lh-normal);
}
.base-programs__body p { margin: 0 0 var(--sp-1); }
.base-programs__body p:last-child { margin: 0; }

/* ============================================================ */
/* Pillar section bgs + sticky-TOC CTA + FAQ accordion (v1.30.6)*/
/*                                                              */
/* Bundled fix-set after v1.30.5 verification audit on          */
/* /texas-down-payment-assistance/?cb=callouts.                 */
/*                                                              */
/* User direction across 4 messages:                            */
/*   1. "in this guide is not aligned into content, its going   */
/*      to the left and bleeding into toc."                     */
/*   2. "you didnt even check fully, on the same post, the      */
/*      programs in your city is broken."                       */
/*   3. "content cannot touch toc or toc container, it needs to */
/*      have a padding or gap in between too."                  */
/*   4. "toc doesnt need a contrasting background, it was fine  */
/*      how it was. what we can do instead is move cta above    */
/*      the toc and restyle it so its always there for readers  */
/*      and they're able to access immediately."                */
/*   5. "FAQ could use some styling work, looks too plain."     */
/*                                                              */
/* What ships in v1.30.6:                                       */
/*   A. Body-zone bgs painted via ::before with right inset of  */
/*      330px so they end before the sticky right sidebar       */
/*      (.pillar-sticky-toc lives at viewport-x ≈ 1036–1306).   */
/*   B. Final CTA section is already 700px wide so it gets a    */
/*      full-inset ::before bg + top margin for spacing.        */
/*   C. .pillar-toc + .pillar-toc__inner stay TRANSPARENT (the  */
/*      bone bg added in an earlier preview was reverted per    */
/*      user direction).                                        */
/*   D. .pillar-sticky-toc stays TRANSPARENT (no surface card,  */
/*      no shadow, no border — also reverted).                  */
/*   E. New sticky-sidebar CTA: amber pill button + small       */
/*      reassurance subline injected at top of .pillar-sticky-  */
/*      toc by the PHP template. Always-visible quiz CTA so     */
/*      readers can convert from any scroll position.           */
/*   F. .btn--ghost on dark surfaces flips to amber pill (the   */
/*      "See all 16 Texas cities" link was navy-on-navy).       */
/*   G. .faq-accordion items get full styling — divider lines,  */
/*      padding, +/− toggle icon (amber on open), legible       */
/*      typography, max-width on answer body for readability.   */
/*                                                              */
/* Open punch-list (NOT in this ship — content cleanup):        */
/*   - Banned phrase "matches" in Final CTA H2 + body           */
/*   - Banned phrase "7 minutes" (form is <60 seconds)          */
/*   - Banned phrase "Texas-licensed mortgage professional"     */
/*   - Banned phrase "How DPA stacks with loans" in TOC         */
/*   - FAQ section H2 sentence-case (should be Title Case)      */
/*   - Process step 04 icon stays gray (intersection observer)  */
/* ============================================================ */

/* (A) Body-zone bgs painted via ::before with right inset 330px */
body.is-pillar-page section.zone--dark,
body.is-pillar-page .process-zone,
body.is-pillar-page section.process-zone.zone--alt,
body.is-pillar-page section.prose-zone.zone--alt {
  background-color: transparent;
  position: relative;
  z-index: 0;
}
body.is-pillar-page section.zone--dark::before,
body.is-pillar-page .process-zone::before,
body.is-pillar-page section.process-zone.zone--alt::before,
body.is-pillar-page section.prose-zone.zone--alt::before {
  content: '';
  position: absolute;
  inset: 0 330px 0 0;
  z-index: -1;
  border-radius: var(--r-md);
  display: block;
  pointer-events: none;
}
body.is-pillar-page section.zone--dark::before {
  background-color: var(--c-primary-deep);
}
body.is-pillar-page .process-zone::before,
body.is-pillar-page section.process-zone.zone--alt::before,
body.is-pillar-page section.prose-zone.zone--alt::before {
  background-color: var(--c-bg-alt);
}

/* (B) Final CTA — already 700px wide; full-inset bg + top margin */
body.is-pillar-page .final-cta {
  background-color: transparent;
  position: relative;
  z-index: 0;
  margin-top: var(--sp-5);
}
body.is-pillar-page .final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-md);
  background-color: var(--c-primary);
  pointer-events: none;
}

/* (C) + (D) TOC + sticky sidebar stay transparent.
   !important on background-color overrides the v1.30.5 stub at the top
   of this file (which used to set bone bg with !important — bg part now
   removed in v1.30.6, but the !important is kept here belt-and-suspenders
   in case any patterns.css cascade tries to put a bg back). */
body.is-pillar-page .pillar-toc.zone--alt,
body.is-pillar-page .pillar-toc {
  background-color: transparent !important;
}
body.is-pillar-page .pillar-toc__inner {
  background-color: transparent !important;
  padding: 0;
  border-radius: 0;
}
body.is-pillar-page .pillar-sticky-toc {
  background-color: transparent;
  /* v1.49.33 — `padding: 0` shorthand was zeroing the 48px top padding added
   * to the base rule in v1.49.31 (cascade tie 0,2,0 + source order — this
   * file loads after patterns.css). Switched to explicit per-side so the
   * top 48px lives on with the visual hero/TOC separation, while still
   * resetting any other padding that the desktop sticky breakpoint or any
   * pattern rule might try to apply.
   * v1.49.35 — Inline side padding added so the TOC content (CTA card +
   * "On this page" label + list items) aligns with the body content
   * container instead of hugging the viewport edge on mobile/tablet.
   * Uses the same `clamp(16px, 4vw, 24px)` value as the prose container
   * for visual consistency. Desktop sticky breakpoint at patterns.css:5103
   * already explicitly sets `padding: 48px 0 0 0` (TOC sits inside the
   * float column where the 24px container padding has already been applied
   * by the parent .pillar-body > .container), so this padding only fires
   * on mobile/tablet. */
  padding: 48px clamp(16px, 4vw, 24px) 0;
  border-radius: 0;
  box-shadow: none;
  border: 0;
}

/* v1.49.35 — Bullet markers in prose-block lists were hanging into the
 * 24px container gap on mobile (li at left=24, bullets rendering at left=14
 * via the default ::marker outdent). Add `padding-inline-start: 1.25rem`
 * so the bullets sit inside the visible padded zone instead of close to the
 * viewport edge. `!important` because something else in the cascade was
 * zeroing it — likely the same patterns.css `#brx-content ul/ol` reset
 * pattern or a Bricks parent normalize. Defensive `.sources` sibling
 * selector covers the Primary sources block Tyler specifically flagged. */
.prose-block ul,
.prose-block ol,
.prose-block .sources ul,
.prose-block .sources ol {
  padding-inline-start: 1.25rem !important;
}

/* (E) Sticky-sidebar CTA — solid navy card (matches site header navbar).
 * v1.49.29: switched from --c-primary-deep + gradient to flat --c-primary so
 * the card reads as a calmer extension of the navbar rather than a darker
 * floating panel. Eyebrow text recolored to plain white sentence-case (was
 * amber uppercase) per Tyler 2026-05-29 — calmer, more navbar-consistent. */
body.is-pillar-page .pillar-sticky-toc__cta-card {
  background-color: var(--c-primary);
  background-image: none;
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  box-shadow: 0 6px 20px rgba(0, 12, 36, 0.12);
}
body.is-pillar-page .pillar-sticky-toc__cta-card-eyebrow {
  /* v1.49.29 — Repurposed as the BELOW-button reassurance line. Sits under
   * the CTA, smaller + dimmed, in plain sentence case.
   * v1.49.31 — Top margin bumped sp-2 → sp-3 so it breathes away from the
   * CTA button instead of crowding the button bottom edge. */
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.7);
  margin: var(--sp-3) 0 0;
  text-align: center;
}
body.is-pillar-page .pillar-sticky-toc__cta-card-h {
  /* v1.49.29 — Now the PRIMARY anchor above the CTA button. Bolder + larger
   * (1.25rem) so it carries the eye toward the CTA. Centered to align with
   * the full-width button below per Tyler 2026-05-29.
   * v1.49.30 — Bottom margin tightened sp-3 → sp-2 so the heading sits a
   * touch closer to the button (per Tyler 2026-05-29 follow-up). */
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 var(--sp-2);
  text-align: center;
}
body.is-pillar-page .pillar-sticky-toc__cta-card-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--sp-3);
}
body.is-pillar-page .pillar-sticky-toc__cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: var(--sp-3) var(--sp-2);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 197, 40, 0.25);
  transition: background-color 0.18s ease, transform 0.18s ease;
  box-sizing: border-box;
}
body.is-pillar-page .pillar-sticky-toc__cta-btn:hover,
body.is-pillar-page .pillar-sticky-toc__cta-btn:focus-visible {
  background-color: var(--c-accent);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--c-primary);
}

/* (F) Ghost CTA buttons on dark surfaces flip to amber pill */
body.is-pillar-page section.zone--dark .btn--ghost,
body.is-pillar-page .final-cta .btn--ghost {
  background-color: var(--c-accent);
  color: var(--c-primary);
  border-color: var(--c-accent);
}

/* (G) FAQ accordion — bordered list with +/− toggle */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-accordion__item {
  background: transparent;
  border-bottom: 1px solid rgba(2, 33, 78, 0.12);
  padding: 0;
}
.faq-accordion__item:first-of-type {
  border-top: 1px solid rgba(2, 33, 78, 0.12);
}
.faq-accordion__item summary,
.faq-accordion__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-lg, 1.125rem);
  color: var(--c-primary);
  line-height: 1.4;
}
.faq-accordion__item summary::-webkit-details-marker {
  display: none;
}
.faq-accordion__item summary::marker {
  content: '';
  display: none;
}
.faq-accordion__item summary::after,
.faq-accordion__q::after {
  content: '+';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(2, 33, 78, 0.25);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
  color: var(--c-primary);
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.faq-accordion__item[open] summary::after,
.faq-accordion__item[open] .faq-accordion__q::after {
  content: '\2212';
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}
.faq-accordion__a {
  padding: 0 0 var(--sp-3) 0;
  font-family: var(--font-body);
  font-size: var(--fs-base, 1rem);
  line-height: 1.7;
  color: var(--c-ink);
  max-width: 62ch;
}
.faq-accordion__a p {
  margin: 0 0 var(--sp-2);
}
.faq-accordion__a p:last-child {
  margin: 0;
}

/* (H) "Programs in your city" grid — 3-up at pillar widths so city */
/* names + dollar amount lines display fully (the 5-up grid clipped */
/* titles like "San Antonio" / "Fort Worth" at narrower content     */
/* column widths). 5 cities flow as 3 + 2 row layout. Tighter       */
/* margin between grid and "See all 16 cities" button.              */
body.is-pillar-page section.zone--dark .city-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--sp-3);
}
body.is-pillar-page section.zone--dark .city-card {
  min-height: 140px;
}
body.is-pillar-page section.zone--dark .city-card .city-card__title {
  font-size: 1.25rem;
  line-height: 1.2;
}
body.is-pillar-page section.zone--dark .btn--ghost {
  margin-top: var(--sp-2);
}

/* ============================================================ */
/* DPA personas block (v1.31.0)                                 */
/*                                                              */
/* Replaces the legacy "Programs in your city" dark-zone block. */
/* On-strategy per the locked state-routing policy: city DPA is */
/* SEO surface only, never marketing claim. Persona cards drive */
/* buyers into TSAHC/TDHCA/MCC/VA — the four legal lead-source  */
/* pipes — based on which buyer profile they fit.               */
/* ============================================================ */

.dpa-personas-zone .persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.dpa-personas-zone .persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  background-color: var(--c-primary);
  border: 1px solid rgba(255, 197, 40, 0.18);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-decoration: none;
  color: var(--c-ink-inverse, #ffffff);
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  min-height: 200px;
  text-align: left;
}
.dpa-personas-zone .persona-card:hover,
.dpa-personas-zone .persona-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--c-accent);
  background-color: #032a5a;
  box-shadow: 0 8px 24px rgba(255, 197, 40, 0.12);
  color: var(--c-ink-inverse, #ffffff);
  text-decoration: none;
}
.dpa-personas-zone .persona-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 197, 40, 0.14);
  color: var(--c-accent);
  margin-bottom: var(--sp-1);
}
.dpa-personas-zone .persona-card__icon svg {
  width: 22px;
  height: 22px;
}
.dpa-personas-zone .persona-card__eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.dpa-personas-zone .persona-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
}
.dpa-personas-zone .persona-card__fit {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: auto 0 0;
}

/* Tablet — 2-up grid */
@media (max-width: 960px) {
  .dpa-personas-zone .persona-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile — 1-up stack */
@media (max-width: 600px) {
  .dpa-personas-zone .persona-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* Pillar pages — bottom padding before footer (v1.31.1)        */
/*                                                              */
/* User flag during v1.31.0 verification: "now theres no        */
/* padding at bottom of blog content, it touches edge of        */
/* footer." Removing the bottom Final CTA + bottom Reviewed-by  */
/* in v1.31.0 left the FAQ section (or whatever is now last)    */
/* flush against the footer's top edge — zero gap.              */
/*                                                              */
/* Fix: add padding-bottom to the Bricks parent + a margin-     */
/* bottom on the last child as belt-and-suspenders. Targets     */
/* both #brx-content (Bricks Builder pages) and main (other     */
/* templates / future single CPT renders).                      */
/* ============================================================ */

body.is-pillar-page #brx-content,
body.is-pillar-page main {
  padding-bottom: var(--sp-6);
}
body.is-pillar-page #brx-content > *:last-child,
body.is-pillar-page main > *:last-child,
body.is-pillar-page .cpt-pillar > *:last-child {
  margin-bottom: var(--sp-7);
}

/* v1.49.36 — Zero the bottom margin on the Form 3 section (`.cpt-form`)
 * when it's the last child of the pillar article. Form 3 carries its own
 * generous internal padding (~90px padding-bottom), so the extra 96px
 * (--sp-7) outside margin from the rule above was creating a redundant
 * cream-bone gap at the bottom of pillar Posts before the site footer.
 * Higher specificity (5 classes including `.cpt-form.zone--alt`) wins
 * over the 4-class `.cpt-pillar > *:last-child` rule on the cascade. */
body.is-pillar-page .cpt-pillar > .cpt-form.zone--alt:last-child,
body.is-pillar-page #brx-content > .cpt-form.zone--alt:last-child,
body.is-pillar-page main > .cpt-form.zone--alt:last-child {
  margin-bottom: 0;
}

/* ============================================================ */
/* Sticky CTA card — compact variant (v1.31.2)                  */
/*                                                              */
/* User flag: card was too tall — pushed the TOC list down so   */
/* lower-numbered TOC items got cut off below the fold and the  */
/* user couldn't see them until scrolling deep into the page.   */
/*                                                              */
/* Pillar sticky-toc usage now defaults to compact mode         */
/* (eyebrow + button only — no h, no sub). The card adds the    */
/* `.is-compact` class when both heading + sub are empty, which */
/* lets us also tighten card padding + button padding here.     */
/* ============================================================ */

body.is-pillar-page .pillar-sticky-toc__cta-card.is-compact {
  padding: 0.875rem 1rem;
  margin-bottom: var(--sp-3);
}
body.is-pillar-page .pillar-sticky-toc__cta-card.is-compact .pillar-sticky-toc__cta-card-eyebrow {
  /* v1.49.34 — Legacy v1.31.2 rule designed for the OLD card layout where
   * the eyebrow sat ABOVE the button (margin: 0 top, 10px bottom = small gap
   * before the button). v1.49.29 reordered the card to heading → button →
   * reassurance, so the eyebrow is now BELOW the button. This higher-
   * specificity override (`.is-compact`) was zeroing the v1.49.31 top margin
   * intended to give the line breathing room above. Updated to match the
   * new layout: 12px top so the reassurance sits clear of the button, 0
   * bottom because it's the last element in the card. */
  margin: var(--sp-3) 0 0;
}
body.is-pillar-page .pillar-sticky-toc__cta-card.is-compact .pillar-sticky-toc__cta-btn {
  padding: 0.625rem 1rem;
  font-size: 0.9rem;
}

/* ============================================================ */
/* Sticky TOC — compact text + VU-style indent animation        */
/* (v1.31.3)                                                    */
/*                                                              */
/* Three coordinated changes per user direction during v1.31.2  */
/* verification:                                                */
/*   1. "for toc, lets make the text smaller and reduce gap a   */
/*       little between text, so its more compact and can fit   */
/*       better."                                               */
/*   2. "veteransunited does this pretty well in their blog     */
/*       posts, id like a similar animation too like they do.   */
/*       where it kind of indents instead of our current        */
/*       underline."                                            */
/*   3. "instead of secondary color on the arrows, make it      */
/*       primary navy. make sure they're properly centered too  */
/*       with their line of text."                              */
/*                                                              */
/* Implementation:                                              */
/*   - Label "On this page": down to 0.75rem, uppercase, muted  */
/*     navy. Reads as a small section eyebrow above the rail.   */
/*   - List gets a 2px-wide vertical rail (8% navy) on the left */
/*     edge — VU pattern. Each link sits 2px LEFT of the rail   */
/*     so its own border-left can paint OVER the rail when      */
/*     active/hovered.                                          */
/*   - Links: flex with vertically-centered chevron + text,     */
/*     0.85rem / line-height 1.4 / 5px+10px padding. Chevron    */
/*     `›` was on `::before` with amber color — flipped to      */
/*     `var(--c-primary)` navy + 1rem font-size + line-height 1 */
/*     so it aligns dead-center with the text baseline.         */
/*   - Hover: padding-left bumps from 10px → 14px (subtle slide */
/*     right), border-left fades in at 25% navy, chevron        */
/*     translateX(2px). 180ms ease.                             */
/*   - Active (set by pillar-toc.js scroll-spy): same 14px      */
/*     indent, but border-left becomes solid amber + chevron    */
/*     turns amber + text turns full navy + bolds to 600.       */
/* ============================================================ */

body.is-pillar-page .pillar-sticky-toc__label {
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(2, 33, 78, 0.6);
  margin: 0 0 0.625rem;
}
body.is-pillar-page .pillar-sticky-toc__list {
  padding: 0;
  margin: 0;
  list-style: none;
  border-left: 2px solid rgba(2, 33, 78, 0.08);
}
body.is-pillar-page .pillar-sticky-toc__list li {
  margin: 0;
  list-style: none;
}
body.is-pillar-page .pillar-sticky-toc__list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 5px 10px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: rgba(2, 33, 78, 0.7);
  text-decoration: none;
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease;
}
body.is-pillar-page .pillar-sticky-toc__list a::before {
  color: var(--c-primary);
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  transition: transform 0.18s ease, color 0.18s ease;
}
body.is-pillar-page .pillar-sticky-toc__list a:hover {
  color: var(--c-primary);
  padding-left: 14px;
  border-left-color: rgba(2, 33, 78, 0.25);
}
body.is-pillar-page .pillar-sticky-toc__list a:hover::before {
  transform: translateX(2px);
}
/* Active state — set by pillar-toc.js scroll-spy when section in view */
body.is-pillar-page .pillar-sticky-toc__list a.is-active {
  color: var(--c-primary);
  font-weight: 600;
  padding-left: 14px;
  border-left-color: var(--c-accent);
}
body.is-pillar-page .pillar-sticky-toc__list a.is-active::before {
  color: var(--c-accent);
}

/* ============================================================ */
/* Key Takeaways — navy bg for stronger contrast (v1.31.3)      */
/*                                                              */
/* User flag: "key takeaways text subline doesnt have good      */
/* contrast with background. maybe make key takeaways box       */
/* background navy instead."                                    */
/*                                                              */
/* v1.30.5 had .pillar-summary on bone bg with dark navy text — */
/* worked for the H/label, but the lighter sub-paragraphs (Q&A  */
/* answers, secondary text) read at low contrast on bone. Flip  */
/* to navy primary-deep bg + cream/white text for crisp         */
/* contrast across all body weights.                            */
/*                                                              */
/* Overrides the v1.30.5 stub at line 62 (which set bone bg     */
/* with !important). Same selector + !important wins via cas-   */
/* cade order (this rule is later in the file).                 */
/* ============================================================ */

body.is-pillar-page .pillar-summary {
  background: var(--c-primary-deep) !important;
  color: var(--c-ink-inverse, #ffffff) !important;
  border-left: 4px solid var(--c-accent) !important;
}
body.is-pillar-page .pillar-summary * {
  color: inherit;
}
body.is-pillar-page .pillar-summary__label {
  color: var(--c-accent) !important;
}
body.is-pillar-page .pillar-summary li,
body.is-pillar-page .pillar-summary p {
  color: rgba(255, 255, 255, 0.88);
}
body.is-pillar-page .pillar-summary strong,
body.is-pillar-page .pillar-summary b {
  color: #ffffff;
  font-weight: 700;
}
body.is-pillar-page .pillar-summary a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================ */
/* Pillar body — H2/H3 paragraph spacing + safety overflow-wrap */
/* (v1.31.3)                                                    */
/*                                                              */
/* Two fixes:                                                   */
/*  (a) H2/H3 inside .pillar-body had no margin-top from the    */
/*      preceding paragraph — headers crashed into the prose    */
/*      above them visually. Add explicit top margin so each    */
/*      header gets breathing room.                             */
/*  (b) Belt-and-suspenders overflow-wrap on pillar prose so    */
/*      any unbreakable string (long URL, hyphenated phrase,    */
/*      programmatic identifier) wraps inside the 700px content */
/*      column instead of pushing toward the sticky TOC. Also   */
/*      adds hyphens:auto for graceful long-word breaks.        */
/* ============================================================ */

body.is-pillar-page .pillar-body h2,
body.is-pillar-page .prose-block h2 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}
body.is-pillar-page .pillar-body h3,
body.is-pillar-page .prose-block h3 {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
}
body.is-pillar-page .pillar-body h2:first-child,
body.is-pillar-page .prose-block h2:first-child {
  margin-top: 0;
}
body.is-pillar-page .pillar-body p,
body.is-pillar-page .pillar-body li,
body.is-pillar-page .pillar-body h2,
body.is-pillar-page .pillar-body h3 {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ============================================================ */
/* Pillar prose — fixed max-width on .prose-block (v1.31.4)    */
/*                                                              */
/* User flag during v1.31.3 verification: at wider viewports    */
/* (Retina 2600px etc) the .container's `max-width: calc(100%   */
/* - 400px)` formula gave the prose block a much wider canvas. */
/* Body paragraphs naturally wrap at ~65ch but H2/H3 single-    */
/* line headlines fill the full container width, so they        */
/* visually overshoot where the prose wraps. User: "you can     */
/* see the titles running off instead of wrapping to the left   */
/* like the rest of paragraph text does."                       */
/*                                                              */
/* Fix: hard-cap `.prose-block` to 720px max-width. Children    */
/* (h2, h3, p, ul, ol) inherit the constraint via parent flow,  */
/* so EVERY element in the prose wraps at the same horizontal   */
/* point — regardless of font-size or viewport width. Wide-     */
/* canvas children (Key Takeaways callout, dpa-types-grid,      */
/* tables, prose-block lede) opt out via max-width: none.       */
/*                                                              */
/* Also reaffirms H2/H3 vertical rhythm rules from v1.31.3 with */
/* `!important` for cascade strength, plus a `h2 + p`/`h2 + ul` */
/* rule to zero out the FOLLOWING element's collapsing margin   */
/* (otherwise it doubles up against the H2's 24px bottom).      */
/* ============================================================ */

body.is-pillar-page .pillar-body .prose-block {
  max-width: 720px !important;
}
/* Wide-canvas opt-outs */
body.is-pillar-page .pillar-body .prose-block .pillar-summary,
body.is-pillar-page .pillar-body .prose-block .dpa-types-grid,
body.is-pillar-page .pillar-body .prose-block table,
body.is-pillar-page .pillar-body .prose-block .prose-block__lede {
  max-width: none !important;
}
/* H2/H3 spacing — important versions of the v1.31.3 rules */
body.is-pillar-page .pillar-body h2,
body.is-pillar-page .prose-block h2 {
  margin-top: var(--sp-5) !important;
  margin-bottom: var(--sp-3) !important;
}
body.is-pillar-page .pillar-body h3,
body.is-pillar-page .prose-block h3 {
  margin-top: var(--sp-4) !important;
  margin-bottom: var(--sp-2) !important;
}
body.is-pillar-page .pillar-body h2:first-child,
body.is-pillar-page .prose-block h2:first-child {
  margin-top: 0 !important;
}
/* Zero the following element's collapsing margin so the H2 own  */
/* bottom margin is the only gap (no doubling).                  */
body.is-pillar-page .pillar-body h2 + ul,
body.is-pillar-page .pillar-body h2 + ol,
body.is-pillar-page .pillar-body h3 + ul,
body.is-pillar-page .pillar-body h3 + ol,
body.is-pillar-page .pillar-body h2 + p,
body.is-pillar-page .pillar-body h3 + p {
  margin-top: 0 !important;
}

/* ============================================================ */
/* Pillar prose — Gutenberg-block direct children (v1.31.5)     */
/*                                                              */
/* v1.31.4 constrained `.pillar-body .prose-block` children to  */
/* 720px, but the H2 the user flagged was a `wp-block-heading`  */
/* direct child of `#brx-content` (Gutenberg block at the       */
/* article root level, not inside the structured pillar body).  */
/* It rendered at the full 1100px container width and ran past  */
/* where paragraph text wrapped.                                */
/*                                                              */
/* This block extends the same constraints to `#brx-content >`  */
/* direct children — the H2/H3/p/ul/ol that WordPress emits as  */
/* core blocks. Same 720px cap, same H2/H3 spacing rules, same  */
/* zero-margin-on-following-sibling pattern.                    */
/* ============================================================ */

body.is-pillar-page #brx-content > h2,
body.is-pillar-page #brx-content > h3,
body.is-pillar-page #brx-content > p,
body.is-pillar-page #brx-content > ul,
body.is-pillar-page #brx-content > ol,
body.is-pillar-page #brx-content > .wp-block-heading,
body.is-pillar-page #brx-content > .wp-block-list,
body.is-pillar-page #brx-content > .wp-block-paragraph {
  max-width: 720px !important;
}
body.is-pillar-page #brx-content > h2 {
  margin-top: var(--sp-5) !important;
  margin-bottom: var(--sp-3) !important;
}
body.is-pillar-page #brx-content > h3 {
  margin-top: var(--sp-4) !important;
  margin-bottom: var(--sp-2) !important;
}
body.is-pillar-page #brx-content > h2 + ul,
body.is-pillar-page #brx-content > h2 + ol,
body.is-pillar-page #brx-content > h2 + p,
body.is-pillar-page #brx-content > h3 + ul,
body.is-pillar-page #brx-content > h3 + ol,
body.is-pillar-page #brx-content > h3 + p {
  margin-top: 0 !important;
}

/* ============================================================ */
/* Key Takeaways — match prose width + nav-bar navy (v1.31.6)   */
/*                                                              */
/* User direction: "make sure blocks like key takeaways extent  */
/* to same width or constraints as text so it doesnt look       */
/* smaller in contrast. and make the navy for keytakeaways the  */
/* same one as the nav bar or footer."                          */
/*                                                              */
/* Two changes:                                                 */
/*  (a) Constrain the inner .pillar-summary box to max-width    */
/*      720px + width:100% so it expands to match the prose     */
/*      column above/below it. Outer .pillar-summary-zone stays */
/*      full-width (transparent wrapper). The constraint goes   */
/*      on the navy box itself, not the wrapper, so the box     */
/*      doesn't collapse to its content's natural min-width.    */
/*  (b) Swap bg from --c-primary-deep (rgb(0,12,36) — darker    */
/*      almost-black) to --c-primary (rgb(2,33,78) — true navy  */
/*      that matches the site nav bar + footer). Visual unity   */
/*      across the navy surfaces — header strip, sticky CTA     */
/*      card, Key Takeaways callout, footer all use the same    */
/*      single navy.                                             */
/* ============================================================ */

body.is-pillar-page #brx-content > .pillar-summary-zone,
body.is-pillar-page .pillar-summary-zone {
  max-width: none !important;
}
body.is-pillar-page .pillar-summary {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  border-left: 4px solid var(--c-accent) !important;
  max-width: 720px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.is-pillar-page .pillar-summary * {
  color: inherit;
}
body.is-pillar-page .pillar-summary__label {
  color: var(--c-accent) !important;
}
body.is-pillar-page .pillar-summary li,
body.is-pillar-page .pillar-summary p {
  color: rgba(255, 255, 255, 0.88);
}
body.is-pillar-page .pillar-summary strong,
body.is-pillar-page .pillar-summary b {
  color: #ffffff;
  font-weight: 700;
}
body.is-pillar-page .pillar-summary a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================ */
/* Callout block radius rule (v1.31.6)                          */
/*                                                              */
/* User direction: "those blocks like key takeaways should be   */
/* rounded if possible, so they dont look aggresive, keep that  */
/* for future dev/work for those types of elements."            */
/*                                                              */
/* Site-wide pattern lock for any callout / contained block on  */
/* pillar pages: use --r-md border-radius. Sharp corners read   */
/* as aggressive on info-dense YMYL surfaces. Soft radius keeps */
/* the brand voice approachable.                                */
/*                                                              */
/* Applied to: .pillar-summary (Key Takeaways), .prose-block__  */
/* lede (intro lede block, already had radius via v1.30.5),     */
/* and any future card/callout that's a contained box with bg.  */
/* ============================================================ */

body.is-pillar-page .pillar-summary {
  border-radius: var(--r-md) !important;
  overflow: hidden;
}

/* ============================================================ */
/* v1.37.0 — Visual-element toolkit (Phase 1 Build 4 onwards)    */
/* ============================================================ */
/*                                                              */
/* AI summary callout, quick-facts stat chips, comparison       */
/* tables, bottom-line callouts, breadcrumb nav. All sit inside */
/* the locked 720px pillar prose column.                        */
/* ============================================================ */

/* AI Summary callout — top-of-page TL;DR (3 bullets) */
.pillar-ai-summary {
  max-width: 720px;
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  background: var(--c-primary);
  color: var(--c-ink-inverse);
  border-radius: var(--r-md);
  border-left: 4px solid var(--c-accent);
}
.pillar-ai-summary__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.pillar-ai-summary__label svg { color: var(--c-accent); }
.pillar-ai-summary__list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}
.pillar-ai-summary__list li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: var(--c-ink-inverse);
}
.pillar-ai-summary__list li:last-child { margin-bottom: 0; }
.pillar-ai-summary__verified {
  margin: var(--sp-2) 0 0;
  font-size: 0.75rem;
  color: rgba(250, 247, 242, 0.6);
}

/* v1.49.29 — Specificity override for navy-bg callouts living inside
 * `.prose-block`. On pillar Posts (single.php), `the_content()` is wrapped
 * in `.prose-block` for prose typography. That triggers patterns.css's
 * `.prose-block ul li, .prose-block ol li { color: var(--c-ink) }` rule
 * (specificity 0,1,2) which outranks our base `.pillar-ai-summary__list li
 * { color: var(--c-ink-inverse) }` (specificity 0,1,1). Result: cream text
 * gets painted dark, unreadable on the navy callout background. The rules
 * below match the prose-block-prefixed specificity to win the cascade
 * without `!important`. Same pattern applies to .pillar-bottom-line which
 * uses the same navy-bg / cream-text scheme. */
.prose-block .pillar-ai-summary,
.prose-block .pillar-ai-summary li,
.prose-block .pillar-ai-summary p,
.prose-block .pillar-ai-summary ul,
.prose-block .pillar-ai-summary ol,
.prose-block .pillar-bottom-line,
.prose-block .pillar-bottom-line li,
.prose-block .pillar-bottom-line p,
.prose-block .pillar-bottom-line ul,
.prose-block .pillar-bottom-line ol {
  color: var(--c-ink-inverse);
}
.prose-block .pillar-ai-summary__label,
.prose-block .pillar-bottom-line__label {
  color: var(--c-accent);
}

/* Quick Facts — stat chips row */
.pillar-quick-facts {
  max-width: 720px;
  margin: var(--sp-3) 0;
}
.pillar-quick-facts__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-2);
}
.pillar-quick-facts__chip {
  background: var(--c-surface);
  border: 1px solid rgba(2, 33, 78, 0.10);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pillar-quick-facts__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.1;
}
.pillar-quick-facts__label {
  font-size: 0.8125rem;
  color: var(--c-ink);
  line-height: 1.3;
}
.pillar-quick-facts__source {
  font-size: 0.6875rem;
  color: var(--c-ink-muted);
  margin-top: 0.25rem;
}
.pillar-quick-facts__verified {
  font-size: 0.75rem;
  color: var(--c-ink-muted);
  margin: var(--sp-2) 0 0;
}

/* Comparison Table */
.pillar-compare-wrap {
  max-width: 720px;
  margin: var(--sp-3) 0;
}
.pillar-compare__caption {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-primary);
  margin: 0 0 var(--sp-1);
}
/* Stacked rate tables (No DPA / Grant / Forgivable 2nd Lien) need clear separation. */
.shopdpa-rate-tables .pillar-compare__caption {
  margin-top: var(--sp-4, 1.5rem);
  font-size: 0.95rem;
}
.shopdpa-rate-tables > .pillar-compare__caption:first-child {
  margin-top: 0;
}
.shopdpa-rate-tables .pillar-compare-scroll {
  margin-bottom: var(--sp-2, 0.75rem);
}
.pillar-compare-scroll {
  overflow-x: auto;
  border: 1px solid rgba(2, 33, 78, 0.10);
  border-radius: var(--r-md);
}
.pillar-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--c-surface);
}
.pillar-compare thead th {
  background: var(--c-primary);
  color: var(--c-ink-inverse);
  font-weight: 700;
  text-align: left;
  padding: var(--sp-2);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.pillar-compare tbody td,
.pillar-compare tbody th {
  padding: var(--sp-2);
  border-top: 1px solid rgba(2, 33, 78, 0.08);
  vertical-align: top;
  text-align: left;
}
.pillar-compare tbody th {
  font-weight: 600;
  color: var(--c-primary);
  background: rgba(2, 33, 78, 0.03);
  width: 30%;
}
.pillar-compare tbody td { color: var(--c-ink); }
.pillar-compare tbody tr:nth-child(even) td,
.pillar-compare tbody tr:nth-child(even) th { background-color: rgba(2, 33, 78, 0.015); }
.pillar-compare__note {
  font-size: 0.75rem;
  color: var(--c-ink-muted);
  padding: var(--sp-2);
  border-top: 1px solid rgba(2, 33, 78, 0.08);
  background: var(--c-bg-alt);
  font-style: italic;
}
.pillar-compare__verified,
.pillar-compare__source {
  font-size: 0.75rem;
  color: var(--c-ink-muted);
  margin: var(--sp-1) 0 0;
}
.pillar-compare__verified a,
.pillar-compare__source a { color: var(--c-ink-muted); text-decoration: underline; }

/* Bottom Line callout */
.pillar-bottom-line {
  max-width: 720px;
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-accent-soft);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
}
.pillar-bottom-line__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 0.25rem;
}
.pillar-bottom-line__label svg { color: var(--c-primary); }
.pillar-bottom-line__body { color: var(--c-ink); }
.pillar-bottom-line__body p { margin: 0.25rem 0; }
.pillar-bottom-line__body p:first-child { margin-top: 0; }
.pillar-bottom-line__body p:last-child { margin-bottom: 0; }

/* Breadcrumb */
.pillar-breadcrumb {
  max-width: 720px;
  margin: 0 0 var(--sp-2);
  font-size: 0.8125rem;
  color: var(--c-ink-muted);
}
.pillar-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
}
.pillar-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}
.pillar-breadcrumb__item a {
  color: var(--c-primary);
  text-decoration: none;
}
.pillar-breadcrumb__item a:hover { text-decoration: underline; }
.pillar-breadcrumb__sep {
  margin: 0 0.5rem;
  color: var(--c-ink-soft);
}
.pillar-breadcrumb__item [aria-current="page"] {
  color: var(--c-ink-muted);
}

@media (max-width: 768px) {
  .pillar-quick-facts__row { grid-template-columns: repeat(2, 1fr); }
  .pillar-compare { font-size: 0.8125rem; }
  .pillar-compare thead th,
  .pillar-compare tbody td,
  .pillar-compare tbody th { padding: 0.625rem; }
}

/* ============================================================ */
/* v1.38.0 — Interactive Texas Regions Map                       */
/* ============================================================ */
/*                                                              */
/* Flat brand-colored regions (per scoping decisions 2026-05-18).*/
/* Hover/focus shifts color + scales 1.02. Tooltip surfaces      */
/* region name + key cities + DPA highlights.                    */
/* ============================================================ */

.shopdpa-tx-map {
  max-width: 1100px;
  margin: var(--sp-5) auto;
  padding: var(--sp-4);
  background: var(--c-bg);
  border-radius: var(--r-lg);
}
.shopdpa-tx-map--compact {
  max-width: 480px;
  padding: var(--sp-2);
}

/*
 * Map section header — matches the site-wide centered zone-header pattern
 * (.zone-header.zone-header--center). Eyebrow pill above + Title Case H2
 * sized to match other homepage section H2s + lede beneath, all centered
 * with a 720px max-width so the block reads as a section heading, not a
 * sprawled wide-row of text. (Locked v1.38.4 per user feedback that the
 * previous map header looked off vs. other homepage sections.)
 */
.shopdpa-tx-map__header {
  text-align: center;
  max-width: 60rem;
  margin-inline: auto;
  margin-block-end: var(--sp-5);
}
.shopdpa-tx-map__header .eyebrow {
  margin-block-end: var(--sp-2);
}
.shopdpa-tx-map__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--c-primary);
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.shopdpa-tx-map--compact .shopdpa-tx-map__title { font-size: 1.25rem; }
.shopdpa-tx-map__subtitle {
  font-size: var(--fs-md);
  color: var(--c-ink-muted);
  line-height: var(--lh-normal);
  max-width: 60ch;
  margin-inline: auto;
  margin-block: 0;
}
.shopdpa-tx-map--compact .shopdpa-tx-map__subtitle { font-size: 0.875rem; }

.shopdpa-tx-map__stage {
  display: grid;
  grid-template-columns: minmax(320px, 1.5fr) minmax(220px, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.shopdpa-tx-map--compact .shopdpa-tx-map__stage {
  grid-template-columns: 1fr;
}

.shopdpa-tx-map__svg-wrap {
  position: relative;
}

.shopdpa-tx-map__svg {
  width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
}
.shopdpa-tx-map--compact .shopdpa-tx-map__svg { max-height: 280px; }

/* Base Texas outline — cream fill, sits behind regions */
.shopdpa-tx-map__base {
  fill: var(--c-bg-alt);
  stroke: none;
}

/* Base outline overlay — stroke-only, drawn ON TOP of regions so Texas border stays visible */
.shopdpa-tx-map__base-overlay {
  fill: none;
  stroke: var(--c-primary);
  stroke-width: 5;
  pointer-events: none;
}

/* Region links — keep text-decoration off, even when wrapping SVG */
.shopdpa-tx-map__region,
.shopdpa-tx-map__region:hover,
.shopdpa-tx-map__region:focus,
.shopdpa-tx-map__region:visited {
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.shopdpa-tx-map a.shopdpa-tx-map__region * {
  text-decoration: none;
}

/*
 * Region fills — NO stroke. Adjacent polygons need to touch with zero gap;
 * any stroke creates visible separator lines between regions.
 *
 * Hover behavior (locked 2026-05-18, per user direction — inverted pattern):
 *   - Hovered region STAYS vivid (no filter change) — anchor of attention
 *   - All OTHER regions wash out via brightness(1.55) + saturate(0.35) —
 *     they fade toward the cream-paper Texas base, isolating the hovered shape
 *   - 140ms linear transition — snappy, not the textbook 300ms ease
 *   - No scale, no stroke ring, no shadow stack
 *
 * This inverts the conventional "highlight what's hovered" pattern in a way
 * that reads as designed rather than the AI-default brightness-up bundle.
 */
.shopdpa-tx-map__region-fill {
  stroke: none;
  stroke-width: 0;
  transition:
    filter 140ms linear,
    opacity 140ms linear;
}

/*
 * Region color tokens (v1.38.4) — 4 distinct hues at brand navy's
 * saturation/luminance (HSL ~96% S / ~16% L) plus the brand amber accent.
 * This replaces the v1.38.0-1.38.3 palette where Central/North/West were
 * all navy variants and hard to tell apart. New palette keeps the brand
 * "dark jewel-tone" feel via shared S/L, but four distinct hues so
 * regions are visually distinguishable at a glance.
 *
 *   North   → 217° (brand navy   #02214E)
 *   North   → bright action-blue #0B5DEF (var(--c-action)) — was navy #02214E,
 *             recolored v1.42.1 so it contrasts on the navy section bg
 *   Central → bright emerald     #10A37D (was #024E45)
 *   West    → vivid red          #E11D2E (was #4E0214)
 *   East    → brand amber        #FFC528 (var(--c-accent))
 */
:root {
  --c-region-north:   var(--c-action);
  --c-region-east:    var(--c-accent);
  --c-region-central: #10A37D;
  --c-region-west:    #E11D2E;
}

.shopdpa-tx-map__region-fill[data-color="north-texas"]   { fill: var(--c-region-north); }
.shopdpa-tx-map__region-fill[data-color="east-texas"]    { fill: var(--c-region-east); }
.shopdpa-tx-map__region-fill[data-color="central-texas"] { fill: var(--c-region-central); }
.shopdpa-tx-map__region-fill[data-color="west-texas"]    { fill: var(--c-region-west); }

/*
 * Hovered region — stays at full saturation + brightness (anchor of focus).
 * !important to defeat any stale theme/plugin override that may still set
 * opacity on the region fill (caught one in v1.38.1).
 */
.shopdpa-tx-map__region:hover .shopdpa-tx-map__region-fill,
.shopdpa-tx-map__region:focus-visible .shopdpa-tx-map__region-fill {
  filter: none !important;
  opacity: 1 !important;
}

/*
 * All OTHER regions when one is hovered — drop opacity hard so dark colors
 * (any of the navy/emerald/burgundy fills) visibly fade against the cream
 * Texas base, AND drain saturation so the bright amber East also washes
 * out. opacity:0.22 + saturate(0.5) reads as "paper washed" across all
 * four region colors uniformly. !important keeps this winning over any
 * stale override no matter which region is hovered — fixes a v1.38.0-1.38.3
 * symptom where hovering West Texas didn't trigger the wash on others.
 */
.shopdpa-tx-map:has(.shopdpa-tx-map__region:hover) .shopdpa-tx-map__region:not(:hover) .shopdpa-tx-map__region-fill {
  filter: saturate(0.5) !important;
  opacity: 0.22 !important;
}

/* Current region — persistent highlight via .is-current (for region-page placement) */
.shopdpa-tx-map__region.is-current .shopdpa-tx-map__region-fill {
  stroke: var(--c-accent);
  stroke-width: 6;
}

/*
 * Region labels — paint-order with stroke under fill gives readable contrast on
 * any underlying fill color without needing per-region color logic.
 */
.shopdpa-tx-map__region-label {
  font-size: 56px;
  font-weight: 800;
  fill: var(--c-ink-inverse);
  letter-spacing: 0.5px;
  paint-order: stroke fill;
  stroke: rgba(0, 12, 36, 0.5);
  stroke-width: 8;
  pointer-events: none;
}
.shopdpa-tx-map__region-sub {
  font-size: 36px;
  font-weight: 500;
  fill: rgba(250, 247, 242, 0.85);
  paint-order: stroke fill;
  stroke: rgba(0, 12, 36, 0.5);
  stroke-width: 6;
  pointer-events: none;
}

/* Tooltip — positioned by JS */
.shopdpa-tx-map__tooltip {
  position: absolute;
  z-index: 10;
  background: var(--c-primary-deep);
  color: var(--c-ink-inverse);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  min-width: 220px;
  max-width: 280px;
  box-shadow: 0 8px 24px rgba(0, 12, 36, 0.25);
  border-left: 3px solid var(--c-accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}
.shopdpa-tx-map__tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.shopdpa-tx-map__tooltip-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-accent);
  margin: 0 0 0.125rem;
}
.shopdpa-tx-map__tooltip-subtitle {
  font-size: 0.8125rem;
  margin: 0 0 0.5rem;
  opacity: 0.85;
}
.shopdpa-tx-map__tooltip-cities {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.shopdpa-tx-map__tooltip-cities li {
  padding: 0.125rem 0.375rem;
  background: rgba(255, 197, 40, 0.12);
  border-radius: var(--r-sm);
  color: var(--c-ink-inverse);
}
.shopdpa-tx-map__tooltip-dpa {
  font-size: 0.75rem;
  margin: 0 0 0.5rem;
  line-height: 1.4;
  opacity: 0.85;
}
.shopdpa-tx-map__tooltip-cta {
  font-size: 0.8125rem;
  color: var(--c-accent);
  font-weight: 600;
  margin: 0;
}

/* Sidebar — region quick links + screen-reader fallback */
.shopdpa-tx-map__sidebar {
  font-size: 0.875rem;
}
.shopdpa-tx-map__sidebar-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-2);
}
.shopdpa-tx-map__sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.shopdpa-tx-map__sidebar-link {
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-rows: auto auto;
  gap: 0 0.625rem;
  padding: 0.5rem 0.625rem;
  background: var(--c-surface);
  border: 1px solid rgba(2, 33, 78, 0.10);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-ink);
  transition: background 0.15s, border-color 0.15s;
  align-items: center;
}
.shopdpa-tx-map__sidebar-link:hover {
  background: var(--c-bg-alt);
  border-color: var(--c-primary);
}
.shopdpa-tx-map__sidebar-link.is-current {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
}
.shopdpa-tx-map__sidebar-chip {
  grid-row: 1 / 3;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  align-self: center;
}
/*
 * Sidebar chips — match the v1.38.4 region color tokens exactly so the
 * "Or browse" column reads as a key for the map fills. Previous values
 * were the older navy variants (mid/deep) and a gradient on Statewide.
 * (Locked v1.38.6 alongside the new map palette.)
 */
.shopdpa-tx-map__sidebar-chip[data-color="north-texas"]   { background: var(--c-region-north); }
.shopdpa-tx-map__sidebar-chip[data-color="east-texas"]    { background: var(--c-region-east); }
.shopdpa-tx-map__sidebar-chip[data-color="central-texas"] { background: var(--c-region-central); }
.shopdpa-tx-map__sidebar-chip[data-color="west-texas"]    { background: var(--c-region-west); }
/* Statewide entry — no chip per direction (v1.38.6). */
.shopdpa-tx-map__sidebar-chip.is-statewide-chip { display: none; }
.shopdpa-tx-map__sidebar-name {
  grid-column: 2;
  font-weight: 700;
  color: var(--c-primary);
  font-size: 0.9375rem;
}
.shopdpa-tx-map__sidebar-sub {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--c-ink-muted);
}
.shopdpa-tx-map__sidebar-statewide {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(2, 33, 78, 0.10);
}

/*
 * Statewide sidebar link — no chip, full-width text. Collapses the
 * 16px chip column from the grid so the name/sub sit flush left.
 * (Locked v1.38.6 alongside chip removal.)
 */
.shopdpa-tx-map__sidebar-link.is-statewide {
  grid-template-columns: 1fr;
}
.shopdpa-tx-map__sidebar-link.is-statewide .shopdpa-tx-map__sidebar-name,
.shopdpa-tx-map__sidebar-link.is-statewide .shopdpa-tx-map__sidebar-sub {
  grid-column: 1;
}

/*
 * Numbered region markers — desktop hidden, mobile shown via media query
 * below. Cream circle background + navy digit reads against every region
 * color (navy, emerald, burgundy, amber). Numbers match the sidebar "Or
 * browse" list order so they function as a legend key on small screens.
 * (Locked v1.38.7.)
 */
.shopdpa-tx-map__numbers { display: none; }
.shopdpa-tx-map__number circle {
  fill: var(--c-bg);
  stroke: var(--c-primary);
  stroke-width: 8;
}
.shopdpa-tx-map__number text {
  font-size: 130px;
  font-weight: 800;
  fill: var(--c-primary);
  letter-spacing: 0;
  paint-order: normal;
}

/*
 * Sidebar list — CSS counter auto-prepends "1. / 2. / 3. / 4." to each
 * region name on mobile only. Statewide row excluded from numbering so
 * it stays as "Statewide Programs" without a stray "5." prefix.
 */
.shopdpa-tx-map__sidebar-list { counter-reset: shopdpa-region-num; }
.shopdpa-tx-map__sidebar-list > li:not(.shopdpa-tx-map__sidebar-statewide) {
  counter-increment: shopdpa-region-num;
}
.shopdpa-tx-map__sidebar-list > li:not(.shopdpa-tx-map__sidebar-statewide) .shopdpa-tx-map__sidebar-name::before {
  content: counter(shopdpa-region-num) ". ";
  display: none; /* desktop hides — text labels carry the key */
  /* v1.49.25 — was `color: var(--c-primary)` (navy) which rendered navy-on-navy
     and disappeared inside the .shopdpa-map-band scope on mobile (homepage
     "Or browse" column). `inherit` lets the number track its parent .name's
     color: cream on dark band, navy on light card. */
  color: inherit;
  font-weight: 800;
}

@media (max-width: 768px) {
  .shopdpa-tx-map__stage { grid-template-columns: 1fr; }
  .shopdpa-tx-map__svg { max-height: 480px; }
  /*
   * On mobile the SVG shrinks to ~340px wide, so the inside-region text
   * labels become unreadable. Hide them; show the numbered markers
   * instead; and prepend the matching number to each sidebar name so the
   * sidebar serves as a legend.
   */
  .shopdpa-tx-map__labels  { display: none; }
  .shopdpa-tx-map__numbers { display: block; }
  .shopdpa-tx-map__sidebar-list > li:not(.shopdpa-tx-map__sidebar-statewide) .shopdpa-tx-map__sidebar-name::before {
    display: inline-block;
    margin-inline-end: 0.25rem;
  }
  .shopdpa-tx-map { padding: var(--sp-2); }
}

/* ============================================================ */
/* v1.42.0 — Regions-map placement band. The [shopdpa_texas_map] */
/* section is injected after the "At a Glance" stats (before the */
/* myth section) wrapped in this navy band so the cream map card */
/* no longer blends with the neighboring cream sections. Band    */
/* sets ONLY the background (not text color) so the cream card's  */
/* own dark text stays legible.                                   */
/* ============================================================ */
.shopdpa-map-band {
  background-color: var(--c-primary);
  padding-block: clamp(var(--sp-5), 6vw, var(--sp-7));
}
.shopdpa-map-band .shopdpa-tx-map {
  margin-block: 0;
  background: transparent;
  box-shadow: none;
}
/* v1.42.1 — map sits directly on the navy band now (cream card removed), so the
   header + "Or browse" sidebar recolor to light for legibility on navy. */
.shopdpa-map-band .shopdpa-tx-map__title { color: var(--c-ink-inverse); }
.shopdpa-map-band .shopdpa-tx-map__subtitle { color: rgba(250, 247, 242, 0.78); }
.shopdpa-map-band .shopdpa-tx-map__sidebar-label { color: rgba(250, 247, 242, 0.70); }
.shopdpa-map-band .shopdpa-tx-map__sidebar-link {
  background: var(--c-primary-mid);
  border: none;
}
.shopdpa-map-band .shopdpa-tx-map__sidebar-link:hover {
  background: #0A3E94;
  border: none;
}
.shopdpa-map-band .shopdpa-tx-map__sidebar-link.is-current {
  background: #0A3E94;
  border: none;
}
.shopdpa-map-band .shopdpa-tx-map__sidebar-name { color: var(--c-ink-inverse); }
.shopdpa-map-band .shopdpa-tx-map__sidebar-sub { color: rgba(250, 247, 242, 0.70); }
.shopdpa-map-band .shopdpa-tx-map__sidebar-statewide { border-top-color: rgba(250, 247, 242, 0.18); }

/* v1.43.0 — fine-print disclosure (de-emphasized; not a highlighted block).
   Per Tyler 2026-05-22: affiliation/legal disclosures are small footnotes at
   the bottom of the article, marked with a dagger, never a prominent paragraph. */
.pillar-fineprint {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--c-line, #e4ddd0);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--c-ink-muted, #6b7684);
}
.pillar-fineprint p { margin: 0 0 0.5rem; font-size: inherit; color: inherit; }
.pillar-fineprint a { color: inherit; text-decoration: underline; }
.pillar-fineprint sup { font-weight: 600; }

/* ============================================================ */
/* v1.44.3 / v1.44.5 — county-page layout: full-width data       */
/* sections, centered + row-aligned Quick Facts, two-column      */
/* editorial body. /counties/{slug}/ single-county pages.        */
/* ============================================================ */

/* (1) Quick Facts grid — was capped at --max-w-content (~780px) by the
 * global `ul, ol { max-width }` rule, collapsing to 3 columns. Release the
 * cap + kill the inherited list padding so the 6 county facts span the full
 * page-width container, six across on desktop, wrapping responsively. */
.quick-facts__grid {
  max-width: none;
  padding-inline-start: 0;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* v1.44.5 — center each fact card's content and align the two rows (label,
 * value) across all cards. The label gets a fixed two-line min-height so a
 * wrapping label ("TSAHC income limit (non-targeted)") doesn't push its value
 * lower than the single-line neighbors — every value sits on the same line. */
.quick-facts__card {
  text-align: center;
  align-items: center;
}
.quick-facts__label {
  min-height: 3.5rem; /* ~2 lines, so single-line labels reserve the same height as wrapping ones → value rows align */
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-facts__cite {
  align-self: center;
}

/* (2) Income Limits table — the program-limit comparison reuses
 * .pillar-compare-wrap, whose 720px cap is correct inside the narrow
 * flagship-pillar prose column but leaves a wide right gutter on the
 * full-width county template. Scope an un-cap to the county snapshot only. */
.ami-snapshot .pillar-compare-wrap {
  max-width: none;
}

/* (3) v1.44.5 — "What Buyers Should Know" editorial body. A short H2 + a few
 * paragraphs left-anchored at 780px read as a thin, plain column with a big
 * empty right gutter. Render it as a balanced two-column read that fills the
 * section width, heading spanning both columns, hairline divider between them,
 * each paragraph kept whole within a column. `column-width` auto-collapses to
 * a single column on narrow screens, so no separate mobile breakpoint needed. */
.cpt-body__inner {
  column-width: 30rem;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  column-rule: 1px solid var(--c-border);
}
.cpt-body__inner > h2,
.cpt-body__inner > h3,
.cpt-body__inner > .cpt-body__lede {
  column-span: all;
  max-width: none;
  margin-inline: 0;
}
.cpt-body__inner > p,
.cpt-body__inner > ul,
.cpt-body__inner > ol,
.cpt-body__inner > blockquote,
.cpt-body__inner > .cpt-body__mission {
  max-width: none;
  margin-inline: 0;
}
.cpt-body__inner > :first-child { margin-top: 0; }

/* v1.47.3 — Programs hub (/texas-down-payment-assistance/) uses a SINGLE-column
 * body. The 2-column rule above is tuned for the short county "What Buyers
 * Should Know" prose; the Programs guide carries a summary box, comparison
 * tables, and an FAQ accordion that must never be column-split (they'd squish to
 * ~half width and break across columns). Mirrors the live inline-style override
 * on page 142 — once shipped, that inline <style> can be removed. */
.cpt-pillar--programs .cpt-body__inner,
.cpt-pillar--scholarship .cpt-body__inner {
  column-width: auto;
  column-count: 1;
  column-rule: none;
}
.cpt-pillar--programs .cpt-body__inner > p,
.cpt-pillar--programs .cpt-body__inner > ul,
.cpt-pillar--programs .cpt-body__inner > ol,
.cpt-pillar--scholarship .cpt-body__inner > p,
.cpt-pillar--scholarship .cpt-body__inner > ul,
.cpt-pillar--scholarship .cpt-body__inner > ol {
  max-width: 72ch;
}
/* v1.47.7 — scholarship stat band spans the container (the component has a
 * 720px cap + left margin for in-column use, which left it hugging the left
 * edge and misaligned with the hero). */
.cpt-pillar--scholarship .pillar-quick-facts {
  max-width: none;
  margin-block: var(--sp-4) 0;
}

/* v1.47.4 — Programs hub guide gets a sticky TOC + CTA sidebar on the right
 * (fills the desktop dead-space, matching the city-pillar pages). Body left,
 * aside right; collapses to single-column on tablet/mobile. */
.programs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.programs-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.programs-aside__cta {
  background-color: var(--c-primary-deep);
  background-image: linear-gradient(180deg, var(--c-primary-deep) 0%, var(--c-primary) 100%);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: 0 6px 20px rgba(0, 12, 36, 0.18);
}
.programs-aside__cta-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--sp-2);
}
.programs-aside__cta-btn {
  display: block;
  text-align: center;
  background-color: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: var(--sp-3) var(--sp-2);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 197, 40, 0.25);
  transition: transform 0.18s, background-color 0.18s;
}
.programs-aside__cta-btn:hover,
.programs-aside__cta-btn:focus-visible {
  transform: translateY(-1px);
  color: var(--c-primary);
  text-decoration: none;
}
.programs-toc__title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-2);
}
.programs-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--c-border);
}
.programs-toc__list a {
  display: block;
  padding: 0.4rem var(--sp-2);
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--c-ink);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.programs-toc__list a:hover,
.programs-toc__list a:focus-visible {
  color: var(--c-primary);
  border-left-color: var(--c-accent);
}
@media (max-width: 1024px) {
  .programs-layout { grid-template-columns: 1fr; }
  .programs-aside { display: none; }
}

/* v1.47.4 — icon beside each hub card title (programs + profession grids). */
.cross-grid__card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cross-grid__card-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 197, 40, 0.16);
  color: var(--c-accent);
}
.cross-grid__card-icon svg {
  width: 17px;
  height: 17px;
}