/*
 * Language switcher — the same component on both shells.
 *
 * Plain CSS on purpose, like landing-page-fixes.css: nothing compiles it, so a
 * rebuild of landing-page.css or pages.css cannot take it with it. It is loaded
 * on every page, after both stylesheets.
 *
 * The switcher lives inside the existing top bar (.lp__nav / .pg__nav), which
 * was already a flex row aligned to the end of the line. The only change to
 * those is a gap and vertical centring, so the bar keeps its position in the
 * landing page's locked grid and in the interior pages' normal flow.
 */

.lp__nav,
.pg__nav {
	align-items: center;
}

.lp__nav {
	gap: calc(24 * var(--u));
}

.pg__nav {
	gap: 24px;
}

.lp-langs__list,
.pg-langs__list {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-langs__item,
.pg-langs__item {
	display: flex;
	align-items: center;
}

/*
 * The separator is drawn, not written, so it never reaches a screen reader as
 * a word between the two language names.
 */
.lp-langs__item + .lp-langs__item::before,
.pg-langs__item + .pg-langs__item::before {
	content: '/';
	margin-inline-end: 0.5em;
	color: #ffffff;
	opacity: 0.55;
}

.lp-langs__link,
.pg-langs__link {
	display: inline-flex;
	align-items: center;
	padding: 6px 0;
	color: #ffffff;
	font-family: 'Oron Classic FM', 'Univers LT Std', 'Assistant', 'Heebo', 'Arial Hebrew', Arial, sans-serif;
	line-height: 1.2;
	text-decoration: none;
}

.lp-langs__link {
	font-size: var(--fs-nav);
}

.pg-langs__link {
	font-size: var(--pg-fs-nav);
}

.lp-langs__link:hover,
.lp-langs__link:focus-visible,
.pg-langs__link:hover,
.pg-langs__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.lp-langs__link:focus-visible,
.pg-langs__link:focus-visible {
	outline: 2px solid #e1fe03;
	outline-offset: 4px;
}

/*
 * WPML's own switcher is removed in PHP, but a plugin update or a settings
 * change can put it back. If it ever returns it is hidden here rather than
 * appearing unstyled under the footer, where it was royal blue on black.
 */
.wpml-ls-statics-footer {
	display: none;
}
