/**
 * Stile del tema Dojo.
 *
 * Regola: qui non si scrivono valori di colore, carattere o spaziatura.
 * Tutto arriva dalle variabili --wp--preset--* generate da theme.json.
 */

/* -------------------------------------------------------------------------
 * 1. Fondamenta
 * ---------------------------------------------------------------------- */

:root {
	--dojo-raggio-card: 12px;
	--dojo-ombra-card: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
	--dojo-transizione: 200ms cubic-bezier(.22, .7, .28, 1);
}

body {
	-webkit-font-smoothing: antialiased;
}

/* I paragrafi sono più tenui dei titoli, a meno che non abbiano un colore
   scelto esplicitamente dall'editor.
   Il secondo selettore serve dentro l'editor a blocchi, dove non esiste un
   <main>: senza, chi scrive vedrebbe un colore e il sito ne mostrerebbe un
   altro. */
main p:not(.has-text-color),
.editor-styles-wrapper p:not(.has-text-color) {
	color: var(--wp--preset--color--muted);
}

/* Una citazione vuole più contrasto del testo corrente, non meno. */
main :is(blockquote, .wp-block-pullquote) p:not(.has-text-color),
.editor-styles-wrapper :is(blockquote, .wp-block-pullquote) p:not(.has-text-color) {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * 2. Ritmo delle sezioni
 *
 * Il ritmo del riferimento nasce dall'alternanza bianco / grigio chiarissimo,
 * non da un secondo colore. Le sezioni con sfondo alternato ricevono la classe
 * dojo-sezione--alt dai pattern.
 * ---------------------------------------------------------------------- */

.dojo-sezione {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
	/* Le fasce si toccano. WordPress mette uno stacco fra blocchi fratelli, ma
	   fra due bande colorate quel filo bianco si legge come un errore invece
	   che come respiro: il respiro è già tutto nel padding qui sopra. */
	margin-block-start: 0;
	margin-block-end: 0;
}

.dojo-sezione--alt {
	background-color: var(--wp--preset--color--surface-alt);
}

/* Nelle pagine interne il titolo sta già sopra: se la prima fascia tenesse
   tutto il suo respiro, fra titolo e contenuto si aprirebbe un vuoto. */
.wp-block-post-content > .dojo-sezione:first-child {
	padding-top: var(--wp--preset--spacing--50);
}

.dojo-sezione--scura {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
}

.dojo-sezione--scura :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--background);
}

/* Dentro una fascia con un fondo proprio il grigio tenue dei paragrafi darebbe
   un contrasto pessimo — sul rosso della fascia finale dava 1.40:1, cioè
   illeggibile. Lì il testo torna a ereditare il colore della sezione.
   .has-background è la classe che WordPress aggiunge da sé a qualunque blocco
   con un colore di fondo, quindi la regola vale anche per le fasce future. */
.dojo-sezione--scura p:not(.has-text-color),
.dojo-sezione.has-background p:not(.has-text-color) {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * 3. Occhiello
 *
 * La piccola etichetta rossa maiuscola sopra i titoli di sezione,
 * preceduta da un trattino.
 * ---------------------------------------------------------------------- */

.dojo-occhiello {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--20);
}

.dojo-occhiello::before {
	content: "— ";
}

/* Il rosso del logo su antracite dà 1.95:1: dentro le fasce scure e nel footer
   l'occhiello deve passare al bianco, altrimenti sparisce. */
.dojo-sezione--scura .dojo-occhiello,
.dojo-footer .dojo-occhiello {
	color: var(--wp--preset--color--background);
}

/* -------------------------------------------------------------------------
 * 4. Card
 * ---------------------------------------------------------------------- */

.dojo-card {
	/* Lo spostamento passa da una variabile perché la comparsa allo scroll
	   contribuisce alla stessa trasformazione: vedi la sezione 9. */
	transform: translateY( var(--dojo-hover-y, 0px) );
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--dojo-raggio-card);
	overflow: hidden;
	transition: transform var(--dojo-transizione), box-shadow var(--dojo-transizione);
}

