/**
 * Grupo Dupla Portfolio — language switcher ([gd_lang_switcher]).
 * Replicates LanguageSwitcher.tsx.
 *
 * The original hardcodes white (text-white, text-white/40, text-white/35). Here
 * nothing names a colour: everything takes the wrapper's `color` — the globe
 * through currentColor, the inactive code and the separator dimmed from it with
 * opacity. Same result on the dark header, and the one shortcode also works on
 * a light one. Set the colour with the shortcode's `color` attribute or on the
 * Elementor container.
 *
 * SPECIFICITY NOTE
 * This stylesheet is enqueued before the theme, so it loses every tie.
 * hello-elementor styles bare `a`, so the link rules are qualified —
 * `a.gd-lang` (0,1,1) and `.gd-lang .gd-lang__link` (0,2,0) — to stay above it.
 * Do not simplify them to a single class.
 */

.gd-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--gd-font-body, "DM Sans", system-ui, sans-serif);
	font-size: 0.65rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Toggle mode: the whole control is the link. */
a.gd-lang,
a.gd-lang:hover,
a.gd-lang:focus {
	color: inherit;
	text-decoration: none;
}

a.gd-lang {
	cursor: pointer;
	transition: opacity 0.2s;
}

.gd-lang .gd-lang__icon {
	flex: 0 0 auto;
	opacity: 0.9;
	transition: opacity 0.2s;
}

.gd-lang .gd-lang__code {
	opacity: 0.4;
	transition: opacity 0.2s;
}

.gd-lang .gd-lang__code.is-current {
	opacity: 1;
}

.gd-lang .gd-lang__sep {
	opacity: 0.35;
	-webkit-user-select: none;
	user-select: none;
}

/*
 * Hover. The original dims the button's own colour to 75%, which reaches only
 * the globe — the three codes carry explicit colours of their own. Kept, and
 * the code you would switch to lights up as well: the whole control is a link
 * to that language and needs to say so.
 */
a.gd-lang:hover .gd-lang__icon {
	opacity: 0.675;
}

a.gd-lang:hover .gd-lang__code:not(.is-current) {
	opacity: 1;
}

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

/* Links mode: one link per language (three or more languages). */
.gd-lang .gd-lang__link,
.gd-lang .gd-lang__link:hover,
.gd-lang .gd-lang__link:focus {
	color: inherit;
	text-decoration: none;
}

.gd-lang .gd-lang__link:hover {
	opacity: 1;
}

.gd-lang .gd-lang__link:focus-visible {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 3px;
}