/* ==========================================================================
   Accessibilità — fix WCAG 2.1 AA (audit cliente 2026)
   Caricato dopo style.css da header.php / header-landingpage.php.
   Tenuto fuori dalla build Tailwind per non dipendere da npm in deploy.
   ========================================================================== */

/* --- 2.4.1 Salto di blocchi: skip link ---------------------------------- */
.skip-link {
    position: absolute;
    top: -100vh;
    left: 1rem;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: #fff;
    color: #075985;
    font-weight: 700;
    text-decoration: underline;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.skip-link:focus {
    top: 1rem;
}

/* --- 2.4.7 Focus visibile ------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #075985 !important;
    outline-offset: 2px;
}

/* --- 2.4.3 / 2.4.7 Menu mobile: da chiuso esce dal tab order ------------- */
.menu-panel {
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-delay: 0s, 0.15s; /* in chiusura la visibility aspetta il fade */
}
.menu-open .menu-panel {
    visibility: visible;
    transition-delay: 0s, 0s; /* in apertura subito visibile: il focus JS deve poter entrare */
}

/* --- 2.1.1 Popup corso: da chiusi escono dal tab order ------------------- */
#popup_iscrizione:not(.open),
#popup_interesse:not(.open),
#popup_info:not(.open) {
    visibility: hidden;
    /* il tema usa "transition: 0.3s all": in chiusura la visibility aspetta lo slide */
    transition: 0.3s all ease, visibility 0s linear 0.3s;
}
#popup_iscrizione.open,
#popup_interesse.open,
#popup_info.open {
    visibility: visible;
    transition: 0.3s all ease; /* in apertura subito visibile per il focus JS */
}

/* --- CTA convertiti da <a> a <button>: stesso rendering ------------------
   Neutralizza solo gli stili UA dei button; background/padding restano
   ai class .apply-cta-* dove presenti. */
button.iscrizionecorso,
button.chiediinfo,
button#richiestainfo,
button.chiudi {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}
/* varianti testuali (senza classe .apply-cta-*): nessun fondo UA */
button.chiediinfo:not(.apply-cta-small),
button#richiestainfo:not(.apply-cta-small),
button.chiudi {
    background: none;
    padding: 0;
    color: inherit;
}

/* ==========================================================================
   Batch 2 — Contrasto minimo 1.4.3 / uso del colore 1.4.1
   Palette accessibile: mapping minimo dei 4 colori non conformi
   #6FC1B1 (2.11:1) -> #00797A (5.3:1) per testo e fondi con testo bianco
   #7F8080 (3.96:1) -> #767676 (4.54:1)
   #BABABA badge    -> testo nero (10.9:1), fondo invariato
   #D5D5D5 filtri   -> #767676
   CTA: fondo #00797A, hover invertito teal chiaro #6FC1B1 con testo nero
   ========================================================================== */

:root {
    --color-primary: #00797A;
    --color-primary-hover: #6FC1B1;
    --color-secondary: #767676;
    --color-secondary-hover: #767676;
}

