/* ============================================================
   Article body (single-ldm_article.php, .article-body) - the prose of
   a Knowledge Hub article as the block editor writes it: paragraphs
   (and the "Lead" style), H2 / H3 / H4, lists (nested too), photos
   with captions, video, embeds (Vimeo, YouTube), quotes, centred
   lines, tables and separators. Measured on "Knowledge hub - article
   page v1" (desktop 1440, mobile 402; the body is Sam's real post):
   - Lead (is-style-lead): Poppins SemiBold --fs-intro (18 phones, 20
     desktop) / 1.5, navy. Text: Regular 16/24 navy.
   - Note (is-style-note, course resources 2026-11-02): not designed, a
     Cream box with a 3px Light Orange left edge.
   - H2: Koulen --fs-h3 (30 phones, 36 desktop), line-height 1.2 / 1.25;
     its caps 39 / 43 under the line before, the next baseline 47.8 / 48
     under its own: 26 / 28 above, 22 / 20 below (margins collapse with
     the neighbours' own). Runs of figures in Poppins SemiBold
     (.article-body__figures, inc/article-page.php: Koulen draws "1"
     as "I", QH24).
   - Paragraphs: drawn with no space between them (Wix's pasted lines);
     16px between them here. Lists: 8px above, a 4px navy disc 14px
     before the text, text 24px in, no space between items. Empty
     paragraphs (pasted posts) are hidden.
   - Prose at most 50rem (--article-measure; the drawn boxes run 794-851
     in the 866 column); photos, video and embeds take the column, never
     cropped, radius 20, 48-56px above and below (--article-figure-gap),
     captions 14/21 centred 12px under them.
   - Links: navy, underlined 1px; deep orange on hover and focus (4.89:1
     on White, --color-link-hover-on-light).
   - Not designed (proposals): H3 Koulen 24, H4 Poppins SemiBold 18;
     quotes with a 3px Light Orange rule; tables ruled in Border Warm with
     a Grey Faint header, scrolling sideways when wide; a separator 1px
     Grey Light.
   - The editor shows these styles too (inc/article-page.php reads this
     file and puts the editor's wrapper in place of .article-body): keep
     every rule under .article-body, without child combinators from it
     (the editor nests the blocks deeper) and without url()s.
   ============================================================ */

.article-body {
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	overflow-wrap: break-word;
}

/* The reading measure for the prose (figures take the whole column). */
.article-body :where(p, ul, ol, h2, h3, h4, blockquote, hr) {
	max-width: var(--article-measure);
}

.article-body :where(p, ul, ol, h2, h3, h4, blockquote, figure, hr):first-child {
	margin-top: 0;
}

.article-body :where(p, ul, ol, h2, h3, h4, blockquote, figure, hr):last-child {
	margin-bottom: 0;
}

/* ---------- Paragraphs and the lead ---------- */

.article-body p {
	margin: 16px 0 0;
}

.article-body p:empty {
	display: none;
}

/* A Note (is-style-note; course resources' boxes: "Before you pack", "Open
   the map"). Not designed: a Cream box with a Light Orange left edge. In
   Windows High Contrast the edge and box outline follow the system colours. */
.article-body .is-style-note {
	margin: 24px 0;
	padding: 16px 20px;
	border: var(--border-hairline) solid transparent;
	border-left: var(--article-note-edge-w) solid var(--article-note-edge);
	border-radius: var(--radius-sm);
	background-color: var(--article-note-bg);
}

.article-body .is-style-lead {
	color: var(--color-heading);
	font-size: var(--fs-intro);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
}

/* Centred lines (Sam's poem on Pillar Rock): the measure box centres too. */
.article-body .has-text-align-center {
	margin-inline: auto;
	text-align: center;
}

.article-body .has-text-align-right {
	text-align: right;
}

/* ---------- Headings ---------- */

.article-body h2,
.article-body h3 {
	color: var(--color-heading);
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-synthesis: none;
	text-transform: uppercase;
	text-wrap: balance;
}

.article-body h2 {
	margin: 26px 0 22px;
	font-size: var(--fs-h3);
	line-height: 1.2;
}

.article-body h3 {
	margin: 24px 0 14px;
	font-size: var(--fs-card-title-lg);
	line-height: 1.25;
}

.article-body h4 {
	margin: 20px 0 8px;
	color: var(--color-heading);
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
}

/* Figures in a Koulen heading, set in Poppins SemiBold at the heading's
   size and colour: Poppins' figures stand about as tall as Koulen's caps;
   line-height 1 keeps the taller Poppins line box from growing the line. */
