@charset "UTF-8";
/* ============================================================================
   ACCESSIBILITÀ (EAA / EN 301 549 -> WCAG 2.1 AA) E LAYOUT RESPONSIVE
   ----------------------------------------------------------------------------
   Questo foglio si carica DOPO stile.css / interne.css / home.css e ne corregge
   i punti critici senza riscriverli, così il sito desktop resta identico.
   ========================================================================== */

/* --- 1. CONTRASTO ---------------------------------------------------------
   ATTENZIONE ALLA STRUTTURA DEL SITO: ci sono DUE fondali diversi.
     - il MENU sta su fondo BIANCO   -> serve testo scuro
     - l'area contenuti #colDx sta su fondo SCURO #464644 -> serve testo chiaro
   Le correzioni vanno quindi applicate separatamente: un colore unico
   globale rende illeggibile una delle due zone.

   Rapporti misurati (minimo AA per testo normale: 4.5:1)
   ------------------------------------------------------------------------- */

/* NOTA: le dichiarazioni qui sotto usano !important di proposito.
   Il foglio va caricato per ULTIMO (dopo stile.css e interne.css); se pero'
   restasse caricato prima, senza !important verrebbe sovrascritto e i colori
   tornerebbero quelli non conformi. Cosi' funziona in entrambi i casi. */

/* --- 1a. sul BIANCO: menu e navigazione --- */
ul#menu li                      { color: #595959 !important; }   /* 7.0:1  */
ul#menu li a,
ul#menu li a:link,
ul#menu li a:visited            { color: #4d4d4d !important; }   /* 8.45:1 */
ul#menu li ul li a,
ul#menu li ul li ul li a        { color: #595959 !important; }   /* 7.0:1  */
ul#menu li a:hover,
ul#menu li a:active,
ul#menu li a.sel                { color: #c00003 !important; }   /* 6.48:1 */

/* --- 1b. sullo SCURO (#464644): area contenuti --- */
#colDx a,
#colDx a:link,
#colDx a:visited                { color: #f0eeee !important; }   /* 8.18:1 */
#colDx a:hover,
#colDx a:active                 { color: #ffa8aa !important; }   /* 5.15:1 */
#colDx .errori,
#colDx form .errori             { color: #ffa8aa !important; font-weight: bold; }   /* 5.15:1 */
/* La legenda del modulo contatti era #666 su fondo #464644: rapporto 1.5:1,
   praticamente invisibile. Vale a QUALSIASI larghezza, non solo su mobile. */
#colDx form legend              { color: #eae6e6 !important; }   /* 7.64:1 */
#colDx #boxHome li p a          { color: #f0eeee !important; }
#colDx.news span.data           { color: #cfcfcf !important; }   /* era #999 = 2.9:1 */
#colDx ul.newsElenco li         { border-bottom-color: #7a7a78 !important; }

/* --- 2. FOCUS DA TASTIERA -------------------------------------------------
   Requisito WCAG 2.4.7. Senza questo chi naviga con il TAB non vede dove si
   trova. Usiamo :focus-visible per non disturbare chi usa il mouse.
   ------------------------------------------------------------------------- */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
[tabindex]:focus {
	outline: 3px solid #c00003;
	outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
	outline: 3px solid #c00003;
	outline-offset: 2px;
}

/* --- 3. LINK "SALTA AL CONTENUTO" (WCAG 2.4.1) ---------------------------- */
.salta-contenuto {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: #fff;
	color: #c00003;
	padding: 12px 20px;
	border: 2px solid #c00003;
	font-size: 16px;
	text-decoration: none;
}
.salta-contenuto:focus { left: 0 !important; }

