/* ==========================================================================
   cultusmap.net
   Foglio di stile unico. Scritto a mano, niente framework.
   Ordine: variabili · basi · impaginazione · navigazione · componenti · pagine
   ========================================================================== */

/* --- Variabili ----------------------------------------------------------- */

:root {
	/* Colori. Nomi in italiano per non confonderli con quelli di Leaflet. */
	--carta:        #fdfcfa;   /* sfondo */
	--carta-ombra:  #f5f2ed;   /* sfondo di sezioni e righe alternate */
	--inchiostro:   #1c1a17;   /* testo principale */
	--tenue:        #6b645c;   /* testo secondario, metadati */
	--filo:         #e6e1da;   /* bordi e separatori */
	--accento:      #a8442a;   /* terracotta: link, dettagli */
	--accento-cupo: #7d3220;   /* accento al passaggio del mouse */
	--accento-velo: #f7ece8;   /* fondo tenue dell'accento */

	--serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
	--sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--respiro:  1rem;
	--largo:    72rem;   /* larghezza massima del contenuto */
	--stretto:  38rem;   /* larghezza di lettura per le pagine di testo */
	--raggio:   4px;

	--barra: 3.5rem;     /* altezza della barra di navigazione */
}

/* --- Basi ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--carta);
	color: var(--inchiostro);
	font: 400 16px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.015em;
	margin: 0 0 .6rem;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
h2 { font-size: 1.4rem; margin-top: 2.4rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }

a {
	color: var(--accento);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}
a:hover { color: var(--accento-cupo); }

img { max-width: 100%; height: auto; display: block; }

hr {
	border: 0;
	border-top: 1px solid var(--filo);
	margin: 2rem 0;
}

/* Riquadro di messa a fuoco visibile: serve a chi naviga da tastiera. */
:focus-visible {
	outline: 2px solid var(--accento);
	outline-offset: 2px;
}

