/* ==========================================================================
   Migliore Amico — pannello "Accessibilità" e modalità di lettura
   Nessuna dipendenza: funziona anche nelle pagine senza Bootstrap.
   ========================================================================== */

/* ---------- Salta al contenuto ---------- */
.a11y-skip {
  position: fixed; left: 12px; top: -80px; z-index: 2147483001;
  background: #fff; color: #1E3A8A; padding: 10px 16px; border-radius: 10px;
  font: 600 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  border: 3px solid #1E40AF; text-decoration: underline;
}
.a11y-skip:focus { top: 12px; outline: none; }

/* ---------- Pulsante ---------- */
.a11y-fab {
  position: fixed; left: 16px; bottom: 16px; z-index: 2147483000;
  width: 52px; height: 52px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1E40AF; color: #fff; border: 3px solid #fff; cursor: pointer;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .35);
  transition: transform .15s ease, bottom .2s ease;
}
.a11y-fab.a11y-right { left: auto; right: 16px; }
.a11y-fab svg { width: 30px; height: 30px; }
.a11y-fab:hover { transform: scale(1.06); }
.a11y-fab:focus-visible { outline: 3px solid #1E40AF; outline-offset: 3px; }
.a11y-fab.a11y-on::after { /* pallino: ci sono preferenze attive */
  content: ""; position: absolute; top: -2px; right: -2px; width: 14px; height: 14px;
  border-radius: 50%; background: #16A34A; border: 2px solid #fff;
}
@media print { .a11y-fab, .a11y-panel, .a11y-skip { display: none !important; } }

/* ---------- Pannello ---------- */
.a11y-panel {
  position: fixed; left: 16px; bottom: 80px; z-index: 2147483000;
  width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto;
  background: #fff; color: #1f2328; border-radius: 18px; padding: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .35); border: 1px solid #d0d7de;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: left; letter-spacing: normal; word-spacing: normal;
}
.a11y-panel.a11y-right { left: auto; right: 16px; }
.a11y-panel[hidden] { display: none !important; }
.a11y-panel *, .a11y-panel *::before, .a11y-panel *::after { box-sizing: border-box; }
.a11y-panel .a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.a11y-panel h2 { font: 700 20px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; color: #1f2328; }
.a11y-panel .a11y-x {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: #f1f3f5; color: #1f2328;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.a11y-panel .a11y-x svg { width: 22px; height: 22px; }
.a11y-panel .a11y-intro { margin: 0 0 14px; font-size: 14.5px; color: #4b5563; }
.a11y-panel .a11y-lbl { margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.a11y-panel .a11y-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.a11y-panel .a11y-size {
  min-height: 64px; padding: 6px 4px; border-radius: 12px; border: 2px solid #d0d7de; background: #fff; color: #1f2328;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 600 12.5px/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; text-align: center;
}
.a11y-panel .a11y-aa { font-weight: 700; line-height: 1; }
.a11y-panel .a11y-toggles { display: grid; grid-template-columns: 1fr; gap: 8px; }
.a11y-panel .a11y-tog {
  display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  width: 100%; min-height: 56px; padding: 10px 12px; border-radius: 12px; border: 2px solid #d0d7de; background: #fff; color: #1f2328;
  text-align: left; cursor: pointer; font: inherit;
}
.a11y-panel .a11y-tog svg { grid-row: 1 / span 2; width: 26px; height: 26px; color: #1E40AF; }
.a11y-panel .a11y-tt { font-weight: 600; font-size: 15px; }
.a11y-panel .a11y-td { grid-column: 2; font-size: 13px; color: #4b5563; line-height: 1.3; }
.a11y-panel .a11y-state { grid-row: 1 / span 2; grid-column: 3; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: #eef1f5; color: #4b5563; }
.a11y-panel [aria-pressed="true"] { border-color: #1E40AF; background: #EEF2FF; }
.a11y-panel .a11y-tog[aria-pressed="true"] .a11y-state { background: #1E40AF; color: #fff; }
.a11y-panel button:hover { border-color: #1E40AF; }
.a11y-panel button:focus-visible, .a11y-panel a:focus-visible { outline: 3px solid #1E40AF; outline-offset: 2px; }
.a11y-panel .a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.a11y-panel .a11y-reset {
  min-height: 44px; padding: 8px 16px; border-radius: 99px; border: 2px solid #1E40AF; background: #fff; color: #1E40AF;
  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
}
.a11y-panel .a11y-foot a { color: #1E40AF; text-decoration: underline; font-size: 14.5px; font-weight: 600; padding: 10px 0; }
.a11y-panel .a11y-note { margin: 10px 0 0; font-size: 12.5px; color: #4b5563; }

/* ==========================================================================
   Modalità (classi su <html>, messe già nel <head>)
   ========================================================================== */

/* Testo più grande: zoom dell'intera pagina, come lo zoom del browser.
   La pagina si ridispone alla nuova larghezza, senza scorrimento orizzontale. */
html.a11y-size-1 { zoom: 1.15; }
html.a11y-size-2 { zoom: 1.3; }
html.a11y-size-3 { zoom: 1.5; }

/* Con lo zoom la larghezza disponibile si riduce, ma le regole per schermi
   grandi restano: i contenitori non devono superare la pagina, e le parole
   lunghe (indirizzi, email) possono andare a capo invece di uscire dallo schermo. */
html[class*="a11y-size-"] .container, html[class*="a11y-size-"] .container-fluid,
html[class*="a11y-size-"] .container-sm, html[class*="a11y-size-"] .container-md,
html[class*="a11y-size-"] .container-lg, html[class*="a11y-size-"] .container-xl,
html[class*="a11y-size-"] .container-xxl { max-width: 100% !important; }
html[class*="a11y-size-"] body, html.a11y-spacing body { overflow-wrap: anywhere; }
html[class*="a11y-size-"] .row, html.a11y-spacing .row { --bs-gutter-x: 1.5rem; }
html[class*="a11y-size-"] .pricing-price-suffix, html[class*="a11y-size-"] .badge-version,
html.a11y-spacing .pricing-price-suffix, html.a11y-spacing .badge-version { white-space: normal !important; }
html[class*="a11y-size-"] table, html.a11y-spacing table { max-width: 100%; }

/* App su schermi larghi: il contenuto è centrato con un calcolo su 100vw, che
   lo zoom non ridimensiona. Con il testo ingrandito si affianca al menu. */
@media (min-width: 992px) {
  html[class*="a11y-size-"] .app-main, html[class*="a11y-size-"] .app-main.container-fluid {
    width: auto !important; max-width: none !important; margin-left: calc(var(--side-w, 0px) + 24px) !important; margin-right: 24px !important;
  }
}

/* Link sottolineati */
html.a11y-links a:not(.a11y-skip) { text-decoration: underline !important; text-underline-offset: .18em; }

/* Più spazio nel testo: i valori di prova del criterio WCAG 1.4.12 */
html.a11y-spacing body *:not(.a11y-panel):not(.a11y-panel *):not(.bi):not(svg):not(svg *) {
  line-height: 1.6 !important; letter-spacing: .12em !important; word-spacing: .16em !important;
}
html.a11y-spacing body p:not(.a11y-panel *) { margin-bottom: 1.4em !important; }

/* Carattere semplice (le icone conservano il proprio carattere) */
html.a11y-font body, html.a11y-font body *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(svg):not(svg *) {
  font-family: Verdana, Tahoma, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-style: normal !important;
}

/* Animazioni ferme */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* Stato attivo ben visibile */
html.a11y-focus *:focus, html.a11y-focus *:focus-visible {
  outline: 3px solid #1E40AF !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #fff, 0 0 0 9px #1E40AF !important;
}

/* Contrasto elevato: nero su bianco, link blu sottolineati, bordi netti.
   Immagini, video, grafici e il pannello restano come sono. */
html.a11y-contrast body,
html.a11y-contrast body *:not(img):not(video):not(canvas):not(svg):not(svg *):not(iframe):not(.a11y-fab):not(.a11y-fab *):not(.a11y-panel):not(.a11y-panel *):not(.btn-close):not(.form-select):not(.form-check-input) {
  background-color: #fff !important; background-image: none !important;
  color: #000 !important; border-color: #000 !important;
  text-shadow: none !important; box-shadow: none !important; opacity: 1;
}
html.a11y-contrast body a:not(.a11y-panel *), html.a11y-contrast body a:not(.a11y-panel *) * { color: #0033CC !important; text-decoration: underline !important; }
html.a11y-contrast body button:not(.a11y-panel *):not(.a11y-fab),
html.a11y-contrast body .btn, html.a11y-contrast body input, html.a11y-contrast body select, html.a11y-contrast body textarea,
html.a11y-contrast body [role="button"]:not(.a11y-panel *) { border: 2px solid #000 !important; }
html.a11y-contrast body ::placeholder { color: #444 !important; opacity: 1 !important; }
/* Elementi disegnati con un'immagine di sfondo (X di chiusura, freccia dei menu, spunta):
   l'immagine resta, cambiano solo colori e bordi */
html.a11y-contrast .btn-close { opacity: 1 !important; border: 2px solid #000 !important; border-radius: 8px; }
html.a11y-contrast .btn-close.btn-close-white { filter: none !important; background-color: #fff !important; }
html.a11y-contrast .form-select { background-color: #fff !important; color: #000 !important; border: 2px solid #000 !important; }
html.a11y-contrast .form-check-input { background-color: #fff !important; border: 2px solid #000 !important; }
html.a11y-contrast .form-check-input:checked { background-color: #000 !important; border-color: #000 !important; }
html.a11y-contrast body svg:not(.a11y-fab svg):not(.a11y-panel svg) { color: #000; }
html.a11y-contrast .a11y-fab { background: #000; }

/* Chi ha chiesto meno movimento nel sistema */
@media (prefers-reduced-motion: reduce) {
  .a11y-fab { transition: none; }
}