/* Intur Consigli — tutto scoped su .ic-*, nessuna regola globale.
   I colori stanno qui in cima: cambiali una volta per allinearli al brand. */
.ic-wrap, .ic-giornate, .ic-situazioni, .ic-mappa, .ic-concierge {
	--ic-accent: #2b6cb0;
	--ic-ink: #1a202c;
	--ic-muted: #64748b;
	--ic-line: #e2e8f0;
	--ic-chip: #f1f5f9;
	--ic-card: #fff;

	/* Scala tipografica: 5 gradini, non 18. Se serve un corpo che non c'e',
	   si cambia un gradino qui — non si aggiunge un valore a caso nella regola.

	   In em, NON in rem: intur.it mette html a 10px (il trucco del 62.5%), quindi
	   ogni rem uscirebbe al 62% del previsto e la pagina sembrerebbe rimpicciolita.
	   Con em la scala si aggancia al testo del tema, qualunque esso sia: --ic-fs-sm
	   è per definizione la dimensione di lettura del sito. */
	--ic-fs-xs: .82em;
	--ic-fs-sm: 1em;
	--ic-fs-md: 1.1em;
	--ic-fs-lg: 1.3em;

	/* Spaziature: multipli di 4. Stessa regola. */
	--ic-sp-1: 4px;  --ic-sp-2: 8px;  --ic-sp-3: 12px;
	--ic-sp-4: 16px; --ic-sp-5: 24px; --ic-sp-6: 32px; --ic-sp-7: 48px;

	--ic-r-sm: 8px;
	--ic-radius: 16px;
	--ic-r-pill: 999px;

	/* l'immagine segue la larghezza della card invece di un'altezza fissa:
	   così resta proporzionata a qualsiasi numero di colonne */
	--ic-img: 5 / 2;   /* più basso = numero più grande: 3/1 la schiaccia ancora */
}

/* NAV ANCORE */
.ic-nav ul {
	display: flex; flex-wrap: wrap; gap: var(--ic-sp-2);
	justify-content: center; list-style: none;
	margin: 0 0 var(--ic-sp-6); padding: 0;
}
.ic-nav a {
	display: inline-block;
	padding: var(--ic-sp-2) var(--ic-sp-4);
	border: 1px solid var(--ic-line);
	border-radius: var(--ic-r-pill);
	background: var(--ic-card);
	color: var(--ic-ink);
	font-size: var(--ic-fs-sm); font-weight: 600;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}
.ic-nav a:hover, .ic-nav a:focus-visible {
	background: var(--ic-accent); color: #fff; border-color: var(--ic-accent);
}

/* SEZIONI */
.ic-sec { scroll-margin-top: 100px; margin-bottom: var(--ic-sp-7); } /* lascia spazio all'header sticky di OceanWP */
/* Nessuna dimensione né colore: l'H2 lo veste il tema, come tutti gli altri H2
   del sito. Qui si regola solo lo spazio sotto. */
.ic-h2 { margin: 0 0 var(--ic-sp-4); }
.ic-lead { color: var(--ic-muted); margin: 0 0 var(--ic-sp-5); }

/* GRIGLIA */
.ic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ic-sp-5);
	/* la card senza foto è alta quanto il suo contenuto: senza questo si stira
	   all'altezza della riga e lascia sotto un buco che sembra un errore */
	align-items: start;
}

/* CARD */
.ic-card {
	display: flex; flex-direction: column;
	background: var(--ic-card);
	border: 1px solid var(--ic-line);
	border-radius: var(--ic-radius);
	overflow: hidden;
	scroll-margin-top: 100px;
}
.ic-img {
	width: 100%; display: block;
	aspect-ratio: var(--ic-img); object-fit: cover;
	height: auto;   /* WordPress stampa width/height sull'<img>: va scavalcato */
}
.ic-body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--ic-sp-4); }
.ic-title { font-size: var(--ic-fs-lg); margin: 0 0 2px; color: var(--ic-ink); }
.ic-title a { color: inherit; text-decoration: none; }
.ic-title a:hover { text-decoration: underline; }
.ic-where {
	margin: 0 0 var(--ic-sp-3);
	font-size: var(--ic-fs-xs); font-weight: 700; letter-spacing: .4px;
	text-transform: uppercase; color: var(--ic-accent);
}

