/**
 * SVETIX — selettore di lingua.
 *
 * Usa le stesse variabili del tema, quindi cambia colore da solo insieme alla
 * variante scelta. Nessun colore fisso, nessuna immagine: le bandierine sono
 * caratteri emoji, quindi non c'e nulla da scaricare.
 */

.sx-lang {
	/* Le tre misure arrivano come variabili dal PHP: sono valori continui
	   (dimensione, spazio, arrotondamento) e una classe per ogni valore
	   possibile sarebbe un foglio lungo trecento righe per niente. */
	--sx-lang-gap: 6px;
	--sx-lang-size: 1;
	--sx-lang-radius: 999px;
	display: inline-flex;
	font-family: var(--sx-font-body, inherit);
	font-size: calc(13px * var(--sx-lang-size));
	line-height: 1;
}

.sx-lang__inner { position: relative; display: inline-flex; }

.sx-lang__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sx-lang-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sx-lang__item { margin: 0; }

.sx-lang__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: calc(6px * var(--sx-lang-size)) calc(9px * var(--sx-lang-size));
	border: 1px solid transparent;
	border-radius: var(--sx-lang-radius);
	color: var(--sx-text-muted, #6b7280);
	text-decoration: none;
	transition: color var(--sx-transition, .25s) ease,
		background-color var(--sx-transition, .25s) ease,
		border-color var(--sx-transition, .25s) ease;
}