/* Su touch il :hover resta appiccicato dopo il tocco, perché non c'è modo di
   uscirne: lo attiviamo solo dove esiste un puntatore vero. */
@media (hover: hover) {
	.dojo-card:hover {
		--dojo-hover-y: -4px;
		box-shadow: var(--dojo-ombra-card);
	}
}

/* La card ritaglia il contenuto, quindi un anello di focus disegnato verso
   l'esterno verrebbe tagliato proprio dove serve vederlo: qui lo portiamo
   all'interno. */
.dojo-card :is(a, .wp-element-button, .wp-block-button__link):focus-visible {
	outline-offset: -3px;
}

.dojo-card img {
	display: block;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.dojo-card,
	.dojo-card:hover {
		--dojo-hover-y: 0px;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 5. Bottoni
 *
 * Il raggio e i colori vengono da theme.json; qui solo il comportamento.
 * ---------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--dojo-transizione), transform var(--dojo-transizione);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Il rosso su antracite dà 3.10:1, appena sopra la soglia di 3:1 per gli
   elementi non testuali. Sulle fasce scure l'anello passa al bianco. */
.dojo-sezione--scura :is(a, .wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--background);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 6. Header
 * ---------------------------------------------------------------------- */

.dojo-header {
	position: sticky;
	/* Senza questo, quando l'header si aggancia i suoi primi 32px finiscono
	   sotto la barra di amministrazione, che sta più in alto nello stacking. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background-color: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.dojo-header .wp-block-navigation a {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	transition: color var(--dojo-transizione);
}

.dojo-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

.dojo-header .wp-block-site-logo img {
	border-radius: 50%;
}

/* I contenitori flex del blocco header hanno flex-wrap: nowrap, quindi la riga
   non va mai a capo: si schiaccia. Senza questo, sotto i 415px il testo del
   bottone si spezza una parola per riga in verticale. Il bottone esce dalla
   riga sui telefoni; l'invito all'azione resta nei contenuti di pagina. */
/* Con sei voci di menu l'header si schiaccia molto prima dei telefoni: il nome
   si tronca, le voci vanno a capo e il testo del bottone si spezza. Il bottone
   esce per primo, perché l'invito all'azione è ripetuto nei contenuti.
   La soglia è misurata, non scelta: con questo menu la riga si spezza fino a
   1060px e regge da lì in su. Sta a 1100px per lasciare margine a una voce
   aggiunta dall'editor o a un nome di sito più lungo, che sposterebbero il
   punto di rottura più in alto. */
@media (max-width: 1099px) {
	.dojo-header .wp-block-buttons {
		display: none;
	}
}

/* Sotto i 900px il menu passa alla forma a comparsa. WordPress lo farebbe da
   sé solo sotto i 600px, che con sei voci è troppo tardi: qui si anticipa la
   stessa logica del core, limitata al nostro header. */
@media (max-width: 899px) {
	.dojo-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.dojo-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

/* Rete di sicurezza sul nome: se è lungo si tronca invece di spingere
   l'header in altezza, che manderebbe fuori misura anche lo scroll-padding. */
.dojo-header .wp-block-site-title {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Dentro il canvas dell'editor un header agganciato si sovrapporrebbe alle
   barre degli strumenti dei blocchi mentre si scorre. */
.editor-styles-wrapper .dojo-header {
	position: static;
}

/* Menu a comparsa
 *
 * Sotto i 900px il menu diventa un pannello a schermo intero. Senza queste
 * regole resta quello del core: voci in dimensione da riga, ammassate in alto
 * su fondo nero. Qui diventa una schermata del sito a tutti gli effetti.
 *
 * L'allineamento a destra arriva da items-justified-right, che il blocco porta
 * con sé dalla riga desktop: nel pannello torna comodo, è il lato del pollice.
 * Non serve un media query: il tasto di apertura è nascosto sopra i 900px,
 * quindi is-menu-open sul desktop non esiste. */

.dojo-header .wp-block-navigation__responsive-container.is-menu-open {
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--40);
}

/* Il fondo va scritto a parte. Il core dipinge il pannello di bianco con un
   selettore da cinque classi (.wp-block-navigation:not(.has-background) ...):
   per cambiarne il colore bisogna eguagliarne il peso, e il solo .dojo-header
   non basta. Ricalcandone la forma, un fondo scelto nell'editor sul blocco
   Navigazione continua a vincere su entrambi. */
.dojo-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--secondary);
}

/* Il contenuto del dialogo sta dentro tre involucri: perché l'invito
   all'azione possa scendere in fondo, la colonna deve attraversarli tutti. */
.dojo-header .is-menu-open .wp-block-navigation__responsive-close,
.dojo-header .is-menu-open .wp-block-navigation__responsive-dialog,
.dojo-header .is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
}