/* PILL INFO */
.ic-pills {
	display: flex; flex-wrap: wrap; gap: var(--ic-sp-2);
	list-style: none; margin: 0 0 var(--ic-sp-3); padding: 0;
}
.ic-pill {
	background: var(--ic-chip); color: #475569;
	padding: var(--ic-sp-1) var(--ic-sp-2); border-radius: var(--ic-r-sm);
	font-size: var(--ic-fs-xs); font-weight: 600; line-height: 1.6;
}
.ic-text { font-size: var(--ic-fs-sm); color: var(--ic-muted); margin: 0 0 var(--ic-sp-3); }

/* DETTAGLIO — <details> nativo: zero JS, testo sempre nel DOM.
   Reso come un riquadro alla Obsidian: prima era una riga di testo colorato e
   non si capiva che fosse un bottone. Ora è un blocco con sfondo, barra a
   sinistra e una freccia che ruota — le tre cose che dicono "premimi". */
.ic-more {
	margin-top: auto;
	background: #eef4fa;
	background: color-mix(in srgb, var(--ic-accent) 7%, transparent);
	border-left: 3px solid var(--ic-accent);
	border-radius: 0 var(--ic-r-sm) var(--ic-r-sm) 0;
	overflow: hidden;
}
.ic-more summary {
	display: flex; align-items: center; gap: var(--ic-sp-2);
	padding: var(--ic-sp-3);
	cursor: pointer; list-style: none;
	color: var(--ic-accent); font-weight: 700; font-size: var(--ic-fs-xs);
	transition: background .15s;
}
.ic-more summary:hover, .ic-more summary:focus-visible {
	background: color-mix(in srgb, var(--ic-accent) 8%, transparent);
}
.ic-more summary::-webkit-details-marker { display: none; }
.ic-more summary::before { content: "💡"; font-size: 1.15em; }
.ic-more summary::after {
	content: "❯"; margin-left: auto; display: inline-block;
	transform: rotate(90deg); transition: transform .18s;
}
.ic-more[open] summary::after { transform: rotate(-90deg); }
.ic-more-body {
	padding: 0 var(--ic-sp-3) var(--ic-sp-3);
	font-size: var(--ic-fs-xs); color: #475569;
}
.ic-more-body p { margin: 0 0 var(--ic-sp-2); }
.ic-more-body p:last-child { margin-bottom: 0; }
.ic-more-body strong { color: var(--ic-ink); }
.ic-tel { margin: var(--ic-sp-2) 0 0; font-size: var(--ic-fs-sm); font-weight: 600; }

/* GIORNATE — chip in cima, una sola aperta sotto.
   Impilarle tutte aperte faceva un muro, soprattutto da telefono. */
.ic-giornate {
	background: var(--ic-card);
	border: 1px solid var(--ic-line);
	border-radius: var(--ic-radius);
	padding: var(--ic-sp-6);
	margin: var(--ic-sp-5) 0;
}
.ic-gt { display: block; height: 0; scroll-margin-top: 100px; }
.ic-gchips {
	display: flex; flex-wrap: wrap; gap: var(--ic-sp-2);
	margin: 0 0 var(--ic-sp-5);
}
.ic-gchip {
	display: inline-flex; align-items: center; gap: var(--ic-sp-2);
	padding: var(--ic-sp-3) var(--ic-sp-4);
	border: 1px solid var(--ic-line); border-radius: var(--ic-r-pill);
	background: var(--ic-card); color: var(--ic-ink);
	font-size: var(--ic-fs-sm); font-weight: 600; text-decoration: none;
	transition: border-color .15s, background .15s;
}
.ic-gchip:hover { border-color: var(--ic-accent); }