/* --- 4. TESTO SOLO PER LETTORI DI SCHERMO --------------------------------- */
.solo-lettori-schermo {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- 5. PULSANTE MENU MOBILE ---------------------------------------------
   Nascosto su desktop, visibile sotto i 975px. È un <button> vero, quindi
   raggiungibile da tastiera e annunciato correttamente dai lettori di schermo.
   ------------------------------------------------------------------------- */
#menu-toggle {
	display: none;
	position: fixed;
	top: 10px; left: 10px;
	z-index: 900;
	background: #fff;
	color: #4d4d4d;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	/* 44x44px: dimensione minima raccomandata per il tocco (WCAG 2.5.5) */
	min-width: 48px; min-height: 48px;
	padding: 10px 14px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
#menu-toggle .barre { display: block; width: 22px; height: 2px; background: #4d4d4d; margin: 4px 0; }

/* --- 6. IMMAGINI E MEDIA FLUIDI ------------------------------------------- */
img, video, iframe, object, embed { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ==========================================================================
   7. LAYOUT RESPONSIVE
   Il layout originale è fisso: menu in posizione assoluta larga 285px e
   body con padding-left di 328px, per un totale di 960px (328+632 di
   #colDx). Sotto i 975px — non 900px: un margine di sicurezza sopra i 960px
   necessari, perché la barra di scorrimento verticale del browser sottrae
   altri 15-17px alla larghezza utile — trasformiamo tutto in una colonna
   unica con menu a scomparsa. Con la soglia a 900px la larghezza fissa non
   ci stava piu' ma il layout desktop restava attivo: tra 900 e 960px il
   sito sfondava in orizzontale e il testo non andava piu' a capo finché la
   finestra non scendeva sotto i 900px.
   ========================================================================== */
@media screen and (max-width: 975px) {

	/* L'immagine di sfondo (img/bg.jpg) e' una striscia larga 328px ripetuta
	   in verticale: forma la colonna bianca del menu. Su uno schermo stretto
	   coprirebbe quasi tutta la larghezza, quindi va disattivata.
	   MA il colore di fondo deve restare QUELLO SCURO ORIGINALE: i testi
	   dell'area contenuti sono quasi bianchi (#fefefe, #eae6e6) e su fondo
	   bianco diventerebbero invisibili. */
	/* SFONDO — correzione di due errori precedenti.
	   (a) avevo scritto "background-image: inherit": <html> non ha un
	       genitore da cui ereditare, quindi equivale a "none" e cancellava
	       la foto;
	   (b) il velo scuro all'80% la rendeva comunque quasi invisibile.

	   La foto viene applicata a <html> da js/app.js, scegliendola fra
	   img/bg/1..6.jpg. Sono tutte immagini SCURE (luminosita' media misurata
	   fra 49 e 66 su 255), quindi il testo chiaro vi si legge sopra senza
	   bisogno di coprirle: basta un velo leggero.

	   "none" SENZA !important e' voluto: lo stile inline messo da app.js ha
	   la precedenza e la foto si vede. Se app.js non gira (12 pagine non lo
	   caricano) vale questa regola, che evita di stirare a tutto schermo la
	   striscia da 328x5px di stile.css. */
	html {
		background-image: none;
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		background-attachment: scroll;
	}

	/* Il <body> ripete in verticale img/bg.jpg, la striscia da 328x5px che
	   sul desktop disegna la colonna bianca del menu: su schermo stretto
	   comparirebbe come una banda chiara sul bordo sinistro. Va tolta.
	   Al suo posto un colore semitrasparente che fa da velo leggero sopra
	   la foto di <html>: la foto resta ben visibile (sono tutte immagini
	   scure) ma il testo chiaro guadagna leggibilita'. */
	body {
		background-image: none !important;
		background-color: rgba(70, 70, 68, 0.4) !important;
	}

	html {
		background-color: #464644 !important;
	}

	html, body {
		/* il layout originale usa "fixed": iOS Safari lo gestisce male e lascia
		   fasce non dipinte durante lo scorrimento */
		background-attachment: scroll !important;
		padding-left: 0 !important;
		width: auto !important;
	}

	/* overflow-x SOLO sul body: applicarlo anche a html blocca lo
	   scorrimento su iOS Safari */
	body { overflow-x: hidden; }

	body { font-size: 100%; }

	/* il pannello del menu resta bianco, come nel layout desktop */
	ul#menu { background: #fff !important; }

	/* l'area contenuti resta sul fondo scuro della pagina */
	#colDx { background: transparent !important; }

	#menu-toggle { display: block !important; }

	/* IL MENU E' UN PANNELLO SOVRAPPOSTO, NON UN BLOCCO IN CIMA ALLA PAGINA.
	   Prima era "static": stava all'inizio del documento, quindi aprendolo
	   da meta' pagina compariva sopra la porzione visibile e bisognava
	   risalire a mano. Ora si apre fissato allo schermo, ovunque ci si trovi.
	   Uso top/right/bottom/left invece di inset e di 100vh: su iOS Safari
	   100vh comprende la barra degli indirizzi e taglia il fondo del menu. */
	ul#menu {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		z-index: 800;
		width: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 70px 20px 30px 20px !important;
		background: #fff !important;
		/* se le voci non ci stanno, il pannello scorre da solo */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	/* SU MOBILE IL MENU E' CHIUSO PER IMPOSTAZIONE PREDEFINITA.
	   Lo decide il CSS, non il JavaScript: cosi' non esiste il momento in cui
	   la pagina e' gia' visibile ma lo script non ha ancora agito (su iOS
	   capitava, e il menu compariva aperto sulla home).
	   Se questo foglio non viene caricato, il menu resta semplicemente
	   visibile come nel sito originale: nessuna navigazione persa. */
	ul#menu { display: none !important; }
	ul#menu.menu-visibile { display: block !important; }

	/* compatibilita' con la versione precedente dello script */
	ul#menu[hidden] { display: none !important; }

	/* mentre il menu e' aperto la pagina sotto non deve scorrere */
	body.menu-aperto { overflow: hidden !important; }

	/* il pulsante resta sopra il pannello e funziona da "chiudi" */
	#menu-toggle { z-index: 900; }
	#menu-toggle[aria-expanded="true"] {
		background: #c00003;
		border-color: #c00003;
	}
	#menu-toggle[aria-expanded="true"] .barre { background: #fff; }

	ul#menu li { margin: 0 0 4px 0 !important; }

	/* aree toccabili ampie */
	ul#menu li a {
		display: block;
		padding: 12px 4px;
		font-size: 18px;
		line-height: 1.4;
		min-height: 24px;
	}
	ul#menu li ul { margin: 0 0 0 16px !important; }
	ul#menu li ul li a { font-size: 16px; padding: 10px 4px; }

	/* il logo non può restare un'immagine di sfondo a dimensione fissa */
	ul#menu li#mn0 { padding: 0 0 10px 0 !important; }
	ul#menu li#mn0 a {
		width: 100% !important;
		max-width: 245px;
		height: 60px !important;
		background-size: contain !important;
		background-position: left center !important;
	}

	/* colonna contenuti a tutta larghezza */
	#colDx {
		width: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 16px !important;
		float: none !important;
	}
	#colDx #footer, #colDx ul#footer { width: auto !important; padding: 40px 0 20px 0 !important; }

	/* elementi posizionati in modo assoluto/fisso: riportati nel flusso */
	#colDx #riferimenti {
		position: static !important;
		left: auto !important; top: auto !important;
		width: auto !important;
		background-image: none !important;
		padding: 16px 0 0 0 !important;
		border-top: 1px solid #ddd;
	}

	/* liste di corsi: da colonne affiancate a blocchi impilati */
	#colDx .listaCorsi li, #colDx .listaCorsi2 li {
		float: none !important;
		width: auto !important;
		margin: 0 0 24px 0 !important;
		text-align: left !important;
	}

	/* HOME — riquadri Academy e Talents.
	   Su desktop sono due colonne separate da img/tratto-home.png, una
	   sottile linea VERTICALE (3x242px) messa come sfondo di #boxHome.
	   Impilando i riquadri quella linea non ha piu' senso: la sostituiamo
	   con un filetto ORIZZONTALE fra i due blocchi.
	   Inoltre il titolo (Academy / Talents) e il logo che gli fa da sfondo
	   devono restare CENTRATI: la regola precedente forzava text-align a
	   sinistra e li disallineava. */
	#colDx #boxHome {
		background-image: none !important;
		margin-top: 20px !important;
		float: none !important;
	}
	#colDx #boxHome li {
		float: none !important;
		width: auto !important;
		margin: 0 0 10px 0 !important;
		text-align: center !important;
	}
	#colDx #boxHome li#academy {
		padding-bottom: 26px !important;
		margin-bottom: 26px !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	}
	/* il logo di sfondo del titolo resta centrato e si adatta allo schermo */
	#colDx #boxHome li h2 {
		background-position: center top !important;
		background-size: auto 120px !important;
		padding-top: 130px !important;
		text-align: center !important;
	}
	/* il testo torna a bandiera sinistra: centrato sarebbe illeggibile */
	#colDx #boxHome li p { text-align: left !important; }
	#colDx #boxHome li p a {
		width: auto !important;
		float: none !important;
		display: block;
		text-align: left !important;
	}

	#colDx form legend {
		display: block;
		margin-bottom: 10px;
		font-size: 15px;
		line-height: 1.4;
	}

	/* moduli utilizzabili con una mano sola.
	   ATTENZIONE: caselle di spunta e pulsanti vanno ESCLUSI, altrimenti
	   diventano larghi quanto lo schermo e alti 44px. */
	#colDx form input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]),
	#colDx form select, #colDx form textarea {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px !important;   /* < 16px provoca lo zoom automatico su iOS */
		padding: 10px;
		min-height: 44px;
	}
	#colDx form label { display: block; margin: 12px 0 4px 0; font-size: 15px; }
	#colDx form label.inlinea { display: inline; width: auto !important; height: auto !important; font-size: 14px; }
	#colDx form .inlinea { width: auto !important; min-height: 24px; }
	#colDx form .invia { width: auto !important; min-height: 44px; }

	p, li { font-size: 1em; line-height: 1.6; }
	h1 { font-size: 1.5em; margin-bottom: .6em; }
	h2 { font-size: 1.25em; }

	p.credits { width: auto !important; }
}

