/* ============ CSS VARIABLES ============ */
:root {
    --acc-primary-start: #dc6c2f;
    --acc-primary-end: #d43061;
    --acc-gradient: linear-gradient(45deg, var(--acc-primary-start), var(--acc-primary-end));
    --acc-bg-light: #e1e1e1;
    --acc-bg-white: #ffffff;
    --acc-text-dark: #000000;
    --acc-text-light: #ffffff;
    --acc-border-radius: 20px;
    --acc-border-radius-sm: 16px;
    --acc-border-radius-xs: 10px;
    --acc-transition: all 0.3s ease;
    --acc-shadow: 0 2px 6px rgba(0,0,0,0.2);
    --acc-shadow-hover: 0 4px 12px rgba(0,0,0,0.3);
    --zoom-level: 1;
    --acc-zoom-level: 1;
    --acc-font-scale: 1;
    --acc-line-height-scale: 1;
    --acc-base-font-px: 16;
}

/* Stili per keyboard shortcuts help */
#accessibility-panel .keyboard-help {
    color: var(--acc-text-light);
    text-align: center;
}

#accessibility-panel kbd {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: inline-block;
    margin: 0 2px;
}

/* Transizioni smooth solo sul widget */
#accessibility-widget *, .accessibily-widget * {
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}

#accessibility-widget #accessibility-toggle, .accessibily-widget #accessibility-toggle {
    display: flex;
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border: 1px solid #a3a3a3;
    border-radius: var(--acc-border-radius-xs);
    font-size: 3rem !important;
    box-shadow: var(--acc-shadow);
    background-color: var(--acc-bg-white) !important;
    transform: scale(calc(1 / var(--zoom-level, 1)));
    transform-origin: top right;
    cursor: pointer;
    z-index: 10000;
    transition: var(--acc-transition);
}

#accessibility-widget #accessibility-toggle:hover, .accessibily-widget #accessibility-toggle:hover {
    box-shadow: var(--acc-shadow-hover);
    transform: scale(calc(1.05 / var(--zoom-level, 1)));
}

#accessibility-widget #accessibility-toggle:focus, .accessibily-widget #accessibility-toggle:focus {
    outline: 3px solid var(--acc-primary-start);
    outline-offset: 2px;
}

#accessibility-widget #accessibility-panel, .accessibily-widget #accessibility-panel {
    position: fixed;
    box-sizing: border-box;
    bottom: 55px;
    left: 10px;
    height: 80%;
    overflow: hidden;
    max-width: 500px;
    width: 100%;
    color: var(--acc-text-dark) !important;
    background-color: var(--acc-bg-light) !important;
    padding: 0;
    border-radius: var(--acc-border-radius);
    z-index: 9999;
    font-size: 1.6rem !important;
    box-shadow: var(--acc-shadow-hover);
    transform: scale(calc(1 / var(--zoom-level, 1)));
    transform-origin: bottom right;
    font-family: 'work sans', sans-serif !important;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#accessibility-widget #accessibility-panel[style*="display: none"], .accessibily-widget #accessibility-panel[style*="display: none"] {
    opacity: 0;
    pointer-events: none;
}
#accessibility-widget #accessibility-panel > *, .accessibily-widget #accessibility-panel > * {
    font-family: 'work sans', sans-serif !important;
}

#accessibility-widget #accessibility-panel #accessibility-header, .accessibily-widget #accessibility-panel #accessibility-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    background: var(--acc-gradient);
    color: var(--acc-text-light);
    padding: 10px;
    border-radius: var(--acc-border-radius);
    flex-direction: column;
    text-align: center;
    padding-bottom: 4rem;
}

#accessibility-widget #accessibility-panel #accessibility-header .header-buttons-box, .accessibily-widget #accessibility-panel #accessibility-header .header-buttons-box {
    display:flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    gap: 8px;
}

#accessibility-widget #accessibility-panel #accessibility-header #close-accessibility-box, .accessibily-widget #accessibility-panel #accessibility-header #close-accessibility-box {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: flex-end;
}

#accessibility-widget #accessibility-panel #accessibility-header #close-accessibility, .accessibily-widget #accessibility-panel #accessibility-header #close-accessibility {
    background: var(--acc-text-dark);
    border: none;
    color: var(--acc-text-light);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transition: var(--acc-transition);
}

#accessibility-widget #accessibility-panel #accessibility-header #close-accessibility:hover, .accessibily-widget #accessibility-panel #accessibility-header #close-accessibility:hover {
    background: #333;
    transform: rotate(90deg);
}

