/*
 * Base del sito: tipografia, link, focus, utilità di accessibilità.
 * Mobile first: le regole senza media query valgono per il telefono.
 */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* La barra fissa non deve coprire l'elemento che riceve il focus (WCAG 2.4.11) */
	scroll-padding-top: var(--on-bar-h);
}

/*
 * Elementor mette html { scroll-behavior: smooth } (custom-frontend.css): con i pin di
 * ScrollTrigger un refresh durante uno scorrimento morbido misura posizioni sbagliate.
 * Come nel prototipo (concept.css) lo scorrimento resta istantaneo; :root batte "html".
 */
:root {
	scroll-behavior: auto;
}

body {
	margin: 0;
	background: var(--on-black);
	color: var(--on-white);
	font-family: var(--on-font-text);
	font-size: var(--on-fs-body);
	line-height: var(--on-lh-body);
	overflow-x: clip;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

/* Titoli: Tusker sempre in maiuscolo, interlinea mai sotto 1 (regola del cliente) */
.on-display,
.on-cond {
	margin: 0;
	text-transform: uppercase;
	font-weight: 700;
}

.on-display {
	font-family: var(--on-font-display);
	letter-spacing: var(--on-ls-display);
	line-height: var(--on-lh-display);
}

.on-cond {
	font-family: var(--on-font-cond);
	letter-spacing: .02em;
	line-height: var(--on-lh-title);
}

.on-label {
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-label);
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	text-transform: uppercase;
}

.on-tv {
	font-family: var(--on-font-tv);
	font-size: var(--on-fs-tv);
	line-height: 1.1;
}

.on-marker {
	font-family: var(--on-font-marker);
	font-size: var(--on-fs-marker);
}

.on-prose {
	max-width: var(--on-col);
	font-size: var(--on-fs-lede);
	line-height: var(--on-lh-prose);
}

.on-container {
	width: 100%;
	max-width: calc(var(--on-container) + 2 * var(--on-gutter));
	margin-inline: auto;
	padding-inline: var(--on-gutter);
}

/* Toni delle sezioni: li usano anche la barra e il focus */
.on-tone-dark {
	--on-focus: var(--on-white);
	background-color: var(--on-black);
	color: var(--on-white);
}

.on-tone-light {
	--on-focus: var(--on-green-ink);
	background-color: var(--on-paper);
	color: var(--on-ink);
}

.on-tone-green {
	--on-focus: var(--on-white);
	background-color: var(--on-green);
	color: var(--on-white);
}

/*
 * Focus visibile su ogni tono. Sul verde anello doppio: bianco più nero, altrimenti 1:1.
 * "body" porta la regola sopra il reset di Hello (a:focus-visible, button:focus-visible:
 * contorno nero), che sulle sezioni scure lascerebbe il focus invisibile.
 */
body :focus-visible {
	outline: 2px solid var(--on-focus, var(--on-white));
	outline-offset: 3px;
}

/* Contenitori che prendono il focus solo da script (il main del "Vai al contenuto"): niente anello */
body [tabindex="-1"]:focus-visible {
	outline: none;
}

.on-tone-green :focus-visible {
	box-shadow: 0 0 0 4px var(--on-black);
}

/* Bottoni */
.on-btn {
	display: inline-flex;
	align-items: center;
	gap: .75em;
	padding: var(--on-btn-pad);
	border: 2px solid transparent;
	background: var(--on-green-ink);
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-nav);
	font-weight: 700;
	letter-spacing: var(--on-ls-button);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--on-dur-1) ease, color var(--on-dur-1) ease;
}

.on-btn:hover {
	background: var(--on-black);
}

.on-btn--light {
	background: var(--on-white);
	color: var(--on-black);
}

.on-btn--ghost {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

/* Testo solo per gli screen reader */
.screen-reader-text,
.on-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * "Vai al contenuto" come lo skip del prototipo (home.css:463-464): fisso in alto a sinistra,
 * verde, testo bianco condensato maiuscolo, contorno bianco quando ha il focus.
 */
.skip-link:focus {
	position: fixed !important;
	z-index: var(--on-z-skip);
	top: 16px;
	left: 16px;
	width: auto;
	height: auto;
	padding: 12px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: var(--on-green);
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-nav);
	font-weight: 700;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	outline: 3px solid var(--on-white);
}

/*
 * Grana di stampa fissa su tutto lo schermo (prototipo concept.css:34): sopra la barra,
 * sotto lo skip link, mai cliccabile. In home è più leggera (on-apertura-tv.css).
 */
