/* ==========================================================================
   Mein Lieblingsitaliener 2026
   Ergänzt theme.json um das, was sich dort nicht abbilden lässt:
   Kopfbereich-Raster, die Bausteinstile aus dem Layout und die beiden
   Sonderraster (Restaurants, Magazin).
   ========================================================================== */

/* --------------------------------------------------------------- Grundlagen */

/* Breakpoints stehen in theme.json unter settings.viewport (mobile 680px,
   tablet 900px). WordPress baut daraus die Media Queries für die responsiven
   Blockstile im Editor. Die Werte hier von Hand gleichzuhalten ist nötig,
   weil der Kern sie nicht als CSS-Variable veröffentlicht — wer sie ändert,
   ändert sie an beiden Stellen. 1180px ist eine Zugabe für das 4-spaltige
   Restaurantraster und hat in theme.json keine Entsprechung. */

:root {
	--mli-ease: 220ms cubic-bezier(.2, .6, .3, 1);
}

::selection {
	background: var(--wp--preset--color--aubergine);
	color: var(--wp--preset--color--base);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--aubergine);
	outline-offset: 3px;
	border-radius: 1px;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Keine Zeilenlängen-Begrenzung in "ch" auf Absätzen: ch hängt an der
   Schriftgröße, dadurch bekämen Label, Fließtext und Einleitung verschieden
   breite Spalten und die linke Kante würde treppenförmig versetzt. Die
   Lesbarkeit regelt contentSize aus theme.json — 740px sind bei 1rem rund
   70 Zeichen und damit im guten Bereich. */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------- Bausteinstile */

/* Label mit Strich — die kleinen Rubrikmarken im Layout ("BUON APPETITO SEMPRE"). */
.is-style-mli-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 1.25rem;
}

.is-style-mli-eyebrow::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 1px;
	margin-top: .9rem;
	background: var(--wp--preset--color--aubergine);
}

.is-style-mli-eyebrow.has-text-align-center::after {
	margin-inline: auto;
}

/* Handschrift-Akzente — die italienischen Zurufe aus dem Layout. */
.is-style-mli-script {
	font-family: var(--wp--preset--font-family--script);
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--wp--preset--color--aubergine);
}

.has-base-color .is-style-mli-script,
.is-style-mli-script.has-base-color {
	color: var(--wp--preset--color--base);
}

/* Link mit Pfeil — als Grafik, nicht als Textzeichen, damit kein Pfeil mitkopiert
   wird und der Screenreader ihn nicht vorliest.

   Die Auswahl ist bewusst eng: "is-style-mli-arrow" sitzt beim Absatz auf dem
   <p>, beim Weiterlesen-Block auf dem <a> selbst und beim Button auf dem
   umschließenden <div>. Eine Regel ".is-style-mli-arrow a" träfe deshalb auch
   den Button und würde ihm Innenabstand und Unterkante überschreiben. */
p.is-style-mli-arrow a,
a.is-style-mli-arrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid currentColor;
}

p.is-style-mli-arrow a::after,
a.is-style-mli-arrow::after {
	content: "";
	inline-size: 1.15rem;
	block-size: .5rem;
	background: currentColor;
	clip-path: polygon(0 42%, 72% 42%, 72% 0, 100% 50%, 72% 100%, 72% 58%, 0 58%);
	transition: translate var(--mli-ease);
	/* Die Sperrung wirkt auch hinter dem letzten Buchstaben und vergrößert den
	   Abstand zum Pfeil optisch. Hier wieder abgezogen. */
	margin-inline-start: calc(var(--wp--custom--tracking--label) * -1);
}

p.is-style-mli-arrow a:hover::after,
p.is-style-mli-arrow a:focus-visible::after,
a.is-style-mli-arrow:hover::after,
a.is-style-mli-arrow:focus-visible::after {
	translate: .25rem 0;
}

/* Karte — weiße Fläche auf Creme, wie die Restaurant- und Magazinkacheln. */
.is-style-mli-card {
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Umrandeter Button für sekundäre Wege. */
.wp-block-button.is-style-mli-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--aubergine);
	box-shadow: inset 0 0 0 1px currentColor;
}

.wp-block-button.is-style-mli-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--aubergine);
	color: var(--wp--preset--color--base);
}

/* Meta-Label für Kategorie und Datum im Magazin. */
.is-style-mli-meta,
.is-style-mli-meta a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

/* ----------------------------------------------------------- Seitenkopf */

/* Eyebrow, Überschrift und Vorspann stehen auf jeder Seite gleich: über die
   Breite des Rasters und mit demselben Abstand unter dem Kopfbereich. Die Maße
   liegen hier und nicht in den Templates, damit eine Änderung überall wirkt —
   in den Archiven, auf den Seiten und in den Seiteninhalten, die ihren Kopf
   selbst mitbringen. */