/* Il tasto di chiusura del core è un bersaglio da 24px in un angolo: qui
   diventa un'area comoda, con l'icona che resta della stessa misura. */
.dojo-header .wp-block-navigation__responsive-container-close {
	align-self: flex-end;
	padding: var(--wp--preset--spacing--30);
	margin-inline-end: calc(var(--wp--preset--spacing--30) * -1);
	color: var(--wp--preset--color--background);
}

.dojo-header .wp-block-navigation__responsive-container-close svg {
	width: var(--wp--preset--spacing--40);
	height: var(--wp--preset--spacing--40);
}

.dojo-header .is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	padding-block-start: var(--wp--preset--spacing--40);
	/* Il vuoto del pannello si raccoglie in alto: voci e bottone restano in
	   basso, dove arriva il pollice. Quando le voci riempiono lo schermo il
	   margine automatico vale zero da sé e non taglia niente. */
	margin-block-start: auto;
}

/* Il filo fra le voci: sul fondo scuro il grigio della palette sparirebbe,
   quindi si diluisce il bianco invece di inventare un colore fuori tavolozza. */
.dojo-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--background) 18%, transparent);
}

.dojo-header .is-menu-open .wp-block-navigation-item:first-child {
	border-block-start: 0;
}

/* Il selettore passa dalla voce: il core azzera il padding dei link nel
   pannello con lo stesso peso del nostro, e a parità decide l'ordine dei
   fogli, che un plugin di ottimizzazione può rimescolare. Una classe in più
   toglie la gara di mezzo. */
.dojo-header .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content,
.dojo-header .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content:hover {
	display: block;
	width: 100%;
	padding-block: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.15;
	text-align: right;
}

/* La pagina corrente. Il rosso su antracite dà 1.6:1 e sparirebbe: il segno
   è un filo bianco al bordo, dal lato dove finiscono le voci. */
.dojo-header .is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	position: relative;
	padding-inline-end: var(--wp--preset--spacing--30);
}

.dojo-header .is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 3px;
	background-color: var(--wp--preset--color--background);
}

/* L'invito all'azione, inserito nel dialogo da dojo_menu_invito(). Il margine
   automatico lo porta in fondo quando c'è spazio e lo lascia in coda alle voci
   quando non ce n'è, invece di finire fuori schermo su un telefono piccolo. */
/* Il pannello esiste nel markup a ogni larghezza: sul desktop è la riga del
   menu, e lì il bottone comparirebbe una seconda volta sotto le voci. Si vede
   solo quando il pannello è davvero aperto. */
.dojo-menu-invito {
	display: none;
}

.dojo-header .is-menu-open .dojo-menu-invito {
	display: flex;
	width: 100%;
	padding-block-start: var(--wp--preset--spacing--50);
}

/* Il pieno rosso del bottone su antracite non si stacca dal fondo (1.6:1):
   sul pannello scuro i ruoli si invertono, il pieno diventa bianco e il rosso
   torna nel testo, dove il contrasto è pieno. */