@media screen and (max-width: 480px) {
	#colDx { padding: 12px !important; }
	ul#menu li a { font-size: 17px; }
}

/* --- 8. RISPETTO DELLE PREFERENZE UTENTE ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   10. CORREZIONI SPECIFICHE PER SAFARI SU iPHONE / iPAD
   Il layout risultava corretto in Chrome su desktop ma non su iOS: le cause
   sono comportamenti propri di Safari mobile, non della media query.
   ========================================================================== */

/* iOS ingrandisce AUTONOMAMENTE il testo dei blocchi che considera troppo
   larghi ("text inflation"): il risultato sono corpi di testo di dimensioni
   diverse fra loro e righe che sfondano lo schermo. Questa proprieta' lo
   disattiva. E' la causa piu' frequente di "su desktop va, su iPhone no". */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media screen and (max-width: 975px) {

	/* min-height:100% + background FIXED impedisce a iOS di dipingere lo
	   sfondo oltre la prima schermata (bande chiare sotto). Quel problema
	   richiedeva "fixed": qui sopra l'attachment e' gia' stato portato a
	   "scroll", quindi non serve piu' azzerare min-height del tutto.
	   Azzerarlo del tutto (min-height:0) crea un difetto diverso: su una
	   pagina con poco testo (tipico il dettaglio di una news breve) <html>
	   si restringe al contenuto, "background-size:cover" lo scala su
	   quell'altezza ridotta, e sotto resta una fascia di colore piatto senza
	   la foto, ben visibile su schermi alti. Un min-height pari alla
	   viewport risolve entrambi i casi: la pagina resta alta quanto lo
	   schermo anche a contenuto corto (foto sempre a tutta altezza), e puo'
	   comunque crescere oltre se il contenuto e' piu' lungo (height:auto). */
	html, body {
		height: auto !important;
		min-height: 100vh !important;
		min-height: 100dvh !important; /* viewport "dinamica": esclude la barra indirizzi di Safari/Chrome mobile, dove 100vh sarebbe piu' alto dello spazio realmente visibile */
	}

	/* contenuti a larghezza fissa nel codice HTML (width="580", width="420"...):
	   su uno schermo da 375px sfondano in orizzontale e "allargano" la pagina */
	#colDx img,
	#colDx iframe,
	#colDx object,
	#colDx embed,
	#colDx table {
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
	}

	/* parole lunghe e URL non spezzabili sono l'altra causa di scorrimento
	   orizzontale su schermi stretti */
	#colDx, #colDx p, #colDx li, #colDx h1, #colDx h2, #colDx h3 {
		overflow-wrap: break-word;
		word-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	/* iPhone con notch: in orizzontale il testo finirebbe sotto la tacca */
	#colDx {
		padding-left: max(16px, env(safe-area-inset-left)) !important;
		padding-right: max(16px, env(safe-area-inset-right)) !important;
	}
	ul#menu {
		padding-left: max(20px, env(safe-area-inset-left)) !important;
		padding-right: max(20px, env(safe-area-inset-right)) !important;
	}

	/* il pulsante del menu resta sotto la barra di stato */
	#menu-toggle {
		top: max(10px, env(safe-area-inset-top)) !important;
		left: max(10px, env(safe-area-inset-left)) !important;
	}

	/* scorrimento fluido nei contenitori */
	body { -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   11. IMMAGINI AFFIANCATE AL TESTO
   img.fotoRight / img.fotoLeft sono larghe 327px. Su un telefono da 375px,
   tolti i margini, restano ~16px per il testo: una o due lettere per riga.
   ========================================================================== */

/* Tablet e schermi medi: l'immagine si restringe, il testo continua ad
   affiancarla ma con una colonna di larghezza ragionevole. */
@media screen and (max-width: 975px) {
	#colDx img.fotoRight,
	#colDx img.fotoLeft,
	#colDx img[align="right"],
	#colDx img[align="left"] {
		max-width: 38% !important;
		height: auto !important;
	}
}

