/* content block — pull-out furniture (.pull-out-content / .pullout).
   Phase 3 Stage 4. WYSIWYG body copy inherits typography.css. */

.pull-out-content .columns { margin-bottom: var(--gap-grid); }
/* h2 inherited the global heading size (up to 3rem), reading almost as large as
   the page h1. Pull it down here — h2 is still the right document level for these
   section headings, just not display-scale. Content block only; other blocks keep
   the global size. */
.pull-out-content h2 { font-size: clamp(2rem, 4vw, 2.2rem); }
.pull-out-content h3 { margin-bottom: .8rem; }
.pull-out-content h4 { margin-bottom: .6rem; }
.pull-out-content p { margin-bottom: 1rem; }
.pull-out-content p:last-child { margin-bottom: 0; }
/* bg-mid-grey (#cacaca) is a mid-tone ground, not a light one: --muted on it
   measures 4.34:1 against a 4.5 requirement. Excluded from the muted-copy chain
   so body copy there keeps full-strength --text. */
.pull-out-content:not(.bg-blue):not(.bg-dark-blue):not(.bg-black):not(.bg-red):not(.bg-magenta):not(.bg-dark):not(.bg-dc-dark-blue):not(.bg-dc-blue):not(.bg-mid-blue):not(.bg-dark-grey):not(.bg-mid-grey) p { color: var(--muted); }
/* Lists. This is the one block that renders editor HTML, so a bullet can and
   does contain inline markup — links, <strong>, <sup>.

   The li used to be `display: flex` with the marker as its first flex item.
   That makes every inline element in the bullet a SIBLING COLUMN, and wraps each
   run of text between them in an anonymous flex item of its own: a bullet
   reading "text <a>link</a> text" laid out as three narrow ragged columns side
   by side. Any bullet without inline markup looked fine, which is what made it
   survive this long.

   The marker is now positioned out of the flow instead, so the li is an ordinary
   block, inline markup stays inline, and wrapped lines still align past it. */
.pull-out-content :is(ul, ol) { margin: 1rem 0; }
.pull-out-content :is(ul, ol) li { position: relative; padding-left: 1.7rem; color: var(--muted); line-height: 1.6; }
.pull-out-content.bg-mid-grey :is(ul, ol) li { color: var(--text); }
.pull-out-content :is(ul, ol) li + li { margin-top: .7rem; }
/* Vertically centred in the FIRST line box: (line-height - marker) / 2. Reading
   off the line box rather than a fixed margin keeps it aligned when the copy
   wraps and when the brand's base size differs. */
.pull-out-content ul li::before {
  content: ""; position: absolute; left: 0; top: calc((1.6em - 10px) / 2);
  width: 10px; height: 10px; background: var(--accent);
}
/* typography.css strips list-style from every ul AND ol, so an ordered list
   pasted into the editor rendered as unnumbered lines. Numbers are put back by
   counter, styled to match the bullet rather than the UA default. */
.pull-out-content ol { counter-reset: pull-out-ol; }
.pull-out-content ol > li { counter-increment: pull-out-ol; }
.pull-out-content ol > li::before {
  content: counter(pull-out-ol) "."; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums;
}
.pull-out-content:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(ul, ol) li { color: rgba(var(--on-dark-rgb), .86); }
.pull-out-content:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) ul li::before { background: var(--accent-on-dark); }
.pull-out-content:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) ol > li::before { color: var(--accent-on-dark); }

.pullout { padding: 1.6rem 1.8rem; border-left: 6px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--light); }
.pullout h4 { color: var(--text-heading); }
.pullout p { color: var(--muted); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .pullout { background: rgba(var(--on-dark-rgb), .08); border-left-color: var(--accent-on-dark); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .pullout h4 { color: var(--white); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .pullout p { color: rgba(var(--on-dark-rgb), .82); }