/* =========================================================
   SELETTORE DI LINGUA IT | EN
   Stampato da quad_lang_switcher() in functions.php.
   Riprende il pulsante del menu mobile: bordo bianco sottile
   e solo l'angolo in basso a sinistra arrotondato.
========================================================= */
.quad-lang {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 0 0 0 15px;
	overflow: hidden;
	font-family: "Prompt", sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
}

.quad-lang__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 0 12px;
	color: #ffffff;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

a.quad-lang__item:hover,
a.quad-lang__item:focus-visible {
	color: #ffdf43;
}

a.quad-lang__item:focus-visible {
	outline: 2px solid #ffdf43;
	outline-offset: -4px;
}

.quad-lang__item.is-active {
	background-color: #ffdf43;
	color: #003b61;
}

/* desktop: in fondo al menu principale. Le voci del tema sono float
   alte quanto la riga del menu: il selettore si centra sulla stessa altezza */
#site-navigation .quad-lang-li {
	float: left;
	display: flex;
	align-items: center;
	height: var(--wpex-main-nav-height, 110px);
}

.quad-lang--desktop {
	height: 34px;
	font-size: 13px;
}

.quad-lang--desktop .quad-lang__item {
	min-width: 36px;
	padding: 0 9px;
}

/* Spazio per il selettore nel menu italiano, che è il più lungo.
   Il CSS del sito (Custom CSS & JS) mette le voci a 16px tra 1050 e 1439px
   e porta gli spazi a 50px sopra i 1550px: in quelle fasce il menu toccava il
   logo (sopra i 1550px anche prima del selettore). */
@media (min-width: 1251px) and (max-width: 1439px) {
	#site-navigation .main-navigation-ul > .menu-item > a > .link-inner {
		font-size: 14px;
	}
}

@media (min-width: 1551px) and (max-width: 1799px) {
	#site-navigation .main-navigation-ul > .menu-item:not(:last-child) {
		margin-inline-end: 28px;
	}
}

/* mobile: nella barra in alto, accanto al pulsante del menu.
   Il pulsante è assoluto (right 15px, 45px, centrato in verticale):
   il selettore si mette alla sua sinistra con la stessa logica,
   e con lo stesso z-index resta visibile anche a menu aperto */
.quad-lang--mobile {
	position: absolute;
	top: 50%;
	right: 70px;
	z-index: 3;
	height: 45px;
	transform: translateY(-50%);
	font-size: 13px;
}

.quad-lang--mobile .quad-lang__item {
	min-width: 40px;
	padding: 0 10px;
}

/* menu mobile aperto: fondo bianco, come il pulsante del menu */
body.ca-menu-open .quad-lang--mobile {
	border-color: #cccccc;
}

body.ca-menu-open .quad-lang--mobile a.quad-lang__item {
	color: #003b61;
}