/* ============================================================================
   accessibility.css — override di accessibilità per myPrivacy / myPolicy
   Riferimento: EAA (D.Lgs. 82/2022) → EN 301 549 v3.2.1 cl. 9 → WCAG 2.1 AA
   Include anche i (pochi) criteri WCAG 2.2 a costo zero.

   COME INCLUDERLO: dopo theme.css (myPrivacy) / theme_v0.css (myPolicy),
   prima dell'eventuale <style> di personalizzazione cliente.
   Ogni blocco riporta l'ID dell'intervento del "Piano di adeguamento".
   I colori sono stati verificati con la formula di luminanza WCAG 2.1:
     #313131 su #fafafa = 12,46:1 · #767676 su #fafafa = 4,35:1 (3,91:1 su #eee)
     #666666 su #fafafa = 5,50:1  · #7a1f10 su #f9d6d0 = 7,66:1
     #b3261e su #fafafa = 6,26:1  · #333333 su #eeeeee = 10,89:1
     #8a8a8a su #ffffff = 3,45:1  (bordo delle bandiere)
     STEP 4: #5c4300 su #fff3cd = 8,39:1 (.alert-warning, sfondo presunto del tema)
             #ffffff su #313131 = 13,01:1 (opzione evidenziata Select2) · #000000 su #fafafa = 20,12:1
   STEP 3 (21/09/2026): un solo colore di accento, il grigio scuro #313131 del
   testo (il blu #1f4e79 non appartiene al template); anello di focus 2 px;
   lingua attiva sottolineata; "Esci" con il solo testo scurito; cerchi delle
   opzioni #767676 (lo stesso grigio dei controlli nativi di Chrome).
   ============================================================================ */

/* --------------------------------------------------------------------------
   CSS-01 · Focus visibile (WCAG 2.4.7 AA, 1.4.11 AA)
   Il tema azzera l'outline su a, .btn (!important), .input-bordered e Select2.
   Si usa :focus-visible così il mouse non mostra l'anello; specificità e
   ordine battono ".btn:focus{outline:none!important}" di style.css.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn:focus-visible:hover,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
iframe:focus-visible,
[tabindex]:focus-visible,
.select2-container .select2-selection:focus-visible,
.select2-container--focus .select2-selection {
  outline: 2px solid #313131 !important;
  outline-offset: 2px !important;   /* i 2 px di distacco lasciano un bordo chiaro fra anello ed elemento: leggibile anche sui pulsanti scuri */
  box-shadow: none !important;
  transition: none !important;      /* il tema usa "transition: all": l'anello deve comparire subito, non dopo 0,4-0,5 s */
}

/* CSS-02 · Focus sulle checkbox/radio personalizzate: l'input nativo è
   invisibile (1px, opacity 0), l'anello va disegnato sullo pseudo-elemento
   della label che rappresenta il controllo. */
.input-checkbox:focus-visible ~ label:not(.error)::before,
.input-radio:focus-visible ~ label:not(.error)::before {
  outline: 2px solid #313131;
  outline-offset: 2px;
}

/* CSS-03 · Elementi focalizzati da script.
   - riepilogo errori: nessun anello (è già evidenziato dal bordo rosso e non è
     raggiungibile con Tab; il focus serve solo all'annuncio dello screen reader);
   - main dopo lo skip link e titolo del documento in myPolicy: anello solo con
     la tastiera (:focus-visible), mai dopo un clic del mouse. */
.alert[tabindex="-1"]:focus,
.alert[tabindex="-1"]:focus-visible {
  outline: none !important; /* batte la regola generale [tabindex]:focus-visible di CSS-01 */
}
main[tabindex="-1"]:focus-visible,
#data-name[tabindex="-1"]:focus-visible {
  outline: 2px solid #313131;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   CSS-04 · Contrasto dei bordi dei campi (WCAG 1.4.11 AA) — attuale 1,30:1
   -------------------------------------------------------------------------- */
.input-bordered,
.select2-container.select-bordered .select2-selection {
  border-color: #767676;
}
.input-bordered:focus,
.input-bordered:active {
  border-color: #313131;
}

/* CSS-05 · Campi in errore: bordo rosso a contrasto ≥3:1 (attuale #d98080 = 2,74:1)
   + spessore 2px così l'errore non è affidato al solo colore (1.4.1) */
.error-field .input-bordered,
.error-field .select2-container.select-bordered .select2-selection {
  border: 2px solid #b3261e;
}

/* CSS-06 · Checkbox e radio personalizzati: cerchio/quadrato non selezionato
   (attuale #dbe4f7 = 1,22:1) → #767676 = 4,35:1, lo stesso grigio dei
   controlli nativi del browser */