.ic-gpan { display: none; }
.ic-gpan-h { margin: 0 0 var(--ic-sp-1); }
.ic-gpan-s { margin: 0 0 var(--ic-sp-4); color: var(--ic-muted); font-size: var(--ic-fs-sm); }
.ic-gpan-t { font-size: var(--ic-fs-sm); line-height: 1.75; color: #475569; }
.ic-gpan-t p { margin: 0 0 var(--ic-sp-3); }
.ic-gpan-t p:last-child { margin-bottom: 0; }
/* il rimando dentro il racconto: si deve vedere che è un link, senza spezzare
   la lettura come farebbe un bottone */
.ic-rif {
	color: var(--ic-accent); font-weight: 700; text-decoration: none;
	border-bottom: 2px solid color-mix(in srgb, var(--ic-accent) 35%, transparent);
}
.ic-rif:hover { border-bottom-color: var(--ic-accent); }
.ic-more-link { margin: var(--ic-sp-3) 0 0; font-weight: 700; font-size: var(--ic-fs-sm); }
.ic-more-link a { color: var(--ic-accent); }

@media (max-width: 480px) {
	.ic-giornate { padding: var(--ic-sp-5) var(--ic-sp-4); }
	.ic-gchip { font-size: var(--ic-fs-xs); padding: var(--ic-sp-2) var(--ic-sp-3); }
}
@media (prefers-reduced-motion: reduce) {
	.ic-nav a { transition: none; }
}

/* ══ SITUAZIONI — la scelta in cima alla pagina ═════════════════════════ */
.ic-situazioni { text-align: center; margin: 0 0 var(--ic-sp-7); }
.ic-sits {
	display: flex; flex-wrap: wrap; gap: var(--ic-sp-3);
	justify-content: center; list-style: none; margin: var(--ic-sp-5) 0 0; padding: 0;
}
.ic-sit {
	display: inline-flex; align-items: center; gap: var(--ic-sp-2);
	padding: var(--ic-sp-3) var(--ic-sp-4);
	border: 1px solid var(--ic-line); border-radius: var(--ic-r-pill);
	background: var(--ic-card); color: var(--ic-ink);
	font-size: var(--ic-fs-md); font-weight: 600; text-decoration: none;
	transition: background .2s, color .2s, border-color .2s, transform .12s;
}
.ic-sit:hover, .ic-sit:focus-visible { border-color: var(--ic-accent); transform: translateY(-2px); }
.ic-sit-emoji { font-size: var(--ic-fs-lg); }
.ic-sit-n {
	min-width: 22px; padding: 1px var(--ic-sp-2); border-radius: var(--ic-r-pill);
	background: var(--ic-chip); color: var(--ic-muted);
	font-size: var(--ic-fs-xs); font-weight: 700;
}
.ic-sit-tutti { font-weight: 500; color: var(--ic-muted); }

/* ══ BARRA DEL FILTRO ATTIVO ════════════════════════════════════════════ */
.ic-fbar {
	display: none; align-items: center; flex-wrap: wrap; gap: var(--ic-sp-2);
	margin: 0 0 var(--ic-sp-5); padding: var(--ic-sp-3) var(--ic-sp-4);
	background: var(--ic-chip); border-left: 4px solid var(--ic-accent);
	border-radius: var(--ic-r-sm); font-size: var(--ic-fs-sm); color: var(--ic-ink);
	scroll-margin-top: 110px;
}
.ic-fbar-x { margin-left: auto; color: var(--ic-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ic-fbar-x:hover { text-decoration: underline; }
#f-tutti { display: block; height: 0; scroll-margin-top: 110px; }
#ic-posti, #ic-mappa { scroll-margin-top: 100px; }

/* ══ MAPPA ══════════════════════════════════════════════════════════════ */
.ic-mappa { margin: 0 0 var(--ic-sp-7); text-align: center; }
.ic-legenda {
	display: flex; flex-wrap: wrap; gap: var(--ic-sp-2) var(--ic-sp-5);
	justify-content: center; list-style: none; margin: var(--ic-sp-5) 0 var(--ic-sp-4); padding: 0;
	font-size: var(--ic-fs-sm);
}
.ic-legenda li { display: inline-flex; align-items: center; gap: var(--ic-sp-2); }
.ic-lg-dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.ic-lg-sotto { color: var(--ic-muted); }

.ic-mappa-box { max-width: 720px; margin: 0 auto; }
.ic-svg { display: block; width: 100%; height: auto; }
.ic-svg a { text-decoration: none; }   /* i temi sottolineano ogni <a>, anche dentro l'SVG */
.ic-isola { fill: #e3edf1; stroke: #b3cad4; stroke-width: 4; stroke-linejoin: round; }
.ic-pin-a { cursor: pointer; }
.ic-pin { stroke: #fff; stroke-width: 3; transition: opacity .2s; }
.ic-pin-a:hover .ic-pin { stroke-width: 5; }
.ic-pin-n { fill: #fff; font-size: 19px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.ic-pin-n2 { font-size: 15px; }   /* due cifre nello stesso pallino */
.ic-casa circle { fill: var(--ic-ink); stroke: #fff; stroke-width: 3.5; }
.ic-casa text {
	font-size: 23px; font-weight: 700; fill: var(--ic-ink); text-anchor: middle;
	paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round;
}

/* i nomi delle 16 zone non stanno sulla mappa senza accavallarsi: stanno qui */
.ic-chips {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--ic-sp-2); margin: var(--ic-sp-5) auto 0; max-width: 720px; text-align: left;
}
.ic-chip {
	display: flex; align-items: center; gap: var(--ic-sp-2);
	padding: var(--ic-sp-2) var(--ic-sp-3); border: 1px solid var(--ic-line); border-radius: var(--ic-r-sm);
	background: var(--ic-card); color: var(--ic-ink); text-decoration: none;
	font-size: var(--ic-fs-sm); transition: opacity .2s, border-color .2s;
}
.ic-chip:hover { border-color: var(--ic-accent); }
.ic-chip-n {
	flex: none; width: 24px; height: 24px; border-radius: 50%;
	color: #fff; font-size: var(--ic-fs-xs); font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
}
.ic-chip-t { font-weight: 600; }
.ic-chip-m { margin-left: auto; color: var(--ic-muted); font-size: var(--ic-fs-xs); white-space: nowrap; }

/* il pannello della zona: sempre nello stesso posto, mai sopra la mappa */

/* ══ STELLE E LINK GOOGLE ═══════════════════════════════════════════════ */
.ic-rate { margin: var(--ic-sp-2) 0 0; font-size: var(--ic-fs-sm); color: var(--ic-muted); }
.ic-stars { color: #e8a90c; letter-spacing: 1px; }
.ic-voto { font-weight: 700; color: var(--ic-ink); }
.ic-nrec { color: var(--ic-muted); }
.ic-maps { color: var(--ic-accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ic-maps:hover { text-decoration: underline; }

/* ══ CONCIERGE ══════════════════════════════════════════════════════════ */
.ic-concierge {
	margin: var(--ic-sp-7) 0 0; padding: var(--ic-sp-6) var(--ic-sp-5);
	background: var(--ic-chip); border-radius: var(--ic-radius); text-align: center;
}
.ic-concierge .ic-text { max-width: 54ch; margin: 0 auto var(--ic-sp-5); }
.ic-wa {
	display: inline-flex; align-items: center; gap: var(--ic-sp-2);
	padding: var(--ic-sp-3) var(--ic-sp-5); border-radius: var(--ic-r-pill);
	background: #25d366; color: #06301a;
	font-weight: 700; text-decoration: none;
}
.ic-wa:hover { filter: brightness(.94); }
.ic-muted { color: var(--ic-muted); font-size: var(--ic-fs-sm); margin: var(--ic-sp-4) 0 0; }

@media (max-width: 640px) {
	.ic-chips { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.ic-sit { padding: var(--ic-sp-3) var(--ic-sp-4); font-size: var(--ic-fs-sm); }
	.ic-concierge { padding: var(--ic-sp-5) var(--ic-sp-4); }
}
@media (prefers-reduced-motion: reduce) {
	.ic-sit, .ic-pin { transition: none; }
	.ic-sit:hover { transform: none; }
}


.ic-fonte { margin: var(--ic-sp-2) 0 0; font-size: var(--ic-fs-xs); color: var(--ic-muted); }

/* I temi sottolineano ogni <a> dentro il contenuto, e su un elemento che vuole
   sembrare un bottone la sottolineatura lo fa sembrare rotto. Due classi per
   scavalcare la regola del tema senza usare !important. */
.ic-situazioni .ic-sit,
.ic-mappa .ic-chip,
.ic-giornate .ic-gchip,
.ic-giornate .ic-rif,
.ic-nav a, .ic-more summary { text-decoration: none; }