/*
 * Article and page body typography, plus the Reken mee and affiliate patterns.
 * Loaded on the front end (inside .bd-prose) and unrewritten in the editor
 * iframe (inside .is-root-container), so what an editor writes is what ships.
 */

:is(.bd-prose, .editor-styles-wrapper .is-root-container) {
	max-width: 660px;
	font-family: 'Newsreader', Georgia, serif;
	font-size: 20px;
	line-height: 1.72;
	color: var(--ink-2);
}

:is(.bd-prose, .editor-styles-wrapper .is-root-container) > * { margin: 24px 0 0; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) > :first-child { margin-top: 32px; }

:is(.bd-prose, .editor-styles-wrapper .is-root-container) h2,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) h3,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) h4 {
	font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: var(--ink);
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) h2 { margin-top: 44px; font-size: clamp(25px, 3.4vw, 30px); line-height: 1.15; letter-spacing: -0.035em; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) h3 { margin-top: 36px; font-size: 22px; line-height: 1.2; letter-spacing: -0.03em; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) h4 { margin-top: 32px; font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) > h2 + *,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) > h3 + *,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) > h4 + * { margin-top: 18px; }

:is(.bd-prose, .editor-styles-wrapper .is-root-container) a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) a:hover { color: var(--accent-hover); }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) strong { font-weight: 600; color: var(--ink); }

:is(.bd-prose, .editor-styles-wrapper .is-root-container) ul,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) ol { padding-left: 1.2em; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) li + li { margin-top: 8px; }

:is(.bd-prose, .editor-styles-wrapper .is-root-container) blockquote,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .wp-block-quote {
	padding-left: 20px;
	border-left: 3px solid var(--line-6);
	font-style: italic;
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--mute); }

:is(.bd-prose, .editor-styles-wrapper .is-root-container) > figure,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) > .wp-block-image { margin-top: 40px; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) > figure + p,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) > .wp-block-image + p { margin-top: 32px; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) figcaption,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .wp-element-caption {
	margin: 10px 0 0;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	line-height: 1.5;
	text-align: left;
	color: var(--mute);
}

:is(.bd-prose, .editor-styles-wrapper .is-root-container) hr,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .wp-block-separator { border: 0; border-top: 1px solid var(--line-2); }

:is(.bd-prose, .editor-styles-wrapper .is-root-container) .is-style-bd-highlight {
	padding-left: 20px;
	border-left: 3px solid var(--accent);
	font-size: 23px;
	line-height: 1.5;
	color: var(--ink);
}

/* Buttons inside content */
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .wp-block-button__link {
	border-radius: 0;
	background: var(--accent);
	color: var(--on-accent);
	padding: 13px 20px;
	font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .wp-block-button__link:hover { background: var(--accent-hover); color: var(--on-accent); }

/* Placeholder figure (striped box) until a chart image exists */
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	padding: 24px;
	background: repeating-linear-gradient(135deg, var(--bg-chip) 0 8px, var(--stripe-b) 8px 16px);
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-media--empty > * {
	margin: 0;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--mute);
	text-align: center;
}

/* Pattern: Reken mee */
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-figures {
	margin-top: 36px;
	padding: 24px 0;
	border-top: 1px solid var(--line-2);
	border-bottom: 1px solid var(--line-2);
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-figures > * { margin: 0; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-figures__label,
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-figure__label {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	line-height: 1.5;
	color: var(--mute);
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-figures__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-figures .bd-figures__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; margin-top: 12px; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-figure > * { margin: 0; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-figure__num {
	font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--ink);
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-figure__label { font-size: 11px; }

/* Pattern: affiliate recommendation */
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-affiliate {
	margin-top: 44px;
	padding: 26px;
	border-left: 3px solid var(--accent);
	background: var(--bg-card);
	font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-affiliate > * { margin: 0; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-affiliate .bd-affiliate__eyebrow {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-affiliate .bd-affiliate__title { margin-top: 10px; font-size: 25px; line-height: 1.15; letter-spacing: -0.03em; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-affiliate .bd-affiliate__text { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-affiliate .wp-block-buttons { margin-top: 20px; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) .bd-affiliate .bd-affiliate__disclosure {
	margin-top: 16px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	line-height: 1.5;
	color: var(--mute);
}

:is(.bd-prose, .editor-styles-wrapper .is-root-container) > .bd-media--empty { margin-top: 40px; }
:is(.bd-prose, .editor-styles-wrapper .is-root-container) > .bd-caption {
	margin-top: 10px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	line-height: 1.5;
	color: var(--mute);
}
:is(.bd-prose, .editor-styles-wrapper .is-root-container) > .bd-caption + * { margin-top: 32px; }