.input-checkbox ~ label:not(.error)::before,
.input-radio ~ label:not(.error)::before {
  border-color: #767676;
}

/* --------------------------------------------------------------------------
   CSS-07 · Pulsante "Esci" (.btn-light): testo #777 su #fafafa = 4,29:1 (<4,5).
   Aspetto originale (sfondo #fafafa, nessun bordo): cambia solo il colore del
   testo, #666666 = 5,50:1. Il testo da solo identifica il pulsante, quindi
   non serve un bordo a contrasto (Understanding WCAG 1.4.11). style.css e
   theme.css si contendono il colore con !important nei vari stati: si fissano
   esplicitamente anche hover/focus.
   -------------------------------------------------------------------------- */
.btn-light,
.btn-light:not(:hover),
.btn-light:not(:focus) {
  color: #666666 !important;
  background-color: #fafafa !important;
  border-color: transparent !important; /* nessun bordo, come in origine (#fafafa su #fafafa) */
}
.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light:focus:active {
  color: #333333 !important;
  background-color: #eeeeee !important;
  border-color: #eeeeee !important;
}

/* CSS-08 · Pulsante "ACCETTO" nel modale: stato hover (style.css forza #fff
   su fondo chiaro) — il tema lo gestisce già con !important, si ribadisce.
   Aspetto originale (nessun bordo), come per "Esci". */
.btn-policyaccept,
.btn-policyaccept:hover,
.btn-policyaccept:focus {
  color: #000000 !important;
}

/* --------------------------------------------------------------------------
   CSS-09 · Messaggi di errore (WCAG 1.4.3 AA)
   .alert-danger: #e6604a su #f9d6d0 = 2,54:1 → #7a1f10 = 7,66:1
   .file-error-message: #ff0000 su #fafafa = 3,83:1 → #b3261e = 6,26:1
   -------------------------------------------------------------------------- */
.alert-danger,
.alert-danger a {
  color: #7a1f10;
  border-left: 4px solid #b3261e; /* segno non cromatico */
}
.file-error-message {
  color: #b3261e;
  font-weight: 500;
}
.alert-warning {
  color: #5c4300;
}

/* --------------------------------------------------------------------------
   CSS-10 · Selettore lingua a bandiere (WCAG 1.4.1 A, 1.4.11 AA, 2.5.8 AA*)
   Oggi la lingua attiva è indicata solo dall'opacità (0,3 vs 1).
   Bandiere sempre a piena opacità; la lingua attiva è sottolineata (barra
   grigio scuro sotto la bandiera, come una scheda attiva); area cliccabile
   ≥ 24×24 px (*WCAG 2.2).
   -------------------------------------------------------------------------- */
.one-language-icon,
.one-language-icon-container {
  opacity: 1 !important;
}
.one-language-icon > a,
a.one-language-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 3px 3px 2px 3px;
  border-bottom: 3px solid transparent; /* stesso ingombro per tutte le bandiere: niente salti al cambio lingua */
  border-radius: 0;
}
.one-language-icon.selected > a,
.one-language-icon-container.selected > a.one-language-icon,
.language-nav a[aria-current] {
  border-bottom-color: #313131;
}
.one-language-icon img,
a.one-language-icon img {
  border: 1px solid #8a8a8a; /* le bandiere con bianco (es. inglese) restano percepibili (3,45:1) */
}

/* --------------------------------------------------------------------------
   CSS-11 · Link riconoscibili senza affidarsi al colore (WCAG 1.4.1 A, 3.2.4 AA)
   -------------------------------------------------------------------------- */
.change-email-label,
.privacy-policy-acknowledgment-item a,
.copyright-text a,
.polycy-read-link,
button.polycy-read-link,
.external-link-anchor {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* CSS-12 · Pulsanti "a forma di link" usati al posto degli <a> senza href
   ("(Leggi l'informativa)", ecc.) */
button.polycy-read-link,
button.btn-link-like {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #333333;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   CSS-13 · Skip link (WCAG 2.4.1 A) — markup: <a class="skip-link" href="#main">
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: #313131 !important;
  font-weight: 700;
  text-decoration: underline;
}
/* compare solo con il focus da tastiera (:focus-visible); col mouse non può
   comparire, perché finché è fuori schermo non è né visibile né cliccabile */
.skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
}

/* --------------------------------------------------------------------------
   CSS-14 · Accordion "Lista delle informative visionate":
   da <h6 data-bs-toggle> a <h2><button class="accordion-title">…</button></h2>
   (WCAG 2.1.1 A, 4.1.2 A). Il pulsante eredita l'aspetto del titolo.
   -------------------------------------------------------------------------- */
