/*
Theme Name: Enfold Child
Template: enfold
Version: 1.0
Description: Correzioni di accessibilità di murano.eu (2026). Non modificare il tema enfold: si aggiorna.
*/

/* Rilievo 4: l'header fisso non copre l'elemento raggiunto col tasto Tab. Contorno visibile su chiaro e su scuro
   (nero con bordo bianco): Enfold lo toglie a link e campi, con #top davanti per i campi (base.css:299, 311, 500). */
html { scroll-padding-top: 90px; }
#top a:focus-visible, #top button:focus-visible, #top input:focus-visible, #top textarea:focus-visible,
#top select:focus-visible, #top [tabindex]:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* Era nel CSS aggiuntivo del Customizer (post 4251), che vale solo per il tema enfold */
#cn-notice-text { font-size: 16px; }

/* Rilievo 2: nelle pagine del builder il <main> sta tra #main e la prima sezione (shortcodes.css:523 usa il figlio diretto) */
.html_minimal_header #main > main > .avia-builder-el-0 { border-top: none; }

/* B, Passo 5.1: i titoli diventati H1 (o H2) e i «titoli» che erano paragrafi conservano l'aspetto di prima. Nel contenuto
   portano la classe b-era-hN, con N il livello di prima (lab-wp/contenuti-b.sh): sullo Special Heading, o sul titolo o
   paragrafo di un blocco di testo. Misure del 26/9, uguali a 1440 e 390 px. */
#top .b-era-h2 .av-special-heading-tag, #top h1.b-era-h2 { font-size: 28px; line-height: 1.1em; }
#top h1.b-era-h2 { margin-bottom: 10px; }
#top .b-era-h3 .av-special-heading-tag { font-size: 20px; line-height: 1.1em; letter-spacing: normal; text-transform: none; }
#top .b-era-h5 .av-special-heading-tag { font-size: 16px; line-height: 1.1em; letter-spacing: normal; text-transform: none; }
/* la riga accanto al titolo: la sua altezza va col livello (heading.css, .av-special-heading-hN .special-heading-border) */
#top .b-era-h2 .special-heading-border { height: 2.6em; }
#top .b-era-h3 .special-heading-border { height: 1.9em; }
#top .b-era-h5 .special-heading-border { height: 1.5em; }
#top p.b-era-h2 { font-size: 28px; line-height: 1.1em; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 10px; }
#top p.b-era-h3 { font-size: 20px; line-height: 1.1em; font-weight: 600; margin: 0 0 8px; }
#top p.b-era-h4 { font-size: 18px; line-height: 1.1em; font-weight: 600; margin: 0 0 4px; color: var(--enfold-main-color-heading); }
/* le didascalie della fisarmonica di /storia/ (H2 con la classe b-era-h3) e i titoli dei widget (H2, functions.php) */
#top .aviaccordion-title.b-era-h3 { letter-spacing: normal; margin-bottom: 8px; color: #fff; }
#top h2.widgettitle { margin-bottom: 8px; }

/* B, Passo 5.6: contrasto. Il grigio secondario di Enfold (barra laterale, sottotitoli, testo dei campi) passa da #919191
   (3,15:1 sul bianco) a #737373: 4,74:1 sul bianco, 4,62:1 sul #fcfcfc dei campi. È una variabile del CSS generato da Enfold. */
:root { --enfold-main-color-meta: #737373; }
/* Le etichette del modulo contatti: #666 sul grigio #e0e0e0 della sezione è 4,35:1; #5f5f5f è 4,84:1 */
#top .avia_ajax_form label { color: #5f5f5f; }

/* B, Passo 5.8: il banner dei cookie (plugin Cookie Notice). Contorno del fuoco sui suoi pulsanti: il plugin lo toglie con
   #cookie-notice .cn-button:not(.cn-button-custom){outline:0} (front.min.css), che pesa più delle regole in cima. */
#top #cookie-notice .cn-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: none; }
/* Finché è aperto non copre l'elemento a fuoco: margine in fondo allo scorrimento e alla pagina, alto quanto il banner
   (--b-banner, misurata da functions.php: cambia col testo e con la larghezza dello schermo, 106-226 px il 26/9) */
html:has(#cookie-notice.cookie-notice-visible) { scroll-padding-bottom: var(--b-banner, 110px); }
body:has(#cookie-notice.cookie-notice-visible) { padding-bottom: var(--b-banner, 110px); }

/* B, Passo 6: la fisarmonica delle foto di /storia/. Col fuoco la foto si apre come col mouse (functions.php), ma il contorno
   del link non si vede: lo tagliano la foto stessa e quelle accanto (overflow:hidden). Quindi una cornice sulla foto, 16 px
   dentro, perché il bordo destro della foto aperta resta fino a 13 px sotto quella dopo (slideshow_accordion.js, _calcMovement). */
#top .aviaccordion-slide-link:focus-visible .aviaccordion-image { outline: 3px solid #fff; outline-offset: -16px; }