/*
 * 2leadership inline decorations
 *
 * Loaded both on the frontend (wp_enqueue_scripts) and inside the block
 * editor (enqueue_block_editor_assets) so authors see decorations live.
 *
 * Spans are wrapped at rich-text level by assets/inline-formats.js. CSS
 * positioning ported from the YT4 child theme's custom.css to keep visual
 * parity 1:1 — adjust only against Phase 6 screenshot diffs.
 *
 * SVG paths are relative to this CSS file (i.e. assets/decorations.css →
 * assets/decorations/<file>.svg).
 */

/* ── Color-only highlights ──────────────────────────────────────── */

.text-highlight-blue,
.text-highlight-blue a {
	color: #4896D2;
}

.text-highlight-orange,
.text-highlight-orange a {
	color: #EF7C00;
}

.text-highlight-purple,
.text-highlight-purple a {
	color: #870668;
}

/* ── Kringel (circle) ───────────────────────────────────────────── */

/*
 * `display: inline-block` ONLY on the `-title` variants. Their ::after is
 * an opaque SVG drawn IN FRONT (no z-index) and sized as a % of the parent;
 * without inline-block an inline parent that wraps gets its bounding box
 * computed inconsistently across viewport widths and the decoration
 * vanishes/shrinks. inline-block forces one closed box so the % sizing is
 * stable.
 *
 * The non-title variants (.annotation-circle/-line/-zickzack) are the
 * highlighter style — ::after sits BEHIND the text (z-index:-1). They stay
 * plain inline (NO inline-block — that traps the pseudo behind the parent
 * box). But the wp-native BLOCK THEME wraps page content in
 * `.entry-content.wp-block-post-content` (which YT4 did not), and that
 * wrapper's stacking context swallows a bare z-index:-1 so the decoration
 * vanishes. Fix: give the parent its OWN stacking context (z-index:0) so
 * the z-index:-1 pseudo is contained within the span — it then paints
 * behind the text but on top of the section background, as intended.
 */
.annotation-circle-title {
	position: relative;
	display: inline-block;
}
.annotation-circle-title::after {
	content: '';
	position: absolute;
	left: -10%;
	bottom: -10%;
	right: 0;
	height: 120%;
	width: 120%;
	background-image: url('decorations/2L-text-annotation-circle-solid.svg');
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
}

.annotation-circle {
	position: relative;
	z-index: 0;
	white-space: nowrap;
	color: #4896D2;
}
.annotation-circle::after {
	content: '';
	position: absolute;
	bottom: -12%;
	left: -15%;
	right: 0;
	height: 125%;
	width: 135%;
	z-index: -1;
	background-image: url('decorations/2leadership-text-annotation-circle-opt.svg');
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
}

/* ── Zickzack (zigzag) ──────────────────────────────────────────── */

.annotation-zickzack-title {
	position: relative;
	display: inline-block;
}
.annotation-zickzack-title::after {
	content: '';
	position: absolute;
	bottom: -12%;
	left: 0;
	height: 30%;
	width: 100%;
	background-image: url('decorations/2L-text-annotation-zickzack-solid.svg');
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
}

.annotation-zickzack {
	position: relative;
	z-index: 0;
	white-space: nowrap;
	color: #EF7C00;
}
.annotation-zickzack::after {
	content: '';
	position: absolute;
	left: -0.1em;
	bottom: -0.15em;
	height: 0.4em;
	width: 110%;
	z-index: -1;
	background-image: url('decorations/2leadership-text-annotation-zickzack.svg');
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 100%;
}

/* ── Strich (line) ──────────────────────────────────────────────── */

.annotation-line-title {
	position: relative;
	display: inline-block;
}
.annotation-line-title::after {
	content: '';
	position: absolute;
	bottom: -8%;
	left: -5%;
	height: 100%;
	width: 110%;
	background-image: url('decorations/2L-text-annotation-line-solid.svg');
	background-repeat: no-repeat;
	background-position: 0 90%;
	background-size: contain;
}

.annotation-line {
	position: relative;
	z-index: 0;
	white-space: nowrap;
	color: #870668;
}
.annotation-line::after {
	content: '';
	position: absolute;
	bottom: -20%;
	left: -10%;
	height: 115%;
	width: 120%;
	z-index: -1;
	background-image: url('decorations/2leadership-text-annotation-line.svg');
	background-repeat: no-repeat;
	background-position: 0 80%;
	background-size: contain;
}