/* === PROGRAM DETAIL PAGE === */
.page-program-detail .breadcrumb { grid-column: 1 / -1; margin: 8px 0 12px; padding: 0; font-size: var(--type-ui); overflow-wrap: anywhere; }
.page-program-detail .breadcrumb span { color: var(--text); font-weight: 600; }

.program-detail-hero { padding: 48px 0 36px; }
.page-program-detail .program-detail-hero .container { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
.page-program-detail .program-icon-large { grid-column: 1; grid-row: 1; align-self: start; width: 40px; margin: 0; color: var(--orange-text); }
.page-program-detail .program-detail-hero h1 { grid-column: 2; grid-row: 1; align-self: start; }
.page-program-detail .program-source,
.page-program-detail .program-badges { grid-column: 1 / -1; }
.program-icon-large { margin-bottom: 8px; color: var(--orange-text); }
.program-source { font-size: var(--type-body); line-height: var(--leading-body); color: var(--text-muted); margin-bottom: 16px; }
/* Force both header chips into one identical box so the status + category pills
   match height and align. As flex items the badges blockify to display:block,
   which inflated the category chip to 38px on a single line; inline-flex + an
   explicit line-height/padding collapses both to the same height, and margin:0
   clears a stray margin-bottom inherited from an unrelated .status-badge rule. */
.program-badges .status-badge, .program-badges .category-badge {
  margin: 0; display: inline-flex; align-items: center; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  line-height: 1.2; padding: 5px 12px; font-size: var(--type-ui);
}
.category-badge { display: inline-block; font-size: var(--type-ui); font-weight: 600; padding: 4px 12px; border-radius: 4px; background: rgba(64,126,201,0.08); color: var(--blue); text-transform: capitalize; }
html[lang="es"] .page-program-detail .category-badge { text-transform: none; }

.program-detail-body { padding: 48px 0 64px; }
.program-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.program-detail-main { display: flex; min-width: 0; flex-direction: column; gap: 24px; }
.detail-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.detail-card h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; color: var(--heading); }
.detail-card p { font-size: var(--type-body); line-height: 1.7; color: var(--text); margin-bottom: 12px; }
.detail-card p:last-child { margin-bottom: 0; }
.page-qualify #quiz-card { width: 100%; max-width: 760px; margin-inline: auto; }
.page-qualify .page-hero-sub { max-width: 76ch; }
.calc-note { font-size: var(--type-ui); color: var(--text-faint); font-style: italic; padding-top: 8px; border-top: 1px solid var(--border); }
.scope-note { background: #fdf6e3; border-left: 4px solid #d97706; border-radius: 6px; padding: 10px 14px; margin: 0 0 14px 0; font-size: var(--type-body); line-height: var(--leading-body); color: var(--text); }
.data-verified { font-size: var(--type-ui); color: var(--text-faint); margin-top: 10px; }
.data-verified a { color: var(--text-muted); text-decoration: underline; }
.detail-list { margin: 0 0 0 18px; }
.detail-list li { font-size: var(--type-body); margin-bottom: 10px; line-height: 1.6; color: var(--text); }
.apply-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.source-link-status { flex: 0 0 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 6px; background: var(--bg-alt); color: var(--text); font-size: var(--type-ui); line-height: 1.55; }
.source-link-status strong { color: var(--heading); }
.source-link-status a { font-weight: 700; }
.source-link-status-dead { border-left-color: var(--red); background: rgba(210, 39, 48, 0.06); }
.source-link-status-blocked { border-left-color: var(--orange-dark); background: rgba(164, 81, 0, 0.06); }
.source-link-status-inconclusive,
.source-link-status-unchecked { border-left-color: var(--blue); background: rgba(64, 126, 201, 0.06); }
.phone-line { font-size: var(--type-ui); color: var(--text-muted); }
.apply-actions .phone-line { flex: 0 0 100%; margin: 0; }
.phone-label { color: var(--heading); font-weight: 700; }
.deadline-line,
.seed-strip-note { font-size: var(--type-ui); color: var(--text-faint); margin-top: 8px; }
/* Ask-us affordances (2026-06-12): traffic lands on program/city pages where
   the only contact path was the footer link. These make a human reachable
   from the content itself. */
.ask-block { margin-top: 24px; padding: 20px 24px; background: var(--bg-card, #fff); border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: 10px; }
.ask-block h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; }
.ask-block p { font-size: var(--type-body); line-height: var(--leading-body); color: var(--text-muted); margin: 0 0 14px; }
.ask-line { font-size: var(--type-body); line-height: var(--leading-body); margin-top: 14px; }
.ask-line a { font-weight: 600; }
/* Seed strip on program pages: unclaimed public-records companies, clearly
   separated from the vetted contractor cards above them. */
.seed-strip { margin-top: 20px; text-align: left; max-width: 700px; margin-left: auto; margin-right: auto; }
.seed-strip-label { font-size: var(--type-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px; }
.seed-strip-card { margin-bottom: 10px; }

.program-detail-sidebar { display: flex; min-width: 0; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--site-nav-current-offset) + 12px); transition:top 180ms ease; }
.sidebar-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.sidebar-card h3 { font-size: var(--type-ui); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.sidebar-value { font-size: var(--type-ui); font-weight: 600; color: var(--heading); }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-block; font-size: var(--type-ui); font-weight: 500; padding: 3px 10px; border-radius: 4px; background: rgba(64,126,201,0.08); color: var(--blue); text-transform: capitalize; }
.sidebar-back { width: 100%; text-align: center; margin-top: 8px; }

.program-cta p { color: var(--text-muted); max-width: 520px; margin: 0 auto 24px; }

@media (max-width: 768px) {
  .program-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .program-detail-sidebar { position: static; }
  .program-cta .btn { display: block; margin: 8px auto; max-width: 280px; text-align: center; }
}
html.text-resized .program-detail-sidebar { position: static; }

/* Exit-capture prompt on program detail pages (program-exit-capture.js) */
.exit-capture-card { background: var(--bg-card, #fff); border: 1.5px solid rgba(246,141,46,0.5); border-radius: 12px; padding: 18px 20px; margin-top: 14px; }
.exit-capture-card h3,
.affiliate-headline { margin: 0 0 6px; font-size: 1.05rem; }
.exit-capture-card p { margin: 0 0 12px; font-size: var(--type-body); color: var(--text-faint, #555); line-height: var(--leading-body); }
.exit-capture-email { margin-bottom: 10px; }
.exit-capture-turnstile { margin: 10px 0; }
.exit-capture-skip { min-height: 44px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--type-ui); color: var(--blue, #2d5f9e); text-decoration: underline; padding: 8px 4px; }
.exit-capture-result { margin-top: 10px; font-size: var(--type-ui); }
.exit-capture-result.success { color: #15803d; }
.exit-capture-result.error { color: #dc2626; }

/* ── Affiliate quote module (dark until AFFILIATE_ENABLED) ────────────── */
.affiliate-module { background: #fffaf3; border: 1.5px solid #f0d9bd; border-radius: 12px; padding: 20px 22px; margin: 22px auto; max-width: 700px; text-align: left; }
.affiliate-label { font-size: var(--type-ui); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #765d08; margin-bottom: 8px; }
.affiliate-body { margin: 0 0 14px; color: var(--text-faint); font-size: var(--type-body); line-height: var(--leading-body); }
.affiliate-disclosure { margin: 14px 0 0; color: #5f6358; font-size: var(--type-reading); line-height: var(--leading-reading); }

/* City-local "stack with these" block on national program pages (de-dupes the
   otherwise-identical federal pages with real, city-specific local programs). */
.local-context { margin: 14px 0 0; padding: 12px 14px; background: rgba(64,126,201,0.06);
  border-left: 3px solid var(--blue, #2d5f9e); border-radius: 0 8px 8px 0; font-size: var(--type-body); line-height: var(--leading-body); }
.local-context p { margin: 0 0 6px; }
.local-stack { margin: 0; padding-left: 18px; line-height: 1.6; }
.local-stack a { color: var(--orange-dark, #d2691e); text-decoration: none; }
.local-stack a:hover { text-decoration: underline; }
.local-stack .stack-amt { color: var(--text-muted); font-size: var(--type-ui); white-space: normal; overflow-wrap: anywhere; }

/* Program-detail SEO blocks (answer-first intro + per-program FAQ), added
   2026-06-22 to raise unique-content density. Mirrors the city-page treatment. */
.program-intro { margin: 0 0 14px; font-size: var(--type-body); line-height: 1.65; color: var(--heading); font-weight: 500; }
.program-faq-section { padding: 8px 0 16px; }
.program-faq h2 { font-size: 1.4rem; margin: 0 0 14px; }
.program-faq-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.program-faq-item:last-child { border-bottom: none; }
.program-faq-item summary { font-weight: 700; cursor: pointer; list-style: none; color: var(--heading); }
.program-faq-item summary::-webkit-details-marker { display: none; }
.program-faq-item summary::after { content: "+"; float: right; color: var(--text-muted); font-weight: 700; }
.program-faq-item[open] summary::after { content: "\2212"; }
.program-faq-item p { margin: 10px 0 0; color: var(--text-faint); line-height: 1.6; }

/* contractor-requirement.css
 *
 * Apply-moment "you'll likely need a contractor to apply" module on the program
 * detail page (EN + ES). Rendered server-side by ssr.py inside the "How to
 * Apply" card, so it sits at the apply moment, not buried at the bottom. Two
 * tiers share the markup; the tier class swaps the accent treatment so the
 * "required" framing reads more definitive than the softer "likely" framing.
 *
 * Brand vars come from styles.css (--orange is the primary CTA color, --blue is
 * the secondary). Fallback literals keep the module styled even if this file
 * loads before styles.css.
 */

.contractor-requirement {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border, #b0bfcc);
  border-left: 4px solid var(--blue, #2d5f9e);
  border-radius: var(--radius, 10px);
  background: rgba(64, 126, 201, 0.06);
}

/* "required" is definitive: lean on the primary CTA color (orange) for a
 * stronger, more attention-grabbing accent than the softer "likely" tier. */
.contractor-requirement-required {
  border-left-color: var(--orange-dark, #a45100);
  background: rgba(246, 141, 46, 0.08);
}

.contractor-requirement-headline {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading, #000000);
  margin: 0 0 8px;
  line-height: 1.4;
}

.contractor-requirement-body {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--text, #221f20);
  margin: 0 0 14px;
}

.contractor-requirement-cta {
  /* .btn .btn-accent from styles.css provide the base button look; these rules
   * only ensure the CTA reads as a full-width-friendly block inside the card. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
}

.contractor-requirement-money {
  /* Honest "how the money reaches the work" note (forgivable-loan/lien,
   * reimbursement cash-gap, instant discount). Sits between the CTA and the
   * caveat sub-line; slightly stronger than the caveat so the cash-planning
   * fact reads clearly without competing with the headline. */
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--text, #221f20);
  background: var(--bg-soft, #f6f7f9);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.contractor-requirement-note {
  /* Honest sub-line: each program sets its own rules. Muted so it reads as a
   * caveat, not a promise. */
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--text-faint, #6b7280);
  margin: 0;
}

/* Mobile: let the CTA span the card so the tap target meets the 44px minimum. */
@media (max-width: 768px) {
  .contractor-requirement-cta {
    display: flex;
    width: 100%;
  }
}

.program-category-icon { width:40px; height:40px; color:var(--orange); }
.contractor-approved-badge { display:inline-block; padding:2px 6px; color:#fff; background:var(--green); border-radius:3px; font-size:var(--type-ui); font-weight:700; text-transform:uppercase; }
.program-max { padding:5px 10px; color:var(--blue); background:rgba(64,126,201,0.08); border:1px solid rgba(64,126,201,0.25); border-radius:6px; font-size:var(--type-ui); font-weight:700; line-height:1.3; text-align:right; }
.program-contractor-slot { display: none; max-width: 700px; margin: 20px auto; }
.contractor-category-meta { color: var(--text-faint); font-size: var(--type-ui); }