/**
 * Accessibilità — correzioni da valutazione Silktide.
 *
 * Caricato dopo lo stile del tema e dei plugin, così da poter riaffermare
 * l'indicatore di focus dove Divi lo rimuove con `outline: none !important`.
 */

:root {
	--a11y-focus: #06225d; /* navy del sito */
	--a11y-focus-halo: #ffffff;
}

/* ---------------------------------------------------- Focus visibile ----
 *
 * WCAG 2.4.7. Anello a due toni: l'outline navy porta il contrasto sui fondi
 * chiari, l'alone bianco lo stacca dai fondi scuri (footer, header scuro,
 * immagine della mappa). Insieme restano visibili ovunque.
 *
 * `:focus-visible` e non `:focus`: l'anello compare solo per la navigazione
 * da tastiera, non al click del mouse. È la differenza che evita la richiesta
 * di rimuoverlo del tutto, cioè di ricreare la barriera.
 *
 * `!important` è necessario: diverse regole di Divi azzerano l'outline con
 * `outline: none !important` e senza questo non verrebbero superate.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
.et_pb_button:focus-visible,
.et_pb_menu__menu a:focus-visible,
#top-menu a:focus-visible,
.mobile_menu_bar:focus-visible {
	outline: 3px solid var(--a11y-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--a11y-focus-halo) !important;
}

/* Il focus non deve restare nascosto sotto header sticky o sezioni adiacenti. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	position: relative;
	z-index: 10;
}

/* Skip link: esiste in Divi ma è invisibile al focus in alcune configurazioni. */
.et_pb_skip_link:focus,
.skip-link:focus,
a.screen-reader-text:focus {
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	z-index: 100000 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	padding: .75rem 1.25rem !important;
	background: var(--a11y-focus) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-decoration: none !important;
}

/* Pagina Statistiche: i controlli hanno già un focus proprio in cielo-stats,
 * ma con outline 2px senza alone. Qui viene uniformato al resto del sito. */
.cs-pillar-btn:focus-visible,
.cs-toggle:focus-visible {
	outline: 3px solid var(--a11y-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--a11y-focus-halo) !important;
}

/* Mappa del porto: gli elementi sono generati a runtime dal plugin e
 * ricevono tabindex dal nostro script (vedi a11y-mappa.js). L'alone bianco
 * è indispensabile qui, perché il fondo è una fotografia del porto. */
.imp-object:focus-visible,
.imp-object-list-item:focus-visible,
[data-imp-detached-menu] [tabindex]:focus-visible {
	outline: 3px solid var(--a11y-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px var(--a11y-focus-halo) !important;
}

@media (prefers-reduced-motion: reduce) {
	*:focus-visible {
		transition: none !important;
	}
}

/* ------------------------------------------- Equivalente testuale mappa ----
 *
 * Elenco delle zone del porto servito nell'HTML (vedi inc/a11y-mappa.php).
 * È servito con .cielo-sr-only: disponibile a screen reader e tastiera, non
 * visibile a schermo, perché la mappa ha già una legenda visiva e mostrarlo
 * due volte sarebbe ridondante. Gli stili qui sotto valgono se un domani si
 * decidesse di renderlo visibile togliendo quella classe.
 */

.cielo-mappa-a11y {
	max-width: 1080px;
	margin: 2rem auto 0;
	padding: 0 16px;
}

.cielo-mappa-a11y__title {
	font-size: 18px;
	font-weight: 600;
	color: #06225d;
	margin: 0 0 .5rem;
}

.cielo-mappa-a11y__intro {
	color: #6b6b66;
	font-size: 14px;
	margin: 0 0 1rem;
}

.cielo-mappa-a11y__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: .5rem 1.5rem;
}

.cielo-mappa-a11y__item {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	padding: .35rem 0;
	border-bottom: 1px solid #e5e5e0;
}

.cielo-mappa-a11y__code {
	flex: 0 0 auto;
	min-width: 3.2em;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #06225d;
}

.cielo-mappa-a11y__label {
	color: #44443f;
}

/* Utility: nasconde visivamente lasciando il contenuto agli screen reader. */
.cielo-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------ Contrasto testo hero Home ----
 *
 * WCAG 1.4.3. Il testo bianco dell'introduzione sta sopra una fascia navy
 * diagonale, ma la geometria della fascia è fissa mentre la colonna di testo
 * cresce con la viewport: a 1220px le righe centrali finiscono sopra la
 * fotografia del porto e il contrasto crolla. A 1640px il problema non si vede.
 *
 * La velatura sotto la colonna garantisce il fondo a qualunque larghezza.
 * Dove il testo è già sul navy (schermi larghi) è navy su navy: invisibile.
 */

