/*
Theme Name: Atalis 2026
Theme URI: https://atalis.org
Description: Tema figlio di Twenty Twenty-Five per Atalis. Struttura, design e template scritti in codice; i contenuti restano modificabili dal pannello WordPress.
Author: Alekos Zappalà
Version: 1.2.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
Template: twentytwentyfive
Text Domain: atalis-2026
*/

/* ---------------------------------------------------------------
   Il design vive quasi interamente in theme.json.
   Qui restano solo le regole che theme.json non può esprimere.

   Le larghezze del sito sono due, e una sola regola decide quale usare:

   840px  — tutto ciò che si legge, senza eccezioni: titoli, paragrafi,
            schede delle attività, schede degli eventi, moduli. È la
            colonna del sito, e non cambia mai da una pagina all'altra.
   1320px — solo ciò che si guarda: il calendario settimanale e le
            immagini in evidenza. Sono figure, non testo.

   Fuori da queste due c'è la fascia a tutta pagina, usata dalle sezioni
   a colore pieno (apertura, prova gratuita, social) che fanno da sfondo.
   --------------------------------------------------------------- */

/* Immagini: mai deformate, mai fuori dal contenitore. */
.atalis-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Banner con testo sopra l'immagine: garantisce la leggibilità
   anche su foto chiare, senza dover scurire il file originale. */
.atalis-banner .wp-block-cover__background {
	background: linear-gradient(
		90deg,
		rgba(30, 27, 19, 0.75) 0%,
		rgba(30, 27, 19, 0.45) 55%,
		rgba(30, 27, 19, 0.1) 100%
	);
}

/* Schede (classi, eventi, attività) */
.atalis-card {
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.atalis-card:hover,
.atalis-card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(30, 27, 19, 0.1);
}

/* Riga di orario: etichetta a sinistra, dettaglio a destra */
.atalis-orario {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--wp--preset--color--bordo);
}

.atalis-orario:last-child {
	border-bottom: 0;
}

.atalis-orario__giorno {
	font-weight: 600;
	min-width: 8rem;
}

.atalis-orario__ora {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Etichetta piccola (data evento, livello classe) */
.atalis-tag {
	display: inline-block;
	font-size: var(--wp--preset--font-size--piccolo);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--crema-scuro);
	color: var(--wp--preset--color--verde);
}

/* Evento passato: visibile ma chiaramente archiviato */
.atalis-evento--passato {
	opacity: 0.6;
}

/* Il menu resta leggibile anche su schermi piccoli */
@media (max-width: 600px) {
	.atalis-orario__giorno {
		min-width: 100%;
	}
}

/* Accessibilità: mai rimuovere il focus, solo renderlo coerente */
:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--arancione);
	outline-offset: 2px;
}

/* Rispetta chi ha chiesto meno animazioni */
@media (prefers-reduced-motion: reduce) {
	.atalis-card {
		transition: none;
	}
	.atalis-card:hover {
		transform: none;
	}
}

/* Video verticali, quelli girati per i social.
   Senza un limite di larghezza un 9:16 su desktop diventa alto quanto
   lo schermo e spinge fuori tutto il resto: qui si ferma a 380px e
   sta al centro, come un telefono appoggiato dentro la pagina.
   Da usare aggiungendo la classe CSS "atalis-verticale" al blocco. */
.atalis-verticale {
	max-width: 380px;
	margin-inline: auto;
}

/* File video caricati sul sito. */
.atalis-verticale video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	background: var(--wp--preset--color--inchiostro);
}

/* Video incorporati da YouTube o Vimeo.
   WordPress calcola le proporzioni dai dati che gli manda il servizio, e per
   gli Shorts arrivano quasi sempre in 16:9: il player resterebbe orizzontale
   con due bande nere ai lati. Qui gliele riscriviamo a mano. */
.atalis-verticale .wp-block-embed__wrapper {
	padding-top: 0;
}

.atalis-verticale .wp-block-embed__wrapper::before {
	content: none;
}

.atalis-verticale iframe {
	position: static;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	display: block;
	border: 0;
	border-radius: 6px;
}

/* Pulsanti social.
   Sono pulsanti normali del tema — stessa altezza, stessi angoli, stesso
   peso del testo di tutti gli altri: cambia solo il colore, scelto dentro
   la nostra tavolozza invece di prendere i colori squillanti dei due
   servizi, che accanto al verde e all'arancione stonavano.
   L'icona è disegnata dal foglio di stile, quindi non c'è markup in più. */
.atalis-social .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.55em;
	vertical-align: -0.18em;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.atalis-social--instagram .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.13 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.66 1.34 1.08 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.13-1.38.66-.67 1.08-1.34 1.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.13C21.32 1.35 20.65.93 19.86.63 19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0z'/%3E%3Cpath d='M12 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zm0 10.16a4 4 0 110-8 4 4 0 010 8z'/%3E%3Ccircle cx='18.41' cy='5.59' r='1.44'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.13 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.66 1.34 1.08 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.13-1.38.66-.67 1.08-1.34 1.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.13C21.32 1.35 20.65.93 19.86.63 19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0z'/%3E%3Cpath d='M12 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zm0 10.16a4 4 0 110-8 4 4 0 010 8z'/%3E%3Ccircle cx='18.41' cy='5.59' r='1.44'/%3E%3C/svg%3E");
}

.atalis-social--telegram .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.94 4.3 18.9 19.1c-.23 1.02-.84 1.27-1.7.79l-4.7-3.47-2.27 2.19c-.25.25-.46.46-.95.46l.34-4.8L18.4 6.8c.38-.34-.08-.53-.6-.19L6.99 13.5l-4.7-1.47c-1.02-.32-1.04-1.02.21-1.51L20.6 3.35c.85-.32 1.6.19 1.34.95z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.94 4.3 18.9 19.1c-.23 1.02-.84 1.27-1.7.79l-4.7-3.47-2.27 2.19c-.25.25-.46.46-.95.46l.34-4.8L18.4 6.8c.38-.34-.08-.53-.6-.19L6.99 13.5l-4.7-1.47c-1.02-.32-1.04-1.02.21-1.51L20.6 3.35c.85-.32 1.6.19 1.34.95z'/%3E%3C/svg%3E");
}

/* Il colore di sfondo è scritto sul singolo pulsante, quindi vince su
   qualsiasi regola del tema: per il passaggio del mouse schiariamo. */
.atalis-social .wp-block-button__link:hover,
.atalis-social .wp-block-button__link:focus-visible {
	filter: brightness(1.15);
}