/* ══════════════════════════════════════════════════════════════════
   Strumenti di accessibilità — Farmacia Girardi
   Il pannello sta in basso a sinistra, perché a destra c'è WhatsApp.
   ══════════════════════════════════════════════════════════════════ */

:root{--acc-testo:100%;--acc-riga:1;--acc-lettere:0em}

/* ---------- Preferenze applicate alla pagina ---------- */
html[style*="--acc-testo"] body{font-size:calc(1rem * (var(--acc-testo) / 100))}
body p,body li,body dd,body dt,body figcaption,body blockquote,body td,body th,body label,body summary{
  line-height:calc(1.7 * var(--acc-riga));letter-spacing:var(--acc-lettere)}
body h1,body h2,body h3,body h4,body h5,body h6{letter-spacing:calc(-.02em + var(--acc-lettere))}

html[data-acc-contrasto] body{background:#000;color:#fff}
html[data-acc-contrasto] body :not(.acc-pannello):not(.acc-pannello *):not(.acc-apri):not(.acc-apri *){
  background-color:transparent !important;color:#fff !important;border-color:#fff !important;box-shadow:none !important}
html[data-acc-contrasto] body a:not(.acc-pannello *){color:#FFE14D !important;text-decoration:underline !important}
html[data-acc-contrasto] body svg:not(.acc-pannello *):not(.acc-apri *){color:#fff !important}
html[data-acc-contrasto] body img:not(.acc-pannello *){filter:grayscale(1) contrast(1.15)}

html[data-acc-leggibile] body :not(.acc-pannello):not(.acc-pannello *){
  font-family:Verdana,"Trebuchet MS","DejaVu Sans",Tahoma,sans-serif !important}

html[data-acc-collegamenti] body a:not(.acc-pannello *):not(.acc-apri){
  text-decoration:underline !important;text-underline-offset:3px;outline:2px dashed currentColor;outline-offset:2px}

html[data-acc-titoli] body :is(h1,h2,h3,h4,h5,h6):not(.acc-pannello *){
  outline:2px solid var(--verde,#008068);outline-offset:6px;border-radius:4px}

html[data-acc-immagini] body :is(img,picture,svg:not(.acc-pannello svg):not(.acc-apri svg),video):not(.acc-pannello *){
  visibility:hidden !important}

html[data-acc-animazioni] body *:not(.acc-pannello):not(.acc-pannello *){
  animation:none !important;transition:none !important;scroll-behavior:auto !important}

html[data-acc-allineamento="left"] body :is(p,li,h1,h2,h3,h4,figcaption):not(.acc-pannello *){text-align:left !important}
html[data-acc-allineamento="center"] body :is(p,li,h1,h2,h3,h4,figcaption):not(.acc-pannello *){text-align:center !important}
html[data-acc-allineamento="right"] body :is(p,li,h1,h2,h3,h4,figcaption):not(.acc-pannello *){text-align:right !important}

/* ---------- Maschera di lettura e lente ---------- */
.acc-maschera{position:fixed;inset:0;z-index:95;pointer-events:none;
  background:rgba(12,18,16,.72);
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% var(--acc-mask-top,0px) no-repeat,
               linear-gradient(#000 0 0) 0 var(--acc-mask-bottom,0px)/100% 100% no-repeat;
          mask:linear-gradient(#000 0 0) 0 0/100% var(--acc-mask-top,0px) no-repeat,
               linear-gradient(#000 0 0) 0 var(--acc-mask-bottom,0px)/100% 100% no-repeat}
.acc-lente{position:fixed;z-index:96;pointer-events:none;max-width:min(520px,90vw);
  padding:14px 18px;background:#fff;color:#1A1A1C;border:2px solid var(--verde,#008068);
  border-radius:14px;box-shadow:0 20px 50px -18px rgba(0,0,0,.55);
  font-size:1.6rem;line-height:1.35;font-weight:600}

/* ---------- Pulsante di apertura ---------- */
.acc-apri{position:fixed;left:24px;bottom:24px;z-index:70;width:58px;height:58px;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:0;border-radius:50%;background:var(--verde,#008068);color:#fff;cursor:pointer;
  box-shadow:0 16px 36px -16px rgba(0,128,104,.85);transition:transform .2s ease,background .2s ease}
.acc-apri:hover{transform:scale(1.07);background:var(--verde-scuro,#006552)}
.acc-apri:focus-visible{outline:3px solid #FFE14D;outline-offset:3px}

/* ---------- Pannello ---------- */
.acc-pannello{position:fixed;left:24px;bottom:94px;z-index:120;width:min(370px,calc(100vw - 32px));
  max-height:min(76vh,680px);overflow-y:auto;background:#fff;color:#1A1A1C;
  border:1px solid rgba(0,0,0,.1);border-radius:20px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.45);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.45;
  text-align:left !important}
.acc-pannello[hidden]{display:none}
.acc-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid rgba(0,0,0,.09);position:sticky;top:0;background:#fff;border-radius:20px 20px 0 0}
.acc-pannello h2{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:#0F3D33}
.acc-chiudi{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border:1px solid rgba(0,0,0,.12);border-radius:50%;background:#fff;color:#1A1A1C;cursor:pointer}
.acc-chiudi:hover{background:#EDF5F2}
.acc-corpo{padding:16px 20px 22px}

.acc-livello,.acc-allineamento{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.acc-allineamento{flex-direction:column;align-items:flex-start}
.acc-etichetta{font-weight:600;color:#26262A}
.acc-comandi{display:flex;align-items:center;gap:8px}
.acc-allineamento .acc-comandi{width:100%}
.acc-comandi button{min-width:38px;height:38px;padding:0 12px;border:1px solid rgba(0,0,0,.14);
  border-radius:10px;background:#fff;color:#1A1A1C;font-size:1rem;font-weight:700;cursor:pointer;
  transition:background .18s ease,border-color .18s ease}
.acc-allineamento .acc-comandi button{flex:1;font-size:.85rem;font-weight:600}
.acc-comandi button:hover{background:#EDF5F2;border-color:var(--verde,#008068)}
.acc-comandi button:focus-visible,.acc-opzione:focus-visible,.acc-ripristina:focus-visible,
.acc-chiudi:focus-visible{outline:3px solid var(--verde,#008068);outline-offset:2px}
.acc-comandi button[aria-pressed="true"]{background:var(--verde,#008068);border-color:var(--verde,#008068);color:#fff}
.acc-valore{min-width:56px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;color:#0F3D33}

.acc-interruttori{display:grid;gap:8px;margin:16px 0}
.acc-opzione{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;
  border:1px solid rgba(0,0,0,.12);border-radius:12px;background:#fff;cursor:pointer;text-align:left}
.acc-opzione:hover{background:#F6F9F8}
.acc-spia{flex:none;width:40px;height:23px;border-radius:100px;background:#D4D4D0;position:relative;transition:background .2s ease}
.acc-spia::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease}
.acc-opzione[aria-pressed="true"] .acc-spia{background:var(--verde,#008068)}
.acc-opzione[aria-pressed="true"] .acc-spia::after{transform:translateX(17px)}
.acc-opzione-testo{display:flex;flex-direction:column;gap:1px;min-width:0}
.acc-opzione-testo strong{font-size:.95rem;font-weight:600;color:#26262A}
.acc-opzione-testo small{font-size:.8rem;color:#5A5A5E}

.acc-ripristina{width:100%;margin-top:6px;padding:13px;border:0;border-radius:12px;
  background:#0F3D33;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer}
.acc-ripristina:hover{background:#006552}
.acc-nota{margin:14px 0 0;font-size:.8rem;line-height:1.5;color:#5A5A5E}
.acc-nota a{color:#006552;text-decoration:underline}

.sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width:560px){
  .acc-apri{left:16px;bottom:16px;width:52px;height:52px}
  .acc-pannello{left:8px;right:8px;bottom:78px;width:auto;max-height:72vh}
}
@media print{.acc-apri,.acc-pannello,.acc-maschera,.acc-lente{display:none !important}}