/**
 * Kalendra — il cartellone.
 *
 * Il carattere e il colore del testo arrivano dal tema: qui non si dichiara
 * nessuna famiglia tipografica, così la pagina non stona con il resto del sito.
 * Quello che il plugin governa sono corpi, pesi, interlinee, spaziature,
 * allineamenti e il colore della barra.
 *
 * ## Come cambiare qualcosa dal tema
 *
 * Tutto passa da variabili: per cambiare basta ridichiararle in «Aspetto →
 * Personalizza → CSS aggiuntivo», senza rincorrere la specificità dei selettori
 * e senza `!important`.
 *
 *     .kalendra { --kalendra-titolo-corpo: 1.25rem; }
 *
 * Per ingrandire o rimpicciolire **tutto insieme**, mantenendo le proporzioni,
 * c'è una sola manopola:
 *
 *     .kalendra { --kalendra-scala: 1.15; }   ← 15% più grande
 *
 * ## Perché i selettori sono scritti così
 *
 * Ogni regola nomina l'elemento oltre alla classe — `h3.kalendra-evento__titolo`
 * e non solo `.kalendra-evento__titolo` — e vive sotto `.kalendra`. Non è
 * pedanteria: molti temi commerciali dichiarano i titoli con selettori del tipo
 * `.column_child h3`, che pesano più di una classe sola e vincerebbero sui corpi
 * dichiarati qui. Il risultato sarebbe un cartellone in cui cambiare
 * `--kalendra-titolo-corpo` non produce alcun effetto visibile, che è il modo
 * peggiore di non funzionare. Con classe + elemento il plugin vince sul tema, e
 * le variabili tornano a essere la via per personalizzare.
 *
 * Il fondo è trasparente di proposito. Il trattamento approvato è testo scuro
 * su bianco, ma il bianco è quello della pagina: dichiararlo qui significherebbe
 * incollare un rettangolo bianco dentro un tema che un domani potrebbe avere un
 * fondo diverso.
 */

