/**
 * Component: Inhaltsverzeichnis (Scrollspy-TOC)
 *
 * @package welpentheme
 * @author  Jörn Gorres
 * @version 1.0.0
 *
 * Floatende Ueberschriften-Navigation mit "Laufleiste" im linken
 * Seitenrand. Markup siehe includes/class-welpentheme-toc.php,
 * Scrollspy-Logik siehe js/toc.js.
 *
 * Mobile-first: Das TOC ist standardmaessig ausgeblendet und wird erst
 * ab einem ausreichend breiten Viewport eingeblendet (im Seitenrand ist
 * sonst kein Platz). Die aktive Hervorhebung (Text + mitlaufendes
 * Bullet) nutzt das SV-Vereinsgruen ueber --wt-toc-accent.
 *
 * Feinjustage am Live-Server: Die zentralen Masse sind als CSS-Custom-
 * Properties am :root hinterlegt und koennen dort angepasst werden.
 * Der Sichtbarkeits-Breakpoint (Media Query) laesst sich technisch
 * nicht ueber eine Variable steuern und ist daher direkt unten als
 * 1280px gesetzt.
 */

:root {
	/* Breite der zentrierten GeneratePress-Inhaltsspalte. Bezugsmass,
	 * damit das TOC buendig links an den Inhalt andockt (statt am
	 * Viewport-Rand zu kleben). GeneratePress-Default ist 1200px – hier
	 * an die tatsaechliche Container-Breite der Seite anpassen. */
	--wt-toc-content-width: 1200px;
	/* Abstand zwischen der rechten TOC-Kante und der Inhaltsspalte. */
	--wt-toc-gap-to-content: 1.5rem;
	/* Sticky-Mindestabstand von oben: Beim Seitenanfang fluchtet das TOC
	 * per JS mit dem Inhaltsbeginn, beim Scrollen "klebt" es an diesem
	 * Wert (siehe js/toc.js positionNav). Ohne JS gilt er als fixer
	 * top-Wert (Fallback). */
	--wt-toc-top: 8rem;
	/* Breite der TOC-Spalte. */
	--wt-toc-width: 15rem;
	/* Maximale Hoehe, bevor das TOC selbst scrollt. */
	--wt-toc-max-height: 70vh;
	/* Breite der Laufleiste. */
	--wt-toc-rail-width: 2px;
	/* Grauton (Deckkraft) von Laufleiste UND statischen Punkten –
	 * gemeinsam, damit beide identisch wirken. */
	--wt-toc-rail-opacity: 0.18;
	/* Abstand zwischen Eintragstext und Laufleiste (Leiste steht rechts). */
	--wt-toc-rail-gap: 0.9rem;
	/* Vertikaler Innenabstand je Eintrag ("Luft" zwischen den Eintraegen). */
	--wt-toc-item-spacing: 0.5rem;
	/* Durchmesser des mitlaufenden runden Bullets (aktive Position). */
	--wt-toc-bullet-size: 11px;
	/* Durchmesser der statischen Punkte je Eintrag auf der Laufleiste. */
	--wt-toc-dot-size: 7px;
	/* Hervorhebungsfarbe fuer aktiven Eintrag und mitlaufendes Bullet.
	 * SV-Vereinsgruen (im Theme durchgaengig genutzt). Bewusst NICHT
	 * var(--accent), da die GeneratePress-Akzentfarbe auf dieser Seite
	 * blau ist. */
	--wt-toc-accent: #5a9e33;
	/* Versatz, damit Ankersprung nicht unter dem Sticky-Header landet. */
	--wt-toc-scroll-margin: 6rem;
}

/**
 * Ankersprung-Versatz fuer alle Ueberschriften im Inhalt, damit das
 * Ziel nicht unter einem fixierten Header verschwindet.
 */
.entry-content h2[id],
.entry-content h3[id],
.entry-content h4[id],
.entry-content h5[id],
.entry-content h6[id] {
	scroll-margin-top: var(--wt-toc-scroll-margin);
}

/**
 * Sanftes Scrollen – nur aktiv, weil dieses Stylesheet ausschliesslich
 * auf Singular-Ansichten mit aktivem TOC geladen wird.
 */
html {
	scroll-behavior: smooth;
}

/**
 * Basis (mobil): ausgeblendet.
 */
.wt-toc {
	display: none;
}

/* ============================================================
 * Ab Desktop-Breite: floatende Leiste im linken Seitenrand
 * ============================================================ */
