/* ==========================================================================
   Blog prose — the inside of an article body

   THE ONE PLACE `.blog-rich` IS STYLED. Two pages load this sheet:

     blog_post.php          the published article
     admin/blog_edit.php    the editor, via blog_admin_page()'s $extraCss

   and the editor's contenteditable carries `class="be-rt blog-rich"`, so the
   writing surface is styled by the article's own rules rather than by a copy
   of them. That copy used to exist — admin-blog.css had its own
   `.be-rt p / h2 / h3 / ul / blockquote / a` block — and it had already
   drifted: the editor showed 1.375rem H2s against the article's 1.625rem.

   Only the PROSE rules live here. Figures, galleries, tables, callouts,
   buttons, video and the image+text pair stay in blog-page.css, because in the
   editor those block types are forms, not rendered output — there is nothing
   for their CSS to style. The split is enforced by
   _verify/checks/30-blog-css-source.js, which fails if a `.blog-rich`,
   `.blog-quote` or `.blog-h` selector appears in both sheets.

   BASE TOKENS ONLY, same contract as admin-blog.css. skins/rovblog declares
   "public_only": true, so inc/header.php strips the skin layer inside /admin/
   and a `--rb-*` token here would resolve to nothing on the editor page.

   What that means, and it is worth saying out loud: the editor gets the
   article's typographic rhythm — sizes, margins, line height, list indents —
   and never its skin. Secular One headings and the pink accent come from
   skins/rovblog/css/blog-page.css under `body[data-skin="rovblog"]`, which no
   admin page ever sees. The page that shows those truthfully is
   admin/blog_preview.php, which renders as a public page on purpose.

   Font size and line height are deliberately NOT set on `.blog-rich`. They
   come from `.blog-article-body` in blog-page.css, which the 820px media query
   steps down to 1rem; a direct rule here would beat that inheritance and
   freeze the article at desktop size on a phone. The editor sets its own on
   `.be-rt` instead.
   ========================================================================== */

/* ---- paragraphs, links, lists ------------------------------------------ */

.blog-rich p { margin: 0 0 1.15em; text-wrap: pretty; }
.blog-rich p:last-child { margin-bottom: 0; }
.blog-rich a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.blog-rich a:hover { color: var(--c-primary-hover); }
.blog-rich ul,
.blog-rich ol { margin: 0 0 1.15em; padding-inline-start: 1.4em; }
.blog-rich li { margin-bottom: 0.4em; }

/* A nested list is part of its parent item, not a new paragraph. Without this
   it inherits the 1.15em bottom margin above and opens a gap inside the li. */
.blog-rich li > ul,
.blog-rich li > ol { margin-block: 0.4em 0; }

/* ---- quotes ------------------------------------------------------------ */

/* One rule for both shapes: a blockquote typed inside a rich run and the
   standalone `quote` block type render identically, which is what lets the
   source view move content between them without the page changing. */
.blog-rich blockquote,
.blog-quote {
  margin: 1.6em 0;
  padding: 4px 20px;
  border-inline-start: 3px solid var(--c-primary);
  color: var(--c-text-muted);
  font-size: 1.0625rem;
  font-style: italic;
}
.blog-quote p { margin: 0; }
.blog-quote cite { display: block; margin-top: 8px; font-size: 0.8125rem; font-style: normal; opacity: 0.8; }

/* ---- headings inside a rich run ---------------------------------------- */

/* Sizes match h2/h3/h4.blog-h in blog-page.css, so a heading typed inside a
   paragraph run and a standalone `heading` block look the same. The margins
   differ slightly at h3 and h4, and that is the existing behaviour — the
   heading block is a section break and sits further from what precedes it. */
.blog-rich h2 { font-size: 1.625rem; margin: 1.9em 0 0.55em; line-height: 1.3; }
.blog-rich h3 { font-size: 1.3125rem; margin: 1.7em 0 0.5em; line-height: 1.35; }
.blog-rich h4 { font-size: 1.125rem; margin: 1.5em 0 0.5em; }

/* ---- inline code ------------------------------------------------------- */

/* `code` is in BLOG_INLINE_TAGS but had no rule, so an inline snippet was
   indistinguishable from the sentence around it. This is the inline form only;
   a whole listing is the `code` block type and is styled by .blog-code. */
.blog-rich code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0.12em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  overflow-wrap: anywhere;
}