/**
 * WS-Lexikon Sidenotes
 * Tufte-style marginal notes
 *
 * @version 2.0.0
 * @date 2026-08-01
 *
 * v2.0.0: Sprechblasen-Sidenotes (#709):
 *         - Desktop: Sprechblase (0.5px border, 8px radius, 45°-Quadrat-Spitze links)
 *           bei Hover auf Keyword ODER Sidenote. Ruhezustand: nackt (Tufte). cursor:help.
 *         - Weiterlesen-Pfeil nur bei Hover sichtbar.
 *         - Mobile/Medium: Sprechblase mit Spitze oben bei Toggle.
 *         - Timing: 0.15s ein, 0.4s + 3s Verzögerung aus.
 * v1.9.0: Sidenote UX-Überarbeitung (#647, #673):
 *         - .ws-lex-term: border-bottom solid → dotted (Annotation, nicht Link)
 *         - Medium (700–1279): Toggle wie Mobile (war: always-visible)
 *         - .sidenote-number: font-family/weight/color entfernt (erbt vom Lauftext)
 *         - .ws-lex-more: font-size: 0.7em entfernt (erbt Eltern-Grösse)
 * v1.8.0: Drei-Stufen-Breakpoints: Mobile (<700) Toggle, Medium (700–1279)
 *         inline sichtbar, Desktop (≥1280) Tufte-Marginal. Overflow-Fix (#672).
 * v1.7.0: Sidenote-Link immer sichtbar, Kommentar aktualisiert (#624).
 * v1.6.0: Font-Variablen auf theme.json umgestellt (var(--wp--preset--font-family--uni-neue)),
 *         Fallback-Werte korrigiert (16px statt 0.8rem). Typografie-Alignment #618.
 * v1.5.0: Keyword zurück auf <span>, Initiale entfernt, ?-Marker sichtbar,
 *         border-bottom Vertiefungs-Stil. Brutalist-A-Konflikt beseitigt (#585, #582).
 * v1.4.0: Keyword als <a> statt <span> — Mobile navigiert zur Glossar-Single (#554).
 *         Revertiert in v1.5.0.
 * v1.3.0: Ref-Links (→ Term) für Modal-Kontext, Sidenotes im Modal ausgeblendet (#518).
 * v1.2.0: Keyword-Markierung (Initiale + Hover) und Sidenote-Link bei gekürztem Excerpt (#400).
 * v1.1.0: Asymmetrisches Single-Post-Layout (1/3:2/3) für Sidenote-Raum (#400).
 *         Sidenote-Breite von 35% auf 40%, Margin von -40% auf -45%.
 *
 * Structure:
 *   <span class="ws-lex-term" data-sn-id="sn-1">Term</span>
 *   <label class="margin-toggle sidenote-number" data-marker="?">
 *   <input type="checkbox" class="margin-toggle">
 *   <span class="sidenote" data-sidenote-type="glossary">…</span>
 */

/* ── Single-Post Layout: asymmetrisch für Sidenotes ──
 *
 * Content-Spalte nach links verschieben (ca. 1/3 : 2/3),
 * damit Sidenotes rechts natürlichen Raum haben.
 * contentSize (720px) bleibt, nur der Offset ändert.
 *
 * Rechnung bei 1200px wide:
 *   Links:  (1200 - 720) × 0.33 ≈ 160px
 *   Rechts: (1200 - 720) × 0.67 ≈ 320px  → genug für Sidenotes
 *
 * @ticket #400
 * ── */

