/*
 * Text from the WordPress editor (h2/h3, paragraphs, lists, bold, links, quotes): the traject and article page bodies
 * (.prose, parts/dienst-intro.php + artikel-body.php), the open Info card (.prose--compact, parts/info-card.php) and
 * .entry-content (index.php: pages without their own template, e.g. privacy and complaints). The font size comes from
 * the container (18/28 page bodies, 14 in the card); everything else is the theme's tokens:
 * h2 = text-2xl bold (24/32, one step under the section heads), h3 = text-xl semibold (20/28, the card-title scale);
 * compact: h2 = text-base, h3 = text-sm. Lists: the site's orange as marker colour. Links: the body-link style of the
 * item pages (orange, underlined). Quote: the "Voor wie?" box (gray-50, radius 12), no side stripe.
 */
.prose > * + *,
.entry-content > * + * { margin-top: calc(var(--spacing) * 4); }

.prose h2,
.entry-content h2 {
	margin-top: calc(var(--spacing) * 10);
	font-size: var(--text-2xl);
	line-height: var(--text-2xl-lh);
	font-weight: var(--font-weight-bold);
	color: var(--color-brand-dark);
}
.prose h3,
.entry-content h3 {
	margin-top: calc(var(--spacing) * 8);
	font-size: var(--text-xl);
	line-height: var(--text-xl-lh);
	font-weight: var(--font-weight-semibold);
	color: var(--color-brand-dark);
}
/* The text under a heading belongs to it: closer below than above. */
.prose :is(h2, h3) + *,
.entry-content :is(h2, h3) + * { margin-top: calc(var(--spacing) * 3); }
.prose > :first-child,
.entry-content > :first-child { margin-top: 0; }

.prose :is(ul, ol),
.entry-content :is(ul, ol) { padding-inline-start: calc(var(--spacing) * 6); }
.prose ul,
.entry-content ul { list-style: disc; }
.prose ol,
.entry-content ol { list-style: decimal; }
.prose li + li,
.entry-content li + li { margin-top: calc(var(--spacing) * 2); }
.prose li::marker,
.entry-content li::marker { color: var(--color-brand-orange); }
.prose ol > li::marker,
.entry-content ol > li::marker { font-weight: var(--font-weight-semibold); }

.prose :is(strong, b),
.entry-content :is(strong, b) { font-weight: var(--font-weight-semibold); color: var(--color-brand-dark); }

.prose a,
.entry-content a {
	color: var(--color-brand-orange);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--duration-fast) var(--ease-default);
}
.prose a:hover,
.entry-content a:hover { color: var(--color-orange-600); }

.prose blockquote,
.entry-content blockquote {
	padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
	border-radius: var(--radius-xl);
	background-color: var(--color-gray-50);
	color: var(--color-gray-700);
}
.prose blockquote > * + *,
.entry-content blockquote > * + * { margin-top: calc(var(--spacing) * 3); }

/* .entry-content (index.php) sits on the full container: keep lines at the article body's measure (768) and its type. */
.entry-content {
	max-width: calc(var(--container-3xl) + var(--gutter) * 2);
	font-size: var(--text-lg);
	line-height: var(--text-lg-lh);
	color: var(--color-gray-700);
}

/* Compact: the open Info card (14px text, 22.75 line height). */
.prose--compact > * + * { margin-top: calc(var(--spacing) * 3); }
.prose--compact h2 { margin-top: calc(var(--spacing) * 5); font-size: var(--text-base); line-height: var(--text-base-lh); }
.prose--compact h3 { margin-top: calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--text-sm-lh); }
.prose--compact :is(h2, h3) + * { margin-top: calc(var(--spacing) * 1); }
.prose--compact :is(ul, ol) { padding-inline-start: calc(var(--spacing) * 5); }
.prose--compact li + li { margin-top: calc(var(--spacing) * 1); }
.prose--compact blockquote { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); }