/* The article body, styled the way the artboard styles its own.

   BlogPost.jsx writes the body as two components — P and H2 — each carrying its inline style,
   and nothing else: no list, no table, no figure, no quote, because its demo article has
   none. A CMS post has all of them. So the two rules the canvas does have are restated here
   verbatim as rules for a subtree, and everything it does not have is built from the same
   tokens at the same rhythm, rather than left to the browser's defaults, which would put
   Times New Roman lists inside a Poppins article.

   Restated, not invented: `.bp-body > p` and `.bp-body h2` below are the declarations
   BlogPost.jsx sets on P and H2. legacy-prose.mjs reduces every body to exactly the elements
   this sheet covers, so a rule here and an element there are two halves of one contract. */

.bp-body {
  /* The canvas' own article element: a flex column at --space-5. Set again here because bare
     text can survive a reduced body — a Divi row that wrapped its copy in a div rather than a
     paragraph — and it should read as body copy rather than inherit from the page. */
  font: var(--type-body-lg);
  color: var(--text-body);
  text-wrap: pretty;
}

.bp-body > p,
.bp-body blockquote p,
.bp-body li,
.bp-body dd,
.bp-body td,
.bp-body th {
  margin: 0;
  font: var(--type-body-lg);
  color: var(--text-body);
  text-wrap: pretty;
}

.bp-body h2,
.bp-body h3,
.bp-body h4,
.bp-body h5,
.bp-body h6 {
  margin: var(--space-4) 0 0;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  /* Clears the sticky header when the contents rail jumps to a heading — the canvas' number. */
  scroll-margin-top: 100px;
  text-wrap: balance;
}

.bp-body h2 { font: var(--type-h2); }
.bp-body h3 { font: var(--type-h3); }
.bp-body h4,
.bp-body h5,
.bp-body h6 { font: var(--type-h4); }

.bp-body a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bp-body a:hover { color: var(--text-link-hover); }

.bp-body strong,
.bp-body b { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* Lists need their markers put back, twice over.
 *
 * The design system's base sheet resets `ul,ol{list-style:none}` — right for a marketing
 * page, where every list is a layout — and a body out of the CMS is the one place where a
 * bulleted list means the bullets. They also stay block-level: a flex column spaces the items
 * just as well but suppresses their markers in Chrome. The first pass had both faults, and
 * shipped an indented list with nothing marking it. */
.bp-body ul,
.bp-body ol {
  margin: 0;
  padding-left: 22px;
  list-style: revert;
}

.bp-body li { list-style: inherit; }

.bp-body li + li,
.bp-body ul ul,
.bp-body ol ol,
.bp-body ul ol,
.bp-body ol ul { margin-top: 10px; }

.bp-body li::marker { color: var(--green-600); }

.bp-body dl { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.bp-body dt { font: var(--weight-semibold) var(--text-md)/1.4 var(--font-body); color: var(--text-strong); }
.bp-body dd { margin: 0; }

/* The quote takes the callout's frame — the one bordered, tinted block this page already
   has — rather than a second treatment of the same idea. */
.bp-body blockquote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--green-500);
  border-radius: var(--radius-card);
  background: var(--green-50);
}

.bp-body blockquote p { color: var(--ink-800); font: var(--type-body); }

.bp-body figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }

.bp-body figcaption {
  font: var(--type-body-sm);
  color: var(--text-muted);
  text-align: center;
}

/* Pictures sit in the frame the hero panel uses, so a body image and the panel above it are
   the same object on the page. */
.bp-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
}

.bp-body hr {
  height: 1px;
  margin: var(--space-4) 0;
  border: 0;
  background: var(--border-subtle);
}

/* A wide table scrolls inside its own frame; the page itself never scrolls sideways. */
.bp-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.bp-body th,
.bp-body td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font: var(--type-body);
  text-align: left;
  vertical-align: top;
}

.bp-body th { color: var(--text-strong); font-weight: var(--weight-semibold); background: var(--surface-page-alt); }
.bp-body tr:last-child td { border-bottom: 0; }
.bp-body caption { padding-bottom: 8px; font: var(--type-body-sm); color: var(--text-muted); text-align: left; }

.bp-body pre {
  margin: 0;
  padding: var(--space-5);
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--ink-900);
  color: var(--white);
}

.bp-body code,
.bp-body kbd,
.bp-body samp {
  font: var(--type-mono);
  font-size: 0.92em;
}

.bp-body :not(pre) > code {
  padding: 2px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--surface-page-alt);
  color: var(--text-strong);
}

.bp-body pre code { padding: 0; border: 0; background: none; color: inherit; }

/* The reading-progress bar the artboard fixes to the top of the viewport. Its fill is inline,
   because the runtime sets its width; only the reduced-motion case belongs in a sheet. */
@media (prefers-reduced-motion: reduce) {
  [data-post-progress] > * { transition: none !important; }
}