/* =========================================================================
   Components. Each block below corresponds to a named UI primitive that
   will appear in the programmatic templates (direct-answer block, live-
   data bar, FAQ, breadcrumb, CTA, etc.). No raw colors here — tokens only.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Direct-answer block — the GEO/AIO hero snippet.
   ------------------------------------------------------------------------- */
.direct-answer {
  background: var(--color-brand-100);
  border-left: 4px solid var(--color-brand-500);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-500);
  line-height: var(--lh-body);
}

.direct-answer__label {
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand-700);
  margin-bottom: var(--space-2);
}

.direct-answer__body { color: var(--color-ink-900); }

.direct-answer__cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-300);
  color: var(--color-ink-500);
}

/* -------------------------------------------------------------------------
   Live-data bar — county loan limits, USDA eligibility, pop stats.
   ------------------------------------------------------------------------- */
.data-bar {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  background: var(--color-ink-000);
  border: 1px solid var(--color-ink-300);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.data-bar__cell { text-align: left; }
.data-bar__label {
  font-size: var(--fs-300);
  color: var(--color-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.data-bar__value {
  font-size: var(--fs-700);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-900);
  font-variant-numeric: tabular-nums;
}
.data-bar__meta {
  font-size: var(--fs-300);
  color: var(--color-ink-500);
  margin-top: var(--space-1);
}

/* -------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  min-height: 44px;   /* WCAG 2.5.5 target size */
}

.cta--primary {
  background: var(--color-brand-500);
  color: var(--color-ink-000);
}
.cta--primary:hover { background: var(--color-brand-700); }

.cta--ghost {
  background: transparent;
  color: var(--color-brand-500);
  border: 1px solid var(--color-brand-500);
}
.cta--ghost:hover { background: var(--color-brand-100); }

/* -------------------------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------------------------- */
.breadcrumb {
  font-size: var(--fs-300);
  color: var(--color-ink-500);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.breadcrumb li::after {
  content: "›";
  margin-inline-start: var(--space-2);
  color: var(--color-ink-300);
}
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--color-brand-500); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   FAQ block
   ------------------------------------------------------------------------- */
.faq__item {
  border-bottom: 1px solid var(--color-ink-300);
  padding-block: var(--space-4);
}
.faq__question {
  font-size: var(--fs-500);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-900);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__answer { margin-top: var(--space-3); color: var(--color-ink-700); }

/* -------------------------------------------------------------------------
   "Verified" badge + source cite — E-E-A-T signal the eye catches
   ------------------------------------------------------------------------- */
.verified {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  font-size: var(--fs-300);
  color: var(--color-accent-600);
  font-weight: var(--fw-medium);
}
.verified::before { content: "✓"; font-weight: var(--fw-bold); }

.source-cite {
  font-size: var(--fs-300);
  color: var(--color-ink-500);
}
.source-cite a { color: var(--color-ink-500); text-decoration: underline; }

/* -------------------------------------------------------------------------
   Compliance footer block
   ------------------------------------------------------------------------- */
.compliance-footer {
  background: var(--color-ink-100);
  padding: var(--space-6) 0;
  font-size: var(--fs-300);
  color: var(--color-ink-700);
  border-top: 1px solid var(--color-ink-300);
}
.compliance-footer__nmls {
  font-weight: var(--fw-semibold);
  color: var(--color-ink-900);
}