/*
 * Il selettore lingua vive spesso dentro voci di menu di temi/Elementor che
 * applicano flex-wrap, larghezze fisse o line-height ereditati: qui blindiamo
 * ogni proprietà che potrebbe farlo andare a capo o deformarsi.
 */

/*
 * Molti temi, quando lo switcher viene inserito come voce di menu dentro lo
 * stesso <ul> di navigazione, applicano al suo <li> regole pensate per
 * "spingere a destra" le icone di ricerca/lingua (margin-left:auto,
 * flex-grow, ecc.). Qui neutralizziamo il caso più comune sul contenitore
 * diretto dello switcher. Se lo spazio enorme resta comunque, il colpevole è
 * quasi certamente il layout dell'intero <ul> del menu (fuori dal controllo
 * di questo CSS): in quel caso conviene spostare lo switcher fuori dal menu
 * principale, in un widget/elemento header separato — vedi NOTE-TECNICHE.md.
 */
li:has( > .cat-switcher ),
li:has( > a > .cat-switcher ) {
	margin-left: 0 !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: max-content !important;
}

.cat-switcher {
	display: inline-flex !important;
	align-items: center;
	flex-wrap: nowrap !important;
	white-space: nowrap;
	gap: 10px;
	max-width: 100%;
	vertical-align: middle;
	line-height: 1;
}

.cat-switcher--dropdown select {
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid #ddd;
	font-size: 13px;
	line-height: 1.2;
	max-width: 160px;
}

.cat-switcher--flags {
	gap: 10px;
	flex-wrap: nowrap !important;
}

.cat-flag {
	display: inline-flex;
	flex: 0 0 auto;        /* mai comprimere né mai andare a capo */
	font-size: 22px;
	line-height: 1;
	padding: 0 !important;   /* azzera eventuale padding ereditato dal tema sui link del menu */
	margin: 0 !important;
	text-decoration: none;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.cat-flag:hover,
.cat-flag--active {
	opacity: 1;
}

/* Su schermi molto stretti (menu mobile) restringe leggermente invece di
   lasciarle andare a capo o rompere il layout del menu. */
@media (max-width: 480px) {
	.cat-flag {
		font-size: 18px;
	}
	.cat-switcher {
		gap: 6px;
	}
}