/* ── Editorial-Schicht: Typo-Finesse & Micro-Interactions ────────────────────
 * Ruhig-editorial (Appleton) mit wenigen gezielten Momenten (Comeau).
 * Alle Farben über Palette-Slugs → Dark Mode erbt automatisch. */

/* ── Links im Fließtext: animierte Unterstreichung ─────────────────────────── */

.jl-prose p a,
.jl-prose li a,
.wp-block-post-excerpt a,
.jl-fluss .wp-block-post-excerpt__more-link {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in oklab, var(--wp--preset--color--accent) 40%, transparent);
	text-underline-offset: 3px;
	transition:
		text-decoration-color 0.2s ease,
		text-decoration-thickness 0.2s ease,
		text-underline-offset 0.2s ease,
		color 0.2s ease;
}

.jl-prose p a:hover,
.jl-prose li a:hover,
.wp-block-post-excerpt a:hover,
.jl-fluss .wp-block-post-excerpt__more-link:hover {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Navigation: keine Dauer-Unterstreichung, Hover baut sie auf */
.wp-block-navigation a {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: 5px;
	transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.wp-block-navigation a:hover {
	text-decoration-color: var(--wp--preset--color--accent);
}

/* ── Fokusring: Theme-Stil statt Chrome-Default-Doppelring ─────────────────── */

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Kicker: Uppercase-Label (IBM Plex hat keine echten Small Caps) ────────── */

.jl-kicker,
.jl-kicker a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.jl-kicker a:hover {
	color: var(--wp--preset--color--contrast);
}

/* Datum innerhalb der Kicker-Zeile: zurückhaltend */
.jl-kicker .wp-block-post-date,
.jl-kicker .wp-block-post-date a {
	color: var(--wp--preset--color--contrast-2);
	font-weight: 400;
	letter-spacing: 0.06em;
}

/* Trennpunkt zwischen Kicker-Elementen */
.jl-kicker > * + *::before {
	content: "·";
	margin-inline-end: 0.6em;
	color: var(--wp--preset--color--border);
}

/* ── Überschriften: Rhythmus & Spationierung ───────────────────────────────── */

h1,
.wp-block-post-title {
	letter-spacing: -0.015em;
	font-feature-settings: "liga" 1;
	text-wrap: balance;
}

.jl-prose > .wp-block-post-content h2,
.is-root-container h2 {
	margin-block-start: 2.5rem;
	letter-spacing: -0.01em;
}

.jl-prose > .wp-block-post-content h3,
.is-root-container h3 {
	margin-block-start: 2rem;
}

/* ── Ornament-Trenner ──────────────────────────────────────────────────────── */

.jl-flourish {
	text-align: center;
	color: var(--wp--preset--color--contrast-2);
	letter-spacing: 0.5em;
	font-size: 0.875rem;
	user-select: none;
}

/* ── Bild-Momente im Fluss: sanfter Lift ───────────────────────────────────── */

.jl-fluss .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 6px;
}

.jl-fluss .wp-block-post-featured-image img {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.jl-fluss .wp-block-post-featured-image:hover img {
	transform: scale(1.015);
}

/* ── Post-Navigation (Vor/Zurück): nur Pfeil + unterstrichener Titel ───────── */

.jl-post-nav {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block-start: var(--wp--preset--spacing--30);
	gap: var(--wp--preset--spacing--30);
}

.jl-post-nav .wp-block-post-navigation-link {
	max-width: 45%;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

.jl-post-nav .wp-block-post-navigation-link__arrow-previous,
.jl-post-nav .wp-block-post-navigation-link__arrow-next {
	color: var(--wp--preset--color--contrast-2);
}

.jl-post-nav a {
	color: var(--wp--preset--color--contrast);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in oklab, var(--wp--preset--color--accent) 40%, transparent);
	text-underline-offset: 3px;
	transition:
		text-decoration-color 0.2s ease,
		text-decoration-thickness 0.2s ease,
		text-underline-offset 0.2s ease,
		color 0.2s ease;
}

.jl-post-nav a:hover {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ── Post-Outro: Kontaktzeile zwischen Artikel und Post-Nav ────────────────── */

.jl-post-outro {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block-start: var(--wp--preset--spacing--30);
}

.jl-post-outro p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}

.jl-post-outro a {
	color: var(--wp--preset--color--accent);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in oklab, var(--wp--preset--color--accent) 40%, transparent);
	text-underline-offset: 3px;
	transition:
		text-decoration-color 0.2s ease,
		text-decoration-thickness 0.2s ease,
		text-underline-offset 0.2s ease,
		color 0.2s ease;
}

.jl-post-outro a:hover {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ── Film-Karte: Poster + Steckbrief in den Review-Posts ───────────────────── */

.jl-film-card .jl-film-card-poster {
	flex-shrink: 0;
	margin: 0;
}

.jl-film-card .jl-film-card-poster img {
	display: block;
	border-radius: 4px;
}

/* Schmale Viewports: Poster über den Meta-Zeilen statt daneben */
@media (max-width: 480px) {
	.jl-film-card {
		flex-wrap: wrap !important;
	}
}

/* ── Back-to-top: Geschwister des Theme-Toggles, unten rechts ──────────────── */

#jl-back-to-top {
	position: fixed;
	bottom: 1.25rem;
	right: 1.25rem;
	z-index: 9999;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: var(--wp--preset--color--base);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: inherit;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		visibility 0s linear 0.2s;
}

#jl-back-to-top.is-visible {
	opacity: 0.6;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

#jl-back-to-top.is-visible:hover {
	opacity: 1;
	transform: scale(1.1);
}