#accessibility-widget #accessibility-panel #accessibility-header .header-button, .accessibily-widget #accessibility-panel #accessibility-header .header-button {
    display: flex;
    gap: 1rem;
    background: var(--acc-bg-white);
    color: var(--acc-text-dark);
    padding: 10px;
    border-radius: var(--acc-border-radius);
    text-align: center;
    cursor: pointer;
    transition: var(--acc-transition);
}

#accessibility-widget #accessibility-panel #accessibility-header .header-button:hover, .accessibily-widget #accessibility-panel #accessibility-header .header-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#accessibility-widget #accessibility-panel #accessibility-header .header-button:active, .accessibily-widget #accessibility-panel #accessibility-header .header-button:active {
    transform: translateY(0);
}

#accessibility-widget #accessibility-panel .accessibility-body, .accessibily-widget #accessibility-panel .accessibility-body {
    margin-top: -3rem !important;
    width: 90%;
    margin: auto;
    height:100%;
    min-height:100%;
    overflow-y: auto;
    padding-bottom: 150px;
}

#accessibility-widget #accessibility-panel .accessibility-body > div, .accessibily-widget #accessibility-panel .accessibility-body > div {
    background: var(--acc-bg-white);
    margin-bottom: 20px;
    border-radius: 25px;
    padding: 20px;
    transition: var(--acc-transition);
}

#accessibility-widget #accessibility-panel .focus-icon, .accessibily-widget #accessibility-panel .focus-icon {
    display:inline-flex;align-items:center;justify-content:center;
}

#accessibility-widget #accessibility-panel span.acc-widget-title,
#accessibility-widget #accessibility-panel h2.acc-widget-title,
.accessibily-widget #accessibility-panel span.acc-widget-title,
.accessibily-widget #accessibility-panel h2.acc-widget-title {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    color:#fff !important;
    font-size: 24px !important;
    font-weight: 600;
    line-height: 1.2;
}

#accessibility-widget #accessibility-panel .header-button, .accessibily-widget #accessibility-panel .header-button {
    border: none;
    font-size: 16px !important;
    text-decoration: none;
    color: var(--acc-text-dark);
    box-sizing: border-box;
}

/* Checkbox visivamente nascosti ma accessibili a tastiera/SR */
#accessibility-widget .acc-sr-only, .accessibily-widget .acc-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#accessibility-widget #accessibility-panel label:focus-within, .accessibily-widget #accessibility-panel label:focus-within {
    outline: 3px solid var(--acc-primary-start);
    outline-offset: 2px;
}

#accessibility-widget #accessibility-panel span.acc-widget-subtitle, .accessibily-widget #accessibility-panel span.acc-widget-subtitle {
    margin-top: 0;
    color:#000 !important;
    font-size: 19px !important;
    font-weight: normal;
    margin-bottom: 0.7rem !important;
    display: inline-block;
}

#accessibility-panel .accessibility-body > div {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

#accessibility-panel .accessibility-body .grid-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

#accessibility-panel .accessibility-body .grid-content2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

#accessibility-panel .accessibility-body .grid-content > label,
#accessibility-panel .accessibility-body .grid-content2 > label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    background: var(--acc-bg-light);
    padding: 10px;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    border-radius: var(--acc-border-radius-sm);
    height: 110px;
    transition: var(--acc-transition);
    border: 2px solid transparent;
}

#accessibility-panel .accessibility-body .grid-content > label:hover,
#accessibility-panel .accessibility-body .grid-content2 > label:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#accessibility-panel label:has(input[type="checkbox"]:checked) {
    background: var(--acc-gradient);
    border-color: transparent;
    color: var(--acc-text-light);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08) inset;
    transform: scale(1.02);
}

#accessibility-panel label:has(input[type="checkbox"]:checked) > .focus-icon svg path {
    fill: var(--acc-text-light) !important;
    transition: fill 0.3s ease;
}

#accessibility-panel .access-range {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    height: 10px;
    background: var(--acc-bg-white);
    border-radius: var(--acc-border-radius-xs);
    border: 1px solid #b5b1b1;
    transition: var(--acc-transition);
}

#accessibility-panel .access-range:focus {
    outline: 2px solid var(--acc-primary-start);
    outline-offset: 2px;
}

/* Chrome, Edge, Safari */
#accessibility-panel .access-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--acc-gradient);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#accessibility-panel .access-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(220, 108, 47, 0.5);
}

/* Firefox */
#accessibility-panel .access-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--acc-gradient);
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#accessibility-panel .access-range::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(220, 108, 47, 0.5);
}


/* end stili widget accessibilità */

/* Interlinea via CSS var (esclude il widget) */
html.acc-line-scaled body :where(p, li, td, th, dd, dt, blockquote, label, article, section, main, aside, header, footer, nav, div, span, a, h1, h2, h3, h4, h5, h6):not(#accessibility-widget):not(.accessibily-widget):not(#accessibility-widget *):not(.accessibily-widget *) {
    line-height: calc(1.5 * var(--acc-line-height-scale, 1)) !important;
}