/* Visibile solo ai lettori di schermo. */
.solo-lettori {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Impaginazione ------------------------------------------------------- */

.contenitore {
	width: 100%;
	max-width: var(--largo);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.contenitore-stretto {
	max-width: var(--stretto);
}


/* --- Navigazione --------------------------------------------------------- */

.barra {
	position: sticky;
	top: 0;
	z-index: 1000;
	height: var(--barra);
	display: flex;
	align-items: center;
	background: rgba(253, 252, 250, .92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--filo);
}

.barra > .contenitore {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.marchio {
	font-family: var(--serif);
	font-size: 1.15rem;
	color: var(--inchiostro);
	text-decoration: none;
	white-space: nowrap;
}
.marchio span { color: var(--accento); }

.menu {
	display: flex;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .92rem;
}

.menu a {
	color: var(--tenue);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	/* 44px di area sensibile: la misura minima perché un dito prenda la voce
	   al primo colpo, anche se il testo è alto la metà. */
	display: flex;
	align-items: center;
	min-height: 44px;
}
.menu a:hover { color: var(--inchiostro); }
.menu a[aria-current="page"] {
	color: var(--inchiostro);
	border-bottom-color: var(--accento);
}

@media (max-width: 34rem) {
	.menu { gap: .85rem; font-size: .85rem; }
	.marchio { font-size: 1rem; }
}

@media (max-width: 24rem) {
	/* Sui telefoni piccolissimi il marchio cede il posto alle voci di menu,
	   che sono quelle che servono per muoversi. */
	.menu { gap: .7rem; font-size: .8rem; }
	.marchio {
		font-size: .95rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.contenitore { padding-inline: .9rem; }
}

/* --- Piè di pagina ------------------------------------------------------- */

.pie {
	margin-top: 3rem;
	padding-block: 2rem;
	border-top: 1px solid var(--filo);
	background: var(--carta-ombra);
	font-size: .875rem;
	color: var(--tenue);
}

.pie a { color: var(--tenue); }
.pie a:hover { color: var(--accento); }

.pie-righe {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
}

/* --- Filtri -------------------------------------------------------------- */

/* La testata compatta esiste solo su schermi stretti: sui monitor le tendine
   stanno già tutte in fila e non serve nulla da aprire. */
.filtri-testata { display: none; }

.filtri {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem;
	padding: 1rem 0 1.25rem;
	border-bottom: 1px solid var(--filo);
}

.filtro {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}

.filtro label {
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tenue);
}

.filtro select {
	font: inherit;
	/* 16px esatti: sotto questa misura iOS ingrandisce la pagina di scatto
	   appena si tocca il campo, e poi non la rimpicciolisce più. */
	font-size: 16px;
	color: var(--inchiostro);
	background: #fff;
	border: 1px solid var(--filo);
	border-radius: var(--raggio);
	padding: .5rem 2rem .5rem .6rem;
	max-width: 14rem;
	/* Freccetta disegnata a mano: evita l'aspetto di sistema, disomogeneo fra browser. */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b645c' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .65rem center;
}
.filtro select:hover { border-color: var(--tenue); }

/* Il conteggio ha la stessa struttura di una tendina — etichetta minuta sopra,
   valore sotto — così si allinea alla riga dei filtri invece di galleggiare. */
.conteggio {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

.conteggio-dove {
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tenue);
}

.conteggio-valore {
	font-family: var(--serif);
	font-size: 1.15rem;
	line-height: 1.9;   /* pareggia l'altezza delle tendine accanto */
	color: var(--inchiostro);
}

/* Il numero nel titolo dell'Archivio: più sottile del titolo, così si legge
   come un'indicazione e non come parte del nome. */
.titolo-conteggio {
	color: var(--tenue);
	font-size: .62em;
	white-space: nowrap;
}

.conteggio-compatto {
	display: none;
	margin: 0;
	font-size: .875rem;
	color: var(--tenue);
	white-space: nowrap;
}
.conteggio-compatto strong { color: var(--inchiostro); font-weight: 600; }

.azzera {
	background: none;
	border: 0;
	padding: .45rem 0;
	font: inherit;
	font-size: .875rem;
	color: var(--accento);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: .18em;
}
.azzera:hover { color: var(--accento-cupo); }
.azzera[hidden] { display: none; }

/* --- Filtri su schermi stretti ------------------------------------------- */

@media (max-width: 52rem) {

	.filtri-testata {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: .6rem 0;
		border-bottom: 1px solid var(--filo);
	}

	.filtri-apri {
		display: inline-flex;
		align-items: center;
		gap: .45rem;
		/* 44px di altezza: la misura minima perché un dito lo prenda al primo colpo. */
		min-height: 44px;
		padding: .5rem .9rem .5rem .7rem;
		font: inherit;
		font-size: .92rem;
		color: var(--inchiostro);
		background: #fff;
		border: 1px solid var(--filo);
		border-radius: var(--raggio);
		cursor: pointer;
	}
	.filtri-apri[aria-expanded="true"] {
		border-color: var(--accento);
		color: var(--accento);
	}
	#filtri-attivi:not(:empty)::before { content: " ("; }
	#filtri-attivi:not(:empty)::after  { content: ")"; }

	.conteggio-compatto { display: block; }

	/* Chiusa di partenza: la apre il pulsante qui sopra. */
	.filtri {
		display: none;
		padding: .9rem 0 1rem;
	}
	.filtri.aperti { display: grid; }

	/* Due colonne: cinque tendine stanno in tre righe invece che in cinque. */
	.filtri.aperti {
		grid-template-columns: 1fr 1fr;
		gap: .7rem;
		align-items: end;
	}
	.filtro select { max-width: none; width: 100%; }

	/* Azzera e conteggio prendono una riga intera in fondo al pannello. */
	.filtri .azzera,
	.filtri .conteggio { grid-column: 1 / -1; }
	.filtri .conteggio {
		flex-direction: row;
		align-items: baseline;
		gap: .5rem;
		margin-left: 0;
		text-align: left;
	}
	.filtri .conteggio-valore { font-size: 1rem; line-height: 1.4; }
	.filtri .azzera { justify-self: start; min-height: 44px; }
}

@media (max-width: 26rem) {
	/* Su telefoni piccoli una colonna sola: due tendine affiancate
	   taglierebbero i nomi lunghi tipo "Trentino-Alto Adige". */
	.filtri.aperti { grid-template-columns: 1fr; }
}

/* --- Elenco dei marker --------------------------------------------------- */

.elenco {
	list-style: none;
	margin: 0;
	padding: 0;
}

.voce {
	border-bottom: 1px solid var(--filo);
}

.voce > a {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 1rem;
	padding: .9rem 0;
	text-decoration: none;
	color: inherit;
}
.voce > a:hover .voce-titolo { color: var(--accento); }

/* `contain` e non `cover`: la fotografia si vede intera, mai tagliata.
   Il riquadro resta quadrato, quindi le righe restano allineate; il fondo
   riempie lo spazio che avanza sopra e sotto (o ai lati). */
.voce-foto {
	width: 5.5rem;
	height: 5.5rem;
	object-fit: contain;
	border-radius: var(--raggio);
	background: var(--carta-ombra);
}

.voce-corpo { min-width: 0; align-self: center; }

.voce-titolo {
	font-family: var(--serif);
	font-size: 1.08rem;
	line-height: 1.3;
	margin: 0 0 .2rem;
}

.voce-dati {
	font-size: .85rem;
	color: var(--tenue);
	display: flex;
	flex-wrap: wrap;
	gap: .15rem .5rem;
}
/* Puntini di separazione fra i dati, senza doverli scrivere nell'HTML. */
.voce-dati > span + span::before {
	content: "·";
	margin-right: .5rem;
	color: var(--filo);
}

.vuoto {
	padding: 3rem 0;
	text-align: center;
	color: var(--tenue);
}

@media (max-width: 26rem) {
	.voce > a { grid-template-columns: 4rem 1fr; gap: .8rem; }
	.voce-foto { width: 4rem; height: 4rem; }
	.voce-titolo { font-size: 1rem; }
}

/* --- Scheda del singolo marker ------------------------------------------- */

.scheda {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 2.5rem;
	padding-block: 2rem;
}

@media (max-width: 52rem) {
	.scheda { grid-template-columns: 1fr; gap: 1.5rem; }
}

.scheda-foto img {
	width: 100%;
	border-radius: var(--raggio);
	background: var(--carta-ombra);
}

.scheda-originale {
	display: inline-block;
	margin-top: .6rem;
	font-size: .85rem;
	color: var(--tenue);
}

.scheda h1 { margin-bottom: .4rem; }

.scheda-luogo {
	font-size: .95rem;
	color: var(--tenue);
	margin: 0 0 1.5rem;
}

.scheda-testo {
	font-family: var(--serif);
	font-size: 1.05rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

/* Elenco di coppie etichetta/valore. */
.dati {
	margin: 0 0 1.5rem;
	font-size: .9rem;
	border-top: 1px solid var(--filo);
}

.dati > div {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--filo);
}

@media (max-width: 26rem) {
	/* Etichetta sopra e valore sotto: su schermi stretti due colonne
	   lascerebbero al valore una striscia di pochi caratteri. */
	.dati > div {
		grid-template-columns: 1fr;
		gap: .1rem;
		padding: .5rem 0;
	}
}

.dati dt {
	color: var(--tenue);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding-top: .12rem;
}
.dati dd { margin: 0; }

.mini-mappa {
	height: 220px;
	border-radius: var(--raggio);
	border: 1px solid var(--filo);
}

.apri-maps { margin: .8rem 0 0; }
.apri-maps svg { flex-shrink: 0; }

.navigazione-schede {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--filo);
	font-size: .9rem;
}
.navigazione-schede a {
	text-decoration: none;
	display: flex;
	align-items: center;
	min-height: 44px;
}
.navigazione-schede a:hover { text-decoration: underline; }

@media (max-width: 40rem) {
	/* Tre link in fila su uno schermo stretto diventano illeggibili: si
	   incolonnano, e i titoli lunghi vanno a capo invece di sfondare. */
	.navigazione-schede {
		flex-direction: column;
		align-items: stretch;
		gap: .2rem;
		text-align: center;
	}
	.navigazione-schede a { justify-content: center; }
	.navigazione-schede span:empty { display: none; }
}

/* --- Mappa --------------------------------------------------------------- */

/* La mappa riempie tutto lo spazio sotto la barra e i filtri. */
.mappa-schermo {
	height: calc(100vh - var(--barra) - var(--altezza-filtri, 0px));
	min-height: 20rem;
}

/* Sui telefoni `100vh` comprende anche la parte nascosta dalla barra degli
   indirizzi: la mappa finirebbe sotto il bordo dello schermo. `dvh` misura
   quello che si vede davvero e si adegua quando la barra compare o sparisce.
   Sta in @supports perché i browser vecchi non lo conoscono e terrebbero la
   regola qui sopra. */
@supports (height: 100dvh) {
	.mappa-schermo {
		height: calc(100dvh - var(--barra) - var(--altezza-filtri, 0px));
	}
}

#mappa { width: 100%; height: 100%; background: var(--carta-ombra); }

/* Popup di Leaflet, rivestito per assomigliare al resto del sito. */
.leaflet-popup-content-wrapper {
	border-radius: var(--raggio);
	box-shadow: 0 6px 24px rgba(28, 26, 23, .18);
	padding: 0;
	overflow: hidden;
}
.leaflet-popup-content {
	margin: 0;
	width: 240px !important;
	font-family: var(--sans);
}
.leaflet-popup-tip { box-shadow: none; }

/* Anche qui la foto si vede intera. L'altezza massima evita che una foto molto
   verticale faccia diventare il popup più alto della mappa. */
.popup img {
	width: 100%;
	max-height: 260px;
	object-fit: contain;
	background: var(--carta-ombra);
}
.popup-corpo { padding: .7rem .85rem .85rem; }
.popup-titolo {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.3;
	margin: 0 0 .25rem;
}
.popup-luogo {
	font-size: .82rem;
	color: var(--tenue);
	margin: 0 0 .6rem;
}
/* Leaflet colora di azzurro tutti i link dentro la mappa
   (`.leaflet-container a { color: #0078A8 }`), e quella regola è più specifica
   della nostra `.bottone`: sul pulsante il testo usciva azzurro su terracotta.
   Ripetendo `.leaflet-container` qui la nostra vince. */
.leaflet-container .popup a.bottone {
	width: 100%;
	justify-content: center;
	color: #fff;
}
.leaflet-container .popup a.bottone:hover { color: #fff; }

/* Pallini dei gruppi di marker, negli stessi colori del sito. */
.marker-cluster {
	background: rgba(168, 68, 42, .22);
	border-radius: 50%;
}
.marker-cluster div {
	background: var(--accento);
	color: #fff;
	border-radius: 50%;
	font-family: var(--sans);
	font-size: .78rem;
	font-weight: 600;
	width: 30px; height: 30px;
	margin: 5px;
	display: flex; align-items: center; justify-content: center;
}
.marker-cluster span { line-height: 1; }

/* --- Bottoni ------------------------------------------------------------- */

.bottone {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .9rem;
	font-size: .88rem;
	border-radius: var(--raggio);
	border: 1px solid var(--accento);
	background: var(--accento);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
.bottone:hover { background: var(--accento-cupo); border-color: var(--accento-cupo); color: #fff; }

.bottone-tenue {
	background: transparent;
	color: var(--accento);
}
.bottone-tenue:hover { background: var(--accento-velo); color: var(--accento-cupo); }

/* --- Pagine di testo ----------------------------------------------------- */

.testo { padding-block: 2.5rem 1rem; }

.testo p, .testo li {
	font-family: var(--serif);
	font-size: 1.06rem;
	line-height: 1.75;
}

.testo ul { padding-left: 1.2rem; }
.testo li { margin-bottom: .4rem; }

.occhiello {
	font-family: var(--sans);
	font-size: .75rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--tenue);
	margin: 0 0 .5rem;
}

.riquadro {
	background: var(--accento-velo);
	border-left: 3px solid var(--accento);
	border-radius: 0 var(--raggio) var(--raggio) 0;
	padding: 1rem 1.2rem;
	margin: 1.5rem 0;
}
.riquadro p:last-child { margin-bottom: 0; }

/* --- Banner del consenso ------------------------------------------------- */

.consenso {
	position: fixed;
	inset: auto 1rem 1rem;
	z-index: 2000;
	max-width: 34rem;
	margin-inline: auto;
	background: #fff;
	border: 1px solid var(--filo);
	border-radius: var(--raggio);
	box-shadow: 0 8px 32px rgba(28, 26, 23, .16);
	padding: 1.1rem 1.25rem;
	font-size: .9rem;
}
.consenso[hidden] { display: none; }
.consenso p { margin: 0 0 .9rem; }
.consenso-bottoni { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- Preferenze dell'utente ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.barra, .filtri, .pie, .consenso, .mini-mappa { display: none; }
	body { background: #fff; }
}