/* Language switcher (inc/i18n.php). Printed only while languages are public.
   ‹ en | de ›, left of the Menu pill. Same chevrons and focus ring as the page
   name, but no chip background (it cut a bite out of the pink star behind it).
   Each language link is a 44 × 44 px tap target. The room is the fixed pill
   width plus 0.5rem, so the gap does not follow the word on the button. Under
   430px and from 600 to 639px that pill meets the logo, so there the closed
   header keeps the tighter room. */

.ce-lang {
	--ce-lang-menu-room: 7.25rem;
	--ce-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 18'%3E%3Cpath d='M7 1 1 9l6 8' fill='none' stroke='black' stroke-width='1.1' stroke-linejoin='miter'/%3E%3C/svg%3E");
	position: fixed;
	top: calc(var(--ce-header-pad-y) + var(--wp-admin--admin-bar--height, 0px));
	right: calc(var(--ce-header-pad-x, 1.25rem) + var(--ce-lang-menu-room));
	z-index: 50;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 2.84rem;
	margin: 0;
	padding-inline: 0.35rem;
	border-radius: 999px;
	background: transparent;
	color: var(--ce-primary);
	font: inherit;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: lowercase;
}

/* Pill width plus the 0.5rem gap. Same room open and closed, in both languages.
   From 600 to 639px the long logo leaves no room for that pill, so the closed
   header stays tight and German only steps over while "schliessen" is showing. */
@media (min-width: 430px) and (max-width: 599.98px), (min-width: 640px) {
	.ce-lang {
		--ce-lang-menu-room: calc(var(--ce-menu-pill, 10rem) + 0.5rem);
	}
}

.has-modal-open .ce-lang {
	z-index: 100001;
}

/* Under 430px the fixed pill meets the short logo. The open menu still needs
   more room, or "schliessen" covers the switcher. */
@media (max-width: 429.98px) {
	.has-modal-open .ce-lang {
		--ce-lang-menu-room: 9.25rem;
	}
}

/* 600 to 639px: the long logo leaves no room for the fixed pill. German
   "schliessen" still needs 10rem while it is on screen. */
@media (min-width: 600px) and (max-width: 639.98px) {
	html[lang^="de"].has-modal-open .ce-lang {
		--ce-lang-menu-room: 10rem;
	}
}

.ce-lang__chev {
	flex: none;
	width: 0.4em;
	height: 1em;
	background: currentColor;
	-webkit-mask: var(--ce-chevron) center / contain no-repeat;
	mask: var(--ce-chevron) center / contain no-repeat;
}

.ce-lang__chev--end {
	transform: scaleX(-1);
}

.ce-lang__bar {
	flex: none;
	opacity: 0.45;
	padding-inline: 0.05em;
}

.ce-lang__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0.25em;
	color: inherit;
	text-decoration: none;
}

.ce-lang__link[aria-current="true"] .ce-lang__code,
.ce-lang__link:hover .ce-lang__code {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.18em;
}

.ce-lang__link:focus-visible {
	outline: 3px solid var(--ce-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--ce-focus-band);
}

.ce-lang__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (forced-colors: active) {
	.ce-lang {
		color: CanvasText;
		forced-color-adjust: none;
	}
}