/* ─────────────────────────────────────────────────────────
   Article spacing + heading scale — DRAFT, fully reversible.

   Scoped under body.ld-post-refresh, added only when
   LIONDIGITAL_2026_POST_REFRESH is true (functions.php). Set that to false
   and this file stops loading and the class stops printing — articles revert
   exactly, no other file touched.

   Deliberately narrow: this changes VERTICAL SPACING and HEADING SIZES only.
   It does not touch line length, alignment, text colour, heading colours,
   the red accent, the byline, or anything authored in post content — the
   constrained measure and centring from the first draft are gone, since
   those were the parts that read wrong.
   ───────────────────────────────────────────────────────── */

body.ld-post-refresh .spt-content {
	--post-rhythm: 1em;   /* space after a paragraph */
	line-height: 1.5;     /* was 1.75 — 29.75px leading on 17px text */
}

/* ── 1. Paragraph spacing ──────────────────────────────
   `.spt-content p { margin: 0 }` meant consecutive paragraphs rendered with
   a 0px gap, so body copy ran together as one block. Longhands only — the
   `margin` shorthand would also reset left/right and shift the text. */
body.ld-post-refresh .spt-content p,
body.ld-post-refresh .spt-content .wp-block-paragraph {
	margin-top: 0;
	margin-bottom: var(--post-rhythm);
}
body.ld-post-refresh .spt-content > :last-child { margin-bottom: 0; }
body.ld-post-refresh .spt-content > :first-child { margin-top: 0; }

/* ── 2. Heading scale ──────────────────────────────────
   Was 41.6 / 30.4 / 22.4 against 17px body — the h2 sat 2.4x the body text
   and swamped the page. This steps down more evenly (~1.3x per level) so the
   levels stay distinguishable without the h2 dominating. */
body.ld-post-refresh .spt-content h2,
body.ld-post-refresh .spt-content h2.wp-block-heading {
	font-size: clamp(1.6rem, 2.6vw, 2rem);      /* ~32px */
	line-height: 1.2;
}
body.ld-post-refresh .spt-content h3,
body.ld-post-refresh .spt-content h3.wp-block-heading {
	font-size: clamp(1.3rem, 2vw, 1.5rem);      /* ~24px */
	line-height: 1.28;
}
body.ld-post-refresh .spt-content h4,
body.ld-post-refresh .spt-content h4.wp-block-heading {
	font-size: clamp(1.1rem, 1.6vw, 1.2rem);    /* ~19px */
	line-height: 1.35;
}

/* ── 3. Spacing around headings ────────────────────────
   The old margins were tuned against zero paragraph spacing (91px above an
   h2 next to a 0px paragraph gap). With real rhythm restored they come down,
   and the space above a heading clearly exceeds the space below it so each
   heading groups with the text it introduces rather than floating between. */
body.ld-post-refresh .spt-content h2,
body.ld-post-refresh .spt-content h2.wp-block-heading {
	margin-top: 1.9em;
	margin-bottom: 0.55em;
}
body.ld-post-refresh .spt-content h3,
body.ld-post-refresh .spt-content h3.wp-block-heading {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}
body.ld-post-refresh .spt-content h4,
body.ld-post-refresh .spt-content h4.wp-block-heading {
	margin-top: 1.7em;
	margin-bottom: 0.45em;
}
/* Stacked headings shouldn't take the full gap between them. */
body.ld-post-refresh .spt-content h2 + h3,
body.ld-post-refresh .spt-content h3 + h4 { margin-top: 0.6em; }

/* ── 4. Lists ──────────────────────────────────────── */
body.ld-post-refresh .spt-content ul,
body.ld-post-refresh .spt-content ol {
	margin-top: 0;
	margin-bottom: var(--post-rhythm);
}
body.ld-post-refresh .spt-content li + li { margin-top: 7px; }

/* ── 5. Figures, images, tables ───────────────────────
   These sat in the same flow with no breathing room of their own. */
body.ld-post-refresh .spt-content figure,
body.ld-post-refresh .spt-content .wp-block-image,
body.ld-post-refresh .spt-content .wp-block-table,
body.ld-post-refresh .spt-content .wp-block-embed {
	margin-top: 2em;
	margin-bottom: 2em;
}

/* ── Narrow screens ───────────────────────────────────── */
@media (max-width: 780px) {
	body.ld-post-refresh .spt-content { --post-rhythm: 0.95em; }
	body.ld-post-refresh .spt-content h2,
	body.ld-post-refresh .spt-content h2.wp-block-heading { margin-top: 1.6em; }
}

/* ── 6. Bold lead-in paragraphs ────────────────────────
   Several posts use a bold-only paragraph ("The Challenge:", "Our Solution")
   as a de-facto fourth heading level. They took the same margin-bottom as any
   paragraph, so they floated equally between the block above and the block
   they introduce. Spacing only — size, weight and colour are untouched. */
body.ld-post-refresh .spt-content p:has(> strong:only-child) {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}
body.ld-post-refresh .spt-content > :first-child:has(> strong:only-child) { margin-top: 0; }
/* A heading immediately followed by one of these shouldn't double up. */
body.ld-post-refresh .spt-content h2 + p:has(> strong:only-child),
body.ld-post-refresh .spt-content h3 + p:has(> strong:only-child),
body.ld-post-refresh .spt-content h4 + p:has(> strong:only-child) { margin-top: 0; }