/* Telefoni: niente affiancamento. L'immagine va sopra, a tutta larghezza,
   e il testo scorre sotto — molto piu' leggibile di una colonna stretta. */
@media screen and (max-width: 640px) {
	#colDx img.fotoRight,
	#colDx img.fotoLeft,
	#colDx img[align="right"],
	#colDx img[align="left"] {
		float: none !important;
		display: block !important;
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
		margin: 0 auto 18px auto !important;
	}

	/* il testo che seguiva l'immagine non deve piu' provare ad affiancarla */
	#colDx p, #colDx ul, #colDx ol { clear: both; }
}

/* ==========================================================================
   12. LETTORI VIDEO (MediaElement.js) — pagine in video/
   I <video> hanno width="554" height="416" scritti nell'HTML, e
   MediaElement.js copia quelle misure nello STILE INLINE del contenitore
   (.mejs-container). Su uno schermo da 375px il player sfonda di 180px e
   trascina con se' tutta la pagina: e' la causa del layout "impazzito".
   Serve !important perche' va sovrascritto uno stile inline generato da JS.
   ========================================================================== */

#colDx video,
#colDx .mejs-container,
#colDx .mejs-mediaelement,
#colDx .mejs-overlay,
#colDx .mejs-poster {
	max-width: 100% !important;
}