.dojo-menu-invito .wp-block-button__link {
	flex-grow: 1;
	text-align: center;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
}

.dojo-menu-invito .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary);
}

/* Come sulle fasce scure, l'anello di fuoco passa al bianco. */
.dojo-header .is-menu-open :is(a, .wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--background);
}

/* Le voci entrano una dopo l'altra: è lo sfalsamento a far sembrare il
   pannello una schermata che si apre invece di un blocco che compare. */
@media (prefers-reduced-motion: no-preference) {
	.dojo-header .is-menu-open .wp-block-navigation-item,
	.dojo-header .is-menu-open .dojo-menu-invito {
		animation: dojo-menu-voce var(--dojo-transizione) both;
	}

	.dojo-header .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 40ms; }
	.dojo-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 80ms; }
	.dojo-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 120ms; }
	.dojo-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 160ms; }
	.dojo-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 200ms; }
	/* Il menu si modifica dall'editor: da qui in poi il ritardo si ferma,
	   così una voce aggiunta domani entra insieme alle ultime e non dopo
	   un'attesa che si allunga a ogni aggiunta. */
	.dojo-header .is-menu-open .wp-block-navigation-item:nth-child(n+6) { animation-delay: 240ms; }
	.dojo-header .is-menu-open .dojo-menu-invito { animation-delay: 280ms; }
}