/* Zoom Firefox fallback: scale figli diretti del body, widget escluso */
@supports not (zoom: 1) {
    html.page-zoomed body > *:not(#accessibility-widget):not(.accessibily-widget) {
        transform: scale(var(--zoom-level, 1));
        transform-origin: top left;
        width: calc(100% / var(--zoom-level, 1));
    }
}

/* Alto contrasto: meno aggressivo — esclude media e widget */
html.high-contrast body {
    background-color: #000 !important;
    color: #fff !important;
}

html.high-contrast body *:not(#accessibility-widget):not(.accessibily-widget):not(#accessibility-widget *):not(.accessibily-widget *):not(img):not(svg):not(video):not(iframe):not(canvas):not(picture):not(path):not(g):not(circle):not(rect):not(polygon):not(line):not(polyline):not(ellipse):not(use) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.high-contrast a:not(#accessibility-widget a):not(.accessibily-widget a) {
    color: #0ff !important;
}

html.high-contrast button:not(#accessibility-toggle):not(#accessibility-panel button) {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* Grayscale sul contenuto (non backdrop-filter), widget escluso */
html.grayscale:not(.inverse) body > *:not(#accessibility-widget):not(.accessibily-widget) {
    filter: grayscale(1);
}

/* Invert sul contenuto; media re-invertiti per restare naturali */
html.inverse:not(.grayscale) body > *:not(#accessibility-widget):not(.accessibily-widget) {
    filter: invert(1) hue-rotate(180deg);
}

html.grayscale.inverse body > *:not(#accessibility-widget):not(.accessibily-widget) {
    filter: grayscale(1) invert(1) hue-rotate(180deg);
}

html.inverse body > *:not(#accessibility-widget):not(.accessibily-widget) :is(img, video, picture, iframe) {
    filter: invert(1) hue-rotate(180deg);
}

body.focus-visible button:focus,
body.focus-visible input:focus,
body.focus-visible select:focus,
body.focus-visible textarea:focus,
body.focus-visible a:focus,
body.focus-visible a:focus img {
    outline: none !important;

    box-shadow: 0 0 6px 3px #ffff00, 0 0 2px #333 inset !important;
    border: 2px solid #000 !important;
    position: relative;
    z-index: 10000;
}

body button:focus,
body input:focus,
body select:focus,
body textarea:focus,
body a:focus,
body a:focus img {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    border-radius: 4px;
    z-index: 1000;
}

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

.hover-highlight :hover:not(#accessibility-panel):not(#accessibility-panel *):not(#accessibility-toggle):not(#accessibility-toggle *) {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--acc-primary-start) !important;
    border-radius: 3px;
    position: relative;
    transition: box-shadow 0.2s ease;
}

/* Overflow quando la pagina è zoomata (Firefox scale) */
body.page-zoomed {
    overflow-x: auto;
}

body.big-cursor {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0,0 L0,40 L10,30 L20,48 L24,46 L14,28 L26,28 Z" fill="black" stroke="black" stroke-width="2"/></svg>') 0 0, auto !important;
}

body.big-cursor a,
body.big-cursor button,
body.big-cursor [role="button"],
body.big-cursor input[type="submit"],
body.big-cursor input[type="button"] {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="45" viewBox="1003.04 -508.97 1435.76 1841.82" fill="black"><path d="M 1485.67 590.407 C 1500.7 589.503 1508.31 581.987 1508.45 567.859 C 1509.57 477.719 1510.09 423.984 1510.01 406.654 C 1508.85 114.109 1507.57 -97.041 1510.19 -357.64 C 1510.51 -386.26 1512.49 -406.67 1516.16 -418.86 C 1528.17 -458.85 1554.63 -490.61 1596.98 -497.73 C 1663.84 -508.97 1713.74 -468.84 1723.51 -403.48 C 1725.91 -387.42 1727.04 -368.85 1726.92 -347.81 C 1725.52 -106.55 1725.16 102.029 1725.83 277.919 C 1725.86 287.629 1728.28 294.509 1733.12 298.559 C 1746.44 309.799 1767.32 300.659 1767.25 282.679 C 1766.65 143.159 1766.52 59.239 1766.86 30.939 C 1767.52 -28.031 1808.62 -75.141 1869.29 -76.461 C 1885.69 -76.801 1897.01 -76.491 1903.23 -75.571 C 1935.28 -70.791 1959.43 -53.971 1975.68 -25.091 C 1991.6 3.199 1990.87 26.439 1990.94 64.639 C 1991.1 138.869 1990.63 223.469 1989.55 318.439 C 1989.42 330.369 1990.39 337.989 1992.45 341.299 C 2002.99 358.149 2029.99 351.369 2030.11 329.129 C 2030.83 205.259 2031.58 137.189 2032.36 124.919 C 2034.57 90.129 2055.14 54.879 2088.69 41.439 C 2110.81 32.599 2145.52 32.489 2167.57 37.559 C 2202.67 45.699 2227.5 74.789 2236.22 109.579 C 2238.23 117.539 2239.19 131.729 2239.08 152.159 C 2238.52 275.069 2238.22 354.549 2238.19 390.576 C 2238.19 401.088 2239.69 408.126 2242.69 411.69 C 2252.18 422.887 2271.67 419.826 2277.44 405.143 C 2278.14 403.361 2278.51 396.581 2278.53 384.803 C 2278.63 345.799 2278.43 302.219 2277.94 254.049 C 2277.8 237.679 2278.8 225.899 2280.97 218.719 C 2288.99 191.989 2309.44 172.579 2337.96 171.069 C 2387.05 168.469 2423.88 196.249 2434.89 243.399 C 2436.73 251.269 2437.57 264.639 2437.4 283.489 C 2436.74 362.299 2436.87 439.533 2437.83 515.209 C 2438.8 593.519 2437.62 652.174 2434.34 691.174 C 2420.68 854.148 2378.62 1008.88 2308.16 1155.37 C 2288.89 1195.38 2265.44 1234.28 2237.81 1272.06 C 2228.4 1284.92 2218.77 1293.72 2208.9 1298.45 C 2202.99 1301.26 2190.35 1304.92 2170.98 1309.41 C 2153.96 1313.36 2138.29 1316.01 2123.98 1317.35 C 1958.98 1332.85 1793.44 1329.9 1627.89 1301.93 C 1607.29 1298.45 1593.27 1295.89 1579.36 1279.66 C 1553.59 1249.59 1536.15 1214.88 1517.8 1175.52 C 1484.79 1104.8 1449.74 1031.82 1412.68 956.556 C 1396.46 923.651 1379.85 892.49 1362.83 863.072 C 1307.44 767.225 1249.74 678.544 1189.74 597.032 C 1173.94 575.543 1155.74 553.021 1135.24 529.466 C 1086.44 473.367 1052.85 434.703 1034.35 413.472 C 1011.25 386.779 1003.04 355.899 1025.94 326.499 C 1100.24 231.189 1231.05 307.439 1290.85 376.823 C 1345.06 439.817 1404.65 507.731 1469.63 580.566 C 1472.99 584.337 1477.11 587.372 1481.95 589.671 C 1483.1 590.23 1484.38 590.483 1485.67 590.407 Z"/></svg>') 0 0, pointer !important;
}

@media only screen and (max-width: 767px) {
    #accessibility-widget #accessibility-panel, .accessibily-widget #accessibility-panel {
        max-width: 90% !important;
        width: 90% !important;
        left: 50% !important;
        transform: translateX(-50%) scale(calc(1 / var(--zoom-level, 1))) !important;
        transform-origin: center bottom !important;
        bottom: 10px !important;
        height: 70vh !important;
    }

    #accessibility-widget #accessibility-toggle, .accessibily-widget #accessibility-toggle {
        bottom: 5px !important;
        left: 5px !important;
        transform: scale(calc(1 / var(--zoom-level, 1))) !important;
        transform-origin: bottom left !important;
    }

    /* Header più compatto su mobile */
    #accessibility-widget #accessibility-panel #accessibility-header, .accessibily-widget #accessibility-panel #accessibility-header {
        padding-bottom: 4rem !important;
    }

    /* Bottoni header più piccoli su mobile */
    #accessibility-widget #accessibility-panel #accessibility-header .header-button, .accessibily-widget #accessibility-panel #accessibility-header .header-button {
        padding: 6px 8px !important;
        font-size: 16px !important;
    }

    /* Griglie più compatte su mobile */
    #accessibility-panel .accessibility-body .grid-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    #accessibility-panel .accessibility-body .grid-content2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Font size più piccolo su mobile */
    #accessibility-widget #accessibility-panel, .accessibily-widget #accessibility-panel {
        font-size: 1.4rem !important;
    }
    #accessibility-widget #accessibility-panel span.acc-widget-title,
    #accessibility-widget #accessibility-panel h2.acc-widget-title,
    .accessibily-widget #accessibility-panel span.acc-widget-title,
    .accessibily-widget #accessibility-panel h2.acc-widget-title {
        margin-top: 0;
        text-transform: uppercase;
        color: #fff !important;
        font-size: 18px !important;
    }
}