/* ============================================================
 * Omphalos — prose.css (FSE prose contract)
 * v0.3.0 — Phase 6.5 / 8
 *
 * Long-form typography for a WordPress block (FSE) child theme.
 *
 * Contract: the post/page content container IS the prose surface. There is
 * no `.prose` class requirement — raw HTML, Markdown output, and core text
 * blocks dropped into post content all read as long-form by default. The
 * single surface hook is `.wp-block-post-content`.
 *
 * The lab's standalone base.css (global html/body/* reset) is NOT enqueued:
 * WordPress core + theme.json + the Twenty Twenty-Five parent own the global
 * element baseline. A second global reset would leak into editor chrome,
 * Query Loop cards, navigation, and comment forms. So every rule below is
 * scoped to `.wp-block-post-content`, and the element baselines the lab kept
 * in base.css (inline-code pill, blockquote bar, list padding, table framing,
 * etc.) are absorbed here as scoped rules.
 *
 * Layering: prose.css owns the long-form TEXT baseline. Per-block visual
 * chrome (drop cap, pullquote display type, verse vs code, table style
 * variations) lives in blocks.css, enqueued after this file.
 *
 * Within the surface, both raw tags (h1-h6, blockquote, pre, code, table) and
 * core block wrappers (.wp-block-heading, .wp-block-quote, .wp-block-code,
 * .wp-block-table, .wp-block-list, .wp-block-pullquote) are covered.
 *
 * Token-only: every value resolves to --md-sys-* / --space-* / --md-ref-*.
 * ============================================================ */

/* ============================================================
 * §0 Surface baseline
 *
 * Pin body-large so long-form content reads consistently regardless of
 * the parent block's font-size.
 * ============================================================ */
.wp-block-post-content {
  font-family:    var(--md-sys-typescale-body-large-font);
  font-size:      var(--md-sys-typescale-body-large-size);
  line-height:    var(--md-sys-typescale-body-large-line-height);
  font-weight:    var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ============================================================
 * §1 Headings — long-form rhythm around global M3 heading tokens
 *
 * The level scale itself is owned by theme.json `styles.elements.h1`…`h6`, so
 * it appears in Global Styles / Style Book. This prose layer only adds the
 * long-form surface behaviours around those global tokens.
 * ============================================================ */
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  text-wrap: balance;
}

/* Responsive prose mapping observed on m3.material.io: keep the system type
 * ramp stable, but let long-form text choose denser semantic roles on narrow
 * viewports. The token values remain fixed for Global Styles / Style Book. */
@media (max-width: 600px) {
  .wp-block-post-content {
    font-size:      var(--md-sys-typescale-body-medium-size);
    line-height:    var(--md-sys-typescale-body-medium-line-height);
    font-weight:    var(--md-sys-typescale-body-medium-weight);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  }

  .wp-block-post-content h1 {
    font-size:      var(--md-sys-typescale-headline-medium-size);
    line-height:    var(--md-sys-typescale-headline-medium-line-height);
    font-weight:    var(--md-sys-typescale-headline-medium-weight);
    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  }

  .wp-block-post-content h2 {
    font-size:      var(--md-sys-typescale-headline-small-size);
    line-height:    var(--md-sys-typescale-headline-small-line-height);
    font-weight:    var(--md-sys-typescale-headline-small-weight);
    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  }
}

/* Heading content margins — asymmetric vertical rhythm.
 * Scoped to raw headings; core heading blocks get spacing from blockGap. */
.wp-block-post-content > :is(h1, h2) {
  margin-block: var(--space-xl) var(--space-md);
}
.wp-block-post-content > h3 {
  margin-block: var(--space-lg) var(--space-sm);
}
.wp-block-post-content > h4 {
  margin-block: var(--space-md) var(--space-sm);
}
.wp-block-post-content > :is(h5, h6) {
  margin-block: var(--space-md) var(--space-xs);
}
.wp-block-post-content > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

/* ============================================================
 * §2 Vertical rhythm (raw HTML subtree only)
 *
 * Raw HTML in a Custom HTML block flows as a single subtree, so the
 * lobotomized-owl handles spacing. Core blocks are spaced by theme.json
 * blockGap, so the owl targets direct children that are bare tags; core
 * block wrappers (.wp-block-*) are excluded so blockGap stays in charge.
 * ============================================================ */
.wp-block-post-content > :not([class*="wp-block"]) + :not([class*="wp-block"]) {
  margin-block-start: var(--space-md);
}
.wp-block-post-content > p + p {
  margin-block-start: 1.25em;
}
.wp-block-post-content p {
  margin-block: 0;
}
.wp-block-post-content > :is(blockquote, pre, ol, ul, hr, table, figure):not([class*="wp-block"]) {
  margin-block: var(--space-md);
}

/* ============================================================
 * §3 Lists
 * ============================================================ */
