/*
Theme Name: JLK
Theme URI: https://jlkremer.de
Author: Stefan Förstel
Description: Schlankes Block-Theme für die Website von Jennifer-Lynn Kremer (nach Wireframe v3): Name als Logo, Portfolio-Raster mit drei Spalten, Projektvorlagen mit Bausteinen (3 hoch, Quer + Hoch, Querformat groß, Zwischenzeile), Schwarz/Weiß. Schriften liegen lokal im Theme (Inter Tight; Backup: Newsreader + Hanken Grotesk, alle SIL Open Font License 1.1).
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jlk
*/

/* ---------- Name auf der Startseite (seit 0.5.8 unter den Bildern, nicht mehr darüber) ---------- */
.wp-block-heading.jlk-name {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--50);
	margin-block-end: 0;
	font-family: var(--wp--custom--schrift--name);
	font-size: var(--wp--preset--font-size--name);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Zentrierte kurze Texte (seit 0.6.5): Zeilen ausgleichen, damit kein Wort allein in der letzten Zeile steht
   (Zeile unter dem Namen, Dach-Satz, Zeile zur Anfrage). Browser ohne diese Funktion brechen wie bisher um. */
:where(p, h1, h2, h3, h4).has-text-align-center {
	text-wrap: balance;
}

/* Bildpaar über dem Namen: max. 980 px breit */
.jlk-bildpaar {
	max-width: 980px;
	margin-inline: auto;
	margin-block-end: 0;
}

/* Titelbild über dem Namen (Muster „Startseite – Querformat und Raster“, seit 0.6.3):
   ein Querformat im festen Rahmen 3:2, so breit wie bisher das Bildpaar */
.wp-block-image.jlk-titelbild {
	max-width: 980px;
	margin-inline: auto;
	margin-block-end: 0;
}

.wp-block-image.jlk-titelbild img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Akzentschrift: Dach-Satz und Projekttitel ---------- */
.jlk-dachsatz {
	font-family: var(--wp--custom--schrift--akzent);
	font-weight: var(--wp--custom--gewicht--dachsatz);
	line-height: 1.4;
}

.jlk-titel {
	font-family: var(--wp--custom--schrift--akzent);
	font-weight: var(--wp--custom--gewicht--titel);
}

/* ---------- Portfolio-Raster ---------- */
.jlk-raster .wp-block-post-template {
	gap: 2px;
	align-items: start; /* Beitragsbilder ungeschnitten: Kacheln nicht auf Zeilenhöhe strecken */
}

.jlk-raster .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Kategorien werden nirgends mehr angezeigt (dienen nur noch für Alt-Texte und Ordnung) */
.jlk-raster .wp-block-post-terms {
	display: none;
}

/* Kachel: Projektname mittig auf dem Bild.
   Seit 0.5.9 ohne Abdunklung (Wunsch Jennifer-Lynn, 02.11.2026); lesbar nur über den Schatten der Schrift.
   Vergleichsvariante „Titel unter dem Bild“: website\testansichten\vorschau-0.5.8-portfolio-projekt.jpg */
.jlk-raster .wp-block-post {
	position: relative;
}

.jlk-raster .wp-block-post-featured-image {
	position: relative;
	margin: 0;
}

.jlk-raster .jlk-kachel-text {
	position: absolute;
	inset: 0;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 16px;
	text-align: center;
	color: var(--wp--preset--color--weiss);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 0, 0, 0.45);
	pointer-events: none; /* Klick geht auf das verlinkte Bild darunter */
}

.jlk-raster .jlk-kachel-text .wp-block-post-title {
	margin: 0;
	/* !important nötig: die Schriftgrößen-Klasse „has-small-font-size“ aus dem Block ist selbst !important */
	font-size: clamp(1.125rem, 1.6vw, 1.5rem) !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: uppercase;
}

.jlk-raster .jlk-kachel-text .wp-block-post-title a {
	color: var(--wp--preset--color--weiss);
	text-decoration: none;
}

