/* FormsPal blog — article + index styles (.bp-*).
   Builds on core tokens + landing.css/state.css components (.section, .card, .btn-*,
   .cta-band, .pill, .eyebrow, .fp-faq). Only blog-specific rules live here. */

/* ── Article shell ─────────────────────────────────────────────────── */
.bp-wrap { max-width: 800px; }

/* Muted-text colors: #6b7f7b was 4.25:1 and #8a9995 was 2.97:1 on white — both replaced
   with #5b6f6b (5.4:1) in the 2026-07-10 contrast sweep. */
.bp-crumbs { font-size: 13px; color: #5b6f6b; margin-bottom: 18px; }
.bp-crumbs a { color: inherit; text-decoration: none; }
.bp-crumbs a:hover { text-decoration: underline; }

.bp-article h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.bp-byline { font-size: 14px; color: #5b6f6b; margin: 12px 0 8px; }

/* ── Prose ─────────────────────────────────────────────────────────── */
.bp-article h2 { font-size: clamp(22px, 3vw, 30px); margin: 44px 0 12px; scroll-margin-top: 72px; }
.bp-article h3 { font-size: 19px; margin: 28px 0 8px; scroll-margin-top: 72px; }
.bp-article p, .bp-article li { font-size: 16.5px; line-height: 1.65; }
.bp-article ul, .bp-article ol { padding-left: 22px; }
.bp-article li { margin-bottom: 6px; }
.bp-article a { color: var(--fp-green, #1c7c54); }
/* Prose links must not be color-only (WCAG 1.4.1) — underline them in running text. */
.bp-article p a, .bp-article li a, .bp-article td a { text-decoration: underline; }
/* Buttons keep their own text color — the prose link color above must never
   bleed into .btn. */
.bp-article a.btn, .bp-cta a.btn { color: var(--fp-ink, #071f24); text-decoration: none; }

/* ── In-article table of contents ──────────────────────────────────── */
.bp-toc {
  background: var(--fp-green-light, #eef6f1);
  border: 1px solid var(--fp-line, #e3e8e6);
  border-radius: var(--fp-radius-lg, 14px);
  padding: 18px 22px;
  margin: 24px 0 8px;
  font-size: 15px;
}
.bp-toc strong { display: block; margin-bottom: 8px; }
.bp-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.bp-toc li { margin-bottom: 4px; break-inside: avoid; }
.bp-toc a { text-decoration: none; color: var(--fp-green-dark, #1d6c54); } /* green was 3.85:1 on mint */
.bp-toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .bp-toc ol { columns: 1; } }

/* ── Key-takeaways box ─────────────────────────────────────────────── */
.bp-key {
  border-left: 4px solid var(--fp-green, #1c7c54);
  background: var(--fp-green-light, #eef6f1);
  border-radius: 0 var(--fp-radius-lg, 14px) var(--fp-radius-lg, 14px) 0;
  padding: 18px 22px;
  margin: 24px 0;
}
.bp-key strong:first-child { display: block; margin-bottom: 8px; }
.bp-key ul { margin: 0; }

/* ── Callout (info/warning note) ───────────────────────────────────── */
.bp-callout {
  border: 1px solid var(--fp-line, #e3e8e6);
  border-left: 4px solid var(--fp-orange, #e8833a);
  border-radius: 0 var(--fp-radius-lg, 14px) var(--fp-radius-lg, 14px) 0;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 15px;
  background: #fff;
}

/* ── Tables (always scroll inside their own container on mobile) ───── */
.bp-tablewrap { overflow-x: auto; margin: 20px 0; }
.bp-article table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.bp-article th, .bp-article td {
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--fp-line, #e3e8e6);
  vertical-align: top;
}
.bp-article thead th {
  background: var(--fp-green-light, #eef6f1);
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
.bp-article tbody tr:nth-child(even) td { background: #fafcfb; }
.bp-article td strong { white-space: nowrap; }
.bp-row--us td { background: var(--fp-green-light, #eef6f1) !important; }

/* ── Mid-article CTA card ──────────────────────────────────────────── */
.bp-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 32px 0; padding: 22px 26px;
}
.bp-cta__title { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--fp-ink, #071f24); }
.bp-cta__body p { margin: 0; font-size: 15px; color: #5b6f6b; }
.bp-cta .btn { flex-shrink: 0; }
@media (max-width: 640px) { .bp-cta { flex-direction: column; align-items: flex-start; } }

/* ── In-article figures (stock images) ─────────────────────────────── */
.bp-figure { margin: 28px 0; }
.bp-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--fp-radius-lg, 14px);
}

/* ── Source note + about-the-numbers footer ────────────────────────── */
.bp-src { font-size: 13px; color: #5b6f6b; margin-top: -12px; margin-bottom: 28px; }
/* MKT-07 (QA 2026-07-17): more air between a table and the prose that follows it */
.bp-tablewrap + p:not(.bp-src) { margin-top: 26px; }
/* MKT-07: the closing CTA section doubled the article's bottom padding into a ~220px void */
.bp-endcta { padding-top: 0; }
/* Taras 2026-08-28: on COST pages the #more-costs interlink strip sits between the article
   and the closing CTA, so the CTA no longer inherits the article's bottom gap — restore its
   own top padding only in that arrangement (the cream strip's background makes the missing
   gap read as the green band glued to the section seam). */
#more-costs + .bp-endcta { padding-top: var(--fp-section-y); }
/* Taras 2026-08-28: the strip inherited bp-endcta's padding-top:0 but kept the full
   .section bottom padding (up to 110px) — label glued to the cream block's top edge,
   void below the links. Balanced, tighter band instead. */
#more-costs.bp-endcta { padding-block: clamp(40px, 5vw, 56px); }
.bp-note {
  margin-top: 44px; padding: 16px 20px; font-size: 13.5px; color: #5b6f6b;
  background: #fafcfb; border: 1px solid var(--fp-line, #e3e8e6);
  border-radius: var(--fp-radius-lg, 14px);
}

/* ── Index cards (3/2/1 grid + pinned footers, debate 2026-08-28) ──── */
.bp-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1099px) { .bp-index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px)  { .bp-index { grid-template-columns: 1fr; } }
.bp-index__card { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 26px 28px; overflow: hidden; }
/* card image (registry image_stock, QA 2026-07-13): full-bleed above the title */
.bp-index__img { margin: -26px -28px 16px; }
.bp-index__img img { display: block; width: 100%; height: 180px; object-fit: cover; }
.bp-index__card h2 { font-size: 20px; margin: 0 0 10px; }
/* excerpts clamp to 3 lines; titles never truncate (legal titles must read whole) */
.bp-index__card p { font-size: 15px; color: #5b6f6b; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ONE footer wrapper pinned to the card bottom = equal-height cards in a row */
.bp-index__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bp-index__meta { font-size: 13px; color: #5b6f6b; }
.bp-index__more { color: var(--fp-green, #1c7c54); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.bp-index__card:hover .bp-index__more, .bp-featured__card:hover .bp-index__more { text-decoration: underline; }

/* ── Filter bar + count + featured + empty state (2026-08-28) ──────── */
.bp-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin-bottom: 8px; }
.bp-filters__group { display: flex; flex-direction: column; gap: 6px; }
.bp-filters__group label { font-size: 13px; font-weight: 600; color: #5b6f6b; }
.bp-filters select { padding: 10px 12px; border: 1px solid var(--fp-line, #e3e8e6); border-radius: 10px; font: inherit; font-size: 15px; background: #fff; min-width: 170px; }
.bp-filters__apply { padding: 10px 22px; font-size: 15px; }
.bp-filters__sort { margin-left: auto; font-size: 14px; color: #5b6f6b; align-self: center; padding-top: 18px; }
.bp-filters__sort a { color: var(--fp-green, #1c7c54); text-decoration: underline; }
.bp-filters__sort-on { font-weight: 600; }
@media (max-width: 699px) { .bp-filters__sort { margin-left: 0; padding-top: 0; } }
.bp-count { font-size: 13.5px; color: #5b6f6b; margin: 0 0 20px; }
.bp-featured { margin-bottom: 26px; }
.bp-featured__card { display: flex; text-decoration: none; color: inherit; overflow: hidden; padding: 0; }
.bp-featured__img { flex: 0 0 42%; }
.bp-featured__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-featured__body { padding: 26px 32px; display: flex; flex-direction: column; flex: 1; }
.bp-featured__body h2 { font-size: 24px; margin: 8px 0 10px; }
.bp-featured__body p { font-size: 15.5px; color: #5b6f6b; margin: 0 0 16px; }
@media (max-width: 860px) {
  .bp-featured__card { flex-direction: column; }
  .bp-featured__img { flex-basis: auto; }
  .bp-featured__img img { height: 200px; }
}
.bp-empty { padding: 28px 0 8px; font-size: 15.5px; color: #5b6f6b; }
.bp-empty a { color: var(--fp-green, #1c7c54); text-decoration: underline; font-weight: 600; }

/* MKT-07 (QA 2026-07-27): the closing CTA band used the full site container while everything
   else on an article page sits in the 800px reading column — match the column. */
.bp-endcta .container { max-width: 800px; }