.mli-seitenkopf {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

/* Der erste Baustein im Kopf bringt sonst seinen eigenen Fließabstand mit und
   verschiebt den Abstand nach oben. */
.mli-seitenkopf > :first-child {
	margin-block-start: 0;
}

/* Steht der Kopf im Seiteninhalt, liegt er in einem Block mit Lesebreite.
   Dort muss er sich die volle Rasterbreite zurückholen. */
.wp-block-post-content > .mli-seitenkopf {
	max-width: var(--wp--style--global--wide-size);
}

/* ----------------------------------------------------------- Kopfbereich */

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

/* Drei Zonen: Zuruf links, Logo in der Mitte, Aktionen rechts. */
.mli-header__top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.mli-header__top > :last-child {
	justify-self: end;
}

.mli-header__claim {
	font-family: var(--wp--preset--font-family--script);
	font-size: clamp(1.2rem, .95rem + .7vw, 1.7rem);
	line-height: 1.35;
	color: var(--wp--preset--color--aubergine);
	margin: 0;
}

.mli-header__logo img,
.mli-footer__logo img {
	width: auto;
	/* height: clamp(72px, 6vw, 114px); */
}

.mli-footer__logo img {
	height: clamp(72px, 7vw, 104px);
}

.mli-header__nav {
	justify-content: center;
	margin-block-start: 1rem;
}

.mli-header__nav .wp-block-navigation-item__content {
	padding-block: .35rem;
	border-bottom: 1px solid transparent;
}

.mli-header__nav .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--aubergine);
	text-decoration: none;
}

/* Der Abschnitt, in dem man gerade steht. Die Markierung setzt das Plugin
   mli-core — WordPress vergibt sie bei benutzerdefinierten Menülinks nicht
   selbst. Farbe statt dickerer Linie, damit die Zeile nicht um einen Pixel
   springt und der Zustand sich trotzdem vom Hover unterscheidet. */
.mli-header__nav .current-menu-item > .wp-block-navigation-item__content,
.mli-header__nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--aubergine);
	border-bottom-color: var(--wp--preset--color--aubergine);
	text-decoration: none;
}

@media (width <= 900px) {
	.mli-header__top {
		grid-template-columns: 1fr auto;
	}

}

/* ------------------------------------------------------------------- Hero */

.mli-hero {
	position: relative;
	isolation: isolate;
}

.mli-hero__panel {
	backdrop-filter: blur(2px);
}

/* Die Hero-Überschrift darf im Layout eng laufen und über drei Zeilen brechen. */
.mli-hero h1 {
	max-width: 16ch;
	letter-spacing: -.02em;
}

/* ------------------------------------------------------- Magazin */

/* Der Aufmacher trägt ein Textfeld auf Creme, das über den unteren Bildrand
   greift — wie im Layout. */
.mli-magazin__feature .wp-block-cover {
	min-height: clamp(24rem, 46vw, 38rem);
}

.mli-magazin__feature-panel {
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--40);
	max-width: 26rem;
}

.mli-teaser__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.15;
	margin-block: .5rem;
}

/* Teaser-Bilder ruhig halten: ein Motiv, kein Rahmen, keine Rundung. */
.mli-teaser .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------- Fußbereich */

.mli-footer a {
	text-decoration: none;
}

.mli-footer a:hover {
	text-decoration: underline;
}

.mli-footer__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

@media (width <= 680px) {
	.mli-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mli-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

/* ------------------------------------------------------------ Zierelemente */

/* Aquarell-Zweige aus dem Layout: rein dekorativ, nie im Textfluss, auf
   kleinen Schirmen aus dem Weg. */
.mli-decor {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.mli-decor img {
	display: block;
	width: 100%;
	height: auto;
}

@media (width <= 900px) {
	.mli-decor { display: none; }
}

/* Ein Abschnitt, in dem Zierelemente sitzen, braucht einen Bezugsrahmen. */
.mli-section {
	position: relative;
}

.mli-section > * {
	position: relative;
	z-index: 1;
}

/* Pfeil auch auf gefüllten Buttons (Kopfbereich-CTA, Hero). */
.wp-block-button.is-style-mli-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
}

.wp-block-button.is-style-mli-arrow .wp-block-button__link::after {
	content: "";
	inline-size: 1.15rem;
	block-size: .5rem;
	background: currentColor;
	clip-path: polygon(0 42%, 72% 42%, 72% 0, 100% 50%, 72% 100%, 72% 58%, 0 58%);
	transition: translate var(--mli-ease);
	/* Die Sperrung wirkt auch hinter dem letzten Buchstaben und vergrößert den
	   Abstand zum Pfeil optisch. Hier wieder abgezogen. */
	margin-inline-start: calc(var(--wp--custom--tracking--label) * -1);
}

.wp-block-button.is-style-mli-arrow .wp-block-button__link:hover::after {
	translate: .25rem 0;
}

/* Suche im Kopfbereich: nur das Lupensymbol, Feld klappt beim Klick auf. */
.mli-header__search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	padding: .5rem;
}

.mli-header__search .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: transparent;
	font-size: var(--wp--preset--font-size--small);
}