.kalendra {
	/* La manopola generale: moltiplica tutti i corpi e le misure che devono
	   seguirli. Le proporzioni restano quelle disegnate. */
	--kalendra-scala: 1;

	/* Ritmo verticale. Non passa dalla scala: è respiro, e si accorda con il
	   ritmo della pagina attorno più che con il corpo del testo. */
	--kalendra-mese-distanza: 2.5rem;
	--kalendra-riga-spazio: 0.9rem;
	--kalendra-colonne-spazio: 0.9rem;

	/* Corpi. */
	--kalendra-mese-corpo: calc(1rem * var(--kalendra-scala));
	--kalendra-giorno-corpo: calc(1.75rem * var(--kalendra-scala));
	--kalendra-settimana-corpo: calc(0.75rem * var(--kalendra-scala));
	--kalendra-titolo-corpo: calc(1.125rem * var(--kalendra-scala));
	--kalendra-descrizione-corpo: calc(0.9375rem * var(--kalendra-scala));

	/* La riga di servizio — orario o periodo, museo, luogo — nasce identica alla
	   descrizione: stesso corpo, stesso peso, stessa interlinea. Sono due
	   variabili distinte che puntano alla stessa cosa, non la stessa variabile
	   usata due volte: per staccarle basta ridichiararne una, senza dover prima
	   districare regole condivise. */
	--kalendra-servizio-corpo: var(--kalendra-descrizione-corpo);

	/* I pulsanti del filtro: senza una misura dichiarata prendono quella del
	   tema, che su Uncode è più grande del testo del cartellone e li fa pesare
	   più delle date che dovrebbero aiutare a trovare. */
	--kalendra-bottone-corpo: calc(0.8125rem * var(--kalendra-scala));

	/* La distanza dall'utente: si stacca dal resto della riga di servizio senza
	   gridare. Il colore pieno invece di quello attenuato fa quasi tutto il
	   lavoro; il peso aggiunge quel poco che serve perché l'occhio la trovi
	   scorrendo l'elenco. */
	--kalendra-distanza-peso: 600;
	--kalendra-distanza-colore: var(--kalendra-testo);

	/* Pesi. Il peso del titolo è la prima cosa da accordare con il tema: un tema
	   dalle intestazioni sottili chiede un grassetto meno pieno. */
	--kalendra-mese-peso: 600;
	--kalendra-giorno-peso: 700;
	--kalendra-titolo-peso: 700;
	--kalendra-tipologia-peso: 600;
	--kalendra-settimana-peso: 400;
	--kalendra-descrizione-peso: 400;
	--kalendra-servizio-peso: var(--kalendra-descrizione-peso);

	/* Il periodo di un'installazione è l'unica voce della riga di servizio con
	   un peso proprio: non è un orario, è una durata. */
	--kalendra-periodo-peso: 600;

	/* Interlinee. Un titolo su due righe con l'interlinea del corpo del testo si
	   legge male: qui è più stretta, ed è regolabile. */
	--kalendra-titolo-interlinea: 1.2;
	--kalendra-descrizione-interlinea: 1.5;
	--kalendra-servizio-interlinea: var(--kalendra-descrizione-interlinea);

	/* La tipologia, che sta sopra il titolo. */
	--kalendra-tipologia-corpo: calc(0.75rem * var(--kalendra-scala));
	--kalendra-tipologia-spaziatura: 0.1em;

	/* La barra colorata. Cresce con la riga: un titolo su due righe non deve
	   lasciare la barra sospesa a metà. */
	--kalendra-barra-larghezza: 5px;
	--kalendra-barra-altezza: calc(46px * var(--kalendra-scala));
	--kalendra-barra-raggio: 2px;

	/* Colori derivati dal testo del tema, così funzionano anche su un fondo
	   che non è bianco. */
	--kalendra-testo: inherit;
	--kalendra-testo-tenue: rgba(0, 0, 0, 0.62);
	--kalendra-separatore: rgba(0, 0, 0, 0.1);

	/* Il colore della riga di servizio, separato dagli altri: è l'unica leva per
	   dire «orario e luogo sono informazione di secondo piano» senza toccarne il
	   corpo. Per portarla in primo piano come la descrizione:
	   --kalendra-servizio-colore: var(--kalendra-testo); */
	--kalendra-servizio-colore: var(--kalendra-testo-tenue);

	/* Il testo scritto sopra la pastiglia colorata, nella variante a pastiglia.
	   Scuro: sui quattro colori della palette il nero passa largamente, il
	   bianco no. */
	--kalendra-pastiglia-testo: #1d2327;

	/* La colonna del giorno. */
	--kalendra-giorno-larghezza: calc(3rem * var(--kalendra-scala));
}

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

/* --- Azzeramento mirato --------------------------------------------------- */

/* I temi decorano titoli e paragrafi: margini generosi, interlinee larghe,
   maiuscoletti, allineamenti centrati, a volte una spaziatura fra le lettere.
   Dentro il cartellone quelle decisioni non sono le benvenute, perché qui la
   gerarchia la disegna il plugin. Si azzera solo ciò che riguarda la forma del
   blocco: carattere, colore e stile del testo continuano ad arrivare dal tema,
   che è il punto di tutta la strategia tipografica. */
.kalendra h2[class^="kalendra"],
.kalendra h3[class^="kalendra"],
.kalendra p[class^="kalendra"] {
	margin: 0;
	padding: 0;
	text-align: start;
	text-transform: none;
	letter-spacing: normal;
	font-style: normal;
}

/* --- Mesi ---------------------------------------------------------------- */

.kalendra .kalendra__mese + .kalendra__mese {
	margin-top: var(--kalendra-mese-distanza);
}