/* testo teal su bianco (aree, prezzi, link) */
.text-primary { color: #00797A; }

/* fondi teal con contenuto bianco (CTA, frecce card, icone) */
.bg-primary,
.bg-\[\#6FC1B1\] { background-color: #00797A; }

/* CTA: base scura, hover invertito chiaro con testo scuro */
/* Nel CSS compilato del nuovo sito questa regola e' marcata !important
   (build Tailwind diversa): per sovrascriverla serve la stessa priorita'. */
.apply-cta,
.apply-cta-small,
body .apply-cta,
body .apply-cta-small { background-color: #00797A !important; }

/* CTA reverse: vedi il blocco dedicato in fondo al file (stati base e hover). */
.apply-cta:hover,
.apply-cta-small:hover,
body .apply-cta:hover,
body .apply-cta-small:hover {
    background-color: #6FC1B1 !important;
    color: #000000 !important;
}

/* grigi testuali e fondi grigi con testo bianco */
.text-secondary { color: #767676; }
.bg-secondary,
.bg-\[\#7F8080\] { background-color: #767676; }

/* badge corso (Online, crediti ECM): testo nero su grigio chiaro */
.bg-\[\#BABABA\] { color: #000000; }

/* filtri corsi: etichette leggibili, stato attivo teal scuro */
#filterCorsi .filter-content label {
    color: #767676;
    border-color: #767676;
}
#filterCorsi .filter-content input[type=checkbox]:checked + label {
    color: #ffffff;
    background-color: #00797A;
    border-color: #00797A;
}

/* 1.4.1: i link dentro i testi devono essere riconoscibili non solo dal colore */
main p a:not([class*="apply-cta"]),
main li a:not([class*="apply-cta"]),
.text-corso a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Cookiebot: bottoni e link del banner con la palette accessibile */
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background-color: #00797A !important;
    border-color: #00797A !important;
}
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a,
#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a,
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive,
/* anche l'hover: il tema lo porta a #6FC1B1 (2,11:1 su bianco) */
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
    color: #00797A !important;
}

/* 1.4.11: il bordo che segnala il tab attivo deve stare sopra 3:1 */
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    border-bottom-color: #00797A !important;
}

/* --- 1.4.3 Hero con testo bianco su foto: velo scuro per il contrasto -----
   Si applica solo ai blocchi immagine seguiti da contenuto .text-white
   (l'hero delle landing ha testo scuro e resta invariato).
   Opacita' 0.4: sul punto piu' chiaro delle foto attuali porta il contrasto
   da 1.97:1 a ~5.5:1. */
div.absolute.inset-0:has(> img):has(~ .text-white)::after,
div.absolute.inset-0:has(> img):has(~ * .text-white)::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Hero con .overlay (formazione, soluzioni, academy): il velo del tema era 0.4
   e lasciava il sottotitolo a 2.95:1. A 0.55 il testo normale arriva a ~4.9:1. */
.overlay:before {
    opacity: 0.55;
}

/* ==========================================================================
   3.3.1 / 3.3.3 — Presentazione errori dei form del tema, allineata a Gravity Forms
   ========================================================================== */

.a11y-form-errors {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid #B32D2E;
    background-color: #FCF0F1;
    color: #8A1F20;
    font-weight: 700;
}

.a11y-field-error {
    margin-top: 0.35rem;
    color: #8A1F20;
    font-size: 0.9em;
}

.a11y-field-error:before {
    content: "\26A0";      /* segnale di attenzione: l'errore non e' dato dal solo colore (1.4.1) */
    margin-right: 0.4rem;
}

[aria-invalid="true"] {
    border: 2px solid #B32D2E !important;
}

/* i gruppi di checkbox ora sono fieldset: niente stili UA indesiderati */
form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
form legend {
    padding: 0;
}

/* ==========================================================================
   Segnalazioni cliente del 27/08
   ========================================================================== */

/* --- 1) I link nel testo devono distinguersi anche per colore --------------
   "i link non sono evidenziati dal colore, sono ancora dello stesso colore
   del testo": la sola sottolineatura non bastava al cliente.

   ATTENZIONE al meccanismo, che qui e' scelto apposta.
   Il colore NON va assegnato con un selettore di contesto (es. `.text-white a`)
   per poi escludere i fondi scuri con un altro selettore: le due regole entrano
   in conflitto di specificita' e vince quella con piu' elementi nel selettore.
   E' successo davvero: `main p a:not(...):not(.skip-link)` (0,2,3) batteva
   `.text-white a:not(...)` (0,2,1), e i contatti in home finivano verde su verde.

   Qui il colore passa da una custom property, che si EREDITA: un contenitore
   con fondo scuro dichiara `--a11y-link: currentColor` e tutti i link al suo
   interno seguono il colore del testo, a qualsiasi profondita' e senza che la
   specificita' dei selettori conti nulla.
   Per aggiungere un contesto scuro basta aggiungerlo alla lista qui sotto. */

:root {
    --a11y-link: #00797A;        /* su bianco: 5,23:1 */
}

/* Contesti in cui il testo e' chiaro su fondo scuro: il link segue il testo.
   La lista dei fondi scuri e' ricavata dal CSS effettivo (tema + questo file)
   con `python3 scripts/verifica_link.py --classi`: sono le classi il cui
   background contrasta meglio col bianco che col nero. */
.text-white,
[class*="text-white"],
footer,
.bg-primary,
.bg-primary-hover,
.bg-secondary,
.bg-\[\#00797A\],
.bg-\[\#6FC1B1\],
.bg-\[\#7F8080\],
.bg-black\/60,
.bg-gray-800,
.bg-blue-800,
/* Contenitori che FANNO da pulsante: il fondo e il colore del testo stanno sul
   contenitore e il link dentro ne e' soltanto l'etichetta (es. "Procedi con
   l'ordine" nel carrello, dentro .wc-proceed-to-checkout). Senza questa riga il
   link prende il verde dei link di testo e in hover, quando il contenitore
   passa a #00797A, finisce verde su verde: illeggibile. */
.wc-proceed-to-checkout,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    --a11y-link: currentColor;
}

main p a:not([class*="apply-cta"]):not(.skip-link),
main li a:not([class*="apply-cta"]),
main label a,
main form a:not([class*="apply-cta"]),
.text-corso a,
.text-content a:not([class*="apply-cta"]) {
    color: var(--a11y-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- CTA "reverse" (fondo bianco, testo colorato) --------------------------
   Il tema lo definisce cosi':
     base  -> fondo #fff, testo #6FC1B1  (2,11:1 — non conforme, va corretto)
     hover -> fondo #00797A, testo #fff  (5,3:1 — gia' conforme, va lasciato)
   Qui i due stati sono scritti entrambi in modo esplicito: correggere solo il
   colore base con una regola piu' specifica sovrascriveva anche l'hover e
   lasciava testo teal su fondo teal. */
.apply-cta-reverse:not(:hover),
.text-white .apply-cta-reverse:not(:hover),
[class*="bg-"] .apply-cta-reverse:not(:hover) {
    color: #00797A;              /* su bianco: 5,3:1 */
    background-color: #ffffff;
}
.apply-cta-reverse:hover,
.text-white .apply-cta-reverse:hover,
[class*="bg-"] .apply-cta-reverse:hover {
    color: #ffffff;              /* su #00797A: 5,3:1 */
    background-color: #00797A;
}

/* --- 2) Titolo della scheda attiva in "A chi ci rivolgiamo" ----------------
   Usa la classe lg:group-[.active]:text-primary, che ha il verde chiaro
   compilato dentro: l'override su .text-primary non la intercetta. */
#a-chi-ci-rivolgiamo .active h3,
#soluzioni .active h3,
.group.active [class*="group-[.active]:text-primary"] {
    color: #00797A;
}

/* --- 3) Pulsante dentro il banner verde scuro ------------------------------
   Con i CTA portati a #00797A, il pulsante finiva sullo stesso colore del
   banner (contrasto 1:1, invisibile). Qui va invertito: fondo chiaro su
   fondo scuro. */
[class*="bg-primary-hover"] .apply-cta-small,
[class*="bg-primary-hover"] .apply-cta,
aside[class*="bg-primary-hover"] a[class*="apply-cta"] {
    background-color: #ffffff !important;
    color: #00575A !important;
}
[class*="bg-primary-hover"] .apply-cta-small:hover,
[class*="bg-primary-hover"] .apply-cta:hover,
aside[class*="bg-primary-hover"] a[class*="apply-cta"]:hover {
    background-color: #D7ECEC !important;
    color: #00464a !important;
}

/* --- Pulsanti WooCommerce: stessa palette accessibile dei CTA del tema ------
   Il tema li disegna con fondo #6FC1B1 e testo bianco, cioe' 2,11:1, sotto la
   soglia AA, e li scurisce al passaggio del mouse. Qui sono invertiti come gia'
   fatto per .apply-cta:
       da fermo -> fondo #00797A con testo bianco   5,23:1
       in hover -> fondo #6FC1B1 con testo nero    10,09:1
   Il tema marca questi fondi !important, quindi serve la stessa priorita'.
   I pulsanti disabilitati restano come sono: devono continuare a sembrare
   spenti. Su .wc-proceed-to-checkout il colore vale anche per il link che sta
   dentro, che lo eredita via --a11y-link. */
body .woocommerce a.button:not(.disabled):not(:disabled),
body .woocommerce button.button:not(.disabled):not(:disabled),
body .woocommerce input.button:not(.disabled):not(:disabled),
body .woocommerce #respond input#submit:not(.disabled):not(:disabled),
body.woocommerce-cart .wc-proceed-to-checkout,
body.woocommerce-checkout .wc-proceed-to-checkout,
body .woocommerce-message .button.wc-forward {
    background-color: #00797A !important;
    color: #ffffff !important;
}

body .woocommerce a.button:not(.disabled):not(:disabled):hover,
body .woocommerce button.button:not(.disabled):not(:disabled):hover,
body .woocommerce input.button:not(.disabled):not(:disabled):hover,
body .woocommerce #respond input#submit:not(.disabled):not(:disabled):hover,
body.woocommerce-cart .wc-proceed-to-checkout:hover,
body.woocommerce-checkout .wc-proceed-to-checkout:hover,
body .woocommerce-message .button.wc-forward:hover {
    background-color: #6FC1B1 !important;
    color: #000000 !important;
}

/* ==========================================================================
   Segnalazioni cliente del 28/09
   ========================================================================== */

/* --- Placeholder: nero al 50% (3,95:1) -> #767676 pieno (4,54:1) ----------- */
input::placeholder,
textarea::placeholder,
form ::placeholder { color: #767676; opacity: 1; }
form ::-webkit-input-placeholder { color: #767676; opacity: 1; }
form ::-moz-placeholder          { color: #767676; opacity: 1; }
form :-ms-input-placeholder      { color: #767676; opacity: 1; }

/* --- Bordi dei campi (1.4.11, soglia 3:1): #D5D5D5 era a 1,48:1 -------------
   Si cambia solo il colore: dove il tema non disegna il bordo resta invisibile. */
form input:not([type="submit"]):not([type="button"]):not([type="hidden"]),
form select,
form textarea { border-color: #767676; }
/* casella di spunta disegnata dal tema con uno pseudo-elemento sull'etichetta */
form .gchoice label:before { border-color: #767676 !important; }
/* caselle native del modulo newsletter Formazione: colore di spunta leggibile */
#form_mailup_formazione input[type="checkbox"] { accent-color: #00797A !important; }

/* --- Newsletter: etichette nascoste solo a vista ----------------------------
   Il tema le toglieva con display:none, che le rimuove anche per lo screen
   reader: il campo restava annunciato solo dal placeholder. */
form#form_mailup .gfield > label {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Moduli Gravity Forms: indicazione dei campi obbligatori visibile -------
   Il tema nascondeva "(Obbligatorio)" su tutti i moduli. */
form label .gfield_required {
    display: inline;
    margin-left: 0.25em;
    font-size: 0.85em;
    color: #4A4A4A;
}

/* --- Finestra d'acquisto del corso ---------------------------------------- */
/* titoletti di sezione: #7F8080 a 20px era a 3,96:1.
   Il grigio non viene dal tema ma dal CSS scritto dentro il modulo 8 (plugin per
   il CSS dei moduli), con selettori a ID come #field_8_70 label e #field_8_11 h2:
   per prevalere senza toccare il modulo serve !important. */
.gform_wrapper .gfield--type-form > .gfield_label,
.gform_wrapper .gfield--type-html h2,
#field_8_70 label { color: #4A4A4A !important; }

/* pulsanti "Aggiungi partecipante" e "Applica" (codice promozionale):
   bianco su #6FC1B1 era a 2,11:1. Stessa palette degli altri pulsanti:
   da fermo verde scuro con testo bianco, in hover verde chiaro con testo nero. */
.gform_wrapper .gpnf-add-entry,
.gform_wrapper #gf_coupon_button {
    background-color: #00797A !important;
    color: #ffffff !important;
}
.gform_wrapper .gpnf-add-entry:hover,
.gform_wrapper #gf_coupon_button:hover {
    background-color: #6FC1B1 !important;
    color: #000000 !important;
}

/* --- Audit completo del 29/09 ------------------------------------------------ */

/* Formazione, scheda attiva ("Corsi a calendario"): bianco su #6FC1B1 era a 2,11:1.
   Resta il fondo verde chiaro, il testo diventa nero (9,9:1), come negli hover dei pulsanti. */
.tab button.active { color: #000000; }

/* Soluzioni, finestra "Sei un operatore sanitario?": SI / NO in #6FC1B1 su bianco
   erano a 2,11:1, anche il bordo. Verde scuro da fermo, in hover fondo verde scuro
   e testo bianco (5,23:1). Le classi Tailwind sono sul markup: serve !important. */
#popup-btn-yes, #popup-btn-no {
    border-color: #00797A !important;
    color: #00797A !important;
}
#popup-btn-yes:hover, #popup-btn-no:hover {
    background-color: #00797A !important;
    color: #ffffff !important;
}

/* Intestazione delle finestre partecipanti (Nested Forms sul live, finestra
   WooCommerce sullo staging): titolo bianco su #6FC1B1 a 2,11:1. Il colore viene dal
   "CSS aggiuntivo" del Customizer, con !important: serve un selettore piu' specifico.
   Pulsante "Annulla": bianco su #7F8080 a 3,96:1, portato a #666666 (5,74:1). */
body .gpnf-modal-header { background-color: #00797A !important; }
body .gpnf-btn-cancel,
body .gpnf-btn-cancel-mobile { background-color: #666666 !important; }

/* Campo "Costo" nel modulo partecipanti: non modificabile, reso con opacita' 0,4
   (etichetta e importo a 2,84:1). Ma e' il prezzo, va letto: testo pieno e fondo
   grigio per indicare che non si modifica. */
.gform_wrapper .gfield.disabled { opacity: 1 !important; }
.gform_wrapper .gfield.disabled input { background-color: #F2F2F2; color: #4A4A4A; }

/* --- Flusso d'acquisto WooCommerce (staging) ------------------------------- */

/* Finestra partecipanti: bordi dei campi #D8D8D8 a 1,4:1 (serve 3:1).
   Campo non valido: bordo rosso piu' spesso, oltre ad aria-invalid. */
#zhc-course-popup input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#zhc-course-popup select { border-color: #767676; }
#zhc-course-popup [aria-invalid="true"] { border-color: #B00020 !important; border-width: 2px; }

/* Carrello: "Ritorna al catalogo" e "Modifica partecipanti" bianco su #6FC1B1 a 2,11:1.
   Stessa palette degli altri pulsanti. */
#noset, #modpartecipanti {
    background-color: #00797A !important;
    color: #ffffff !important;
}
#noset:hover, #modpartecipanti:hover {
    background-color: #6FC1B1 !important;
    color: #000000 !important;
}
/* "IVA esclusa" a opacita' 0,7: 2,64:1 */
/* woocommerce.css e' caricato dopo a11y.css: serve un selettore piu' specifico del suo */
body.woocommerce-cart .cart-collaterals .cart_totals table small.opacity-70 { opacity: 1; color: #4A4A4A; }

/* Checkout: riquadro del pagamento lilla (#DCD7E2, colore di default WooCommerce):
   i testi di Stripe (#0570DE) e il link di prova erano sotto 4,5:1. Su bianco passano. */
body.woocommerce-checkout #payment div.payment_box {
    background-color: #ffffff;
    border: 1px solid #D5D5D5;
}
body.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #D5D5D5; }