/**
 * Language switcher — header dropdown button.
 *
 * Markup is rendered server-side by inc/language-switcher.php. Do not move it
 * back to JavaScript: WP Rocket's Remove Unused CSS strips rules whose classes
 * are absent from the static HTML, which silently deletes this whole file.
 *
 * Sizing matches the other header buttons (Help Centre / Customer Support):
 * 5px radius, 10px 20px padding, Inter. Header ground is #1B1D28.
 *
 * The FILL deliberately does not match them. It uses the Elementor brand accent
 * (#0539C0, hover #1C3390) so the switcher stands out against the #43485A
 * support buttons, which was the point of changing it on 18 Aug 2026.
 *
 * Selectors are doubled up (.ctw-langsw .ctw-langsw__toggle) and colours set as
 * longhand background-color, because the site has global button styling that
 * otherwise turns this pink.
 */

/*
 * Elementor sets `position: relative` on every widget, so a `z-index` on the
 * shortcode widget creates a STACKING CONTEXT — which traps the dropdown panel
 * inside the widget and lets the header row below paint over it. The panel then
 * looks fine but is mostly unclickable.
 *
 * Setting the widget's z-index in the Elementor data does not survive: the
 * header gets republished from the editor and the old value comes back. Hence
 * fixing it here, generically for every switcher instance (there are two —
 * desktop and mobile headers).
 *
 * !important is needed because Elementor's generated per-widget rule
 * (.elementor-11 .elementor-element.elementor-element-xxxxx) is more specific
 * and is re-emitted on every republish.
 */
.elementor-widget:has(.ctw-langsw) {
	z-index: 900 !important;
}

.ctw-langsw {
	--ctw-ls-btn:        #0539C0;
	--ctw-ls-btn-hover:  #1C3390;
	--ctw-ls-text:       #FFFFFF;
	--ctw-ls-panel:      #23262F;
	--ctw-ls-panel-line: #343846;
	--ctw-ls-radius:     5px;

	position: relative;
	display: inline-block;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.2;
}

.ctw-langsw .ctw-langsw__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--ctw-ls-radius);
	background-color: var(--ctw-ls-btn);
	background-image: none;
	box-shadow: none;
	color: var(--ctw-ls-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ctw-langsw .ctw-langsw__toggle:hover,
.ctw-langsw .ctw-langsw__toggle:focus-visible {
	background-color: var(--ctw-ls-btn-hover);
	color: var(--ctw-ls-text);
}

.ctw-langsw .ctw-langsw__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Only one language available on this page — nothing to open. */
.ctw-langsw--single .ctw-langsw__toggle {
	cursor: default;
}

.ctw-langsw .ctw-langsw__globe {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	opacity: 0.9;
}

.ctw-langsw .ctw-langsw__chev {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	transition: transform 0.15s ease;
}

.ctw-langsw[data-open="true"] .ctw-langsw__chev {
	transform: rotate(180deg);
}

.ctw-langsw .ctw-langsw__menu {
	position: absolute;
	z-index: 999;
	top: calc(100% + 6px);
	right: 0;
	min-width: 100%;
	margin: 0;
	padding: 4px;
	list-style: none;
	background-color: var(--ctw-ls-panel);
	border: 1px solid var(--ctw-ls-panel-line);
	border-radius: var(--ctw-ls-radius);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/*
 * Open via JS.
 *
 * The :focus-within rule is a no-JS fallback ONLY, and is disabled once the
 * script has run (it sets data-js="on"). Without that guard the two fight each
 * other: clicking the button focuses it, :focus-within holds the panel open,
 * and a second click cannot close it — it only shuts when focus moves away.
 */
.ctw-langsw[data-open="true"] .ctw-langsw__menu,
.ctw-langsw:not([data-js="on"]):focus-within .ctw-langsw__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ctw-langsw .ctw-langsw__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ctw-langsw .ctw-langsw__menu a,
.ctw-langsw .ctw-langsw__menu a:link,
.ctw-langsw .ctw-langsw__menu a:visited {
	display: block;
	padding: 9px 16px;
	border-radius: 3px;
	background-color: transparent;
	color: var(--ctw-ls-text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.12s ease;
}

.ctw-langsw .ctw-langsw__menu a:hover,
.ctw-langsw .ctw-langsw__menu a:focus,
.ctw-langsw .ctw-langsw__menu a:focus-visible {
	background-color: var(--ctw-ls-btn);
	color: var(--ctw-ls-text);
	text-decoration: none;
}

@media (max-width: 600px) {
	.ctw-langsw .ctw-langsw__toggle {
		padding: 9px 14px;
	}

	/* Keep the panel on screen when the button sits near the right edge. */
	.ctw-langsw .ctw-langsw__menu {
		right: auto;
		left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ctw-langsw .ctw-langsw__toggle,
	.ctw-langsw .ctw-langsw__chev,
	.ctw-langsw .ctw-langsw__menu,
	.ctw-langsw .ctw-langsw__menu a {
		transition: none;
	}
}