@media screen and (max-width: 975px) {

	/* il contenitore prende tutta la larghezza disponibile e mantiene
	   le proporzioni originali del video (554x416 = 4:3) */
	#colDx .mejs-container {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 554 / 416;
		max-width: 554px;
	}

	/* ripiego per iOS precedenti alla 15, che non conosce aspect-ratio */
	@supports not (aspect-ratio: 1 / 1) {
		#colDx .mejs-container {
			height: 0 !important;
			padding-top: 75.09%;   /* 416 / 554 */
			position: relative;
		}
	}

	#colDx .mejs-container video,
	#colDx .mejs-mediaelement,
	#colDx .mejs-mediaelement video,
	#colDx .mejs-overlay,
	#colDx .mejs-layers,
	#colDx .mejs-poster {
		width: 100% !important;
		height: 100% !important;
	}

	/* la barra dei comandi resta ancorata in basso e leggibile */
	#colDx .mejs-controls { width: 100% !important; }

	/* se JavaScript non parte, il <video> nudo deve comunque adattarsi */
	#colDx video {
		width: 100% !important;
		height: auto !important;
	}

	/* il fallback Flash non funziona su nessun browser dal 2021:
	   nascosto per non lasciare un rettangolo vuoto */
	#colDx .mejs-container object[type="application/x-shockwave-flash"] {
		max-width: 100% !important;
	}

	/* elenco dei video: da griglia affiancata a blocchi impilati */
	#colDx ul.listaVideo li {
		float: none !important;
		width: auto !important;
		margin: 0 0 28px 0 !important;
	}
}

