/**
 * Header language switcher.
 *
 * TranslatePress renders [language-switcher] as a small widget whose palette is
 * exposed as CSS custom properties on .trp-shortcode-switcher__wrapper. Those
 * properties are printed inline, so they are overridden with !important here;
 * everything else is an ordinary selector override. The plugin's own stylesheet
 * and markup are left untouched so plugin updates cannot break the design.
 *
 * Collapsed state reproduces the utility-strip label it replaces
 * (globe glyph + current language + 5px caret, 11px, #536377); the open state is
 * a compact white panel aligned to the right edge.
 */

/* ---------------------------------------------------------------- wrapper */

.vg-language.vg-language--switcher {
	display: inline-flex;
	align-items: center;
	position: relative;
}

.vg-language .trp-shortcode-switcher__wrapper {
	--text: #536377 !important;
	--text-hover: var(--vg-red, #ed2535) !important;
	--bg: transparent !important;
	--bg-hover: #f2f6fa !important;
	--border: none !important;
	--border-width: 0 !important;
	--border-color: transparent !important;
	--border-radius: 0 !important;
	--font-size: 11px !important;
	--flag-size: 14px !important;
	--flag-radius: 1px !important;
	--transition-duration: 0.18s !important;
	position: relative;
}

/* The plugin pads the widget to 40px tall; the strip is 27px, so the padding is
   tuned to keep a comfortable hover target at the same visual height. */
.vg-language .trp-shortcode-switcher {
	padding: 7px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

/* -------------------------------------------------------- collapsed trigger */

.vg-language .trp-current-language-item__wrapper {
	gap: 5px;
	justify-content: flex-start;
	padding-right: 0;
}

/* Globe glyph, the same mark the static label used. */
.vg-language .trp-shortcode-overlay > .trp-current-language-item__wrapper::before {
	content: '\25CE';
	flex: none;
	font-size: 11px;
	line-height: 1;
	color: inherit;
	transform: translateY(-0.5px);
}

.vg-language .trp-language-item {
	gap: 5px;
	min-height: 0;
	padding: 0;
	outline-offset: 0;
}

.vg-language .trp-current-language-item__wrapper .trp-language-item-name {
	font-family: inherit;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: #536377;
}

/* The plugin draws a 20px chevron; the design uses a 5px caret instead. */
.vg-language .trp-shortcode-arrow {
	display: none;
}

.vg-language .trp-current-language-item__wrapper::after {
	content: '';
	display: block;
	flex: none;
	width: 5px;
	height: 5px;
	margin-left: 1px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s ease;
}

.vg-language .trp-shortcode-overlay.is-open > .trp-current-language-item__wrapper::after {
	transform: translateY(1px) rotate(-135deg);
}

/* Keep the trigger text-only; flags only appear inside the open panel. */
.vg-language .trp-current-language-item__wrapper .trp-flag-image {
	display: none !important;
}

/* ------------------------------------------------------------- open panel */

/* Positioned out of flow so a longer language name can never widen the strip.
   Surface, border and padding are only applied while open: the closed list is
   collapsed with max-height, and border/padding would still paint a sliver. */
.vg-language .trp-shortcode-overlay > .trp-switcher-dropdown-list {
	position: absolute;
	top: calc(100% - 3px);
	right: 0;
	left: auto;
	z-index: 3;
	min-width: 108px;
	margin: 0;
	box-shadow: none;
}

.vg-language .trp-shortcode-overlay.is-open > .trp-switcher-dropdown-list {
	padding: 4px 0;
	border: 1px solid var(--vg-line, #d8e2ec);
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 14px 30px rgba(3, 26, 49, 0.13);
}

.vg-language .trp-switcher-dropdown-list .trp-language-item {
	gap: 7px;
	padding: 7px 13px;
}

.vg-language .trp-switcher-dropdown-list .trp-language-item-name {
	font-family: inherit;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--vg-navy, #0c2543);
}

.vg-language .trp-switcher-dropdown-list .trp-language-item:hover {
	background: #f2f6fa;
}

.vg-language .trp-switcher-dropdown-list .trp-language-item:hover .trp-language-item-name {
	color: var(--vg-red, #ed2535);
}

/* ------------------------------------------------------------ mobile menu */

/* The utility strip is hidden below 1100px, so the switcher moves into the
   menu here — mirroring how .vg-mobile-nvocc repeats the strip's NVOCC badge. */
.vg-mobile-language {
	display: none;
}

@media (max-width: 1100px) {
	.vg-mobile-language {
		display: inline-flex;
		align-self: flex-start;
		align-items: center;
		padding: 18px 4px 0;
	}

	/* A taller trigger keeps the tap target usable inside the menu. */
	.vg-mobile-language .trp-shortcode-switcher {
		padding: 9px 0;
	}

	.vg-mobile-language .trp-current-language-item__wrapper {
		gap: 7px;
	}

	.vg-mobile-language .trp-shortcode-overlay > .trp-current-language-item__wrapper::before {
		font-size: 12px;
	}

	.vg-mobile-language .trp-current-language-item__wrapper .trp-language-item-name {
		font-size: 13px;
	}

	/* The menu itself scrolls (overflow:auto) and the switcher sits near its
	   end, so the panel opens upwards to stay inside the menu. */
	.vg-mobile-language .trp-shortcode-overlay > .trp-switcher-dropdown-list {
		top: auto;
		bottom: calc(100% - 2px);
		right: auto;
		left: 0;
		min-width: 132px;
	}

	.vg-mobile-language .trp-switcher-dropdown-list .trp-language-item {
		padding: 9px 14px;
	}

	.vg-mobile-language .trp-switcher-dropdown-list .trp-language-item-name {
		font-size: 13px;
	}
}