/* Projekt ohne Beitragsbild: Text normal darunter statt auf dem Bild */
.jlk-raster .wp-block-post:not(:has(.wp-block-post-featured-image)) .jlk-kachel-text {
	position: static;
	color: var(--wp--preset--color--schwarz);
	text-shadow: none;
}

.jlk-raster .wp-block-post:not(:has(.wp-block-post-featured-image)) .jlk-kachel-text .wp-block-post-title a {
	color: var(--wp--preset--color--schwarz);
}

/* Kategorie ist nur Beschriftung, kein Filter */
.jlk-raster .wp-block-post-terms a,
.jlk-projekt-kopf .wp-block-post-terms a {
	pointer-events: none;
	cursor: default;
}

/* ---------- Projektseite ---------- */
/* Leere Absätze (z. B. aus älteren Projekt-Mustern) erzeugen keinen Abstand */
.single .wp-block-post-content > p:empty {
	display: none;
}

.jlk-projekt-nav a {
	text-decoration: none;
}

/* Titel und Projektzeile unter dem ersten (quer formatierten) Bild – eingefügt in functions.php */
.jlk-projekt-kopf {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.jlk-projekt-kopf .wp-block-post-title {
	margin: 0;
}

.jlk-projekt-kopf .jlk-projektzeile {
	margin: 0.4em 0 0;
	color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--small);
}

/* Texte im Projekt (seit 0.6.4): Absätze, Überschriften und Listen laufen über die Breite der Bildreihen
   und stehen linksbündig, auch wenn ein Absatz im Editor auf „zentriert“ steht (die Projekt-Muster bis 0.6.3
   hatten zentrierten Text). Gilt nur für Projekte (Beiträge), nicht für Seiten wie About oder Contact.
   Zweite Zeile: dasselbe im Editor (dort trägt der Editor-Körper die Klasse „post-type-post“). */
.single .wp-block-post-content.is-layout-constrained > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote),
body.post-type-post .is-root-container.is-layout-constrained > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote) {
	max-width: var(--wp--style--global--wide-size);
	text-align: left;
}

/* ---------- Projektseite: Reihe „Quer + Hoch“ (seit 0.6.0) ---------- */
/* Zwei Bilder nebeneinander, gleich hoch, nichts beschnitten. Die Breiten folgen dem Seitenverhältnis:
   functions.php setzt je Bild --jlk-r (Breite : Höhe). Ohne diesen Wert (z. B. im Editor) gilt 3:2 + 2:3.
   Doppelte Klasse: schlägt die WordPress-Regeln für Galerie-Spalten. */
.wp-block-gallery.jlk-reihe-mix.jlk-reihe-mix.has-nested-images {
	flex-wrap: nowrap;
	align-items: flex-start;
}

.wp-block-gallery.jlk-reihe-mix.jlk-reihe-mix.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: auto;
	min-width: 0;
	flex: var(--jlk-r, 1) 1 0;
	margin: 0;
}

