/**
 * WPML language switcher — skinned to match the mockup's `.lang-sel` control.
 *
 * The reference (design-reference/mechanc-complete.html) uses a native
 * <select class="lang-sel"> in the topbar: a compact bordered pill showing a
 * flag and a two-letter code, monospace, transparent background, going cyan on
 * hover. WPML cannot render a <select>; its Elementor widget uses the
 * legacy-dropdown template (toggle <a> + absolutely positioned .wpml-ls-sub-menu).
 * This sheet reshapes that markup into the same control:
 *
 *     collapsed   [ 🇬🇧  EN  ⌄ ]
 *     on hover    a panel of full language names, one per row
 *
 * A <select> shows codes when closed and full option labels when open; this
 * reproduces that split — the toggle gets the two-letter code, the panel keeps
 * WPML's native language names (Français, 日本語, Русский …).
 *
 * ── Why !important ────────────────────────────────────────────────────────
 * WPML prints its switcher colours as an inline <style> block in <head>
 * (id="wpml-legacy-dropdown-0-inline-css"), generated from the switcher's
 * colour settings in WPML → Languages. It hardcodes a light-grey slab —
 * background #e5e5e5, text #222, borders #cdcdcd — through selectors like
 * `.wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu a:link` (0,3,1).
 * Elementor then adds its own `.elementor-widget-wpml-language-switcher
 * .wpml-elementor-ls .wpml-ls-legacy-dropdown a` (0,3,1) on top. Neither is
 * markup we control, and both are regenerated when settings change, so there
 * is no stable higher-specificity selector to write instead. Same situation,
 * and same remedy, as product-table.css.
 *
 * ── Why there is no body.light copy ───────────────────────────────────────
 * Every colour below is a design token, and design-system.css already swaps
 * the shorthand tokens under body.light (--br, --t2, --cyan, --card, --deep).
 * One rule set therefore themes itself in both directions, which is the
 * pattern to prefer for third-party plugin output. Do not add a dark and a
 * light variant here.
 */

/* ── The control ─────────────────────────────────────────────────────────── */

.wpml-ls {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--fm);

	/* Chevron, drawn as a mask so it inherits the anchor's colour and follows
	   the hover transition. A data-URI SVG cannot use currentColor — the URI is
	   its own document and resolves the keyword against nothing — so only the
	   glyph's alpha is used and background-color supplies the ink. */
	--mc-ls-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wpml-ls ul,
.wpml-ls li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WPML hard-codes width:15.5em on the wrapper and positions the sub-menu
   against the <li>. */
.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-dropdown > ul > li {
	position: relative;
	width: auto !important;
}

/* ── Toggle: the collapsed pill ────────────────────────────────────────────
   Laid out as flex so the two pseudo-elements can be ordered around the flag
   <img>, which sits between them in source order: ::before would otherwise
   render the code to the left of the flag. */

.wpml-ls-legacy-dropdown .wpml-ls-item-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px !important;
	border: 1px solid var(--br) !important;
	border-radius: 4px !important;
	background: transparent !important;
	color: var(--t2) !important;
	font-family: var(--fm);
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}

.wpml-ls-legacy-dropdown .wpml-ls-item-toggle:hover,
.wpml-ls-legacy-dropdown .wpml-ls-item-toggle:focus-visible,
.wpml-ls-legacy-dropdown li:hover > .wpml-ls-item-toggle {
	border-color: var(--bra) !important;
	color: var(--cyan) !important;
	background: transparent !important;
}

/* Two-letter code — see the language table at the bottom of this file. */
.wpml-ls-legacy-dropdown .wpml-ls-item-toggle::before {
	order: 2;
	font-family: var(--fm);
	font-size: inherit;
	letter-spacing: .06em;
}

/* Chevron. Replaces WPML's own ::after, a solid CSS triangle absolutely
   positioned at right:10px, which does not match the mockup's stroked icon. */
.wpml-ls-legacy-dropdown .wpml-ls-item-toggle::after {
	content: "" !important;
	order: 3;
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	position: static !important;
	border: 0 !important;
	background-color: currentColor;
	-webkit-mask: var(--mc-ls-chevron) center / 8px 5px no-repeat;
	mask: var(--mc-ls-chevron) center / 8px 5px no-repeat;
	transition: transform .2s;
}

/* Point the chevron up while the panel is open. WPML opens on hover and, for
   keyboard users, by putting .wpml-ls-keyboard-open on the <li>. */
