/**
 * Selettore di lingua.
 * Elemento hi-ggu-language-switcher — vedi includes/styles/class-hi-ggu-style-language-switcher.php
 *
 * Le regole sono agganciate al markup dello shortcode [HI_language_switcher], che
 * le produce già con le classi giuste: qui non c'è nulla da applicare a mano nel
 * page builder. Il markup su cui lavorano è:
 *
 *   nav.hi-lang-switcher                              <- contenitore
 *     a.hi-lang-switcher__item.is-active              <- lingua corrente
 *     span.hi-lang-switcher__separator                <- solo se richiesto
 *     a.hi-lang-switcher__item                        <- altre lingue disponibili
 *
 * I COLORI ARRIVANO DAL TEMA, sezione «Colori header» delle Theme Options, ma
 * non dalla riga che ci si aspetterebbe: il testo prende il colore di **Sfondo**,
 * non quello di Testo / Link. Il selettore sta su un fondo scuro, quindi gli
 * serve il colore con cui l'header è in contrasto — il bianco — e quel bianco è
 * già configurato lì. L'hover, e con lui la sottolineatura, prende invece «Link
 * al passaggio del mouse», cioè l'arancione. Cambiarli nelle Theme Options cambia
 * anche il selettore, senza toccare nulla.
 *
 * Lo shortcode ridichiara le stesse variabili aggiungendo come ripiego il valore
 * letterale letto dalle opzioni, così l'elemento resta colorato anche dove quelle
 * variabili non sono definite, e con l'attributo `scheme` lascia scegliere una
 * coppia diversa — per esempio i colori normali dell'header, quando il selettore
 * sta su fondo chiaro.
 *
 * LA SOTTOLINEATURA È UNO PSEUDO-ELEMENTO, non un border-bottom: deve stare
 * staccata dal testo e poter debordare di poco ai lati, cose che il bordo non sa
 * fare. È sempre presente e cambia solo opacità, così la transizione funziona e
 * la larghezza dell'elemento non cambia fra lingua corrente e non corrente.
 *
 * IL MAIUSCOLO È TIPOGRAFICO. text-transform, non testo scritto in maiuscolo nel
 * markup: il codice lingua resta leggibile allo screen reader e l'attributo lang
 * di ogni voce continua a descrivere il contenuto reale. Vale la stessa scelta
 * fatta per i badge (.hi-product-badges) e per i breadcrumb.
 *
 * SPECIFICITÀ — le sole regole di colore ripetono la classe del contenitore
 * (.hi-lang-switcher.hi-lang-switcher). Servono a battere le regole che Impreza
 * applica ai link dentro l'header — `.no-touch .l-subheader a` e la sua variante
 * `:hover`, che arrivano a due classi più un elemento più una pseudo-classe —
 * senza ricorrere a !important. La classe compare una volta sola nel markup:
 * ripeterla nel selettore alza il peso senza cambiare cosa viene selezionato.
 *
 * L'aspetto si regola dalle variabili qui sotto, senza toccare le regole. Essendo
 * variabili si possono ridefinire anche per una singola istanza dagli attributi
 * dello shortcode o dalle Design Options dell'elemento.
 */

/* --------------------------------------------------------------------------
 * Valori dell'elemento
 * Le misure sono in em perché il selettore vive nell'header a dimensioni molto
 * diverse: così spazio fra le lingue e distanza della sottolineatura restano in
 * proporzione al testo invece di andare ricalibrati a ogni cambio di corpo.
 * ------------------------------------------------------------------------ */

.hi-lang-switcher {
	/* Disposizione */
	--hi-lang-gap: 1em;

	/* Testo */
	--hi-lang-font-family: inherit;
	--hi-lang-font-size: inherit;
	--hi-lang-font-weight: inherit;
	--hi-lang-letter-spacing: 0.05em;
	--hi-lang-line-height: 1.2;
	--hi-lang-text-transform: uppercase;

	/* Colori — opzioni Impreza, sezione «Colori header»: il testo prende il colore
	   di Sfondo, l'hover quello di Link al passaggio del mouse. Vedi sopra. */
	--hi-lang-color: var(--color-header-middle-bg, #ffffff);
	--hi-lang-color-hover: var(--color-header-middle-text-hover, #ff6b00);
	--hi-lang-color-active: var(--hi-lang-color);
	--hi-lang-separator-color: var(--hi-lang-color);

	/* Sottolineatura della lingua corrente */
	--hi-lang-underline-color: var(--hi-lang-color-hover);
	--hi-lang-underline-height: 2px;
	--hi-lang-underline-offset: 0.35em;

	/* Quanto la sottolineatura deborda ai lati del testo, per parte */
	--hi-lang-underline-spread: 0.1em;

	--hi-lang-transition: 0.2s;
}

/* --------------------------------------------------------------------------
 * Struttura
 * ------------------------------------------------------------------------ */

/* La tipografia sta sul contenitore, non sulle voci: le misure in em — lo spazio
 * fra le lingue, la distanza della sottolineatura — devono essere proporzionali
 * al testo dell'elemento, e lo sono solo se il contenitore ha la stessa
 * dimensione delle voci che contiene. Le voci la ereditano e la ridichiarano su
 * inherit, che le difende dalle regole del tema mirate sull'elemento a. */

.hi-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: var(--hi-lang-gap);
	font-family: var(--hi-lang-font-family);
	font-size: var(--hi-lang-font-size);
	font-weight: var(--hi-lang-font-weight);
	letter-spacing: var(--hi-lang-letter-spacing);
	line-height: var(--hi-lang-line-height);
}

.hi-lang-switcher .hi-lang-switcher__item,
.hi-lang-switcher .hi-lang-switcher__separator {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

.hi-lang-switcher .hi-lang-switcher__item {
	position: relative;
	display: inline-block;
	text-transform: var(--hi-lang-text-transform);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--hi-lang-transition);
}

.hi-lang-switcher .hi-lang-switcher__separator {
	color: var(--hi-lang-separator-color);
	user-select: none;
}

/* --------------------------------------------------------------------------
 * Colori
 * Unico punto in cui la classe del contenitore è ripetuta: vedi SPECIFICITÀ.
 * L'hover viene dopo lo stato attivo, quindi vale anche sulla lingua corrente,
 * che è un link a se stessa e deve reagire come le altre.
 * ------------------------------------------------------------------------ */

.hi-lang-switcher.hi-lang-switcher .hi-lang-switcher__item {
	color: var(--hi-lang-color);
}

.hi-lang-switcher.hi-lang-switcher .hi-lang-switcher__item.is-active {
	color: var(--hi-lang-color-active);
}

.hi-lang-switcher.hi-lang-switcher .hi-lang-switcher__item:hover,
.hi-lang-switcher.hi-lang-switcher .hi-lang-switcher__item:focus {
	color: var(--hi-lang-color-hover);
}

/* --------------------------------------------------------------------------
 * Sottolineatura della lingua corrente
 * ------------------------------------------------------------------------ */

.hi-lang-switcher .hi-lang-switcher__item::after {
	content: '';
	position: absolute;
	left: calc(-1 * var(--hi-lang-underline-spread));
	right: calc(-1 * var(--hi-lang-underline-spread));
	top: calc(100% + var(--hi-lang-underline-offset));
	height: var(--hi-lang-underline-height);
	background: var(--hi-lang-underline-color);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--hi-lang-transition);
}

.hi-lang-switcher .hi-lang-switcher__item.is-active::after {
	opacity: 1;
}