/*
 * SLP Sprachen – der Umschalter
 *
 * Er sitzt in der Kopfleiste neben dem Menü und soll dort nicht um
 * Aufmerksamkeit ringen: Kürzel in der Datenschrift, die Flagge klein
 * daneben, die aktive Sprache heller als die andere.
 */

.slp-sprachwahl ul {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slp-sprachwahl__punkt + .slp-sprachwahl__punkt {
	border-inline-start: 1px solid var(--slp-linie, rgba(135, 148, 160, 0.22));
	margin-inline-start: 0.15rem;
	padding-inline-start: 0.35rem;
}

.slp-sprachwahl a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.4em;
	border-radius: var(--slp-radius, 3px);
	color: var(--slp-stahl, #8794a0);
	font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", monospace);
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.slp-sprachwahl a:hover,
.slp-sprachwahl a:focus-visible {
	color: var(--slp-kalk, #edeae4);
}

.slp-sprachwahl__punkt.ist-aktiv a {
	color: var(--slp-kalk, #edeae4);
}

/*
 * Der volle Sprachname steht nur für Vorlese-Programme da. Er wird nicht
 * mit display:none versteckt - so bliebe er auch dort stumm.
 */
.slp-sprachwahl__name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.slp-flagge {
	display: block;
	flex: none;
	border-radius: 1px;
	/* Die gelbe Kante der deutschen Flagge verschwimmt sonst mit dem Grund. */
	box-shadow: 0 0 0 1px rgba(16, 20, 24, 0.55);
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.slp-sprachwahl__punkt.ist-aktiv .slp-flagge,
.slp-sprachwahl a:hover .slp-flagge,
.slp-sprachwahl a:focus-visible .slp-flagge {
	opacity: 1;
}

/*
 * In der Kopfleiste stehen Menü und Sprachwahl nebeneinander in einer
 * eigenen Gruppe - siehe die Anmerkung in parts/header.html.
 */
.slp-kopfleiste__rechts {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.slp-kopfleiste__rechts .wp-block-navigation {
	flex: 0 1 auto;
}

/*
 * Die Gruppe ist ein Flow-Layout, und WordPress gibt darin jedem Kind ab dem
 * zweiten den Standard-Blockabstand nach oben. Hier steht die Sprachwahl
 * dadurch gut 19px tiefer als das Menü daneben - sichtbar vor allem auf dem
 * Handy neben dem Menüknopf.
 *
 * Der doppelte Klassenname ist kein Versehen: WordPress' Regel lautet
 * `:root :where(.is-layout-flow) > *` und wiegt damit genauso schwer wie ein
 * einzelner Klassenname - sie wird aber nach diesem Stil geladen und gewönne
 * deshalb den Gleichstand.
 */
.slp-kopfleiste .slp-kopfleiste__rechts > * {
	margin-block: 0;
}

@media (max-width: 600px) {
	.slp-sprachwahl a {
		padding: 0.35em 0.3em;
		font-size: 0.7rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slp-sprachwahl a,
	.slp-flagge {
		transition: none;
	}
}