@keyframes dojo-menu-voce {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* -------------------------------------------------------------------------
 * 7. Footer
 * ---------------------------------------------------------------------- */

/* Stessa ragione: il footer attacca all'ultima fascia. */
.dojo-footer {
	margin-block-start: 0;
}

.dojo-footer a {
	text-decoration: none;
}

.dojo-footer a:hover {
	text-decoration: underline;
}

/* I toni intermedi della fascia antracite non sono grigi scritti a mano: sono
   il bianco della palette mescolato con l'antracite del fondo.
   Mescolato e non smorzato con opacity: opacity agisce su tutto il sottoalbero
   e i figli non possono sottrarsi, quindi un link scritto qui dentro
   erediterebbe la trasparenza e risulterebbe più tenue del testo che dovrebbe
   enfatizzare. color invece è ereditabile e sovrascrivibile.
   Compositi risultanti: 7.32:1 per il testo, 6.03:1 per il copyright. */
.dojo-footer__testo {
	color: color-mix( in srgb, var(--wp--preset--color--background) 62%, var(--wp--preset--color--secondary) );
}

.dojo-footer__nota {
	color: color-mix( in srgb, var(--wp--preset--color--background) 55%, var(--wp--preset--color--secondary) );
}

/* Il filo è decorativo e non contiene nulla, quindi qui opacity non fa danni.
   Le dimensioni sono esplicite perché il separatore di WordPress disegna un
   bordo, non un blocco pieno. */
.dojo-footer__filo {
	border: 0;
	height: 1px;
	background-color: var(--wp--preset--color--background);
	opacity: 0.161;
}

/* -------------------------------------------------------------------------
 * 8. Preloader
 *
 * La visibilità è decisa dal CSS inline in <head>: qui c'è solo il disegno.
 * ---------------------------------------------------------------------- */

.dojo-preloader__segno {
	position: relative;
	width: 120px;
	height: 120px;
}

.dojo-preloader__anello,
.dojo-preloader__arco {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dojo-preloader__anello circle {
	fill: none;
	stroke: var(--wp--preset--color--hairline);
	stroke-width: 1.5;
}

.dojo-preloader__arco {
	animation: dojo-rotazione 1.1s linear infinite;
}

.dojo-preloader__arco circle {
	fill: none;
	stroke: var(--wp--preset--color--primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 75 290;
}

@keyframes dojo-rotazione {
	to { transform: rotate(360deg); }
}

.dojo-preloader__logo,
.dojo-preloader__iniziale {
	position: absolute;
	inset: 16px;
	width: calc(100% - 32px);
	height: calc(100% - 32px);
	border-radius: 50%;
	object-fit: cover;
}

.dojo-preloader__iniziale {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
}

/* -------------------------------------------------------------------------
 * 9. Comparsa allo scroll
 *
 * Lo stato nascosto vive solo sotto .js-reveal, classe che aggiunge il
 * JavaScript. Senza JS, niente di tutto questo si applica.
 * ---------------------------------------------------------------------- */

/* Lo spostamento è composto da due contributi invece di essere un valore
   unico: così l'eventuale sollevamento al passaggio del mouse di una card
   convive con la comparsa, invece di perdere per specificità e sparire per
   sempre una volta che l'elemento è comparso. */
.js-reveal .dojo-reveal {
	--dojo-reveal-y: 28px;
	--dojo-reveal-ritardo: 0ms;
	opacity: 0;
	transform: translateY( calc( var(--dojo-reveal-y) + var(--dojo-hover-y, 0px) ) );
	transition:
		opacity 700ms cubic-bezier(.22, .7, .28, 1) var(--dojo-reveal-ritardo),
		transform 700ms cubic-bezier(.22, .7, .28, 1) var(--dojo-reveal-ritardo);
	will-change: opacity, transform;
}

/* Gli elementi dentro una griglia si muovono meno, perché il movimento si
   somma a quello della sezione che li contiene. */
.js-reveal .dojo-reveal--figlio {
	--dojo-reveal-y: 16px;
}

.js-reveal .dojo-reveal.is-visibile {
	--dojo-reveal-y: 0px;
	opacity: 1;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal .dojo-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 10. Àncore sotto l'header agganciato
 *
 * Lo skip-link che WordPress inietta e qualunque àncora interna
 * atterrerebbero sotto l'header, cioè su contenuto coperto.
 * Il valore è l'altezza dell'header più un po' di respiro: se cambi il
 * padding o la dimensione del logo in parts/header.html, cambia anche qui.
 * ---------------------------------------------------------------------- */

html {
	scroll-padding-top: calc( var(--wp-admin--admin-bar--height, 0px) + 100px );
}

/* -------------------------------------------------------------------------
 * 11. Orario settimanale
 *
 * Su desktop una tabella. Su mobile la stessa tabella si riorganizza in
 * elenchi per giorno: sette colonne su un telefono sono illeggibili, ed è dal
 * telefono che si consultano gli orari di una palestra.
 * ---------------------------------------------------------------------- */

.dojo-orario__tabella {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.dojo-orario__tabella th,
.dojo-orario__tabella td {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--hairline);
	vertical-align: top;
}

.dojo-orario__tabella thead th {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.dojo-orario__fascia {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.dojo-orario__lezione {
	display: block;
	text-decoration: none;
	color: inherit;
}

.dojo-orario__lezione + .dojo-orario__lezione {
	margin-top: var(--wp--preset--spacing--20);
}

.dojo-orario__corso {
	display: block;
	font-weight: 600;
}

.dojo-orario__sala {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.dojo-orario__vuoto {
	color: var(--wp--preset--color--muted);
}

/* Visibile solo ai lettori di schermo. Il tema non può contare sulla classe
   screen-reader-text di WordPress: viene dal foglio di stile della libreria dei
   blocchi, che non è garantito su ogni pagina. */
.dojo-solo-lettori {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.dojo-orario__tabella,
	.dojo-orario__tabella thead,
	.dojo-orario__tabella tbody,
	.dojo-orario__tabella tr,
	.dojo-orario__tabella th,
	.dojo-orario__tabella td {
		display: block;
	}

	/* L'intestazione sparisce: il giorno viene ripetuto su ogni cella, dove
	   serve davvero. */
	.dojo-orario__tabella thead {
		display: none;
	}

	.dojo-orario__tabella tr {
		margin-bottom: var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--hairline);
		border-radius: var(--dojo-raggio-card);
		overflow: hidden;
	}

	.dojo-orario__tabella th,
	.dojo-orario__tabella td {
		border: 0;
	}

	.dojo-orario__fascia {
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--background);
	}

	.dojo-orario__tabella td:empty {
		display: none;
	}

	.dojo-orario__tabella td::before {
		content: attr(data-giorno);
		display: block;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		color: var(--wp--preset--color--muted);
		margin-bottom: var(--wp--preset--spacing--20);
	}
}

/* -------------------------------------------------------------------------
 * 12. Elenco con le spunte
 *
 * Il pallino di default non dice niente; una spunta rossa sì. Il segno è
 * decorativo, quindi arriva dal CSS e non dal contenuto.
 * ---------------------------------------------------------------------- */

.dojo-elenco-spunte {
	list-style: none;
	padding-left: 0;
}

.dojo-elenco-spunte li {
	position: relative;
	padding-left: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
}

.dojo-elenco-spunte li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .7em;
	height: .38em;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------
 * 13. Numeri
 * ---------------------------------------------------------------------- */

.dojo-numeri__etichetta {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
 * 14. Ritratti degli istruttori
 *
 * La figura dell'immagine in evidenza è a piena larghezza mentre l'immagine
 * dentro ha una dimensione fissa: senza questo il ritratto resta a sinistra
 * invece che sopra il nome.
 * ---------------------------------------------------------------------- */

.dojo-ritratto .wp-block-post-featured-image {
	text-align: center;
}

.dojo-ritratto .wp-block-post-featured-image img {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * 15. Card cliccabili per intero
 *
 * WordPress usa il titolo del contenuto come alt dell'immagine in evidenza:
 * collegare anche la foto produceva due link consecutivi alla stessa pagina
 * con lo stesso nome, due fermate di tabulazione e un doppio annuncio.
 * Il link lo porta il titolo, ed è esteso su tutta la card — così cliccare la
 * foto funziona lo stesso, ma il link è uno solo.
 * ---------------------------------------------------------------------- */

.dojo-card,
.dojo-ritratto {
	position: relative;
}

.dojo-card .wp-block-post-title a::after,
.dojo-ritratto .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Il contorno di messa a fuoco va sulla card, non sul solo titolo: è la card
   ad essere il bersaglio. */
.dojo-card .wp-block-post-title a:focus-visible,
.dojo-ritratto .wp-block-post-title a:focus-visible {
	outline: none;
}

.dojo-card:has(.wp-block-post-title a:focus-visible),
.dojo-ritratto:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * 16. Mappa
 *
 * La mappa viene da OpenStreetMap, che non imposta cookie e non profila chi
 * visita: può quindi caricarsi da sé, senza il passaggio del consenso che
 * servirebbe con Google. loading=lazy la fa arrivare solo quando entra in
 * vista, così chi non scorre fin qui non contatta nessuno.
 *
 * La didascalia porta solo i collegamenti: l'indirizzo è già scritto accanto
 * alla mappa, e ripeterlo sotto sarebbe la stessa informazione due volte.
 * ---------------------------------------------------------------------- */

.dojo-mappa {
	margin: 0;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--dojo-raggio-card);
	overflow: hidden;
	box-shadow: var(--dojo-ombra-card);
}

.dojo-mappa__telaio {
	display: block;
	width: 100%;
	height: 460px;
	border: 0;
	/* Le mappe di OSM sono chiarissime: un filo di desaturazione le fa stare
	   nella tavolozza del sito senza rendere illeggibili le vie. */
	filter: saturate(.85);
}

.dojo-mappa__didascalia {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
}

.dojo-mappa__didascalia a {
	color: var(--wp--preset--color--background);
	text-decoration: none;
	font-weight: 600;
}

.dojo-mappa__didascalia a:hover {
	text-decoration: underline;
}

.dojo-mappa__didascalia a::before {
	content: "→ ";
	color: var(--wp--preset--color--background);
	opacity: .55;
}

@media (max-width: 781px) {
	.dojo-mappa__telaio {
		height: 320px;
	}
}