.wpml-ls-legacy-dropdown li:hover > .wpml-ls-item-toggle::after,
.wpml-ls-legacy-dropdown li:focus-within > .wpml-ls-item-toggle::after,
.wpml-ls-legacy-dropdown .wpml-ls-keyboard-open > .wpml-ls-item-toggle::after {
	transform: rotate(180deg);
}

.wpml-ls-legacy-dropdown .wpml-ls-item-toggle .wpml-ls-flag {
	order: 1;
}

/* ── Dropdown panel ─────────────────────────────────────────────────────────
   Open/close state is left entirely to WPML — its own stylesheet flips
   visibility on `.wpml-ls-current-language:hover .wpml-ls-sub-menu`, and its
   script adds .wpml-ls-keyboard-open for Enter/Space. Only appearance and
   alignment are restyled here. */

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
	top: calc(100% + 6px) !important;
	right: 0 !important;
	left: auto !important;
	min-width: 100% !important;
	width: max-content !important;
	padding: 4px !important;
	border: 1px solid var(--br) !important;
	border-radius: 4px !important;
	background: var(--card) !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
	z-index: 260;
}

/* The 6px offset above is a dead zone: the pointer leaves the <li> before it
   reaches the panel, so the hover state drops and the panel closes on the way
   down. This bridges the gap without moving the panel. */
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 0;
	left: 0;
	height: 7px;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a,
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px !important;
	border: 0 !important;
	border-radius: 3px !important;
	background: transparent !important;
	color: var(--t2) !important;
	font-family: var(--fb);
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:hover,
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:focus,
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:link:hover,
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:link:focus {
	background: var(--deep) !important;
	color: var(--cyan) !important;
}

/* ── Wording: code on the toggle, full name in the panel ───────────────────
   WPML emits, inside every anchor, a real SVG flag (img.wpml-ls-flag) plus
   .wpml-ls-native (the language's own name — Français, 日本語) and, in the
   panel only, .wpml-ls-display (the same name in English, in brackets).

   The flags are kept: they render identically on every platform, unlike a flag
   emoji, which Windows does not draw at all.

   On the toggle the native name is hidden and replaced by the two-letter code.
   In the panel the native name is what the user reads, so only the bracketed
   English duplicate is dropped. Hiding either costs nothing in accessibility —
   WPML puts the full name on the anchor itself, as aria-label and title
   ("Switch to German (Deutsch)"), so the accessible name survives untouched. */

.wpml-ls-legacy-dropdown img.wpml-ls-flag {
	display: block;
	width: 18px;
	height: 12px;
	flex: 0 0 auto;
	margin: 0 !important;
	border-radius: 1px;
}

.wpml-ls-legacy-dropdown .wpml-ls-item-toggle .wpml-ls-native,
.wpml-ls-legacy-dropdown .wpml-ls-display {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu .wpml-ls-native {
	margin: 0 !important;
}

.wpml-ls-legacy-dropdown .wpml-ls-item-en > a::before      { content: "EN"; }
.wpml-ls-legacy-dropdown .wpml-ls-item-fr > a::before      { content: "FR"; }
.wpml-ls-legacy-dropdown .wpml-ls-item-de > a::before      { content: "DE"; }
.wpml-ls-legacy-dropdown .wpml-ls-item-ja > a::before      { content: "JA"; }
.wpml-ls-legacy-dropdown .wpml-ls-item-ko > a::before      { content: "KO"; }
.wpml-ls-legacy-dropdown .wpml-ls-item-ru > a::before      { content: "RU"; }
.wpml-ls-legacy-dropdown .wpml-ls-item-tr > a::before      { content: "TR"; }
.wpml-ls-legacy-dropdown .wpml-ls-item-zh-hans > a::before { content: "ZH"; }

/* The code belongs to the collapsed pill only — panel rows carry the flag and
   the full name, and the ::before above would otherwise prefix each of them. */
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a::before {
	content: none !important;
}

/* ── Compact on small screens, as in the mockup ─────────────────────────── */

@media (max-width: 480px) {
	.wpml-ls-legacy-dropdown .wpml-ls-item-toggle {
		padding: 3px 6px !important;
		gap: 4px;
		font-size: 10px;
	}

	.wpml-ls-legacy-dropdown img.wpml-ls-flag {
		width: 15px;
		height: 10px;
	}

	.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a,
	.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:link {
		padding: 6px 10px !important;
		font-size: 12px;
	}
}