#jl-back-to-top.is-visible:active {
	transform: scale(0.92);
}

/* ── Scroll-Reveal: CSS-only, direction-aware (Una-Kravets-Pattern) ──────────
 * timeline-trigger/animation-trigger (Chrome 145+). Progressive Enhancement:
 * Browser ohne Support zeigen alles sofort — kein JS, kein Fallback nötig. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-trigger: --jl-reveal play-forwards) {
		html {
			container-type: scroll-state;
		}

		@keyframes jl-slide-in {
			from {
				opacity: 0;
				transform: translateY(var(--jl-reveal-amt, 40px));
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* Trigger erst bei 25% Sichtbarkeit — bei entry 0% läuft die Animation
		 * an der Viewport-Kante ab und ist beim Scrollen kaum wahrnehmbar.
		 * p:has(img) fängt die Legacy-Foto-Posts (<p><a><img>, keine figure). */
		.jl-fluss .wp-block-post,
		.wp-block-post-content figure,
		.wp-block-post-content p:has(> a > img),
		.wp-block-post-content p:has(> img) {
			animation: jl-slide-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
			trigger-scope: --jl-reveal;
			timeline-trigger: --jl-reveal view() entry 25% exit 100%;
			animation-trigger: --jl-reveal play-forwards;
		}

		/* Direction-aware: beim Hochscrollen gleiten Einträge von oben ein */
		@container scroll-state(scrolled: top) {
			.jl-fluss .wp-block-post,
			.wp-block-post-content figure,
			.wp-block-post-content p:has(> a > img),
			.wp-block-post-content p:has(> img) {
				--jl-reveal-amt: -40px;
			}
		}
	}
}

/* ── Mobile-Nav: vollflächiges Overlay mit Fade (à la elliotjaystocks.com) ──── */

/* Core togglet nur .is-menu-open — für den Fade rendern wir das Overlay
 * permanent und animieren opacity/visibility statt display. */
@media (max-width: 599px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 100000;
		background-color: var(--wp--preset--color--accent);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.wp-block-navigation__responsive-container {
		transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		opacity: 1;
		visibility: visible;
		background-color: var(--wp--preset--color--accent) !important;
		padding: 0;
	}

	/* Die Desktop-Ausrichtung (rechts) sickert über Layout-Variablen ins
	 * Overlay — hier neutralisieren. */
	.wp-block-navigation__responsive-container,
	.wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-justification-setting: center;
		--navigation-layout-justify: center;
		--navigation-layout-align: center;
		--navigation-layout-direction: column;
	}

	/* Inhalt: zentrierte Spalte, große Serifen-Links. Selektoren spiegeln die
	 * Core-Spezifität (.is-menu-open), sonst verlieren sie im offenen Zustand. */
	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.75rem;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		align-items: center;
		justify-content: center;
		text-align: center;
		margin: 0;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation-item {
		transform: translateY(0.6rem);
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		transform: translateY(0);
	}

	.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 2.25rem;
		font-weight: 600;
		color: var(--wp--preset--color--base) !important;
		text-decoration: none;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
		opacity: 0.75;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
		width: 100%;
		height: 100%;
	}

	.wp-block-navigation__responsive-container button.wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 1.25rem;
		right: 1.25rem;
		z-index: 1;
		color: var(--wp--preset--color--base);
		padding: 0.5rem;
	}

	.wp-block-navigation__responsive-container button.wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
	}
}

/* ── About-Unternavigation (Der Typ / Uses / Likes) ────────────────────────── */

.jl-der-typ-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.jl-der-typ-nav a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
	padding-block-end: 0.2rem;
	border-block-end: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.jl-der-typ-nav a:hover {
	color: var(--wp--preset--color--contrast);
}

.page-slug-der-typ .jl-der-typ-nav a[href="/der-typ/"],
.page-slug-uses .jl-der-typ-nav a[href="/uses/"],
.page-slug-likes .jl-der-typ-nav a[href="/likes/"],
.page-slug-filme .jl-der-typ-nav a[href="/filme/"],
.page-slug-plattenteller .jl-der-typ-nav a[href="/plattenteller/"] {
	color: var(--wp--preset--color--accent);
	border-block-end-color: var(--wp--preset--color--accent);
}

/* ── Social-Icons im Footer ────────────────────────────────────────────────── */

.jl-social .wp-social-link a {
	transition: color 0.15s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.jl-social .wp-social-link:hover a {
	color: var(--wp--preset--color--accent) !important;
}

.jl-social .wp-social-link:hover {
	transform: none; /* Core-Default (translateY) durch Farbwechsel ersetzt */
}

@media (prefers-reduced-motion: reduce) {
	.jl-social .wp-social-link a {
		transition: none;
	}
}

/* ── Header-Hairline ───────────────────────────────────────────────────────── */

.jl-site-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ── Reduced Motion: alles aus ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.jl-prose p a,
	.jl-prose li a,
	.wp-block-post-excerpt a,
	.wp-block-navigation a,
	.jl-fluss .wp-block-post-featured-image img,
	.wp-block-navigation__responsive-container,
	.wp-block-navigation__responsive-container .wp-block-navigation-item,
	.jl-post-nav a,
	.jl-post-outro a,
	#jl-back-to-top {
		transition: none;
	}

	.jl-fluss .wp-block-post-featured-image:hover img {
		transform: none;
	}
}