/* ==========================================================================
   12. LETTORI VIDEO (MediaElement.js) — pagine in video/
   MediaElement scrive le dimensioni IN PIXEL direttamente nell'attributo
   style degli elementi (554x416). Uno stile inline batte il CSS normale,
   quindi servono !important: senza, il lettore resta largo 554px e su un
   telefono da 375px sfonda l'impaginazione trascinandosi dietro la pagina.
   ========================================================================== */
@media screen and (max-width: 975px) {

	.mejs-container,
	.mejs-container .mejs-mediaelement,
	.mejs-overlay,
	.mejs-layer,
	.mejs-poster,
	#colDx video,
	#colDx .listaVideo video {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
	}

	/* proporzione originale dei filmati (554x416, circa 4:3):
	   la manteniamo per evitare bande nere o immagini schiacciate */
	.mejs-container {
		aspect-ratio: 554 / 416;
		padding-top: 0 !important;
	}
	.mejs-container video,
	.mejs-mediaelement video {
		object-fit: contain;
		height: 100% !important;
	}

	/* il fallback Flash non funziona su nessun dispositivo mobile
	   (e da fine 2020 su nessun browser): non deve occupare spazio */
	.mejs-container object[type="application/x-shockwave-flash"] {
		max-width: 100% !important;
	}

	#colDx ul.listaVideo,
	#colDx ul.listaVideo li {
		width: auto !important;
		float: none !important;
		margin-left: 0 !important;
		list-style: none;
	}
}

/* ==========================================================================
   13. MODULO CONTATTI — casella di spunta del consenso
   La casella ha float:left senza clear. La <textarea> accanto e' stretta
   (cols="25"), quindi resta spazio libero alla sua destra: appena la pagina
   viene ri-disposta (caratteri caricati, script di validazione avviato) la
   casella "risale" e si affianca al riquadro del messaggio. E' il
   comportamento che avete visto comparire dopo qualche secondo.
   clear:both la obbliga a restare sotto tutto cio' che la precede.
   ========================================================================== */
/* Il collegamento all'informativa spariva dopo qualche secondo, cioe' dopo
   l'avvio degli script. Non dipende da queste regole: senza JavaScript il
   link risulta visibile (display:block, visibility:visible, opacity:1).
   A sparire lo costringe uno degli script di pagina; l'unico che non posso
   esaminare e' yacc.min.js, caricato dal dominio esterno
   cdn.evoluzionetelematica.it.

   Queste dichiarazioni sono una difesa: annullano i tre modi con cui uno
   script nasconde di solito un elemento (display:none, visibility:hidden,
   opacity:0), perche' !important prevale anche sugli stili inline.
   NON possono nulla se lo script rimuove l'elemento dal documento: in quel
   caso serve intervenire sullo script (vedi LEGGIMI). */
#colDx form a.boxedAutorizzo {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	clear: both;
	margin-top: 14px;
}
#colDx form input#autorizzo,
#colDx form input.inlinea[type="checkbox"] {
	clear: both;
	margin-top: 4px;
}
/* l'etichetta NON deve andare a capo: deve restare accanto alla casella */
#colDx form label.inlinea {
	clear: none;
	line-height: 1.35;
}

@media screen and (max-width: 975px) {
	/* su schermo stretto l'etichetta non puo' restare larga 410px fissi */
	#colDx form label.inlinea {
		width: calc(100% - 34px) !important;
		height: auto !important;
		font-size: 14px !important;
		margin: 2px 0 0 8px !important;
	}
	#colDx form input#autorizzo { margin-top: 2px; }
}