.article-body__figures {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

/* A jump from "On This Page" lands 24px under the window's top edge, or
   under the floating header while it shows (it comes back as the page
   scrolls up to an earlier section: assets/js/article.js follows the
   change; scrolling down to a later one, it goes away). The WordPress
   toolbar is the root's scroll padding. */
.article-body h2[id] {
	scroll-margin-top: 24px;
}

html:has(.site-header.is-floating) .article-body h2[id] {
	scroll-margin-top: calc(var(--header-bar-h) + 24px);
}

@media (min-width: 1024px) {
	.article-body h2 {
		margin: 28px 0 20px;
		line-height: 1.25;
	}
}

/* ---------- Lists ---------- */

.article-body ul,
.article-body ol {
	margin: 8px 0 0;
	padding: 0 0 0 24px;
}

.article-body ul {
	list-style: none;
}

.article-body ol {
	list-style: decimal;
}

.article-body li {
	position: relative;
}

/* The drawn disc: 4px, navy, centred on the first line, 10px from the
   text's edge (x 92 to 106 at 1440). */
.article-body ul > li::before {
	content: "";
	position: absolute;
	top: calc(var(--lh-body) * 0.5em - 2px);
	left: -14px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: currentColor;
}

/* A list in a list: a ring for the inner discs, a little space round it. */
.article-body li ul,
.article-body li ol {
	margin: 4px 0 8px;
}

.article-body li ul > li::before {
	border: var(--border-hairline) solid currentColor;
	background-color: transparent;
}

.article-body ol > li::marker {
	font-weight: var(--fw-semibold);
}

.article-body li p {
	margin-top: 8px;
}

.article-body li > p:first-child {
	margin-top: 0;
}

/* ---------- Links and emphasis ---------- */

.article-body a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--transition);
}

.article-body a:hover,
.article-body a:focus-visible {
	color: var(--color-link-hover-on-light);
}

.article-body a:focus-visible {
	outline-color: var(--color-focus-light);
}

.article-body strong {
	font-weight: var(--fw-bold);
}

/* ---------- Photos, video, embeds ---------- */

.article-body figure {
	margin: var(--article-figure-gap) 0;
}

/* The photo's own shape, never cropped, never upscaled (a narrow photo is
   centred in the column), corners 20. */
.article-body .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--radius-lg);
}

.article-body .wp-block-image.alignleft img,
.article-body .wp-block-image.alignright img {
	margin-inline: 0;
}

/* A photo at its own width (the Wix widths: Our story's portrait, the
   boots and crampons) is centred on the text, which stops at the reading
   measure, rather than on the wider column. */
.article-body .wp-block-image.is-resized {
	max-width: var(--article-measure);
}

.article-body figcaption,
.article-body .wp-element-caption {
	max-width: var(--article-measure);
	margin: 12px auto 0;
	color: var(--color-text);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	text-align: center;
}

.article-body .wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	background-color: var(--color-surface-dark);
}

/* A Vimeo or YouTube player: the column's width at its own shape, all four
   corners 20. The shape is --embed-ratio, set on the player from its width
   and height when the article is shown, else 16:9. A player core shapes by
   its ratio classes (.wp-has-aspect-ratio: a padded box with the player
   laid over it, which the editor adds to a 16:9 or 4:3 video) keeps core's
   box; the editor's preview (.components-sandbox) keeps the editor's
   sizing. */
.article-body .wp-block-embed__wrapper {
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.article-body .wp-block-embed iframe {
	display: block;
	max-width: 100%;
	border: 0;
	border-radius: var(--radius-lg);
}

.article-body .wp-block-embed:not(.wp-has-aspect-ratio) iframe:not(.components-sandbox) {
	width: 100%;
	height: auto;
	aspect-ratio: var(--embed-ratio, 16 / 9);
}

/* ---------- Quotes ---------- */

.article-body blockquote {
	margin: 32px 0;
	padding: 0 0 0 24px;
	border-left: var(--border-accent) solid var(--article-quote-rule);
	color: var(--color-heading);
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
}

.article-body blockquote p {
	margin-top: 12px;
}

.article-body blockquote p:first-child {
	margin-top: 0;
}

.article-body blockquote cite {
	display: block;
	margin-top: 12px;
	color: var(--color-text);
	font-size: var(--fs-small);
	font-style: normal;
	font-weight: var(--fw-regular);
}

/* ---------- Tables ---------- */

.article-body .wp-block-table {
	overflow-x: auto;
}

.article-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.article-body th,
.article-body td {
	padding: 10px 12px;
	border: var(--border-hairline) solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.article-body thead th {
	background-color: var(--article-table-head-bg);
	font-weight: var(--fw-semibold);
}

/* Core's 3px rules under the header and over the footer row: one 2px
   navy rule here. */
.article-body .wp-block-table thead {
	border-bottom: 2px solid var(--color-heading);
}

.article-body .wp-block-table tfoot {
	border-top: 2px solid var(--color-heading);
}

/* A table's caption starts at its left edge. */
.article-body .wp-block-table figcaption {
	max-width: none;
	margin-inline: 0;
	text-align: left;
}

/* ---------- Separator ---------- */

.article-body hr,
.article-body .wp-block-separator {
	margin: 40px 0;
	border: 0;
	border-top: var(--border-hairline) solid var(--color-divider);
	opacity: 1;
}

/* Windows High Contrast: the separator and the list discs are drawn as
   borders and backgrounds; keep them in the text colour. */
@media (forced-colors: active) {
	.article-body ul > li::before {
		background-color: var(--color-forced-line);
		forced-color-adjust: none;
	}

	.article-body li ul > li::before {
		border-color: var(--color-forced-line);
		background-color: transparent;
	}
}