/*
 * Language switcher.
 *
 * Polylang adds the switcher as an ordinary menu item, so it read as a seventh nav link
 * sitting oddly between "CAREERS" and the search icon. These rules turn that one item
 * into a bordered pill with a globe, in the brand orange, without touching the theme.
 *
 * Targets li.lang-item, which Polylang puts on the switcher and on nothing else, so the
 * real navigation is untouched. Both the desktop bar and the mobile drawer use
 * .navbar-nav, so one rule set covers both.
 */

:root {
	--pixels-switch: #fe9435;
	--pixels-switch-ink: #ffffff;
}

.navbar-nav li.lang-item {
	display: flex;
	align-items: center;
	margin-inline-start: 1.25rem;
}

.navbar-nav li.lang-item > a,
.navbar-nav li.lang-item > a:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.42em 1.05em;
	border: 1.5px solid var(--pixels-switch);
	border-radius: 999px;
	color: var(--pixels-switch);
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	background-color: transparent;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* The globe. A mask rather than a background image, so it follows the text colour. */
.navbar-nav li.lang-item > a::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--pixels-globe) center / contain no-repeat;
	mask: var(--pixels-globe) center / contain no-repeat;
}

:root {
	--pixels-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18z'/%3E%3C/svg%3E");
}

.navbar-nav li.lang-item > a:hover,
.navbar-nav li.lang-item > a:focus-visible {
	background-color: var(--pixels-switch);
	color: var(--pixels-switch-ink);
}

.navbar-nav li.lang-item > a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(254, 148, 53, 0.35);
}

/* The theme underlines or recolours nav links on hover; the pill handles that itself. */
.navbar-nav li.lang-item > a::after {
	display: none !important;
}

/* An Arabic label on an English page needs the Arabic face to look right. */
.navbar-nav li.lang-item > a[hreflang="ar"] {
	font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	/* Only weight 400 is self-hosted; asking for more gives a synthetic bold. */
	font-weight: 400;
	font-size: 0.98em;
}

/* Mobile drawer: the item is stacked, so let the pill sit on its own line. */
@media (max-width: 1199px) {
	.navbar-nav li.lang-item {
		margin: 0.75rem 0 0.25rem;
	}

	.navbar-nav li.lang-item > a,
	.navbar-nav li.lang-item > a:visited {
		padding: 0.55em 1.2em;
		font-size: 1em;
	}
}