.wp-block-gallery.jlk-quer-hoch.jlk-reihe-mix.has-nested-images figure.wp-block-image:not(#individual-image):first-of-type,
.wp-block-gallery.jlk-hoch-quer.jlk-reihe-mix.has-nested-images figure.wp-block-image:not(#individual-image):last-of-type {
	flex-grow: var(--jlk-r, 1.5);
}

.wp-block-gallery.jlk-quer-hoch.jlk-reihe-mix.has-nested-images figure.wp-block-image:not(#individual-image):last-of-type,
.wp-block-gallery.jlk-hoch-quer.jlk-reihe-mix.has-nested-images figure.wp-block-image:not(#individual-image):first-of-type {
	flex-grow: var(--jlk-r, 0.6667);
}

.wp-block-gallery.jlk-reihe-mix.jlk-reihe-mix.has-nested-images figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: initial;
}

/* Handy: untereinander, jedes Bild volle Breite (wie das dritte Bild einer 3er-Reihe) */
@media (max-width: 599px) {
	.wp-block-gallery.jlk-reihe-mix.jlk-reihe-mix.has-nested-images {
		flex-wrap: wrap;
	}

	.wp-block-gallery.jlk-reihe-mix.jlk-reihe-mix.has-nested-images figure.wp-block-image:not(#individual-image) {
		flex: 0 0 100%;
	}
}

/* ---------- Projektseite: Zwischenzeile (seit 0.6.0) ---------- */
/* Trennt Kapitel auf einer Seite, z. B. „AW26 · Februar 2026“ oder „Wäsche“. Klein und grau wie die Projektzeile. */
.jlk-zwischenzeile.jlk-zwischenzeile {
	margin-block: var(--wp--preset--spacing--60) 0;
	color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* ---------- Bildraster „Masonry“ (Stil der Galerie, Startseite) ---------- */
/* Spalten laufen von oben nach unten; alle Bilder gleich breit, Querformate dadurch kleiner.
   Doppelte Klasse: schlägt die WordPress-Regeln für zugeschnittene Galerien (gleiche Gewichtung). */
.wp-block-gallery.is-style-jlk-masonry.has-nested-images {
	display: block;
	column-count: 3;
	column-gap: 8px;
}

.wp-block-gallery.is-style-jlk-masonry.is-style-jlk-masonry.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	margin: 0 0 8px;
	break-inside: avoid;
}

.wp-block-gallery.is-style-jlk-masonry.is-style-jlk-masonry.has-nested-images figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: initial;
	/* kein „aspect-ratio: auto“: Bilder mit sizes="auto" brauchen das Seitenverhältnis aus width/height,
	   sonst nimmt der Browser beim verzögerten Laden eine Platzhaltergröße und verzerrt das Bild */
}

/* Verlinkte Bilder: Link über die ganze Spaltenbreite, sonst schrumpft das Bild auf seine Dateibreite */
.wp-block-gallery.is-style-jlk-masonry.is-style-jlk-masonry.has-nested-images figure.wp-block-image:not(#individual-image) > a {
	display: block;
}

.wp-block-gallery.is-style-jlk-masonry.jlk-masonry-2.has-nested-images {
	column-count: 2;
}

@media (max-width: 781px) {
	.wp-block-gallery.is-style-jlk-masonry.has-nested-images {
		column-count: 2;
	}
}

/* ---------- Fußzeile ---------- */
.jlk-footer {
	margin-block-start: var(--wp--preset--spacing--80);
	border-top: 1px solid var(--wp--preset--color--linie);
	color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--small);
}

.jlk-footer a {
	color: var(--wp--preset--color--grau);
}

.jlk-footer a:hover,
.jlk-footer a:focus {
	color: var(--wp--preset--color--schwarz);
}

/* ---------- Nur für Screenreader sichtbar ---------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 600px) {
	.wp-block-heading.jlk-name {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

/* ---------- Sprachwahl DE/EN (Kopfzeile, TranslatePress) ---------- */
.jlk-sprachwahl {
	display: flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.jlk-sprachwahl a {
	color: var(--wp--preset--color--grau);
	text-decoration: none;
}

.jlk-sprachwahl a:hover,
.jlk-sprachwahl a:focus {
	color: var(--wp--preset--color--schwarz);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.jlk-sprachwahl-aktiv {
	color: var(--wp--preset--color--schwarz);
}

.jlk-sprachwahl-trenner {
	color: var(--wp--preset--color--linie);
}

/* Mobil: Sprachwahl vor das Menüsymbol, damit das Menüsymbol ganz rechts steht. */
@media (max-width: 599px) {
	.jlk-sprachwahl {
		order: -1;
	}
}

/* ---------- Mobilmenü als Feld oben statt ganzer Bildschirm ---------- */
/* Das geöffnete Menü ist nur so hoch wie seine Einträge; darunter bleibt die Seite
   leicht abgedunkelt sichtbar (wie die Projektkacheln, 30 %). Ein Tipp auf den
   abgedunkelten Bereich schließt das Menü (assets/js/menue.js). */
body .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 0;
	background-color: rgba(17, 17, 17, 0.3);
}

/* Schmal und rechts angedockt: so breit wie die Einträge, mindestens 180 px,
   damit links die Seite sichtbar bleibt. */
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	width: max-content;
	min-width: 180px;
	max-width: 100%;
	margin-left: auto;
	margin-right: 0;
	border-left: 1px solid var(--wp--preset--color--linie);
	/* oben 24 px wie die Kopfzeile: das X steht genau dort, wo vorher das Menüsymbol war */
	padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-right, 16px) var(--wp--preset--spacing--40) var(--wp--style--root--padding-left, 16px);
	background-color: var(--wp--preset--color--weiss);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

