/* CSS custom per accessibilità. Qui puoi aggiungere regole per:
- Contrasto elevato
- Modalità notturna
- Filtro luce blu
- Cursore gigante
- Spotlight
- Evidenzia cliccabili
- Nascondi immagini/animazioni
*/

/* Esempio base per spotlight (da completare in JS): */
.wcag-spotlight-overlay {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99998;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
  border-left: none;
  border-right: none;
}

body.wcag-high-contrast {
  background: #fff !important;
  color: #000 !important;
}
body.wcag-high-contrast a, body.wcag-high-contrast button, body.wcag-high-contrast input, body.wcag-high-contrast select {
  color: #000 !important;
  background: #fff !important;
  border: 2px solid #000 !important;
}

/* Contrasto elevato: titoli */
body.wcag-high-contrast h1,
body.wcag-high-contrast h2,
body.wcag-high-contrast h3,
body.wcag-high-contrast h4,
body.wcag-high-contrast h5,
body.wcag-high-contrast h6 {
  color: #000 !important;
  background: #fff !important;
}

body.wcag-dark-mode {
  background: #181818 !important;
  color: #eee !important;
}
body.wcag-dark-mode a, body.wcag-dark-mode button, body.wcag-dark-mode input, body.wcag-dark-mode select {
  color: #fff !important;
  background: #222 !important;
  border: 1px solid #444 !important;
}

/* Modalità notturna: titoli */
body.wcag-dark-mode h1,
body.wcag-dark-mode h2,
body.wcag-dark-mode h3,
body.wcag-dark-mode h4,
body.wcag-dark-mode h5,
body.wcag-dark-mode h6 {
  color: #eee !important;
  background: #181818 !important;
}

body.wcag-hide-images img, body.wcag-hide-images picture, body.wcag-hide-images figure {
  display: none !important;
}

body.wcag-hide-animations *, body.wcag-hide-animations *:before, body.wcag-hide-animations *:after {
  animation: none !important;
  transition: none !important;
}

body.wcag-highlight-clickable a, body.wcag-highlight-clickable button, body.wcag-highlight-clickable input[type=submit], body.wcag-highlight-clickable [role=button] {
  outline: 3px solid #f00 !important;
  box-shadow: 0 0 0 2px #f00 !important;
}

/* Spotlight overlay verticale con linee rosse subito sopra e sotto */
.wcag-spotlight-overlay {
  pointer-events: none;
  position: fixed;
  left: 0; right: 0;
  z-index: 99998;
  height: 100px;
  /* la posizione top viene gestita da JS */
}
.wcag-spotlight-line {
  position: fixed;
  left: 0; right: 0;
  height: 2px;
  background: #f00;
  z-index: 99999;
  pointer-events: none;
}

/* Fix universale: il filtro daltonismo viene applicato solo al contenuto, MAI agli elementi di accessibilità */
#wcag-accessibility-root {
  position: relative !important;
  z-index: 1;
}
body.wcag-protanopia #wcag-accessibility-root,
body.wcag-deuteranopia #wcag-accessibility-root,
body.wcag-tritanopia #wcag-accessibility-root {
  filter: url('#protanopia');
  /* fallback: */
  filter: grayscale(0.5) contrast(1.2) sepia(0.7) hue-rotate(-30deg);
}
body.wcag-deuteranopia #wcag-accessibility-root {
  filter: url('#deuteranopia');
  filter: grayscale(0.5) contrast(1.2) sepia(0.7) hue-rotate(30deg);
}
body.wcag-tritanopia #wcag-accessibility-root {
  filter: url('#tritanopia');
  filter: grayscale(0.5) contrast(1.2) sepia(0.7) hue-rotate(90deg);
}

/* Disabilita il filtro su bottone e offcanvas */
#wcag-accessibility-btn,
#wcag-accessibility-offcanvas,
.uk-offcanvas-bar {
  filter: none !important;
  position: fixed !important;
  z-index: 99999 !important;
}

/* Fix: mantieni posizione fixed e z-index per bottone e offcanvas anche con filtri daltonismo attivi */
body.wcag-protanopia #wcag-accessibility-btn,
body.wcag-deuteranopia #wcag-accessibility-btn,
body.wcag-tritanopia #wcag-accessibility-btn {
  position: fixed !important;
  bottom: 115px !important;
  right: 30px !important;
  z-index: 99999 !important;
  filter: none !important;
}
body.wcag-protanopia #wcag-accessibility-offcanvas,
body.wcag-deuteranopia #wcag-accessibility-offcanvas,
body.wcag-tritanopia #wcag-accessibility-offcanvas {
  position: fixed !important;
  z-index: 99998 !important;
  filter: none !important;
}
body.wcag-protanopia .uk-offcanvas-bar,
body.wcag-deuteranopia .uk-offcanvas-bar,
body.wcag-tritanopia .uk-offcanvas-bar {
  position: fixed !important;
  filter: none !important;
}

/* Disabilita il filtro solo sugli elementi di accessibilità per evitare che il filter del body li renda non fixed */
#wcag-accessibility-btn, #wcag-accessibility-offcanvas, .uk-offcanvas-bar {
  filter: none !important;
}

/* Contrasto elevato: override su sezioni UIkit e navbar */
body.wcag-high-contrast .uk-section,
body.wcag-high-contrast .uk-section-default,
body.wcag-high-contrast .uk-section-primary,
body.wcag-high-contrast .uk-section-secondary,
body.wcag-high-contrast .uk-navbar,
body.wcag-high-contrast .uk-navbar-container {
  background: #fff !important;
  color: #000 !important;
}
body.wcag-high-contrast .uk-navbar-nav > li > a,
body.wcag-high-contrast .uk-navbar-item,
body.wcag-high-contrast .uk-navbar-toggle {
  color: #000 !important;
}
body.wcag-high-contrast .uk-navbar-nav > li.uk-active > a,
body.wcag-high-contrast .uk-navbar-nav > li > a:focus,
body.wcag-high-contrast .uk-navbar-nav > li > a:hover {
  color: #000 !important;
  background: #fff !important;
}