body::after {
	content: "";
	position: fixed;
	z-index: var(--on-z-grain);
	inset: 0;
	background: var(--on-grain);
	mix-blend-mode: overlay;
	opacity: .55;
	pointer-events: none;
}

/*
 * Fondi delle sezioni: classi da scrivere nel campo "Classi CSS" del Container, accanto al tono
 * (on-tone-light, on-tone-dark). Danno solo la luce e la texture: il colore resta quello del tono
 * o dello sfondo del Container.
 *
 * on-fondo-carta e on-fondo-carta2: la carta non è mai piatta (sito.css 16, scene.css 745-749).
 * Grana di stampa, luce dall'alto e bordo basso che scurisce; carta2 sposta la luce a destra e
 * aggiunge un velo verde a sinistra. La seconda grana sta in ::before, sotto il contenuto
 * (z-index -1 dentro isolation: isolate, così resta sopra il colore del Container). Il ::before
 * del Container è quello dell'overlay di Elementor: non usare insieme uno sfondo "Overlay".
 */
.on-fondo-carta,
.on-fondo-carta2 {
	position: relative;
	isolation: isolate;
	background-image:
		radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 85%, rgba(60, 40, 10, .06) 100%),
		var(--on-grain);
	background-blend-mode: normal, normal, multiply;
}

.on-fondo-carta2 {
	background-image:
		radial-gradient(ellipse 70% 55% at 85% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%),
		linear-gradient(90deg, rgba(0, 141, 51, .05), rgba(0, 141, 51, 0) 30%),
		var(--on-grain);
}

/* Due classi: deve battere .e-con:before di Elementor, che può arrivare dopo questo foglio */
.on-fondo-carta.on-fondo-carta::before,
.on-fondo-carta2.on-fondo-carta2::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: -1;
	width: auto;
	height: auto;
	border-radius: inherit;
	background: var(--on-grain);
	opacity: .45;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/*
 * on-fondo-grana: solo la grana della carta sopra il colore del Container, con il contenuto
 * sopra la grana (prototipo home.css:113-114, sezione #raduni della home). Era CSS personalizzato
 * della Home: qui non si rovina quando la pagina la salva chi non amministra (Elementor passa i
 * testi da KSES e "selector > .e-con-inner" diventerebbe "selector > .e-con-inner").
 */
.on-fondo-grana.on-fondo-grana::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--on-grain);
	opacity: .5;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.on-fondo-grana > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* on-fondo-filo: il filo del campo appena accennato in basso (scene.css 647: .racc, .legg, .gags) */
.on-fondo-filo {
	position: relative;
}

.on-fondo-filo::after {
	content: "";
	position: absolute;
	right: var(--on-gutter);
	bottom: 0;
	left: var(--on-gutter);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 141, 51, .35) 20%, rgba(0, 141, 51, .35) 80%, transparent);
	pointer-events: none;
}

/* on-fondo-riflettori: lo stadio di sera sulle fasce nere, due riflettori dall'alto e un velo verde (scene.css 636-641) */
.on-fondo-riflettori {
	background-image:
		radial-gradient(ellipse 38% 55% at 12% -12%, rgba(255, 250, 225, .09), transparent 70%),
		radial-gradient(ellipse 38% 55% at 88% -12%, rgba(255, 250, 225, .09), transparent 70%),
		linear-gradient(180deg, rgba(0, 141, 51, .06) 0%, transparent 40%);
}

/*
 * Entrata comune dei blocchi (scene.js 147-151, la .rv del prototipo): classe on-rv o attributo
 * data-on-rv dei widget con "Entrata animata". Qui solo lo stato di partenza, 28 px più in basso
 * e trasparente; la salita la fa on-site.js, che poi aggiunge is-rv-in. Solo sotto html.on-motion
 * e sullo schermo: senza JS, con il movimento ridotto, in stampa e nell'editor è al suo posto.
 */
@media screen {

	html.on-motion body:not(.elementor-editor-active) .on-rv:not(.is-rv-in),
	html.on-motion body:not(.elementor-editor-active) [data-on-rv]:not(.is-rv-in) {
		opacity: 0;
		transform: translateY(28px);
	}
}

/*
 * Le animazioni d'ingresso di Elementor nascondono il contenuto finché il JS non parte:
 * senza JS resterebbe invisibile. Il sito usa le proprie animazioni, quindi qui le neutralizziamo.
 */
.no-js .elementor-invisible {
	visibility: visible;
}

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