.kalendra h2.kalendra__mese-titolo {
	margin-bottom: 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--kalendra-separatore);
	font-size: var(--kalendra-mese-corpo);
	font-weight: var(--kalendra-mese-peso);
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kalendra ul.kalendra__eventi {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Riga ---------------------------------------------------------------- */

.kalendra li.kalendra-evento {
	display: grid;
	grid-template-columns: var(--kalendra-barra-larghezza) var(--kalendra-giorno-larghezza) 1fr;
	gap: 0 var(--kalendra-colonne-spazio);
	align-items: start;
	margin: 0;
	padding: var(--kalendra-riga-spazio) 0;
	border-bottom: 1px solid var(--kalendra-separatore);
	list-style: none;
}

.kalendra li.kalendra-evento:last-child {
	border-bottom: 0;
}

/* La barra è l'unico elemento colorato. Con `stretch` accompagna l'altezza
   della riga; l'altezza minima le garantisce l'area che serve a farsi vedere
   anche quando la riga è corta — un quadratino da 11 px, con questi colori,
   sparirebbe. */
.kalendra .kalendra-evento__barra {
	align-self: stretch;
	min-height: var(--kalendra-barra-altezza);
	border-radius: var(--kalendra-barra-raggio);
	background: var(--kalendra-colore-riga, currentColor);
}

.kalendra p.kalendra-evento__giorno {
	text-align: center;
}

.kalendra .kalendra-evento__data {
	display: block;
	line-height: 1.1;
}

.kalendra span.kalendra-evento__numero {
	display: block;
	font-size: var(--kalendra-giorno-corpo);
	font-weight: var(--kalendra-giorno-peso);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.kalendra span.kalendra-evento__settimana {
	display: block;
	margin-top: 0.15rem;
	color: var(--kalendra-testo-tenue);
	font-size: var(--kalendra-settimana-corpo);
	font-weight: var(--kalendra-settimana-peso);
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kalendra .kalendra-evento__corpo {
	min-width: 0;
}

/* La tipologia sta sopra il titolo e non annegata nel grigio della riga di
   servizio: è la prima cosa che il cliente ha chiesto di rendere evidente, e in
   una lista dove le voci si somigliano è anche l'informazione che orienta.
   Maiuscoletto spaziato, scuro come il titolo — non colorato, perché a questo
   corpo nessuno dei quattro colori regge il contrasto su bianco. Il colore
   resta sulla barra, dove ha l'area per farsi vedere. */
.kalendra p.kalendra-evento__tipologia {
	margin-bottom: 0.15rem;
	font-size: var(--kalendra-tipologia-corpo);
	font-weight: var(--kalendra-tipologia-peso);
	letter-spacing: var(--kalendra-tipologia-spaziatura);
	line-height: 1.3;
	text-transform: uppercase;
}

.kalendra h3.kalendra-evento__titolo {
	font-size: var(--kalendra-titolo-corpo);
	font-weight: var(--kalendra-titolo-peso);
	line-height: var(--kalendra-titolo-interlinea);
}

/* La descrizione sta sotto il titolo: è testo da leggere, non un dato da
   consultare. Corpo appena inferiore al titolo e colore pieno — attenuarla la
   farebbe sembrare una didascalia. La misura di riga è limitata perché una
   frase lunga quanto tutta la pagina si legge male. */
.kalendra p.kalendra-evento__descrizione {
	margin-top: 0.3rem;
	max-width: 46em;
	color: var(--kalendra-testo);
	font-size: var(--kalendra-descrizione-corpo);
	font-weight: var(--kalendra-descrizione-peso);
	line-height: var(--kalendra-descrizione-interlinea);
}

/* Orario o periodo, museo, luogo. Il peso è dichiarato e non ereditato: molti
   temi impostano il corpo del testo su un peso leggero, e a questo corpo un 300
   si sfalda — soprattutto su un grigio. La distinzione dalla descrizione la fa
   il colore, non la sottigliezza del tratto. */
.kalendra p.kalendra-evento__servizio {
	margin-top: 0.25rem;
	color: var(--kalendra-servizio-colore);
	font-size: var(--kalendra-servizio-corpo);
	font-weight: var(--kalendra-servizio-peso);
	line-height: var(--kalendra-servizio-interlinea);
}

/* Il periodo di un'installazione non è un orario: dice per quanto tempo si può
   andare, non a che ora bisogna esserci. Vale un po' più di peso del resto
   della riga. */
.kalendra .kalendra-evento__voce--periodo {
	color: var(--kalendra-testo);
	font-weight: var(--kalendra-periodo-peso);
}

.kalendra p.kalendra-evento__link {
	margin-top: 0.4rem;
	font-size: var(--kalendra-servizio-corpo);
	font-weight: var(--kalendra-servizio-peso);
	line-height: var(--kalendra-servizio-interlinea);
}

/* Il collegamento deve sembrare un collegamento. Il colore lo decide il tema —
   non lo tocchiamo — ma la sottolineatura sì: in una riga fatta di testo grigio
   piccolo, un link senza segni si legge come un'altra didascalia, e nessuno ci
   clicca. */
.kalendra .kalendra-evento__link a {
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.18em;
}

.kalendra .kalendra-evento__link a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- Legenda ------------------------------------------------------------- */

.kalendra .kalendra__legenda {
	margin-top: var(--kalendra-mese-distanza);
	padding-top: 0.9rem;
	border-top: 1px solid var(--kalendra-separatore);
}

/*
 * La legenda in testa. Lo spazio va messo **sotto**, perché sopra ce l'ha già il
 * blocco che la precede, e perché il primo mese non porta margine superiore: lo
 * hanno solo i mesi dal secondo in poi. Senza questa regola l'intestazione del
 * mese risulta incollata alle voci della legenda.
 */
.kalendra .kalendra__legenda--testa {
	margin-top: 0;
	margin-bottom: var(--kalendra-mese-distanza);
}

.kalendra h2.kalendra__legenda-titolo {
	margin-bottom: 0.5rem;
	font-size: var(--kalendra-settimana-corpo);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kalendra ul.kalendra__legenda-voci {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--kalendra-servizio-corpo);
}

.kalendra li.kalendra__legenda-voce {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	list-style: none;
}

.kalendra .kalendra__legenda-colore {
	display: inline-block;
	width: var(--kalendra-barra-larghezza);
	height: 1.1em;
	border-radius: var(--kalendra-barra-raggio);
	background: var(--kalendra-colore-riga, currentColor);
}

/* --- Cartellone vuoto ---------------------------------------------------- */

.kalendra--vuoto p {
	margin: 0;
	color: var(--kalendra-testo-tenue);
}

/* --- Testo per i soli lettori di schermo ---------------------------------- */

/* Molti temi la dichiarano già; ridichiararla qui evita che una frase di
   servizio compaia a schermo su un tema che non lo fa. */
.kalendra .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Schermi stretti ------------------------------------------------------ */

@media (max-width: 480px) {
	.kalendra {
		--kalendra-giorno-corpo: calc(1.5rem * var(--kalendra-scala));
		--kalendra-titolo-corpo: calc(1.0625rem * var(--kalendra-scala));
		--kalendra-descrizione-corpo: calc(0.9rem * var(--kalendra-scala));
		--kalendra-giorno-larghezza: calc(2.5rem * var(--kalendra-scala));
		--kalendra-colonne-spazio: 0.7rem;
	}
}

/* --- Stampa --------------------------------------------------------------- */

@media print {
	.kalendra li.kalendra-evento {
		break-inside: avoid;
	}

	/* I fondi colorati spesso non vengono stampati: la barra diventa un bordo,
	   che sopravvive. */
	.kalendra .kalendra-evento__barra {
		border-left: var(--kalendra-barra-larghezza) solid var(--kalendra-colore-riga, #000);
		background: none;
	}
}

/* --- Variante: la tipologia come pastiglia colorata ----------------------- */

/*
 * Da attivare aggiungendo la classe al contenitore, dal tema:
 *
 *     <div class="kalendra kalendra--pastiglia">
 *
 * oppure, senza toccare il markup, incollando questa regola nel CSS aggiuntivo:
 *
 *     .kalendra p.kalendra-evento__tipologia {
 *         display: inline-block;
 *         padding: 0.2em 0.55em;
 *         border-radius: 3px;
 *         background: var(--kalendra-colore-riga);
 *         color: var(--kalendra-pastiglia-testo);
 *     }
 *
 * È l'alternativa al maiuscoletto scuro: più squillante, e porta il colore
 * dentro la colonna del testo invece di lasciarlo tutto sul bordo. Il testo
 * resta scuro perché sui quattro colori scelti il bianco non ha contrasto
 * sufficiente, mentre il quasi-nero lo supera largamente.
 *
 * Con la pastiglia attiva la barra può ridursi o sparire:
 *
 *     .kalendra { --kalendra-barra-larghezza: 0; }
 */
.kalendra--pastiglia p.kalendra-evento__tipologia {
	display: inline-block;
	margin-bottom: 0.3rem;
	padding: 0.2em 0.55em;
	border-radius: 3px;
	background: var(--kalendra-colore-riga, transparent);
	color: var(--kalendra-pastiglia-testo);
	letter-spacing: 0.06em;
}

/* --- Il filtro «vicino a me» ---------------------------------------------- */

/*
 * Il modulo arriva in pagina già nascosto e lo mostra il JavaScript: senza
 * script resterebbe un campo che non può funzionare, e un campo che non
 * funziona è peggio di un campo assente.
 *
 * Lo stile è volutamente sobrio e poco opinato — un tema ha già i suoi input e
 * i suoi bottoni, e sovrascriverli produrrebbe un modulo che sembra arrivato da
 * un altro sito. Qui si definisce solo la disposizione.
 */
.kalendra .kalendra-vicinanze {
	margin: 0 0 var(--kalendra-mese-distanza);
	padding: 0;
	border: 0;
}

/*
 * `hidden` è un attributo, e come tale perde contro qualsiasi regola del tema
 * che dichiari un `display`. Su un pulsante — che i temi rendono
 * `inline-block` — questo significava vedere «Mostra tutte» fin dall'inizio,
 * quando ancora non c'è niente da ripristinare. La regola vale per tutto ciò che
 * sta dentro il cartellone: è il modo in cui il filtro nasconde le righe, i mesi
 * vuoti e sé stesso.
 */
.kalendra [hidden] {
	display: none !important;
}

.kalendra .kalendra-vicinanze__campi {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--kalendra-colonne-spazio);
}

.kalendra p.kalendra-vicinanze__campo,
.kalendra p.kalendra-vicinanze__azioni {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
}

.kalendra p.kalendra-vicinanze__azioni {
	flex-direction: row;
	gap: 0.5rem;
}

/*
 * I due pulsanti sono entrambi `submit` proprio perché il tema li vesta allo
 * stesso modo: qui si aggiunge solo ciò che serve a tenerli appaiati anche
 * quando il tema non dice niente.
 */
.kalendra .kalendra-vicinanze__bottone {
	font-family: inherit;
	font-size: var(--kalendra-bottone-corpo);
	line-height: 1.2;
	cursor: pointer;
}

.kalendra .kalendra-vicinanze label {
	font-size: var(--kalendra-settimana-corpo);
	font-weight: var(--kalendra-tipologia-peso);
	letter-spacing: var(--kalendra-tipologia-spaziatura);
	text-transform: uppercase;
	color: var(--kalendra-testo-tenue);
}

.kalendra .kalendra-vicinanze input[type="text"] {
	/* Cinque cifre: un campo largo quanto il resto inviterebbe a scriverci un
	   indirizzo, che non è quello che sa fare. */
	inline-size: 7em;
}

/*
 * L'esito non è decorazione: è l'unico segnale, per chi naviga con uno screen
 * reader, che premere il pulsante ha prodotto qualcosa.
 */
.kalendra p.kalendra-vicinanze__esito {
	margin: 0.6rem 0 0;
	font-size: var(--kalendra-servizio-corpo);
	line-height: var(--kalendra-servizio-interlinea);
	color: var(--kalendra-testo-tenue);
}

/*
 * Vuota non deve occupare spazio, ma nemmeno sparire: una regione `aria-live`
 * tolta dal flusso con `display: none` e rimessa insieme al testo, in certe
 * combinazioni di browser e lettore di schermo, non viene annunciata. Si toglie
 * il margine, non l'elemento.
 */
.kalendra p.kalendra-vicinanze__esito:empty {
	margin: 0;
}

.kalendra p.kalendra-vicinanze__esito[data-stato="errore"],
.kalendra p.kalendra-vicinanze__esito[data-stato="vuoto"] {
	color: var(--kalendra-testo);
	font-weight: 600;
}

/*
 * Il contorno di messa a fuoco. I temi in genere ne hanno uno, ma non tutti, e
 * un modulo che si può usare solo col mouse è un modulo che esclude qualcuno.
 * `:focus-visible` compare per chi naviga da tastiera e resta invisibile a chi
 * clicca, quindi non cambia niente di come il cartellone appare.
 */
.kalendra .kalendra-vicinanze input:focus-visible,
.kalendra .kalendra-vicinanze select:focus-visible,
.kalendra .kalendra-vicinanze__bottone:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* La distanza si aggiunge alla riga di servizio: ne eredita corpo e
   interlinea, e se ne distacca per colore e peso. Il corsivo è stato tolto —
   corsivo **e** peso insieme sono due segnali per una sola informazione. */
.kalendra .kalendra-evento__distanza {
	color: var(--kalendra-distanza-colore);
	font-weight: var(--kalendra-distanza-peso);
}