.wp-block-post-content :is(ul, ol) {
  padding-inline-start: var(--space-xl);
}
.wp-block-post-content li::marker {
  color: var(--md-sys-color-on-surface-variant);
}
.wp-block-post-content li + li {
  margin-block-start: var(--space-xs);
}
.wp-block-post-content li > :is(ul, ol) {
  margin-block: var(--space-xs);
}
/* Markdown task lists: <li><input type="checkbox"> ... */
.wp-block-post-content li:has(> input[type="checkbox"]:first-child) {
  list-style: none;
}
.wp-block-post-content li > input[type="checkbox"]:first-child {
  margin-inline-end: var(--space-xs);
  vertical-align: -2px;
  /* Keep the native checkbox — a Markdown task list is document content, not
   * an interactive form control, so the .ax-checkbox component contract (with
   * its own visual/label spans, state layer, focus ring) does not apply here.
   * Just tint the native control to the theme primary. */
  accent-color: var(--md-sys-color-primary);
}
/* Definition lists */
.wp-block-post-content dt { font-weight: var(--md-ref-typeface-weight-medium); }
.wp-block-post-content dd {
  margin-inline-start: var(--space-lg);
  color: var(--md-sys-color-on-surface-variant);
}
.wp-block-post-content dd + dt { margin-block-start: var(--space-md); }

/* ============================================================
 * §4 Blockquote — bar thickness + primary bump (raw + core)
 * ============================================================ */
.wp-block-post-content :is(blockquote, .wp-block-quote) {
  margin-inline: 0;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-lg);
  border-inline-start: 4px solid var(--md-sys-color-primary);
  color: var(--md-sys-color-on-surface);
}
.wp-block-post-content :is(blockquote, .wp-block-quote) > p {
  color: inherit;
}
.wp-block-post-content :is(blockquote, .wp-block-quote) cite {
  display: block;
  margin-block-start: var(--space-sm);
  font-style: normal;
  color: var(--md-sys-color-on-surface-variant);
  font-size:      var(--md-sys-typescale-body-small-size);
  line-height:    var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.wp-block-post-content blockquote cite::before { content: "— "; }

/* core/pullquote — distinct centered emphasis */
.wp-block-post-content .wp-block-pullquote {
  margin-block: var(--space-xl);
  padding-block: var(--space-lg);
  border-block: 1px solid var(--md-sys-color-outline-variant);
  text-align: center;
  color: var(--md-sys-color-on-surface);
}

/* ============================================================
 * §5 HR / separator
 * ============================================================ */
.wp-block-post-content > hr:not([class*="wp-block"]) {
  border: 0;
  block-size: 1px;
  background-color: var(--md-sys-color-outline-variant);
  margin-block: var(--space-xl);
  color: transparent;
}

/* ============================================================
 * §6 Code — inline pill + block bump
 *
 * Both the block surface and any internal scroll container get the
 * theme thin-scrollbar contract (§12).
 * ============================================================ */
.wp-block-post-content code {
  font-family:    var(--md-ref-typeface-mono);
  font-size:      var(--md-sys-typescale-body-medium-size);
  padding-inline: 0.3em;
  padding-block:  0.15em;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.wp-block-post-content :is(pre, .wp-block-code) {
  display: block;
  overflow-x: auto;
  padding: var(--space-lg);
  border-radius: var(--md-sys-shape-corner-small);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  tab-size: 2;
  font-family: var(--md-ref-typeface-mono);
}
/* <code> inside <pre>/code block is decorative — strip the pill. */
.wp-block-post-content :is(pre, .wp-block-code) code {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  font-size: inherit;
}
.wp-block-post-content kbd {
  padding-inline: 0.4em;
  padding-block:  0.1em;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow: inset 0 -1px 0 0 var(--md-sys-color-outline-variant);
  font-family: var(--md-ref-typeface-mono);
  font-size: 0.875em;
}

/* ============================================================
 * §7 Inline rich text — mark / del / s / ins / abbr / strong
 * ============================================================ */
.wp-block-post-content mark {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  padding-inline: 0.2em;
  border-radius: var(--md-sys-shape-corner-extra-small);
}
.wp-block-post-content :is(del, s) {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--md-sys-color-on-surface-variant);
}
.wp-block-post-content ins {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--md-sys-color-primary);
}
.wp-block-post-content abbr[title] {
  text-decoration: underline dotted;
  text-decoration-skip-ink: auto;
  text-underline-offset: 2px;
  cursor: help;
}
.wp-block-post-content :is(strong, b) {
  font-weight: var(--md-ref-typeface-weight-medium);
}

/* ============================================================
 * §8 Images & figures
 * ============================================================ */
