.eenml-switcher {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
}

.eenml-switcher a {
	text-decoration: none;
}

.eenml-switcher a.is-current {
	font-weight: 600;
	pointer-events: none;
}

/*
 * Unavailable on this page: no published translation for the queried
 * post. Still clickable (visitors must always be able to switch), but
 * dimmed with a tooltip saying the default language will be shown.
 */
.eenml-switcher a.is-unavailable,
.eenml-dropdown__menu a.is-unavailable {
	opacity: 0.45;
}

/*
 * The dropdown switcher: the same interaction model as the theme's
 * fold-out menu, a hidden checkbox toggled by a label, animated with
 * opacity/visibility. It rides on the theme's --animation-speed-slow
 * and --cubic-bezier variables where they exist (fallbacks otherwise),
 * so it moves with the same beat as the header menu and needs no
 * JavaScript.
 */
.eenml-dropdown {
	position: relative;
	display: inline-block;
}

.eenml-dropdown__toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.eenml-dropdown__button {
	display: inline-flex;
	align-items: center;
	padding: 0.15em 0.3em;
	cursor: pointer;
	font-size: 1.2em;
	line-height: 1;
}

.eenml-dropdown__menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 11;
	min-width: 11rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin: 0.25rem 0 0;
	padding: 0.5rem;
	background: var(--colors-neutral-white, #fff);
	box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--animation-speed-slow, 0.3s) var(--cubic-bezier, cubic-bezier(0.2, 0.9, 0.25, 1)),
		visibility 0s linear var(--animation-speed-slow, 0.3s);
}

.eenml-dropdown__toggle:checked ~ .eenml-dropdown__menu {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--animation-speed-slow, 0.3s) var(--cubic-bezier, cubic-bezier(0.2, 0.9, 0.25, 1)),
		visibility 0s;
}

/*
 * Keyboard users toggle the menu through the invisible checkbox: show a
 * focus ring on the flag button when they do.
 */
.eenml-dropdown__toggle:focus-visible ~ .eenml-dropdown__button {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.eenml-dropdown__menu a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.25em 0.5em;
	color: var(--colors-neutral-black, #222);
	text-decoration: none;
	white-space: nowrap;
}

.eenml-dropdown__menu a.is-current {
	font-weight: 600;
}

/*
 * The language suggestion: one quiet line offering the visitor's
 * browser-preferred language when the page has a published translation
 * for it. Rendered once, dismissed by the eenml_suggestion_dismissed
 * cookie set on any arrival in another language.
 */
.eenml-suggestion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0 0 1em;
	padding: 0.5em 0.75em;
	font-size: 0.9em;
	background: rgba(127, 127, 127, 0.08);
	border-radius: 4px;
}

.eenml-suggestion a {
	font-weight: 600;
	text-decoration: none;
}

.eenml-suggestion a:hover {
	text-decoration: underline;
}