/* Modalità notturna: override su sezioni UIkit e navbar */
body.wcag-dark-mode .uk-section,
body.wcag-dark-mode .uk-section-default,
body.wcag-dark-mode .uk-section-primary,
body.wcag-dark-mode .uk-section-secondary,
body.wcag-dark-mode .uk-navbar,
body.wcag-dark-mode .uk-navbar-container {
  background: #181818 !important;
  color: #eee !important;
}
body.wcag-dark-mode .uk-navbar-nav > li > a,
body.wcag-dark-mode .uk-navbar-item,
body.wcag-dark-mode .uk-navbar-toggle {
  color: #eee !important;
}
body.wcag-dark-mode .uk-navbar-nav > li.uk-active > a,
body.wcag-dark-mode .uk-navbar-nav > li > a:focus,
body.wcag-dark-mode .uk-navbar-nav > li > a:hover {
  color: #fff !important;
  background: #222 !important;
}

/* Migliora contrasto anche su pulsanti e input in modalità accessibilità */
body.wcag-high-contrast button,
body.wcag-high-contrast input,
body.wcag-high-contrast textarea,
body.wcag-high-contrast select {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
body.wcag-dark-mode button,
body.wcag-dark-mode input,
body.wcag-dark-mode textarea,
body.wcag-dark-mode select {
  background: #222 !important;
  color: #eee !important;
  border: 1px solid #444 !important;
}

/* Fix: quando si seleziona "Nessuno" daltonismo, ripristina il filter:none solo su bottone e offcanvas */
body:not(.wcag-protanopia):not(.wcag-deuteranopia):not(.wcag-tritanopia) #wcag-accessibility-btn,
body:not(.wcag-protanopia):not(.wcag-deuteranopia):not(.wcag-tritanopia) #wcag-accessibility-offcanvas,
body:not(.wcag-protanopia):not(.wcag-deuteranopia):not(.wcag-tritanopia) .uk-offcanvas-bar {
  filter: none !important;
  position: fixed !important;
  z-index: 99999 !important;
}

/* Fix definitivo: escludi SEMPRE il filtro daltonismo da bottone e offcanvas accessibilità */
#wcag-accessibility-btn,
#wcag-accessibility-offcanvas,
.uk-offcanvas-bar {
  filter: none !important;
  position: fixed !important;
  z-index: 99999 !important;
}

body.wcag-protanopia #wcag-accessibility-btn,
body.wcag-deuteranopia #wcag-accessibility-btn,
body.wcag-tritanopia #wcag-accessibility-btn,
body.wcag-protanopia #wcag-accessibility-offcanvas,
body.wcag-deuteranopia #wcag-accessibility-offcanvas,
body.wcag-tritanopia #wcag-accessibility-offcanvas,
body.wcag-protanopia .uk-offcanvas-bar,
body.wcag-deuteranopia .uk-offcanvas-bar,
body.wcag-tritanopia .uk-offcanvas-bar {
  filter: none !important;
  position: fixed !important;
  z-index: 99999 !important;
}

body.wcag-protanopia #wcag-accessibility-btn,
body.wcag-deuteranopia #wcag-accessibility-btn,
body.wcag-tritanopia #wcag-accessibility-btn {
  bottom: 115px !important;
  right: 30px !important;
}

/* Checkbox e radio come pulsanti con icona RemixIcon */
.wcag-access-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  width: 100%;
  min-width: 90px;
  max-width: 160px;
  padding: 0.7em 0.2em 0.5em 0.2em;
  border-radius: 8px;
  border: 2px solid #ccc;
  background: #f7f7f7;
  color: #222;
  font-weight: 500;
  cursor: pointer;
  margin: 0.3em 0.3em 0.3em 0;
  transition: background 0.2s, border 0.2s, color 0.2s;
  text-align: center;
}
.wcag-access-btn .ri {
  font-size: 2em;
  margin: 0 0 0.2em 0;
  display: block;
}
.wcag-access-btn span {
  font-size: 1em;
  margin: 0;
  display: block;
}
.wcag-access-btn input[type="checkbox"],
.wcag-access-btn input[type="radio"] {
  display: none;
}
.wcag-access-btn.active,
.wcag-access-btn input:checked + .ri {
  background: #222;
  color: #fff;
  border-color: #222;
}
.wcag-access-btn input:checked + .ri {
  color: #fff;
}
.wcag-access-btn:hover {
  border-color: #888;
}
.wcag-access-btn input:checked ~ span,
.wcag-access-btn input:checked ~ .ri {
  color: #fff;
}

/* Griglia 2 colonne per i gruppi di pulsanti accessibilità */
.wcag-access-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 1em;
  margin-bottom: 0.5em;
}
.wcag-access-btn {
  min-height: 110px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}

#wcag-accessibility-btn {
  position: fixed !important;
  right: 30px !important;
  bottom: 115px !important;
  z-index: 99999 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #111 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2rem !important;
}

/* Font dislessia: applica OpenDyslexic (o fallback Arial) a tutto il sito quando attivo */
body.wcag-dyslexia-font, body.wcag-dyslexia-font * {
    font-family: 'OpenDyslexic', 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.05em !important;
}
body.wcag-dyslexia-font .ri, body.wcag-dyslexia-font [class^="ri-"] {
    font-family: 'remixicon' !important;
    font-style: normal !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
}