/*
 * Lesson content spacing — enqueued on single lesson pages only (functions.php).
 *
 * Lessons were authored in the classic editor, which spaced sections with empty paragraphs
 * (<p>&nbsp;</p>) — 1,415 of them across courses 13 / 777 / 1678, doubled and trailing in places.
 * Those were removed on 2026-09-26 (AUDIT.md §38.9). Section titles in lesson HTML are bold
 * paragraphs rather than headings, so they get no heading margin of their own; but a new section
 * always starts after a block (an image, an audio block, a video or a code sample).
 *
 * Tutor's learning area already gives every lesson paragraph 24px below
 * (tutor-learning-area.min.css: `.tutor-lesson-content .tutor-lesson-wrapper p:not(:last-child)`).
 * These rules use the SAME prefix so they win on specificity, and give the blocks that end a
 * section 40px instead — so the next section title visibly starts a new section.
 */

/* Narrated audio blocks, videos, code samples. */
.tutor-lesson-content .tutor-lesson-wrapper .inline-audio,
.tutor-lesson-content .tutor-lesson-wrapper .wp-video,
.tutor-lesson-content .tutor-lesson-wrapper pre {
	margin-bottom: 40px;
}

/* A paragraph whose content is an image (images are wrapped in <p> by the editor).
   Kept in its own rule: a browser without :has() drops only this block, not the one above.
   `:not(:last-child)` is load-bearing, not decoration: Tutor's paragraph rule is
   `… p:not(:last-child)` = specificity (0,3,1), while `… p:has(> img)` alone is only (0,2,2)
   (`:has(> img)` counts as an element), so without it Tutor's 24px silently wins for images. */
.tutor-lesson-content .tutor-lesson-wrapper p:has(> img):not(:last-child),
.tutor-lesson-content .tutor-lesson-wrapper p:has(> a > img):not(:last-child) {
	margin-bottom: 40px;
}

/* Fallback for browsers without :has(): extra room under the image itself. */
@supports not selector(p:has(> img)) {
	.tutor-lesson-content .tutor-lesson-wrapper p img {
		margin-bottom: 16px;
	}
}

/*
 * Narrated audio blocks: top of the 44px play button flush with the top of the text.
 * The button + text layout lives in Customizer → Additional CSS (`.inline-audio { display:
 * inline-flex; gap: 10px }`, 44×44px `.mejs-container`) but sets no vertical alignment.
 * Top-align the flex row, then lift the first paragraph by the half-leading above its capital
 * letters — (1cap − 1lh) / 2 — so the circle's top meets the top of the LETTERS rather than the
 * invisible line box a few px above them. (Centring on the first line was tried and rejected.)
 */
.tutor-lesson-content .tutor-lesson-wrapper .inline-audio {
	align-items: flex-start;
}
.tutor-lesson-content .tutor-lesson-wrapper .inline-audio > p:first-of-type {
	margin-top: 0; /* fallback for browsers without the cap/lh units: line boxes flush */
	margin-top: calc((1cap - 1lh) / 2);
	margin-bottom: 0;
}

/*
 * Headings → their content. Tutor gives lesson headings only 8px below
 * (`.tutor-lesson-content .tutor-lesson-wrapper h1…h5:not(:last-child) { margin-bottom: 8px }`),
 * which the removed blank paragraph used to pad out. 20px keeps a heading slightly closer to its
 * own content than paragraphs are to each other (24px). The doubled `.tutor-lesson-wrapper`
 * makes this strictly more specific than Tutor's rule, whatever the stylesheet load order.
 */
.tutor-lesson-content .tutor-lesson-wrapper.tutor-lesson-wrapper :is(h1, h2, h3, h4, h5, h6):not(:last-child) {
	margin-bottom: 20px;
}

/*
 * Lists pasted from other editors arrive wrapped in empty levels:
 *   <ol><li style="list-style-type: none"><ol><li style="list-style-type: none"><ol start="1">…
 * Each wrapper level adds its own indent (78 of the 152 lessons in 13/777/1678 have them), so the
 * real list sat far to the right. The OUTERMOST wrapper keeps its normal indent (the list sits one
 * step in, under the text that introduces it); only the intermediate wrapper levels — a wrapper
 * list that is itself inside a wrapper item — collapse. Result: one extra indent whether a list had
 * one wrapper level or two. `:only-child` keeps genuine sub-lists, and lists with a stray spacer
 * item among real items, untouched.
 */
.tutor-lesson-content .tutor-lesson-wrapper li[style*="list-style-type: none"]:only-child > :is(ol, ul):has(> li[style*="list-style-type: none"]:only-child) {
	padding-left: 0;
	margin-left: 0;
}
.tutor-lesson-content .tutor-lesson-wrapper li[style*="list-style-type: none"]:only-child {
	margin-left: 0;
	padding-left: 0;
}

/* An audio block that introduces a list ("Here's how the code works:") stays close to it. */
.tutor-lesson-content .tutor-lesson-wrapper .inline-audio:has(+ ol),
.tutor-lesson-content .tutor-lesson-wrapper .inline-audio:has(+ ul) {
	margin-bottom: 16px;
}

/* A top-level list ends a section like an image or audio block does: 40px below (Tutor gives lists
   24px). Only direct children of the lesson body; lists nested inside list items are untouched.
   Doubled wrapper class = strictly more specific than Tutor's `… ol:not(:last-child)` rule. */
.tutor-lesson-content .tutor-lesson-wrapper.tutor-lesson-wrapper > :is(ol, ul):not(:last-child) {
	margin-bottom: 40px;
}

/* A heading straight after an audio block. `.inline-audio` is inline-flex (Customizer CSS), so its
   40px bottom margin does NOT collapse with the heading's 2em (48px) top margin
   (`.tutor-lesson-content h3 { margin-top: 2em }`, also Customizer) — the two added up to 88px in
   ~30 lessons, often where the heading holds the section image. Drop the heading's top margin so
   the section break is the same 40px as after an image or code block. */
.tutor-lesson-content .tutor-lesson-wrapper.tutor-lesson-wrapper > .inline-audio + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
}