@media (min-width: 1280px) {

	.wt-toc {
		display: block;
		position: fixed;
		top: var(--wt-toc-top);
		/* Rechte TOC-Kante an die linke Kante der zentrierten
		 * Inhaltsspalte andocken: Viewport-Mitte (50%) + halbe
		 * Inhaltsbreite + Abstand. */
		left: auto;
		right: calc( 50% + ( var(--wt-toc-content-width) / 2 ) + var(--wt-toc-gap-to-content) );
		width: var(--wt-toc-width);
		max-height: var(--wt-toc-max-height);
		/* Vertikal scrollbar bei sehr langen Verzeichnissen; horizontal
		 * IMMER aus. Ohne explizites overflow-x: hidden wuerde der Browser
		 * wegen overflow-y: auto automatisch auch eine horizontale
		 * Bildlaufleiste einblenden, sobald Punkte/Bullet minimal ueber
		 * den rechten Rand ragen. */
		overflow-x: hidden;
		overflow-y: auto;
		/* Platz am rechten Rand reservieren, damit das mitlaufende Bullet
		 * (zentriert auf der Leiste) nicht abgeschnitten wird. */
		box-sizing: border-box;
		padding-right: calc( var(--wt-toc-bullet-size) / 2 + 2px );
		z-index: 50;
		font-size: 0.85rem;
		line-height: 1.4;
		/* Eintraege und Titel rechtsbuendig im linken Seitenrand. */
		text-align: right;
	}

	/**
	 * Titel des TOC = Seitentitel. Rechtsbuendig auf gleicher Kante wie
	 * die Eintraege (gleicher Abstand zur Laufleiste).
	 */
	.wt-toc__heading {
		margin: 0 0 0.75rem;
		padding-right: var(--wt-toc-rail-gap);
		font-weight: 700;
		font-size: 1rem;
		line-height: 1.25;
	}

	/**
	 * Innerer Container: Bezugsrahmen fuer die absolut positionierte
	 * Laufleiste und ihren Marker. Die Leiste steht rechts, daher
	 * rechtsseitiger Innenabstand als Lueckenmass.
	 */
	.wt-toc__inner {
		position: relative;
		padding-right: var(--wt-toc-rail-gap);
	}

	/**
	 * Laufleiste: durchgehende vertikale Linie – rechts der Eintraege.
	 */
	.wt-toc__rail {
		position: absolute;
		/* Start (top) und Hoehe werden per JS auf Mitte des ersten bzw.
		 * letzten Eintrags gesetzt (siehe js/toc.js). Die Defaults hier
		 * greifen nur, falls JS nicht laeuft. */
		top: 0;
		bottom: 0;
		right: 0;
		left: auto;
		width: var(--wt-toc-rail-width);
		background: currentColor;
		opacity: var(--wt-toc-rail-opacity);
	}

	/**
	 * Mitlaufendes rundes Bullet auf der Laufleiste (markiert die aktive
	 * Position). Vertikale Position wird per JS ueber transform:
	 * translateY() gesetzt; horizontal mittig auf der Leiste zentriert.
	 */
	.wt-toc__thumb {
		position: absolute;
		top: 0;
		left: auto;
		right: calc( ( var(--wt-toc-rail-width) - var(--wt-toc-bullet-size) ) / 2 );
		width: var(--wt-toc-bullet-size);
		height: var(--wt-toc-bullet-size);
		border-radius: 50%;
		background: var(--wt-toc-accent);
		opacity: 0;
		transition: transform 0.18s ease-out, opacity 0.18s ease-out;
		will-change: transform;
	}

	/**
	 * Liste & Eintraege.
	 */
	.wt-toc__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wt-toc__item {
		position: relative;
		margin: 0;
		padding: 0;
	}

	/**
	 * Statischer Punkt je Eintrag, mittig auf der Laufleiste. Der
	 * mitlaufende Bullet (.wt-toc__thumb) gleitet darueber.
	 */
	.wt-toc__item::after {
		content: "";
		position: absolute;
		top: 50%;
		right: calc( var(--wt-toc-rail-width) / 2 - var(--wt-toc-rail-gap) - var(--wt-toc-dot-size) / 2 );
		width: var(--wt-toc-dot-size);
		height: var(--wt-toc-dot-size);
		margin-top: calc( -0.5 * var(--wt-toc-dot-size) );
		border-radius: 50%;
		background: currentColor;
		opacity: var(--wt-toc-rail-opacity);
	}

	/* Einrueckung tieferer Ebenen – von rechts (Eintraege sind
	 * rechtsbuendig, daher ruecken Unterebenen nach links ein). */
	.wt-toc__item[data-level="3"] {
		padding-right: 0.85rem;
	}

	.wt-toc__item[data-level="4"] {
		padding-right: 1.7rem;
	}

	/**
	 * Links. Vertikaler Innenabstand sorgt fuer "Luft" zwischen den
	 * Eintraegen (steuerbar ueber --wt-toc-item-spacing).
	 */
	.wt-toc__link {
		display: block;
		padding: var(--wt-toc-item-spacing) 0;
		color: inherit;
		text-decoration: none;
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 18px;
		line-height: 1.3;
		opacity: 0.75;
		transition: opacity 0.15s ease-out, color 0.15s ease-out;
	}

	/* Unterebenen (H3 und tiefer) 2px kleiner als H2 (18px -> 16px). */
	.wt-toc__item[data-level="3"] .wt-toc__link,
	.wt-toc__item[data-level="4"] .wt-toc__link,
	.wt-toc__item[data-level="5"] .wt-toc__link,
	.wt-toc__item[data-level="6"] .wt-toc__link {
		font-size: 16px;
	}

	.wt-toc__link:hover,
	.wt-toc__link:focus {
		opacity: 1;
	}

	/**
	 * Aktiver Eintrag: hervorgehoben in der Akzentfarbe.
	 */
	.wt-toc__link.is-active {
		color: var(--wt-toc-accent);
		font-weight: 700;
		opacity: 1;
	}
}