/**
 * Breadcrumb Component
 *
 * Semantische Breadcrumb-Navigation: nav > ol > li (#114).
 * Das Trennzeichen steckt in einem Pseudo-Element und ist per
 * `content: "…" / ""` von der Barrierefreiheits-Schnittstelle ausgenommen,
 * damit Screenreader es nicht vorlesen.
 *
 * Wird in inc/filters.php eingebunden (assets/css/components/ wird weder von
 * gulp noch von functions.php erfasst).
 */

/* Der Pfad ordnet die Seite ein, er ist nicht der Inhalt: eine Stufe kleiner
   als der Fliesstext und im Normalgewicht. Vorher stand er auf 18px/600 und
   wog damit schwerer als der Teasertext daneben (#114). */
.kbd-breadcrumb {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.8;
	color: var(--wp--preset--color--primary-blue);
	max-width: 100%;
	min-width: 0;
}

/* Hoehere Spezifitaet als `.wp-site-blocks ol` aus content-spacing.css,
   das sonst display:grid, list-style:decimal und padding-left:24px setzt. */
.kbd-breadcrumb .kbd-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}

.kbd-breadcrumb .kbd-breadcrumb__list > .kbd-breadcrumb__item {
	display: inline-flex;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	/* Kein Eintrag darf breiter werden als der Pfad selbst - sonst schiebt ein
	   langer Titel die Zeile ueber den Inhaltsbereich hinaus. */
	max-width: 100%;
}

.kbd-breadcrumb .kbd-breadcrumb__item::marker {
	content: "";
}

.kbd-breadcrumb .kbd-breadcrumb__item::before {
	content: none;
}

/* Trennzeichen zwischen den Ebenen - rein dekorativ.
   `flex-shrink: 0` und `white-space: nowrap` halten es in voller Breite am
   Eintrag, zu dem es gehoert: Es soll nie zusammengedrueckt werden und nie
   allein am Ende einer Zeile zurueckbleiben. */
.kbd-breadcrumb .kbd-breadcrumb__item + .kbd-breadcrumb__item::before {
	content: "\203A";
	display: inline-block;
	padding: 0 0.4em;
	color: var(--wp--preset--color--primary-blue);
	flex-shrink: 0;
	white-space: nowrap;
}

@supports ( content: "a" / "" ) {
	.kbd-breadcrumb .kbd-breadcrumb__item + .kbd-breadcrumb__item::before {
		content: "\203A" / "";
	}
}

/* Wie die uebrige Navigation des Themes (.kbd-primary-nav): im Ruhezustand
   ohne Unterstreichung, damit der Pfad nicht wie eine Reihe Fliesstext-Links
   wirkt. Vorher war es umgekehrt - dauerhaft unterstrichen, beim Hovern
   ploetzlich nicht mehr (#114). */
.kbd-breadcrumb__link,
.kbd-breadcrumb__link:visited {
	color: var(--wp--preset--color--primary-blue);
	text-decoration: none;
}

.kbd-breadcrumb__link:hover,
.kbd-breadcrumb__link:focus {
	text-decoration: underline;
}

.kbd-breadcrumb__current,
.kbd-breadcrumb__step {
	color: var(--wp--preset--color--primary-blue);
	text-decoration: none;
}

/* Die aktuelle Seite ist das einzige Element im Pfad, das kein Link ist -
   das Fettgewicht macht diesen Unterschied auch sichtbar.

   Der Titel steht direkt darunter noch einmal als Ueberschrift. Lange Titel
   haben den Pfad deshalb zweizeilig gemacht und denselben Satz doppelt gezeigt,
   ohne etwas hinzuzufuegen. Er wird hier nur optisch auf eine Zeile gekuerzt:
   Im Markup bleibt der vollstaendige Titel stehen, Screenreader lesen ihn
   weiterhin ganz vor, und `aria-current="page"` bleibt unberuehrt. Sichtbar
   geht nichts verloren - der ganze Titel folgt unmittelbar als <h1>. */
.kbd-breadcrumb__current {
	font-weight: 600;
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Der Titel bekommt genau den Rest der Zeile: `flex-basis: 0` laesst ihn nicht
   nach seiner (sehr grossen) Inhaltsbreite umbrechen, sondern in den freien
   Platz hineinwachsen. Eine feste Obergrenze waere hier falsch - sie passt
   immer nur zu einer Fensterbreite.

   `min-width` ist die Reissleine: Bleibt weniger als etwa zehn Zeichen uebrig,
   ist ein gekuerzter Titel nicht mehr lesbar. Dann bricht der Eintrag lieber
   in die naechste Zeile um und nutzt dort die volle Breite. */
.kbd-breadcrumb .kbd-breadcrumb__list > .kbd-breadcrumb__item:last-child {
	flex: 1 1 0;
	min-width: 10ch;
}

/* Der Breadcrumb steht in flex-Gruppen der Templates - nicht schrumpfen lassen,
   sondern innerhalb der eigenen Zeile umbrechen. */
.wp-block-group.is-layout-flex > .kbd-breadcrumb {
	flex: 1 1 auto;
	min-width: 0;
}

/* Tablet Portrait */
@media ( max-width: 768px ) {
	.kbd-breadcrumb .kbd-breadcrumb__item + .kbd-breadcrumb__item::before {
		padding: 0 0.3em;
	}
}

/* Mobile: die Schriftgroesse entspricht hier der Grundeinstellung, nur die
   Zeilen ruecken enger zusammen - bei mehrzeiligen Pfaden spart das Hoehe. */
@media ( max-width: 480px ) {
	.kbd-breadcrumb {
		line-height: 1.6;
	}
}