.sx-lang__link:hover,
.sx-lang__link:focus-visible {
	color: var(--sx-text, #111);
	background: var(--sx-surface-2, rgba(0, 0, 0, .05));
}

.sx-lang__item.is-current .sx-lang__link {
	color: var(--sx-text, #111);
	border-color: var(--sx-border, rgba(0, 0, 0, .1));
	background: var(--sx-surface-2, rgba(0, 0, 0, .05));
	font-weight: 600;
}

.sx-lang__flag { font-size: 1.05em; line-height: 1; }
.sx-lang__abbr { letter-spacing: .06em; font-weight: 600; }
.sx-lang__name { white-space: nowrap; }

/* La sola bandierina sta meglio in un quadratino. */
.sx-lang--flag .sx-lang__link { padding: 6px 7px; }

/* --------------------------------------------------------------------------
   A TENDINA
   La lingua attiva fa da pulsante; le altre compaiono sotto.
   Funziona anche senza JavaScript: si apre al passaggio del mouse e al
   focus da tastiera.
   -------------------------------------------------------------------------- */
.sx-lang--dropdown .sx-lang__current {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 11px;
	background: var(--sx-surface, transparent);
	color: var(--sx-text, #111);
	border: 1px solid var(--sx-border, rgba(0, 0, 0, .1));
	border-radius: calc(var(--sx-radius, 10px) * .7);
	font: inherit;
	cursor: pointer;
}

.sx-lang--dropdown .sx-lang__caret {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .6;
}

.sx-lang--dropdown .sx-lang__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	flex-direction: column;
	align-items: stretch;
	min-width: 156px;
	padding: 6px;
	background: var(--sx-surface, #fff);
	border: 1px solid var(--sx-border, rgba(0, 0, 0, .1));
	border-radius: var(--sx-radius, 10px);
	box-shadow: var(--sx-shadow-lg, 0 20px 48px rgba(0, 0, 0, .14));
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.sx-lang--dropdown .sx-lang__inner:hover .sx-lang__list,
.sx-lang--dropdown .sx-lang__inner:focus-within .sx-lang__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sx-lang--dropdown .sx-lang__link { padding: 8px 10px; }

/* --------------------------------------------------------------------------
   POSIZIONI
   -------------------------------------------------------------------------- */
.sx-lang--header { margin-left: 6px; }
.sx-lang--footer { margin-top: 10px; }

.sx-lang--floating {
	position: fixed;
	z-index: 90;
	/* Dove sta esattamente lo dicono le classi .sx-lang--f-* piu sotto:
	   qui si dice solo che fluttua. Prima i valori erano scritti qui, e ogni
	   nuovo angolo avrebbe dovuto disfarli uno per uno. */
}

.sx-lang--floating .sx-lang__current {
	background: var(--sx-overlay, rgba(255, 255, 255, .8));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: var(--sx-shadow, 0 8px 24px rgba(0, 0, 0, .08));
}

/* Dentro al pannello del menu il selettore segue l'allineamento delle voci
   e va a capo da solo se le lingue sono tante. */
.sx-nav__foot .sx-lang { margin-top: 14px; width: 100%; }
.sx-nav__foot .sx-lang__inner { width: 100%; }
.sx-align-center .sx-nav__foot .sx-lang__list { justify-content: center; }
.sx-align-right .sx-nav__foot .sx-lang__list { justify-content: flex-end; }

/* Sotto i 640px la barra in linea puo diventare stretta: si accorcia. */
@media (max-width: 640px) {
	.sx-lang--inline .sx-lang__name { display: none; }
	/* Su schermo piccolo si stringe un po' verso il bordo, ma senza
	   cancellare la scelta: si scala lo scostamento, non lo si sostituisce. */
	.sx-lang--floating { --sx-lang-x: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.sx-lang__link,
	.sx-lang--dropdown .sx-lang__list { transition: none; }
}

/* --------------------------------------------------------------------------
   VESTITI
   Cinque modi di stare nella pagina, dallo scomparire del tutto al pieno.
   Nessun colore scritto a mano: tutti e cinque nascono dalle variabili della
   variante attiva, quindi funzionano su chiaro, scuro e neutro.
   -------------------------------------------------------------------------- */

/* Nudo: solo testo, nessun fondo nemmeno sulla lingua attiva. Il piu adatto
   dentro a un pie di pagina o a una barra gia piena di cose. */
.sx-lang--c-plain .sx-lang__link,
.sx-lang--c-plain .sx-lang__item.is-current .sx-lang__link {
	background: transparent;
	border-color: transparent;
}
.sx-lang--c-plain .sx-lang__item.is-current .sx-lang__link { text-decoration: underline; text-underline-offset: .3em; }

/* Contorno: un filetto sempre, pieno mai. */
.sx-lang--c-outline .sx-lang__link { border-color: var(--sx-border, rgba(0, 0, 0, .12)); background: transparent; }
.sx-lang--c-outline .sx-lang__item.is-current .sx-lang__link { border-color: var(--sx-primary); color: var(--sx-primary); }

/* Pieno: la lingua attiva prende il colore principale. Si vede da lontano. */
.sx-lang--c-solid .sx-lang__item.is-current .sx-lang__link {
	background: var(--sx-primary);
	color: var(--sx-primary-contrast);
	border-color: var(--sx-primary);
}

/* Vetro: fondo semitrasparente e sfocatura. Sopra a un'immagine e l'unico
   che resta leggibile senza coprire quello che sta sotto. */
.sx-lang--c-glass .sx-lang__link,
.sx-lang--c-glass .sx-lang__current {
	background: var(--sx-overlay, rgba(255, 255, 255, .7));
	border-color: var(--sx-border, rgba(0, 0, 0, .1));
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Sigle in maiuscolo: it -> IT. */
.sx-lang--upper .sx-lang__abbr,
.sx-lang--upper .sx-lang__name { text-transform: uppercase; letter-spacing: .12em; }

/* In colonna invece che in riga. */
.sx-lang--stack .sx-lang__list { flex-direction: column; align-items: stretch; }
.sx-lang--stack .sx-lang__link { justify-content: center; }

/* Allineamento quando il selettore sta dentro al contenuto di una pagina. */
.sx-lang--a-left,
.sx-lang--a-center,
.sx-lang--a-right { display: flex; width: 100%; }
.sx-lang--a-left { justify-content: flex-start; }
.sx-lang--a-center { justify-content: center; }
.sx-lang--a-right { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   FLUTTUANTE: sei posizioni, due scostamenti
   Gli scostamenti sono le stesse due variabili per tutti e sei gli angoli:
   "18 px dal bordo" deve voler dire la stessa cosa in alto a sinistra e in
   basso a destra.
   -------------------------------------------------------------------------- */
.sx-lang--f-br { right: var(--sx-lang-x, 18px); bottom: calc(var(--sx-lang-y, 18px) + env(safe-area-inset-bottom, 0px)); top: auto; left: auto; }
.sx-lang--f-bl { left: var(--sx-lang-x, 18px); bottom: calc(var(--sx-lang-y, 18px) + env(safe-area-inset-bottom, 0px)); top: auto; right: auto; }
.sx-lang--f-tr { right: var(--sx-lang-x, 18px); top: var(--sx-lang-y, 18px); bottom: auto; left: auto; }
.sx-lang--f-tl { left: var(--sx-lang-x, 18px); top: var(--sx-lang-y, 18px); bottom: auto; right: auto; }
.sx-lang--f-mr { right: var(--sx-lang-x, 18px); top: 50%; transform: translateY(-50%); bottom: auto; left: auto; }
.sx-lang--f-ml { left: var(--sx-lang-x, 18px); top: 50%; transform: translateY(-50%); bottom: auto; right: auto; }

/* La barra dell'amministratore copre gli angoli in alto: si scende sotto. */
.admin-bar .sx-lang--f-tr,
.admin-bar .sx-lang--f-tl { top: calc(var(--sx-lang-y, 18px) + 32px); }

/* Nella barra superiore il selettore resta piccolo e non va a capo. */
.sx-lang--topbar { margin-left: auto; }
.sx-lang--topbar .sx-lang__list { flex-wrap: nowrap; }
.sx-lang--topbar .sx-lang__link { padding-block: 2px; }


/* --------------------------------------------------------------------------
   SOTTO LA TESTATA: una riga tutta sua
   Serve quando in testata non c'e piu posto: invece di stringere il menu, le
   lingue scendono di una riga. La riga usa lo stesso contenitore del resto
   del sito, cosi resta incolonnata con il logo e con il contenuto sotto.
   -------------------------------------------------------------------------- */
.sx-langbar {
	padding-block: var(--sx-langbar-space, 10px);
	background: transparent;
}

.sx-langbar > .sx-container {
	display: flex;
}

.sx-langbar--left > .sx-container { justify-content: flex-start; }
.sx-langbar--center > .sx-container { justify-content: center; }
.sx-langbar--right > .sx-container { justify-content: flex-end; }

/* Il filetto separa la riga dal contenuto, non dalla testata: sopra c'e gia
   il bordo della testata, e due linee vicine sembrano un errore. */
.sx-langbar--divider { border-bottom: 1px solid var(--sx-border); }

.sx-langbar .sx-lang__list { flex-wrap: wrap; }

/* Su schermo stretto la riga torna al centro: con il menu compatto a destra,
   quattro sigle spinte al bordo toccano il margine. */
@media (max-width: 600px) {
	.sx-langbar > .sx-container { justify-content: center; }
}

/* RIPIEGO — la riga dentro alla testata.
   Serve con i temi che non hanno ancora il gancio "sotto la testata": invece
   di non comparire affatto, la riga sta nella zona comandi e va a capo sotto
   al menu. La testata cresce di una riga, ed e la cosa giusta: schiacciarla
   dentro all'altezza di prima farebbe toccare menu e bandierine. */
/* La zona comandi deve anche ALLARGARSI, non solo andare a capo: senza, la
   sua larghezza la detta la riga delle lingue e il pulsante del menu, che
   fino a un attimo prima era a filo del bordo, scivola verso il centro.
   E il tipo di effetto collaterale che si vede solo guardando la pagina. */
.sx-langbar-dentro .sx-header__actions {
	flex-wrap: wrap;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.sx-langbar--dentro {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	padding-block: var(--sx-langbar-space, 10px) 0;
	/* Il menu compatto a destra viaggia con "order: 20": senza un ordine piu
	   alto la riga finirebbe SOPRA al menu invece che sotto. */
	order: 99;
}

.sx-langbar--left.sx-langbar--dentro { justify-content: flex-start; }
.sx-langbar--center.sx-langbar--dentro { justify-content: center; }
.sx-langbar--right.sx-langbar--dentro { justify-content: flex-end; }

/* Dentro alla testata il filetto separerebbe la riga dal nulla: il bordo
   della testata e gia li sotto. */
.sx-langbar--dentro.sx-langbar--divider { border-bottom: 0; }

/* Su telefono anche il ripiego va al centro. Questa regola sta in fondo al
   foglio di proposito: le tre classi di allineamento qui sopra hanno la
   stessa specificita, e in CSS a parita vince l'ultima scritta. */
@media (max-width: 600px) {
	.sx-langbar--left.sx-langbar--dentro,
	.sx-langbar--center.sx-langbar--dentro,
	.sx-langbar--right.sx-langbar--dentro { justify-content: center; }
}