/**
 * Language switcher.
 *
 * Sits inside a header that belongs to the theme, so it inherits font and
 * colour and uses currentColor throughout. That way the same markup reads
 * correctly on the light header and on the navy one without a second theme.
 */

.ppt-switch {
	position: relative;
	display: inline-flex;
	font-size: 14px;
	line-height: 1;
}

/* ---------- the button ---------- */

/*
 * The header carries its own inline stylesheet, which loads after this file
 * and resets padding on every button inside it. These declarations therefore
 * carry weight they would not otherwise need: without it the control collapses
 * to zero padding and the label sits on top of the border.
 */
.ppt-switch .ppt-switch__button {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	padding: 9px 12px !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;

	/* The header sets a thin border colour on its own pills; matching their
	   softness stops this control shouting louder than the real actions. */
	border-color: color-mix(in srgb, currentColor 28%, transparent);
	transition: border-color .15s ease, background-color .15s ease;
}

.ppt-switch .ppt-switch__button:hover {
	border-color: color-mix(in srgb, currentColor 55%, transparent);
	background: color-mix(in srgb, currentColor 7%, transparent);
}

.ppt-switch .ppt-switch__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Browsers without color-mix fall back to a plain translucent border. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.ppt-switch .ppt-switch__button { border-color: currentColor; opacity: .85; }
	.ppt-switch .ppt-switch__button:hover { opacity: 1; }
}

.ppt-switch__name {
	/* Cropping the name was what made the first version look broken, so the
	   box is allowed to size to its content. */
	overflow: visible;
}

.ppt-switch__caret {
	flex: 0 0 auto;
	opacity: .65;
	transition: transform .18s ease;
}

.ppt-switch[data-open] .ppt-switch__caret {
	transform: rotate(180deg);
}

/* ---------- the flags ---------- */

.ppt-flag {
	flex: 0 0 auto;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	/* A hairline keeps the white flags from dissolving into a light header. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* ---------- the panel ---------- */

.ppt-switch .ppt-switch__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1000;
	width: max-content;
	min-width: 190px;
	max-height: min(70vh, 420px);
	overflow-y: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid rgba(10, 27, 58, .12);
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(10, 27, 58, .28);
}

.ppt-switch .ppt-switch__panel[hidden] {
	display: none !important;
}

/*
 * The panel is always white, whatever the header behind it looks like, so its
 * text colour is set rather than inherited. The weight here is not decoration:
 * a dark header styles every link inside itself white, and that rule is more
 * specific than a single class, so without this the menu is white on white.
 */
.ppt-switch .ppt-switch__panel .ppt-switch__item {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: auto !important;
	padding: 8px 10px !important;
	border: 0 !important;
	border-radius: 9px;
	text-decoration: none !important;
	color: #0A1B3A !important;
	background: transparent;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}

.ppt-switch .ppt-switch__panel .ppt-switch__item:hover,
.ppt-switch .ppt-switch__panel .ppt-switch__item:focus-visible {
	background: #EEF6FF !important;
	color: #0A1B3A !important;
	outline: none;
}

.ppt-switch .ppt-switch__panel .ppt-switch__item.is-current {
	font-weight: 600;
}

.ppt-switch .ppt-switch__panel .ppt-switch__item span {
	color: inherit !important;
}

.ppt-switch .ppt-switch__tick {
	margin-inline-start: auto;
	color: #0D74E0;
}

/* ---------- plain list variant, and the no-script fallback ---------- */

.ppt-switch__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppt-switch__list a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: inherit;
	opacity: .75;
}

.ppt-switch__list a:hover,
.ppt-switch__list a.is-current {
	opacity: 1;
}

/* ---------- right to left ---------- */

[dir="rtl"] .ppt-switch .ppt-switch__panel {
	right: auto;
	left: 0;
}

/* ---------- narrow screens ---------- */

/*
 * The site header hides its whole actions row below 860px and shows a
 * hamburger instead, which took the switcher down with it. The row is put
 * back, but everything in it except the switcher stays hidden, so the Shop
 * and Get Started buttons still collapse into the mobile menu as before and
 * the switcher sits beside the hamburger.
 *
 * These are the header markup's own class names rather than this plugin's. If
 * that header is ever rebuilt, this block is the thing to revisit.
 */
@media (max-width: 860px) {
	.nav-inner .nav-actions {
		display: flex !important;
		margin-inline-start: auto;
		gap: 8px;
	}

	.nav-inner .nav-actions > *:not(.ppt-switch) {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.ppt-switch__name {
		/* On a phone the flag alone identifies the language and the header has
		   no room for the word beside it. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ppt-switch .ppt-switch__button {
		padding: 8px 10px !important;
		gap: 5px;
	}
}