@media (min-width: 1280px) {
	.single .wp-block-post-content > * {
		margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 720px))) * 0.33) !important;
		margin-right: calc((100% - min(100%, var(--wp--style--global--content-size, 720px))) * 0.67) !important;
	}

	/* Post-Meta nach Content: gleicher Offset.
	 * Die border-top-Gruppe wird von WP constrained-layout zentriert
	 * (margin: auto !important). Wir überschreiben mit höherer Spezifität. */
	.single .wp-block-post-content + .wp-block-group > .wp-block-group {
		margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 720px))) * 0.33) !important;
		margin-right: calc((100% - min(100%, var(--wp--style--global--content-size, 720px))) * 0.67) !important;
	}

	/* alignwide/alignfull: nicht einengen */
	.single .wp-block-post-content > .alignwide,
	.single .wp-block-post-content > .alignfull {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ── Toggle mechanics ── */

input.margin-toggle {
	display: none;
}

/* Sidenote-Counter: einmal pro Post zählen, nicht pro Absatz */
.wp-block-post-content,
.entry-content {
	counter-reset: sidenote-counter;
}

/* Superscript marker */
.sidenote-number {
	counter-increment: sidenote-counter;
}

.sidenote-number::after {
	content: counter(sidenote-counter);
	font-size: 0.7em;
	position: relative;
	top: -0.4em;
	padding-left: 0.1em;
	cursor: help;
}

/* ── Medium: Toggle wie Mobile (#673) ── */

@media (min-width: 700px) and (max-width: 1279px) {
	.sidenote {
		display: none;
	}

	label.margin-toggle {
		cursor: pointer;
	}

	.margin-toggle:checked + .sidenote {
		display: block;
		float: none;
		width: 100%;
		margin: 0.75em 0 0.5em;
		padding: 0.75em;
		font-size: var(--wp--preset--font-size--small, 16px);
		font-family: var(--wp--preset--font-family--uni-neue);
		font-weight: 400;
		line-height: 1.4;
		color: var(--wp--preset--color--dimmed, #999);
		background: var(--wp--preset--color--background, #fff);
		position: relative;
		border: 0.5px solid color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
		border-radius: 8px;
	}

	/* Spitze oben: 45°-Quadrat, border-top + border-left sichtbar (#709) */
	.margin-toggle:checked + .sidenote::before {
		content: '';
		position: absolute;
		top: -5px;
		left: 16px;
		width: 8px;
		height: 8px;
		border-top: 0.5px solid color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
		border-left: 0.5px solid color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
		border-bottom: 0.5px solid transparent;
		border-right: 0.5px solid transparent;
		transform: rotate(45deg);
		background: var(--wp--preset--color--background, #fff);
	}
}

/* ── Desktop: marginal sidenote ── */

@media (min-width: 1280px) {
	.sidenote {
		float: right;
		clear: right;
		margin-right: -50%;
		width: 38%;
		margin-top: 0.3rem;
		margin-bottom: 0.5rem;
		font-size: var(--wp--preset--font-size--small, 16px);
		font-family: var(--wp--preset--font-family--uni-neue);
		font-weight: 400;
		line-height: 1.4;
		color: var(--wp--preset--color--dimmed, #999);
		vertical-align: baseline;
		position: relative;
		/* Sprechblase: Ruhezustand unsichtbar (#709) */
		border: 0.5px solid transparent;
		border-radius: 8px;
		padding: 0.75em;
		transition: border-color var(--content-transition-out, 0.4s) ease-in 3s;
		cursor: help;
	}

	/* Spitze links: 45°-Quadrat, border-bottom + border-left bei Hover (#709).
	 * Hintergrund maskiert die Blasen-Border an der Überlappung. */
	.sidenote::before {
		content: '';
		position: absolute;
		top: 12px;
		left: -5px;
		width: 8px;
		height: 8px;
		border-top: 0.5px solid transparent;
		border-right: 0.5px solid transparent;
		border-bottom: 0.5px solid transparent;
		border-left: 0.5px solid transparent;
		transform: rotate(45deg);
		background: var(--wp--preset--color--background, #fff);
		transition: border-color var(--content-transition-out, 0.4s) ease-in 3s;
	}

	/* Hide marker on desktop — sidenote is already visible */
	label.margin-toggle {
		display: none;
		cursor: default;
	}
}

/* ── Mobile: inline toggle ── */

@media (max-width: 699px) {
	.sidenote {
		display: none;
	}

	label.margin-toggle {
		cursor: pointer;
	}

	.margin-toggle:checked + .sidenote {
		display: block;
		float: none;
		width: 100%;
		margin: 0.75em 0 0.5em;
		padding: 0.75em;
		font-size: var(--wp--preset--font-size--small, 16px);
		font-family: var(--wp--preset--font-family--uni-neue);
		font-weight: 400;
		line-height: 1.4;
		color: var(--wp--preset--color--dimmed, #999);
		background: var(--wp--preset--color--background, #fff);
		position: relative;
		border: 0.5px solid color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
		border-radius: 8px;
	}

	/* Spitze oben: 45°-Quadrat, border-top + border-left sichtbar (#709) */
	.margin-toggle:checked + .sidenote::before {
		content: '';
		position: absolute;
		top: -5px;
		left: 16px;
		width: 8px;
		height: 8px;
		border-top: 0.5px solid color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
		border-left: 0.5px solid color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
		border-bottom: 0.5px solid transparent;
		border-right: 0.5px solid transparent;
		transform: rotate(45deg);
		background: var(--wp--preset--color--background, #fff);
	}
}

/* ── Sidenote content ── */

.sidenote strong {
	color: var(--wp--preset--color--foreground, #333);
	font-weight: 700;
}

/* ── Keyword im Fliesstext ──
 *
 * <span> (nicht <a>): kein Specificity-Konflikt mit Brutalist-A.
 * Dezente border-bottom signalisiert „annotierter Begriff".
 * ?-Marker daneben ist der Interaktions-Trigger (Mobile: Toggle, Desktop: Indikator).
 *
 * @ticket #585, #582
 * ── */

span.ws-lex-term {
	border-bottom: 1px dotted color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
	transition: border-bottom-color var(--content-transition-out, 0.4s) ease-in
		var(--content-transition-delay, 0.12s);
	cursor: help;
}

span.ws-lex-term:hover {
	border-bottom-color: var(--wp--preset--color--foreground, #333);
	transition: border-bottom-color var(--content-transition-in, 0.15s) ease-out;
}

/* Keyword-Hover ODER Sidenote-Hover aktiviert Sprechblase (#709).
 * Adjacent-Sibling-Kette: span.ws-lex-term + label + input + .sidenote
 * Funktioniert auch mit display:none auf label/input (DOM bleibt intakt).
 * Blase bleibt 3s nach Verlassen sichtbar (transition-delay auf Rückweg). */

@media (min-width: 1280px) {
	span.ws-lex-term:hover + .margin-toggle + .margin-toggle + .sidenote,
	.sidenote:hover {
		border-color: color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
		transition: border-color var(--content-transition-in, 0.15s) ease-out;
	}

	span.ws-lex-term:hover + .margin-toggle + .margin-toggle + .sidenote::before,
	.sidenote:hover::before {
		border-bottom-color: color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
		border-left-color: color-mix(in oklch, var(--wp--preset--color--foreground, #333) 25%, transparent);
		transition: border-color var(--content-transition-in, 0.15s) ease-out;
	}

	/* Weiterlesen-Pfeil: nur bei Hover sichtbar */
	.ws-lex-more {
		opacity: 0;
		transition: opacity var(--content-transition-out, 0.4s) ease-in 3s;
	}

	span.ws-lex-term:hover + .margin-toggle + .margin-toggle + .sidenote .ws-lex-more,
	.sidenote:hover .ws-lex-more {
		opacity: 1;
		transition: opacity var(--content-transition-in, 0.15s) ease-out;
	}
}

/* ── Sidenote-Link (Basis, auch von ColorDots genutzt) ── */

.ws-lex-sidenote-link {
	color: inherit;
	text-decoration: none;
}

.ws-lex-sidenote-link:hover {
	border-bottom: 1px dotted currentColor;
}

/* ── Sidenote-Link zur Glossar-Single ──
 *
 * Immer sichtbar („→"), nicht nur bei gekürztem Excerpt (#624).
 * Bleibt .ws-lex-sidenote-link (Vertiefungs-Stil, kein Brutalist-A).
 * Dezent, eigene Zeile rechts.
 *
 * @ticket #585, #624
 * ── */

.ws-lex-more {
	display: block;
	margin-top: 0.5rem;
	text-align: right;
	color: var(--wp--preset--color--dimmed, #999);
	transition: color var(--content-transition-out, 0.4s) ease-in
		var(--content-transition-delay, 0.12s);
}

.ws-lex-more:hover {
	color: var(--wp--preset--color--foreground, #333);
	border-bottom: none;
	transition: color var(--content-transition-in, 0.15s) ease-out;
}

/* Vertiefungs-Stil neutralisieren:
 * a[href*="/farbe/"] bringt Dotted-Underline + Tropfen-Icon mit.
 * Im Sidenote ist das redundant — der Farbkreis übernimmt. */
.sidenote a.ws-lex-sidenote-link {
	background: none;
	background-image: none;
	padding: 0;
	margin: 0;
	border: none;
}

.sidenote a.ws-lex-sidenote-link::after {
	display: none;
}

/* ── Marker variants ── */

/* Tag links: # prefix */
a.ws-marker-tag {
	text-decoration: none;
	color: inherit;
}

a.ws-marker-tag::before {
	content: "#";
	font-size: 0.85em;
	color: var(--wp--preset--color--dimmed, #999);
}

/* Orphan tags (no matching WP tag) */
.ws-marker-orphan {
	color: var(--wp--preset--color--dimmed, #999);
	font-style: italic;
}

/* ── Color swatch sidenote (Phase 3, #517) ── */

.sidenote[data-sidenote-type="color_swatch"] {
	padding: 0;
	border: none;
	border-radius: 0;
}

.sidenote[data-sidenote-type="color_swatch"]::before {
	display: none;
}

/* Farbkreis */
.ws-lex-swatch {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--background, #fff);
	margin-bottom: 0.3em;
}

/* Farbcode dezent */
.ws-lex-color-code {
	font-size: 0.85em;
	color: var(--wp--preset--color--dimmed, #999);
}

/* ══ Ref-Links (link-only mode, Modal-Kontext, #518) ══
 *
 * Minimaler Output: → Term als Link.
 * Kein Sidenote-Apparat, kein Tufte-Markup.
 * Erscheint auf Glossar-Singles (und künftig weiteren Modal-Templates).
 *
 * Idle + Hover: Brutalist-A (links.css) greift automatisch —
 * .ws-lex-ref ist nicht in der :not()-Kette ausgeschlossen.
 * Hier nur strukturelle Eigenheiten.
 */

.ws-lex-ref {
	text-decoration: none;
}

/* ══ Modal-Kontext: Sidenotes ausblenden ══
 *
 * Falls Sidenote-Markup trotz Ref-Modus gerendert wird
 * (z.B. durch Cache oder Filter), CSS als Sicherheitsnetz.
 */

.modal-page .sidenote,
.modal-page .margin-toggle {
	display: none !important;
}