/* Kopfbereich und Ankernavigation.
   Mobile first: alles hier gilt ab 375 px, größere Viewports erweitern.

   Das Off-Canvas-Menü auf schmalen Bildschirmen kommt von WordPress
   selbst (Navigation-Block mit overlayMenu="mobile"). Es bringt
   Fokusfalle, Escape und die Rückgabe des Fokus an den Öffner bereits
   mit — nachgebessert wird hier nur, wo es die Vorgaben des Projekts
   verfehlt. */

/* --- Sticky Header --------------------------------------------------- */

/* Nicht .fm-header selbst: Der Vorlagenteil setzt ein <header> darum,
   und ein klebendes Element kommt nie aus seinem Elternkasten heraus.
   Der ist 68 px hoch — der Kopf wäre mitgescrollt, sichtbar klebend an
   nichts. Das <header> hingegen steht direkt in .wp-site-blocks und
   hat die ganze Seitenhöhe als Spielraum. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	/* Über der Karte des Filialfinders: Leaflet legt seine Ebenen auf
	   z-index 400 und 1000, aber innerhalb eines eigenen Stapelkontexts.
	   Über allem, was im normalen Fluss steht, reicht dieser Wert. */
	z-index: 100;
}

/* --- Marke und Social im Kopf ---------------------------------------- */
/* Die Marke ist der Weg zurück auf die Startseite und damit ein
   Bedienelement wie jedes andere. Ihre Zeichnung ist 2 rem hoch, der
   Link damit rund 32 px — unter der Untergrenze. Die Regel in basis.css
   fasst nur den Seitentitel-Block, den hier jetzt der eigene Logo-Block
   ersetzt. */

/* Die Marke bringt ihre 44 px aus basis.css schon mit; das Social-Symbol
   braucht sie auch in der Breite. */
.fm-header .fm-social__link {
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
}

/* --- Der gerade gelesene Abschnitt ----------------------------------- */
/* Gesetzt von assets/js/nav.js. Farbe allein genügt nicht — wer sie
   nicht unterscheiden kann, braucht die Linie. */

.fm-navigation__aktiv {
	color: var(--wp--preset--color--akzent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

/* --- Touch-Ziele der beiden Off-Canvas-Schalter ---------------------- */
/* WordPress gibt Öffner und Schließer nur so breit aus wie ihr Icon:
   gemessen 24 × 44 px. Die Höhe stimmt, die Breite nicht. */

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
}

/* Der Öffner steht am rechten Rand. Wird er auf 44 px verbreitert,
   rückt das Icon optisch nach innen; der negative Rand holt die
   Kante zurück, ohne die Trefferfläche zu beschneiden. */
.wp-block-navigation__responsive-container-open {
	margin-inline-end: -10px;
}

/* --- Das offene Menü -------------------------------------------------- */
/* Die Links sind 44 px hoch, aber nur so breit wie ihr Wort. Auf dem
   Daumen zählt die ganze Zeile — daneben zu tippen soll nicht ins
   Leere gehen. */

/* Die Liste ist ein Flex-Container; ihre Einträge sind von Haus aus nur
   so breit wie ihr Inhalt. Erst align-self dehnt sie, dann greift die
   volle Breite auf dem Link darin. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	align-self: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	inline-size: 100%;
}

/* Im offenen Menü liegt der aktive Link auf demselben Grund wie die
   übrigen; die Unterstreichung von oben trägt hier die Aussage. */