/**
 * Rich text pattern — DS 0.8.0 YaRichText (first draft).
 * Section chrome + content rules (h2–h4, body, lists, inline links).
 * Quote content uses ya-plugin/quote (no Quote pattern outer spacing).
 * Surrounding padding: D014 fluid clamps.
 */

.ya-rich-text {
	--ya-rich-text-padding-block: var(
		--wp--custom--spacing--padding-block,
		clamp(3rem, 1.004rem + 4.163vi, 6rem)
	);
	--ya-rich-text-padding-inline: var(
		--wp--custom--spacing--padding-inline,
		clamp(1rem, -1.486rem + 8.304vi, 2.5rem)
	);
	--ya-rich-text-content-max: 708px;
	--ya-rich-text-content-gap: var(--ya-spacing-08, 8px);
	--ya-rich-text-block-gap: var(--ya-spacing-48, 48px);
	--ya-rich-text-heading-list-gap: var(--ya-spacing-24, 24px);
	--ya-rich-text-list-text-gap: var(--ya-spacing-24, 24px);
	--ya-rich-text-list-gap: var(--ya-spacing-08, 8px);
	--ya-rich-text-list-item-gap: var(--ya-spacing-12, 12px);
	--ya-rich-text-list-icon-slot: 24px;
	--ya-rich-text-ordered-marker-width: 28px;
	--ya-rich-text-inline-link-focus-offset: 2px;
	--ya-rich-text-strong-weight: 700;

	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding-inline: var(--ya-rich-text-padding-inline);
	margin-block: var(--ya-rich-text-padding-block);
	background: var(--wp--custom--color--background-base, #e8e6de);
	color: var(--wp--custom--color--text-primary, #000);
}

.ya-rich-text,
.ya-rich-text * {
	box-sizing: border-box;
}

/* First rich-text in post content: no top gap (e.g. under featured image / hero). */
.entry-content .ya-rich-text:nth-child(1 of .ya-rich-text) {
	margin-block-start: 0;
}

.ya-rich-text--no-margin-top {
	margin-block-start: 0;
}

.ya-rich-text__content {
	display: flex;
	flex-direction: column;
	gap: var(--ya-rich-text-content-gap);
	width: 100%;
	max-width: var(--ya-rich-text-content-max);
	margin-inline: auto;
	overflow-wrap: anywhere;
}

.ya-rich-text__content > * {
	margin: 0;
}

.ya-rich-text__content > :is(
	h2,
	h3,
	h4,
	.wp-block-heading,
	.wp-block-ya-plugin-quote,
	.ya-quote-content
):not(:first-child) {
	margin-top: calc(var(--ya-rich-text-block-gap) - var(--ya-rich-text-content-gap));
}

.ya-rich-text__content > :is(h2, h3, h4, .wp-block-heading) + :is(ul, ol, .wp-block-list) {
	margin-top: calc(var(--ya-rich-text-heading-list-gap) - var(--ya-rich-text-content-gap));
}

.ya-rich-text__content > :is(ul, ol, .wp-block-list) + :is(p, .wp-block-paragraph) {
	margin-top: calc(var(--ya-rich-text-list-text-gap) - var(--ya-rich-text-content-gap));
}

.ya-rich-text__content > :is(p, .wp-block-paragraph) + :is(ul, ol, .wp-block-list) {
	margin-top: calc(var(--ya-rich-text-list-text-gap) - var(--ya-rich-text-content-gap));
}

.ya-rich-text__content :is(h2, h3, h4, .wp-block-heading) {
	width: 100%;
	color: var(--wp--custom--color--text-primary, #000);
}

.ya-rich-text__content h2,
.ya-rich-text__content .wp-block-heading.has-heading-md-font-size {
	font-family: var(--wp--preset--font-family--sora, inherit);
	font-size: var(--wp--preset--font-size--heading-md);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
}

.ya-rich-text__content h3,
.ya-rich-text__content .wp-block-heading.has-heading-sm-font-size {
	font-family: var(--wp--preset--font-family--sora, inherit);
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0;
}

.ya-rich-text__content h4,
.ya-rich-text__content .wp-block-heading.has-heading-xs-font-size {
	font-family: var(--wp--preset--font-family--figtree, inherit);
	font-size: var(--wp--preset--font-size--heading-xs);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.ya-rich-text__content :is(p, li) {
	font-family: var(--wp--preset--font-family--figtree, inherit);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	margin-block-end: 0;
}

.ya-rich-text__content strong {
	font-weight: var(--ya-rich-text-strong-weight);
}

.ya-rich-text__content em {
	font-style: italic;
}

.ya-rich-text__content a,
.ya-rich-text__content a:visited {
	color: var(--wp--custom--color--link-primary, var(--wp--preset--color--brand-900));
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: var(--wp--custom--link--underline-thickness, 1px);
	text-underline-offset: var(--wp--custom--link--underline-offset, 10%);
}

.ya-rich-text__content a:hover {
	color: var(--wp--custom--color--link-primary-hover, var(--wp--preset--color--brand-1000));
	text-decoration-thickness: var(--wp--custom--link--hover-underline-thickness, 2px);
}

.ya-rich-text__content a:focus-visible {
	border-radius: 2px;
	outline: var(--wp--custom--focus--width, 3px) solid
		var(--wp--custom--color--border-interactive, var(--wp--preset--color--brand-900));
	outline-offset: var(--ya-rich-text-inline-link-focus-offset);
}

/* Lists — square bullets / brand ordered markers (DS Rich text). */
.ya-rich-text__content :is(ul, ol) {
	display: grid;
	gap: var(--ya-rich-text-list-gap);
	width: 100%;
	margin: 0;
}

.ya-rich-text__content ul {
	padding: 0;
	list-style: none;
}

.ya-rich-text__content ul li {
	position: relative;
	padding-inline-start: calc(
		var(--ya-rich-text-list-icon-slot) + var(--ya-rich-text-list-item-gap)
	);
}

.ya-rich-text__content ul li::before {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: var(--ya-rich-text-list-icon-slot);
	height: var(--ya-rich-text-list-icon-slot);
	margin-top: max(
		0px,
		calc((1em * 1.5 - var(--ya-rich-text-list-icon-slot)) / 2)
	);
	background-color: var(--wp--custom--color--text-brand, var(--wp--preset--color--brand-900));
	content: "";
	-webkit-mask: url("../icons/bullet.svg") center /
		var(--ya-rich-text-list-icon-slot) var(--ya-rich-text-list-icon-slot) no-repeat;
	mask: url("../icons/bullet.svg") center /
		var(--ya-rich-text-list-icon-slot) var(--ya-rich-text-list-icon-slot) no-repeat;
}

.ya-rich-text__content ol {
	padding-inline-start: var(--ya-rich-text-ordered-marker-width);
	list-style-type: decimal;
}

.ya-rich-text__content ol li {
	padding-inline-start: var(--ya-rich-text-list-item-gap);
}

.ya-rich-text__content ol li::marker {
	color: var(--wp--custom--color--text-brand, var(--wp--preset--color--brand-900));
	font-family: var(--wp--preset--font-family--sora, inherit);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0;
}

/* Quote inside rich text: fill the content column; no section chrome. */
.ya-rich-text__content .ya-quote-content {
	max-width: none;
}