/*
 * The language switcher.
 *
 * It lives in the theme's top bar, which is a 30px-tall navy strip with right-aligned
 * items, white text and a green hover. Those are the theme's own values, taken from
 * app-ltr.css rather than guessed at, so the control reads as part of the bar and not
 * as something bolted on:
 *
 *   --pa-navy   #002c54   bar background
 *   --pa-green  #77c043   hover and active
 *   --pa-blue   #0072aa   focus ring
 */

.pa-i18n {
	--pa-navy: #002c54;
	--pa-green: #77c043;
	--pa-blue: #0072aa;

	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: 0.5rem;
	font-family: "AvenirNext LT Pro", "Noto Sans", sans-serif;
}

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

.pa-i18n-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 5px 6px;
	border: 0;
	border-radius: 3px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pa-i18n-toggle:hover,
.pa-i18n-toggle:focus-visible,
.pa-i18n[data-open="true"] .pa-i18n-toggle {
	color: var(--pa-green);
}

.pa-i18n-toggle:focus {
	outline: none;
}

.pa-i18n-toggle:focus-visible {
	outline: 2px solid var(--pa-green);
	outline-offset: 2px;
}

.pa-i18n-icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: currentColor;
}

.pa-i18n-code {
	/* A fixed width stops the bar's other items shifting sideways when EN becomes FR. */
	min-width: 1.4em;
	text-align: left;
}

.pa-i18n-chevron {
	width: 9px;
	height: 6px;
	flex: 0 0 auto;
	color: currentColor;
	transition: transform 0.25s ease;
}

.pa-i18n[data-open="true"] .pa-i18n-chevron {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------ the menu ----- */

.pa-i18n-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1200;
	min-width: 184px;
	padding: 6px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 44, 84, 0.12), 0 12px 32px rgba(0, 44, 84, 0.18);
	text-align: left;

	/*
	 * Animated open, but [hidden] still means hidden: the panel is taken out of the
	 * accessibility tree and out of the tab order between uses, rather than merely
	 * being made invisible.
	 */
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.pa-i18n-menu[hidden] {
	display: none;
}

.pa-i18n[data-open="true"] .pa-i18n-menu {
	opacity: 1;
	transform: translateY(0);
}

.pa-i18n--left .pa-i18n-menu {
	right: auto;
	left: 0;
}

/* A small notch pointing back at the button. */
.pa-i18n-menu::before {
	content: "";
	position: absolute;
	top: -5px;
	right: 14px;
	width: 10px;
	height: 10px;
	background: #fff;
	transform: rotate(45deg);
	border-radius: 1px;
}

.pa-i18n--left .pa-i18n-menu::before {
	right: auto;
	left: 14px;
}

.pa-i18n-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 4px;
	color: var(--pa-navy);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pa-i18n-link:hover,
.pa-i18n-link:focus-visible {
	background: #f3f7f9;
	color: var(--pa-navy);
	text-decoration: none;
}

.pa-i18n-link:focus-visible {
	outline: 2px solid var(--pa-blue);
	outline-offset: -2px;
}

.pa-i18n-link.is-current {
	font-weight: 600;
}

.pa-i18n-name {
	flex: 1 1 auto;
}

.pa-i18n-check {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	color: var(--pa-green);
}

/* The "draft" marker next to a language that is not public yet. */
.pa-i18n-tag {
	flex: 0 0 auto;
	padding: 2px 6px;
	border-radius: 10px;
	background: #fdf1d8;
	color: #8a6400;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --------------------------------------------------- inside the mobile menu ----- */

/*
 * The mobile navigation is a light panel, not the navy bar, so the colours invert.
 * Its icons are 20px there, which is the theme's own choice for that context.
 */
.navigation-mobile .pa-i18n {
	margin-left: 0;
	margin-right: 1rem;
	color: var(--pa-navy);
}

.navigation-mobile .pa-i18n-icon {
	width: 19px;
	height: 19px;
}

.navigation-mobile .pa-i18n-menu {
	right: auto;
	left: 0;
}

.navigation-mobile .pa-i18n-menu::before {
	right: auto;
	left: 14px;
}

/* ------------------------------------------------------------ draft marker ------ */

/*
 * Only ever rendered on an unpublished language, and only for the people who can see
 * one, so it is deliberately hard to miss - the whole point is that a reviewer never
 * mistakes the draft for the live site.
 */
.pa-i18n-draft {
	position: fixed;
	bottom: 14px;
	left: 14px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 240px;
	padding: 9px 13px;
	border-left: 3px solid #e0a800;
	border-radius: 4px;
	background: rgba(0, 44, 84, 0.94);
	color: #fff;
	font-family: "AvenirNext LT Pro", "Noto Sans", sans-serif;
	font-size: 11px;
	line-height: 1.4;
	pointer-events: none;
}

.pa-i18n-draft strong {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pa-i18n-draft span {
	opacity: 0.78;
	font-size: 10px;
}

@media print {
	.pa-i18n-draft {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pa-i18n-toggle,
	.pa-i18n-chevron,
	.pa-i18n-menu,
	.pa-i18n-link {
		transition: none;
	}
}