/**
 * FO Language Switcher
 *
 * Skin for the TranslatePress [language-switcher] shortcode.
 *
 * Everything is scoped to .fo-ls, a class the script adds only after it has
 * stripped the inline width/display that TranslatePress' own inline script
 * applies. Nothing here takes effect until that has happened, so there is no
 * flash of unstyled switcher.
 *
 * The selectors carry four classes so they outrank TranslatePress' own
 * :hover/:focus rules (three classes) without needing !important, except where
 * TranslatePress itself uses !important.
 */

/* -------------------------------------------------------------------------
 * Reset TranslatePress' default chrome
 * ---------------------------------------------------------------------- */

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls {
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	box-sizing: border-box;
	white-space: nowrap;
	text-overflow: clip;
}

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls > div {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Trigger (current language)
 * ---------------------------------------------------------------------- */

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-current-language {
	display: block !important;
	visibility: visible !important;
	width: auto;
	line-height: 0; /* Stops the parent's line box adding space under the pill. */
}

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-current-language > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px;
	border: 1px solid #e3e4e8;
	border-radius: 999px;
	background: #fff;
	color: #242528;
	font-family: 'parabolica', sans-serif;
	font-size: 16px;
	font-weight: 400;
	/* line-height 1 removes the half-leading that otherwise pushes the label off
	   centre against the icons; vertical-align keeps the inline-flex pill itself
	   on the parent's middle rather than its baseline. */
	line-height: 1;
	vertical-align: middle;
	text-decoration: none;
	cursor: pointer;
}

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-current-language > a:hover {
	background: #fff;
}

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-current-language > a:focus-visible {
	outline: 2px solid #242528;
	outline-offset: 2px;
}

/* Globe icon */
.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-current-language > a::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23242528' stroke-width='1.5'/%3E%3Cpath d='M2 12h20M12 2c3.5 3.5 3.5 16.5 0 20M12 2c-3.5 3.5-3.5 16.5 0 20' stroke='%23242528' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Caret */
.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-current-language > a::after {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin-left: 2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.5 9L12 16.5L19.5 9' stroke='%23242528' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .18s ease;
}

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls.fo-open .trp-ls-shortcode-current-language > a::after {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
 * Dropdown
 *
 * Open/closed is driven by visibility + opacity rather than display, so it
 * never has to fight TranslatePress' `display: inline-block !important` on
 * the :hover state.
 * ---------------------------------------------------------------------- */

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-language {
	display: block !important;
	position: absolute;
	z-index: 999;
	top: calc(100% + 6px);
	left: 0;
	width: auto !important;
	min-width: 100%;
	height: auto !important;
	min-height: 0;
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 6px !important;
	border: 1px solid #e3e4e8;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	visibility: hidden !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls.fo-open .trp-ls-shortcode-language {
	visibility: visible !important;
	opacity: 1;
	pointer-events: auto;
}

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-language > a {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 10px;
	border-radius: 6px;
	color: #242528;
	font-family: 'parabolica', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-language > a:hover,
.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-language > a.trp-ls-shortcode-disabled-language:hover {
	background: #f3f4f6;
}

/* Checkmark slot. Kept empty on every row so the labels stay aligned, and
   filled only on the current language, which TranslatePress renders inside
   the list as .trp-ls-shortcode-disabled-language. */
.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-language > a::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
}

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls .trp-ls-shortcode-language > a.trp-ls-shortcode-disabled-language::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%23242528' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* -------------------------------------------------------------------------
 * Flags, if you enable them in TranslatePress' switcher options
 * ---------------------------------------------------------------------- */

.trp_language_switcher_shortcode .trp-language-switcher.fo-ls a > img {
	flex: 0 0 auto;
	margin: 0;
}