/* ==========================================================================
   14. PAGINE SENZA L'IMPAGINAZIONE DEL SITO  (class="pagina-semplice")
   privacybox.html (aperta nel riquadro sovrapposto dalla pagina Contatti) e
   form.php non hanno la colonna #colDx: il testo resta nero, com'e' sempre
   stato. Le regole responsive pero' rendono scuro lo sfondo di <body>, e il
   risultato era nero su scuro.
   Queste pagine tornano quindi a fondo chiaro con testo scuro, a QUALSIASI
   larghezza: dentro un riquadro sovrapposto la media query si valuta sulla
   larghezza del riquadro, non dello schermo, quindi limitarla al mobile non
   sarebbe bastato.
   ========================================================================== */
html:has(body.pagina-semplice),
body.pagina-semplice {
	background-image: none !important;
	background-color: #ffffff !important;
	color: #222222 !important;
	padding: 16px !important;
}
body.pagina-semplice h1,
body.pagina-semplice h2,
body.pagina-semplice h3,
body.pagina-semplice p,
body.pagina-semplice li,
body.pagina-semplice td,
body.pagina-semplice label,
body.pagina-semplice strong {
	color: #222222 !important;
}
body.pagina-semplice a { color: #a30002 !important; }
/* :has() non e' supportato dai browser piu' vecchi: se non venisse applicato,
   <html> resterebbe scuro e si vedrebbe una cornice attorno al riquadro
   bianco. Un body alto quanto la finestra e senza margini copre comunque
   tutta l'area visibile, quindi il risultato e' corretto in ogni caso. */
body.pagina-semplice {
	font: 15px/1.6 Arial, Helvetica, sans-serif;
	margin: 0;
	min-height: 100vh;
}
body.pagina-semplice h1 { font-size: 1.4em; margin: 0 0 .6em 0; }

/* i campi del modulo candidature devono restare leggibili e usabili */
body.pagina-semplice input:not([type="checkbox"]):not([type="radio"]):not([type="image"]),
body.pagina-semplice textarea,
body.pagina-semplice select {
	max-width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	padding: 8px;
	border: 1px solid #999;
	background: #fff;
	color: #222;
}

/* ==========================================================================
   15. LINK IUBENDA (privacy policy)
   VERIFICATO (settembre 2026): con la classe "iubenda-nostyle" aggiunta al
   link, iubenda NON incorpora il testo intero nella pagina — resta un
   piccolo link che apre il documento in un popup proprio (overlay scuro +
   iframe bianco, gia' curato da iubenda: non serve e non conviene
   restilizzarlo, e comunque essendo iframe su dominio iubenda.com non e'
   modificabile da qui). Il popup va bene cosi'.
   Il problema era solo questo: il link A RIPOSO stava dentro un pannello
   bianco (background:#fff dato da questa regola in una versione precedente)
   che sul fondo scuro di #colDx risultava una macchia bianca isolata.
   Niente pannello: il link resta un link, come tutti gli altri di #colDx. */
#colDx .iubenda-contenitore {
	margin: 0 0 20px 0;
}
/* iubenda_i_badge.js scrive width/height/border/background DIRETTAMENTE come
   stile inline sul link (116x25px, border:0, background:none): uno stile
   inline batte qualunque regola qui sotto priva di !important, quindi ogni
   proprieta' che quello script tocca va ripetuta con !important. */
#colDx .iubenda-contenitore a.iubenda-embed {
	color: #f0eeee !important;
	background: transparent !important;
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	padding: 10px 18px !important;
	border: 1px solid rgba(240, 238, 238, 0.5) !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	font-size: 0.9em !important;
	letter-spacing: 0.02em;
}
#colDx .iubenda-contenitore a.iubenda-embed:hover,
#colDx .iubenda-contenitore a.iubenda-embed:focus {
	color: #ffa8aa !important;
	border-color: #ffa8aa !important;
}

/* --- 9. STAMPA ------------------------------------------------------------ */
@media print {
	ul#menu, #menu-toggle, .salta-contenuto { display: none !important; }
	body { padding-left: 0 !important; background: none !important; }
	#colDx { width: auto !important; padding: 0 !important; }
}