/* Der Aufmacher trägt Text direkt auf dem Foto. Ein Verlauf von rechts hält ihn
   lesbar, egal welches Motiv später eingesetzt wird — die linke Bildhälfte
   bleibt unangetastet. */
.mli-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg,
		rgba(251, 248, 241, 0) 30%,
		rgba(251, 248, 241, .72) 52%,
		rgba(251, 248, 241, .94) 68%);
}

.mli-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

@media (width <= 900px) {
	.mli-hero::after {
		background: linear-gradient(180deg,
			rgba(251, 248, 241, .25) 0%,
			rgba(251, 248, 241, .88) 42%,
			rgba(251, 248, 241, .97) 60%);
	}

}

/* Bandhöhen begrenzen: an großen Schirmen soll ein Band nicht ins Endlose
   wachsen, an kleinen nicht unter eine lesbare Höhe fallen. */
.wp-block-cover.mli-hero {
	min-height: clamp(32rem, 80vh, 52rem);
}

.wp-block-cover.mli-band {
	min-height: clamp(22rem, 56vh, 32rem);
}

/* Im Aufmacher liegt das Label auf dem Foto — dort trägt das gedeckte Grau
   zu wenig. */
.mli-hero .is-style-mli-eyebrow {
	color: var(--wp--preset--color--aubergine);
}

.mli-hero .is-style-mli-eyebrow::after {
	background: currentColor;
}

/* Der Cover-Block setzt seinen Inhalt pauschal auf Weiß. Im hellen Textfeld
   des Magazin-Aufmachers muss die Schriftfarbe zurückgeholt werden, sonst
   steht weißer Text auf Creme. */
.mli-magazin__feature-panel,
.mli-magazin__feature-panel :where(p, a, h1, h2, h3, h4, .wp-block-post-title) {
	color: var(--wp--preset--color--ink);
}

.mli-magazin__feature-panel .wp-block-post-title a {
	color: var(--wp--preset--color--aubergine);
	text-decoration: none;
}

.mli-magazin__feature-panel .wp-block-post-title a:hover {
	text-decoration: underline;
}

.mli-magazin__feature-panel .is-style-mli-meta,
.mli-magazin__feature-panel .is-style-mli-meta a {
	color: var(--wp--preset--color--ink-soft);
}

/* ------------------------------------------------- Raster in Block-Gruppen */

/* WordPress gibt jedem Folgeelement einer Gruppe einen oberen Abstand
   (:where(.wp-block-group) > * + *). In einem Raster staffelt das die Spalten
   treppenförmig nach unten. Für unsere drei Raster wird das zurückgenommen —
   der Abstand kommt dort aus "gap". */
.mli-header__top > .wp-block-group,
.mli-header__top > .wp-block-paragraph,
.mli-footer__columns > .wp-block-group,
.mli-footer__legal > * {
	margin-block-start: 0;
}

/* Die Verweislisten im Fußbereich sind Navigation, keine Aufzählung. */
.mli-footer__columns ul {
	list-style: none;
	margin: 1rem 0 0;
	padding-left: 0;
}

.mli-footer__columns ul li {
	margin-block: 0;
}

.mli-footer__columns h5 {
	margin-block: 0;
}

/* ----------------------------------------------- Bänder ohne Zwischenraum */

/* WordPress setzt zwischen allen Geschwisterblöcken den Blockabstand von
   1,5rem — also auch zwischen Kopfbereich, Inhalt und Fußbereich sowie
   zwischen zwei vollbreiten Bändern. Dort entsteht dadurch ein schmaler
   Cremestreifen mitten im Bild. Die Abschnitte bringen ihren Abstand als
   eigenes Innenpolster mit, der Zwischenraum ist überflüssig. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull {
	margin-block-start: 0;
}

/* ------------------------------------------- Magazin-Raster festgeschrieben */

/* Die Spaltenzahl der beiden Teaser-Reihen steht als Blockattribut im
   Seiteninhalt. Der Editor verliert diese Angabe gelegentlich beim Speichern
   und setzt das Raster auf einspaltig zurück — dann stehen die Teaser
   untereinander und niemand weiß warum. Hier steht sie zusätzlich fest,
   damit die Darstellung nicht davon abhängt, was der Editor gerade tut.
   Die Auswahl über eine eigene Klasse, weil die vom Editor erhalten bleibt. */
.mli-magazin__zwei .wp-block-post-template,
.mli-magazin__drei .wp-block-post-template {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mli-magazin__zwei .wp-block-post-template {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mli-magazin__drei .wp-block-post-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Fällt die Gitter-Angabe weg, behandelt WordPress die Liste als Fluss und
   gibt jedem Folgeelement einen oberen Abstand. Im Raster sitzen die Teaser
   dadurch versetzt statt auf einer Linie. Der Abstand kommt aus "gap". */
.mli-magazin__zwei .wp-block-post-template > *,
.mli-magazin__drei .wp-block-post-template > * {
	margin-block-start: 0;
}

@media (width <= 900px) {
	.mli-magazin__drei .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 680px) {
	.mli-magazin__zwei .wp-block-post-template,
	.mli-magazin__drei .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}