.accordion-policy h2 {
  margin: 0;
  font-size: inherit;
}
.accordion-policy button.accordion-title {
  position: relative;
  display: block;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.45;
  color: #333333;
  cursor: pointer;
  padding: 0 0 0 30px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   CSS-15 · Pulsante di chiusura dei modali: da <a href="#"> a <button>
   -------------------------------------------------------------------------- */
button.modal-close {
  border: 0;
  cursor: pointer;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   CSS-16 · Select2: opzione evidenziata da tastiera priva di stile
   (WCAG 2.4.7 AA) — il foglio del tema non definisce --highlighted
   -------------------------------------------------------------------------- */
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
  background: #313131 !important;
  color: #ffffff !important;
}
.select2-results__option[aria-selected="true"] {
  font-weight: 700; /* stato selezionato non affidato al solo colore */
}
/* Se si rinuncia a Select2 (consigliato): stile del <select> nativo */
select.input-bordered {
  appearance: auto;
  -webkit-appearance: auto;
  height: auto;      /* CSS-31: con il solo testo ingrandito (Samsung Internet 200%) i 42 px fissi tagliavano il testo */
  min-height: 42px;
  background-color: #ffffff;
  color: #313131;
}

/* --------------------------------------------------------------------------
   CSS-17 · myPolicy: ridistribuzione a 320 px senza dipendere dalla classe
   JS "as-mobile" (WCAG 1.4.10 AA). Replica delle regole .as-mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .mypolicy-list,
  .mypolicy-data,
  .data-name-version,
  .data-language-selector-2-container {
    float: none;
    display: block;
    width: 100%;
    padding-right: 0;
  }
  iframe.iframe-element {
    height: 600px;
  }
}

/* CSS-18 · myPolicy: gerarchia titoli corretta (h4→h2, h6→p) mantenendo
   l'aspetto attuale */
.mypolicy-list h2 {
  font-size: 1.2rem;
}
h2#data-name {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  margin-right: 1.5rem; /* STEP 3: il riquadro di focus del titolo finisce 24 px prima della tendina lingua */
}
#data-version {
  font-size: 0.94rem;
  font-weight: 500;
  color: #313131;
  margin-bottom: 0;
}
/* STEP 3: tendina lingua del documento (select nativo) allineata alla riga del
   titolo: altezza automatica invece dei 42 px dei campi di modulo */
.data-language-selector-2-container select.input-bordered {
  height: auto;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  font-size: 0.94rem;
  line-height: 1.4;
}
.data-language-selector-2-container {
  padding-top: 0.1rem;
}

/* CSS-19 · myPolicy: elenco documenti come <a href> / <button>: aspetto
   invariato, ma focalizzabili; voce attiva marcata anche con sottolineatura.
   vertical-align: top tiene il pallino dell'elenco sulla prima riga quando
   il link va a capo (a 320 px). */
ul.ul-list li a,
ul.ul-list-versions li a,
ul.ul-list-versions li button {
  display: inline-block;
  vertical-align: top;
  padding: 2px 0; /* altezza target ≥ 24 px (WCAG 2.2 · 2.5.8) */
  background: none;
  border: 0;
  font: inherit;
  color: #000000;
  cursor: pointer;
  text-align: left;
}
ul.ul-list-versions li a[aria-current],
ul.ul-list-versions li a.active {
  font-weight: 700;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   CSS-20 · Spaziatura del testo (WCAG 1.4.12 AA): i pulsanti hanno
   white-space:nowrap e potrebbero troncare il testo con spaziature aumentate
   -------------------------------------------------------------------------- */
.btn {
  white-space: normal;
  height: auto;
}

/* CSS-21 · Gruppi di consensi: se si adotta <fieldset>/<legend> (alternativa
   all'approccio ARIA), azzera lo stile di default del browser */
fieldset.purpose-consent {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
fieldset.purpose-consent > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.25rem;
  font-size: inherit;
  font-weight: 700;
  color: #313131;
}

/* CSS-22 · Icone da webfont: niente da fare in CSS (serve aria-hidden nel
   markup). Qui solo la rimozione del corsivo ereditato da <em>. */
em.contact-icon,
em.ti,
em.fas {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   CSS-23 · Riduzione delle animazioni per chi lo richiede (buona pratica,
   WCAG 2.3.3 è AAA)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   CSS-24 · FACOLTATIVO — dimensioni dei caratteri più generose (EAA All. I,
   Sez. III, b) v): "caratteri di dimensioni idonee"). Non è un criterio
   WCAG AA: attivare solo se accettabile l'impatto grafico.
   -------------------------------------------------------------------------- */