/* Abstand X → erster Eintrag wie zwischen den Einträgen: 24 px Symbol + 28 px */
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 52px;
}

/* =====================================================================
   Ab 0.6.6
   ===================================================================== */

/* ---------- Kopfzeile auf kleinen Handys einzeilig ----------
   Unter 400 px passten Name, DE/EN und Menüsymbol nicht nebeneinander (360/375 px):
   DE/EN und Menü rutschten in eine zweite Zeile. Kleinere Abstände; der Name wird bei
   sehr schmalen Geräten (320 px) etwas kleiner. */
@media (max-width: 399px) {
	header.wp-block-template-part .alignwide.is-layout-flex {
		flex-wrap: nowrap;
		gap: 12px;
	}
	header.wp-block-template-part .alignwide.is-layout-flex > .wp-block-group.is-nowrap {
		gap: 14px;
		flex-shrink: 0;
	}
	header.wp-block-template-part .wp-block-site-title {
		min-width: 0;
		font-size: min(1.125rem, 4.6vw);
	}
}

/* ---------- Projekt-Navigation: links / Mitte / rechts ----------
   Vorher verteilt (space-between): „Alle Projekte“ wanderte je nach Titellänge, auf Tablets
   rutschte das nächste Projekt in eine zweite Zeile nach links. Jetzt drei feste Spalten;
   fehlt das vorige oder nächste Projekt (Anfang/Ende), bleibt die Spalte leer.
   Unter 782 px untereinander: voriges links, nächstes rechts, „Alle Projekte“ mittig darunter. */
.jlk-projekt-nav.is-layout-flex {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--30);
}
.jlk-projekt-nav > * {
	margin: 0 !important;
	min-width: 0;
}
.jlk-projekt-nav > .post-navigation-link-previous {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}
.jlk-projekt-nav > p {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	text-align: center;
	white-space: nowrap;
}
.jlk-projekt-nav > .post-navigation-link-next {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	text-align: right;
}
@media (max-width: 781px) {
	.jlk-projekt-nav.is-layout-flex {
		grid-template-columns: minmax(0, 1fr);
	}
	.jlk-projekt-nav > .post-navigation-link-previous {
		grid-column: 1;
		grid-row: 1;
	}
	.jlk-projekt-nav > .post-navigation-link-next {
		grid-column: 1;
		grid-row: 2;
	}
	.jlk-projekt-nav > p {
		grid-column: 1;
		grid-row: 3;
		margin-top: var(--wp--preset--spacing--30) !important;
	}
}

/* ---------- Menü: aktueller Punkt (Klasse aus functions.php) ---------- */
.wp-block-navigation .wp-block-navigation-item.jlk-aktiv > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

/* ---------- Sprachwahl: größere Tippfläche, ohne dass sich etwas verschiebt ---------- */
.jlk-sprachwahl a,
.jlk-sprachwahl-aktiv {
	display: inline-block;
	padding: 10px 6px;
	margin: -10px -6px;
}