/*
 * ACSI — Enti Consorziati (frontend)
 * Stile per l'output dello shortcode [acsi_enti_consorziati], definito in
 * acsi-enti-core.php. Il plugin non viene toccato: qui si stilizzano solo
 * le classi che genera già (.acsi-enti-consorziati, .acsi-enti-consorziati-elenco,
 * .acsi-ente-nota) e il contenitore della mappa (individuato per attributo,
 * dato che il suo ID è generato dinamicamente ad ogni istanza).
 */

.acsi-enti-consorziati {
	font-family: var(--font-testo);
	color: var(--colore-testo);
	margin-top: 8px;
}

/* --- Lista comuni, a più colonne --- */

.acsi-enti-consorziati-elenco {
	list-style: disc outside;
	column-count: 4;
	column-gap: 32px;
	margin: 0;
	padding-left: 16px;
}

.acsi-enti-consorziati-elenco li {
	break-inside: avoid; /* evita che una voce si spezzi tra una colonna e l'altra */
	margin-bottom: 4px;
	font-size: 13px;
	line-height: 1.2;
}

.acsi-enti-consorziati-elenco a {
	color: var(--colore-primario);
	text-decoration: none;
	font-weight: 700;
}

.acsi-enti-consorziati-elenco a:hover,
.acsi-enti-consorziati-elenco a:focus-visible {
	text-decoration: underline;
}

/* Voce cliccabile (comune con coordinate) — resetto lo stile di default del
   <button>, dato che non è più un link ma un innesco per centrare la mappa. */
.acsi-enti-consorziati-elenco button.acsi-enti-consorziati__voce {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-size: 13px;
	color: var(--colore-primario);
	font-weight: 700;
	cursor: pointer;
	text-align: left;
}

.acsi-enti-consorziati-elenco button.acsi-enti-consorziati__voce:hover,
.acsi-enti-consorziati-elenco button.acsi-enti-consorziati__voce:focus-visible {
	text-decoration: underline;
}

/* Comuni senza coordinate: testo semplice, leggermente più tenue per
   distinguerli otticamente da quelli cliccabili, senza bisogno di un'icona
   o un badge. */
.acsi-enti-consorziati-elenco li:not(:has(button)) {
	color: var(--colore-grigio);
	font-weight: 400;
}

/* Pallino dell'elenco colorato in coppia col testo — rinforza lo stacco
   anche sul bordo sinistro della riga, non solo sul colore/peso del testo. */
.acsi-enti-consorziati-elenco li:has(button)::marker {
	color: var(--colore-primario);
}

.acsi-enti-consorziati-elenco li:not(:has(button))::marker {
	color: var(--colore-grigio);
}

.acsi-ente-nota {
	font-size: 12px;
	font-style: italic;
	color: var(--colore-grigio);
}

@media (max-width: 1100px) {
	.acsi-enti-consorziati-elenco {
		column-count: 3;
	}
}

@media (max-width: 780px) {
	.acsi-enti-consorziati-elenco {
		column-count: 2;
	}
}

@media (max-width: 480px) {
	.acsi-enti-consorziati-elenco {
		column-count: 1;
	}
}

/* --- Mappa --- */
/* L'ID è generato dinamicamente dallo shortcode (acsi-enti-mappa-{id univoco}),
   quindi si aggancia per attributo invece che per un nome di classe fisso. */
.acsi-enti-consorziati div[id^="acsi-enti-mappa-"] {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--colore-sfondo-alt);
}

.acsi-enti-marker--evidenziato {
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
	z-index: 1000 !important; /* sopra agli altri marker, anche se più vicini alla base della mappa */
}