/*
 * Editorial accents: the Gold marker and the Learning Spark
 * (VISUAL_ACCEPTANCE.md S02, S03, S05, S06; RY04).
 *
 * Gold marker: the tapered brush stroke under a headline in R1 and R2. It is a
 * separate brush layer, not a thickened system line (S02). In R2 it starts
 * just left of the headline and runs to ≈95% of its width, one stroke under the
 * whole block. Heading style "Gold marker".
 *
 * Learning Spark: a small Gold burst with a Forest outline, marking one
 * concrete action or discovery (S06). Never automatic; heading style "Learning
 * spark", to be used sparingly.
 *
 * Both are pseudo-elements without text: decorative, never announced, never in
 * the way of a click.
 */

.is-style-marker {
	position: relative;
	width: fit-content;
	max-width: 100%;
	padding-bottom: 0.28em;
}

.is-style-marker::after {
	content: "";
	position: absolute;
	left: -0.3em;
	bottom: 0;
	width: calc(95% + 0.3em);
	height: 0.22em;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: url("../masks/marker-stroke.svg?v=e8543023ce30") center / 100% 100% no-repeat;
	mask: url("../masks/marker-stroke.svg?v=e8543023ce30") center / 100% 100% no-repeat;
	pointer-events: none;
}

.is-style-spark::after {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-inline-start: 0.12em;
	vertical-align: super;
	background: url("../images/learning-spark.svg?v=c28408fce251") center / contain no-repeat;
	pointer-events: none;
}

/*
 * Handwritten notes (VISUAL_ACCEPTANCE.md N01–N06; references R1–R8).
 *
 * Caveat 500 as selectable HTML (N01), 24–36 px (note preset; ≥24 px on
 * mobile, MO05), dark ink on paper for contrast (N06). One short thought, a
 * narrow measure so it breaks into 2–4 lines (N03). A slight rotation, within
 * ±8° (N04): the reference tilts some notes further, the acceptance limit wins.
 *
 * Paragraph styles:
 *   note           the plain note (R2, R3)
 *   note-arrow     with a hand-drawn arrow pointing down-left (R1, R4)
 *   note-circled   inside a hand-drawn loop, "Context matters." in R1
 *   note-marker    on a Gold brush plate (R6), the one place writing sits on Gold
 *
 * The arrow, loop and plate are masked pseudo-elements: decorative, no text,
 * no pointer events. Positioning a note against an image belongs to each
 * composition (Phase 3), not to the note.
 */

:is(.is-style-note, .is-style-note-arrow, .is-style-note-circled, .is-style-note-marker) {
	--fct-note-rotate: -4deg;

	position: relative;
	width: fit-content;
	max-width: 11em;
	margin-block: var(--wp--preset--spacing--s);
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--note);
	font-size: var(--wp--preset--font-size--note);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: 0;
	transform: rotate(var(--fct-note-rotate));
	transform-origin: left center;
	/* No single word stranded on the last line (T05). */
	text-wrap: balance;
}

/* Arrow: below the note, pointing down and left at its subject. */
.is-style-note-arrow {
	--fct-note-rotate: -5deg;

	padding-bottom: 1.6em;
}

.is-style-note-arrow::after {
	content: "";
	position: absolute;
	left: 0.2em;
	bottom: 0;
	width: 1.6em;
	height: 1.6em;
	background-color: currentColor;
	-webkit-mask: url("../masks/note-arrow.svg?v=d91a4985ab9a") center / contain no-repeat;
	mask: url("../masks/note-arrow.svg?v=d91a4985ab9a") center / contain no-repeat;
	pointer-events: none;
}

/* Loop: the note sits inside a hand-drawn oval. */
.is-style-note-circled {
	--fct-note-rotate: -6deg;

	padding: 0.55em 0.9em;
}

.is-style-note-circled::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: url("../masks/note-circle.svg?v=2c55eb2e00a1") center / 100% 100% no-repeat;
	mask: url("../masks/note-circle.svg?v=2c55eb2e00a1") center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Gold brush plate behind the writing (R6). Charcoal on Gold is 7.9:1. */
.is-style-note-marker {
	--fct-note-rotate: -7deg;

	isolation: isolate;
	padding: 0.6em 0.9em;
}

.is-style-note-marker::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: url("../masks/marker-plate.svg?v=c59142d6622a") center / 100% 100% no-repeat;
	mask: url("../masks/marker-plate.svg?v=c59142d6622a") center / 100% 100% no-repeat;
	pointer-events: none;
}

/*
 * AI image caption (Phase 6B.2, inc/ai-images.php): "Illustratief beeld, gegenereerd met AI." in the style of the
 * article captions (pages.css, .fct-in-figure figcaption): Inter 14 / 1.45, Charcoal, real text. Components only
 * place it.
 */
.fct-ai-credit {
	max-width: 620px;
	margin: 12px 0 0;
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
}