/*
Theme Name: foobla
Description: Child-Theme von Twenty Twenty-Five für foobla.wigbels.de – Bilderraster, ruhige Farben, lokale Schriften (Manrope, Fira Code).
Author: Norbert Wigbels
Template: twentytwentyfive
Version: 1.1.11
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: foobla
Update URI: false
License: GNU General Public License v2 or later
*/

/* ---------- Bilderraster ---------- */
.foobla-raster .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--kachel);
}
.foobla-raster .wp-block-post-featured-image img {
	transition: transform .25s ease;
}
.foobla-raster .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.foobla-raster .wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--akzent);
}

/* Kachel ohne Bild: Platzhalter im gleichen Format */
.foobla-ohne-bild {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--wp--preset--color--leise);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.5px;
}

/* Kategorien über dem Titel */
.foobla-kategorie {
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-weight: 700;
}

/* ---------- Jahresleiste ---------- */
.foobla-jahre {
	overflow-x: auto;
}
.foobla-jahre__balken {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	min-width: 760px;
	height: 190px;
}
.foobla-jahre__jahr {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	height: 100%;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 11px;
	color: var(--wp--preset--color--leise);
}
.foobla-jahre__jahr:hover {
	opacity: .7;
}
/* Fokusrahmen nur bei Tastaturbedienung zeigen, nicht nach Mausklick */
.foobla-jahre__jahr:focus:not(:focus-visible) {
	outline: none;
}
.foobla-jahre__jahr:focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
	border-radius: 4px;
}
.foobla-jahre__saeule {
	display: block;
	width: 100%;
	border-radius: 4px 4px 0 0;
	background: var(--wp--preset--color--saeule);
}
.foobla-jahre__jahr.ist-aktuell .foobla-jahre__saeule {
	background: var(--wp--preset--color--akzent);
}
.foobla-jahre__label {
	color: var(--wp--preset--color--contrast);
}

/* ---------- Kopf: Suche ---------- */
/* Lupe als runder Knopf; das aufklappende Suchfeld als eigene Pille mit Abstand davor,
   damit sich Feld und Knopf nicht überschneiden. */
.foobla-kopf .wp-block-search__inside-wrapper {
	align-items: center;
	gap: 8px;
}
.foobla-kopf .wp-block-search__button {
	width: 44px;
	height: 44px;
	padding: 0;
	align-items: center;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 22px;
}
.foobla-kopf .wp-block-search__input {
	box-sizing: border-box;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 22px;
	background: var(--wp--preset--color--flaeche);
}

/* ---------- Seitennavigation ---------- */
/* "Neuere Beiträge" und "Ältere Beiträge" einheitlich als Textlinks */
.foobla-blaettern .wp-block-query-pagination-previous,
.foobla-blaettern .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.foobla-blaettern .wp-block-query-pagination-previous:hover,
.foobla-blaettern .wp-block-query-pagination-next:hover {
	color: var(--wp--preset--color--akzent);
}

/* ---------- Fuß ---------- */
.foobla-fuss a {
	text-decoration: none;
}
.foobla-copyright,
.foobla-copyright p {
	margin: 0;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 12px;
	color: var(--wp--preset--color--leise);
}

/* Zeilenabstand im Raster: WordPress rechnet zweiteilige Abstände ("40px 32px")
   in die Spaltenbreite ein und erzeugt dabei ungültiges CSS – daher hier getrennt. */
.foobla-raster .wp-block-post-template.is-layout-grid {
	row-gap: 40px;
}

/* Menü im Kopf: Die Menüpunkte tragen aus dem alten Theme die Größe "large"
   (has-large-font-size, mit !important). Hier gilt die Größe aus theme.json
   (wie die Kacheltitel). */
.foobla-kopf .wp-block-navigation .wp-block-navigation-item.has-large-font-size {
	font-size: inherit !important;
}

/* ---------- Beitragsnavigation: Hinweis und Titel getrennt ---------- */
.wp-block-post-navigation-link {
	max-width: 46%;
}
.wp-block-post-navigation-link a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 44px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.post-navigation-link-next a {
	align-items: flex-end;
	text-align: right;
}
.post-navigation-link__label {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--leise);
}
.post-navigation-link__title {
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
}
.wp-block-post-navigation-link a:hover .post-navigation-link__title {
	color: var(--wp--preset--color--akzent);
}