/**
 * La Lista Language Switcher
 *
 * Every value that is meant to be adjustable is a CSS custom property, so the
 * Elementor widget and the shortcode both style the same markup without any
 * site-level custom CSS.
 *
 * Specificity note: the links carry a doubled .ll-lang class in these selectors
 * on purpose. Themes and the Elementor global kit style <a> elements directly
 * (.elementor-kit-123 a { font-size: ... }), and a direct rule on the link
 * always beats a size inherited from its wrapper, however large the wrapper's
 * specificity. Matching .ll-lang twice lifts these rules above those global link
 * styles, while the widget's own controls sit one class higher again and still
 * override everything here.
 */

.ll-lang-switch {
	--ll-gap: 0.5em;
	--ll-letter-spacing: 0.06em;
	--ll-active-weight: 700;
	--ll-inactive-weight: 400;
	--ll-active-color: currentColor;
	--ll-inactive-color: currentColor;
	--ll-hover-color: currentColor;
	--ll-inactive-opacity: 1;
	--ll-separator-color: currentColor;
	--ll-separator-opacity: 0.4;
	--ll-rule-color: currentColor;
	--ll-rule-height: 3px;
	--ll-rule-offset: 0.4em;
	--ll-dot-size: 4px;

	display: inline-flex;
	align-items: baseline;
	gap: var(--ll-gap);
	max-width: 100%;
	letter-spacing: var(--ll-letter-spacing);
	line-height: 1;
}

/* Take the links and separator back from global link styling. */
.ll-lang-switch a.ll-lang.ll-lang,
.ll-lang-switch .ll-lang-sep {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: 1;
}

.ll-lang-switch a.ll-lang.ll-lang {
	position: relative;
	display: inline-block;
	padding-bottom: var(--ll-rule-offset);
	color: var(--ll-inactive-color);
	font-weight: var(--ll-inactive-weight);
	text-decoration: none;
	box-shadow: none;
	opacity: var(--ll-inactive-opacity);
	transition: color 0.2s ease, opacity 0.2s ease;
}

.ll-lang-switch a.ll-lang.ll-lang:hover,
.ll-lang-switch a.ll-lang.ll-lang:focus {
	color: var(--ll-hover-color);
	text-decoration: none;
	opacity: 1;
}

.ll-lang-switch a.ll-lang.ll-lang:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ll-lang-switch a.ll-lang.ll-lang.is-active {
	color: var(--ll-active-color);
	font-weight: var(--ll-active-weight);
	opacity: 1;
	cursor: default;
}

.ll-lang-switch a.ll-lang.ll-lang.is-active:hover {
	color: var(--ll-active-color);
}

.ll-lang-switch .ll-lang-sep {
	color: var(--ll-separator-color);
	opacity: var(--ll-separator-opacity);
	-webkit-user-select: none;
	user-select: none;
}

/* Indicator: rule beneath the active language. */
.ll-lang-switch.ll-ind-underline a.ll-lang.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--ll-rule-height);
	background: var(--ll-rule-color);
}

/* Indicator: small mark beneath the active language. */
.ll-lang-switch.ll-ind-dot a.ll-lang.is-active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: var(--ll-dot-size);
	height: var(--ll-dot-size);
	border-radius: 50%;
	background: var(--ll-rule-color);
	transform: translateX(-50%);
}

/* No indicator: weight alone carries the active state. */
.ll-lang-switch.ll-ind-none a.ll-lang.ll-lang {
	padding-bottom: 0;
}

/* Keep the links from inheriting theme link underlines. */
.ll-lang-switch a.ll-lang.ll-lang:visited {
	text-decoration: none;
}