/*
.field-label      { font-size: 13px; letter-spacing: 0.1em; }
.btn, .btn-md     { font-size: 13px; }
.consent-detail,
.privacy-policy-acknowledgment-item,
.login-changeemail-container { font-size: 15px; }
.copyright-text-s3 { font-size: 14px; }
*/

/* --------------------------------------------------------------------------
   CSS-25 · Elementi introdotti dalle modifiche ai template PHP (STEP 2):
   etichette visibili nel login, testi di errore/suggerimento per campo,
   liste di definizione per i valori di sola lettura, link "Accessibilità"
   -------------------------------------------------------------------------- */
.ath-intro {
  font-size: 0.94rem;
  margin-bottom: 1.25rem;
}
.field-wrap > .field-label {
  display: block;
  margin-bottom: 0.35rem;
}
.field-error {
  color: #7a1f10;
  font-weight: 500;
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
}
.field-hint {
  font-size: 0.9rem;
  color: #313131;
  margin: 0 0 0.5rem 0;
}
dl.field-item dt {
  font-weight: 700;
}
dl.field-item dd {
  margin-left: 0;
  margin-bottom: 0;
}
.footer-accessibility {
  margin: 0.25rem 0 0 0;
}
.footer-accessibility-link,
.footer-links a {
  text-decoration: underline;
}
button.btn-link-like {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
#mandatory-notice {
  margin: 0.75rem 0 1rem 0;
}

/* --------------------------------------------------------------------------
   CSS-26 · STEP 3 — Popup delle informative: sotto il titolo una riga di
   aiuto e una barra con il link "Apri il documento in una nuova scheda" e il
   pulsante ACCETTO, prima del documento nell'ordine di lettura e di
   tabulazione (WCAG 2.4.3, 2.1.1). In myPolicy lo stesso link sta sopra
   l'iframe del documento.
   -------------------------------------------------------------------------- */
.modal-hint {
  margin: 0 0 0.75rem 0;
  font-size: 0.94rem;
  color: #313131;
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}
.modal-actions .btn,
.modal-actions .btn.btn-block {
  width: auto;
  min-width: 12rem;
}
.modal-actions .a11y-accept-wrap {
  margin-left: auto;
}
a.modal-open-new,
a.document-open-new {
  display: inline-block;
  padding: 2px 0;
  color: #313131 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.document-open-new-container {
  clear: both;
  margin: 0.5rem 0 0.75rem 0;
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   CSS-27 · STEP 3 — Modale di conferma (al posto di window.confirm): stessa
   grafica dei modali delle informative; elenco delle modifiche e due pulsanti
   -------------------------------------------------------------------------- */
#a11y-confirm-modal .modal-body {
  padding: 2.25rem 2rem 1.75rem 2rem;
}
#a11y-confirm-modal h2.title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.a11y-confirm-text {
  margin: 0 0 0.75rem 0;
}
ul.a11y-confirm-list {
  margin: 0 0 0.5rem 0;
  padding-left: 1.25rem;
}
ul.a11y-confirm-list li {
  margin-bottom: 0.25rem;
}
ul.a11y-confirm-list li strong {
  font-weight: 700;
}
.a11y-confirm-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.a11y-confirm-buttons .btn {
  width: auto;
  min-width: 9rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   CSS-30 · Ingrandimento al 200% su telefono (WCAG 1.4.4 / 1.4.10): il tema
   impone .nk-body { min-width: 320px }. Con lo zoom di Chrome Android la
   larghezza utile scende sotto i 320 px e il contenuto sporge a destra; e la
   stessa causa della barra orizzontale di 15 px a 320 px con barra di
   scorrimento classica. Il corpo non ha bisogno di un minimo: il contenuto
   si riorganizza fino alla larghezza reale.
   -------------------------------------------------------------------------- */
.nk-body {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   CSS-32 · Link nei documenti HTML inseriti nella pagina (WCAG 1.4.1, tecnica
   F73): il tema toglie la sottolineatura a tutti i link (a:link, a:visited
   { text-decoration: none }) e nel testo di un documento del cliente il link
   resterebbe distinguibile solo dal colore. Dentro div.iframe-element la
   sottolineatura viene ripristinata; il cliente non deve aggiungere stili.
   -------------------------------------------------------------------------- */
div.iframe-element a,
div.iframe-element a:link,
div.iframe-element a:visited {
  text-decoration: underline;
  text-underline-offset: 2px;
}