.sostenibilita_text-1 {
	position: relative;
}

.sostenibilita_text-1::before {
	content: "";
	position: absolute;
	inset: -3rem -4rem -3rem -6rem;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(9, 30, 86, .96) 0%,
		rgba(9, 30, 86, .94) 58%,
		rgba(9, 30, 86, .72) 84%,
		rgba(9, 30, 86, 0) 100%
	);
	/* Senza sfocatura il rettangolo si stacca nettamente sulla fotografia. */
	filter: blur(28px);
}

/* Il contenuto resta sopra la velatura. */
.sostenibilita_text-1 > * {
	position: relative;
	z-index: 1;
}

/* =========================================================================
 * PRIORITÀ 2 — migliorie di leggibilità.
 * Non sono correzioni di conformità: il contrasto del testo è già conforme
 * secondo Silktide. Sono modifiche visibili su tutto il sito, quindi da far
 * validare al cliente. Per annullarle basta rimuovere questo blocco.
 * ========================================================================= */

/* --- Spaziatura: menu laterale di "Il progetto" ---------------------------
 *
 * La voce "Ambiente e sviluppo" va a capo, ma l'altezza di riga è tarata su
 * una riga sola: le due righe si sovrappongono e il testo diventa illeggibile.
 * È la criticità di distanziamento segnalata nel documento di valutazione.
 * 1.5 è anche il minimo indicato da WCAG 1.4.12 per la spaziatura del testo.
 */

#menu-pagina-progetto a,
#menu-pagina-progetto .menu-item a {
	line-height: 1.5 !important;
	padding-top: .35em;
	padding-bottom: .35em;
}

/* --- Peso del carattere --------------------------------------------------
 *
 * Il documento segnala leggibilità percepita migliorabile per via del peso
 * ridotto e suggerisce medium/semibold. Montserrat 500 è già fra i pesi
 * caricati dal tema, quindi non comporta alcun download aggiuntivo.
 *
 * Si applica al testo di lettura, non a menu e pulsanti, che hanno già pesi
 * propri. Il grassetto sale a 700 perché a 500 di base il 600 del tema non
 * si distingueva più abbastanza.
 */

/* Solo il testo di lettura.
 *
 * I titoli di queste pagine non sono heading ma paragrafi dentro moduli di
 * testo con una classe propria (è lo stesso motivo per cui l'issue segnala
 * "il titolo pagina non ha tag"): senza escluderli, il peso maggiore li
 * allargava e ne cambiava gli a capo. Quando la gerarchia degli heading verrà
 * sistemata nel backoffice (vedi db-fixes.md), queste esclusioni potranno
 * sparire perché i titoli saranno h1/h2 con pesi propri. */
#main-content .et_pb_text:not(.progetto_title):not(.progetto_subtitle):not(.sostenibilita_title):not(.hero_progetto) p,
#main-content li,
#main-content .et_pb_blurb_description {
	font-weight: 500;
}

#main-content .et_pb_text:not(.progetto_title):not(.progetto_subtitle):not(.sostenibilita_title):not(.hero_progetto) p strong,
#main-content li strong {
	font-weight: 700 !important;
}

/* ------------------------------- Titoli diventati heading veri -----------
 *
 * WCAG 1.3.1. Sulle pagine Home e Il progetto i titoli erano paragrafi dentro
 * moduli di testo: la pagina non aveva alcuna gerarchia. Ora sono h1 e h2.
 *
 * Divi però applica agli heading regole proprie — il colore del tema e un
 * corpo di 90px — che scavalcano quelle del modulo: il titolo diventava scuro
 * su fondo navy e fuori scala. Qui gli heading dei moduli marcati ereditano la
 * tipografia che il modulo applicava al paragrafo, così la resa resta identica
 * a prima e cambia solo la semantica.
 *
 * La classe è assegnata solo ai moduli effettivamente convertiti, per non
 * toccare gli heading legittimi di altri moduli (l'accordion delle FAQ, per
 * esempio, ha uno stile suo).
 */

.et_pb_text.cielo-heading-eredita h1,
.et_pb_text.cielo-heading-eredita h2,
.et_pb_text.cielo-heading-eredita h3 {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	text-transform: inherit !important;
}