.wp-block-post-content figure:not([class*="wp-block"]) {
  margin: 0;
}
.wp-block-post-content :is(img, .wp-block-image img) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--md-sys-shape-corner-medium);
}
.wp-block-post-content figure img { inline-size: 100%; }
.wp-block-post-content figcaption {
  margin-block-start: var(--space-sm);
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  font-size:      var(--md-sys-typescale-body-small-size);
  line-height:    var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

/* ============================================================
 * §9 Links — always-underline in prose (a11y; WCAG 1.4.1)
 *
 * Excludes `.wp-element-button`: a core/button (and file-download) link is a
 * button SURFACE, not a prose link — it must not inherit the prose link colour
 * or underline (that would beat the global button base on specificity, since
 * `.wp-block-post-content a` (0,1,1) > `.wp-element-button` (0,1,0)). blocks.css
 * §9 owns those surfaces.
 * ============================================================ */
.wp-block-post-content a:not(.wp-element-button) {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.wp-block-post-content a:not(.wp-element-button):hover {
  text-decoration-thickness: 2px;
}

/* ============================================================
 * §10 Tables — full styling (raw + core)
 *
 * No wrapper div. A raw <figure><table>…</figure> or a core/table
 * <figure class="wp-block-table"><table>…</figure> is styled directly.
 * The table element itself becomes the horizontal scroll container so a
 * sibling <figcaption> stays outside the scroll region; figcaption +
 * tfoot ride the normal vertical rhythm.
 * ============================================================ */
.wp-block-post-content table {
  /* Normal table layout — do NOT use display:block here. display:block breaks
   * the table sizing algorithm so cells compress to fit the container instead
   * of the table establishing its own intrinsic width. Horizontal overflow of
   * wide tables is left to Phase 8 (a wrapper / render_block decision); the
   * priority is correct cell sizing. */
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size:   var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}
.wp-block-post-content :is(th, td) {
  text-align: start;
  vertical-align: top;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
}
.wp-block-post-content tr > :is(th, td):last-child {
  border-inline-end: 0;
}
.wp-block-post-content tbody tr:last-child > :is(th, td) {
  border-block-end: 0;
}
.wp-block-post-content th {
  font-weight: var(--md-ref-typeface-weight-medium);
  background-color: var(--md-sys-color-surface-container-high);
}
.wp-block-post-content thead :is(th, td) {
  border-block-end: 1px solid var(--md-sys-color-outline);
}
/* Round the header band's outer corners to the table frame. With
 * border-collapse: separate the header cell background is a square that would
 * otherwise poke outside the rounded table border (visible top corners). Match
 * the inner radius (frame radius minus the 1px border). */
.wp-block-post-content thead tr:first-child > :is(th, td):first-child {
  border-start-start-radius: calc(var(--md-sys-shape-corner-small) - 1px);
}
.wp-block-post-content thead tr:first-child > :is(th, td):last-child {
  border-start-end-radius: calc(var(--md-sys-shape-corner-small) - 1px);
}
/* tfoot — header-symmetric top separator, no bottom border on last row. */
.wp-block-post-content tfoot tr:first-child > :is(th, td) {
  border-block-start: 1px solid var(--md-sys-color-outline);
}
.wp-block-post-content tfoot tr:last-child > :is(th, td) {
  border-block-end: 0;
}
.wp-block-post-content caption {
  caption-side: bottom;
  margin-block-start: var(--space-sm);
  text-align: start;
  color: var(--md-sys-color-on-surface-variant);
  font-size:      var(--md-sys-typescale-body-small-size);
  line-height:    var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

/* ============================================================
 * §11 Icon font scope policy (Material Symbols)
 *
 * The explicit `.material-symbols-outlined` utility (icons.css) is intentional
 * chrome and renders everywhere, INCLUDING post content — e.g. a theme-control
 * block placed on a page — and it degrades to its ligature text when CSS/font is
 * stripped (federation / reader safe). What we still guard against is the icon
 * FONT being applied to ordinary prose via the editor font picker (the
 * `has-…-font-family` preset), which would turn body words into glyphs. So revert
 * any material-symbols class in prose EXCEPT the explicit utility.
 * ============================================================ */
.wp-block-post-content [class*="material-symbols"]:not(.material-symbols-outlined) {
  font-family: inherit !important;
  font-variation-settings: normal !important;
  font-feature-settings: normal !important;
  letter-spacing: normal !important;
}

/* ============================================================
 * §12 Internal scroll containers — thin themed scrollbar
 *
 * The page (document) scrollbar stays the browser/OS default — an
 * accessibility surface we don't restyle. But IN-PAGE scroll containers
 * (code blocks) get a quiet, thin, theme-coloured
 * scrollbar so they read as part of the design, matching the styleguide
 * aside rail.
 * ============================================================ */
.wp-block-post-content :is(pre, .wp-block-code) {
  scrollbar-width: thin;
  /* The thumb is a subtle "scrollable here" affordance, not a strong boundary,
   * so it uses the weaker outline-variant (the divider/subtle-boundary token)
   * at rest and bumps to outline on hover — matching the styleguide aside rail
   * and M3's outline vs outline-variant distinction. */
  scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}
.wp-block-post-content :is(pre, .wp-block-code)::-webkit-scrollbar {
  block-size: 8px;
  inline-size: 8px;
}
.wp-block-post-content :is(pre, .wp-block-code)::-webkit-scrollbar-track {
  background: transparent;
}
.wp-block-post-content :is(pre, .wp-block-code)::-webkit-scrollbar-thumb {
  background-color: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
}
.wp-block-post-content :is(pre, .wp-block-code)::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-sys-color-outline);
}