/* ============================================================
   WIDGET ACCESSIBILITÀ — EAA 2025 / WCAG 2.1 AA
   Floating panel: bottom-right, tastiera-accessibile, ARIA-compliant
   ============================================================ */

/* ── Pulsante trigger ── */
.cb-a11y {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9000;
    font-family: var(--cb-font-body);
}

.cb-a11y__trigger {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--museum-black);
    color: var(--museum-white);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.cb-a11y__trigger:hover {
    background: #333;
    transform: scale(1.06);
}

.cb-a11y__trigger:focus-visible {
    outline: 3px solid var(--cb-color-accent);
    outline-offset: 3px;
}

.cb-a11y__trigger[aria-expanded="true"] {
    background: var(--cb-color-accent-text);
    border-color: var(--cb-color-accent);
}

/* ── Pannello ── */
.cb-a11y__panel {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    right: 0;
    width: 270px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cb-a11y__panel[hidden] {
    display: none;
}

.cb-a11y__heading {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--museum-gray);
    margin: 0 0 0.25rem;
    font-family: var(--cb-font-body);
    font-weight: 600;
}

/* ── Riga controllo ── */
.cb-a11y__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cb-a11y__label {
    font-size: 0.875rem;
    color: #1a1a1a;
    line-height: 1.3;
    flex: 1;
}

/* ── Toggle switch ── */
.cb-a11y__switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.cb-a11y__switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cb-a11y__switch-track {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cb-a11y__switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.cb-a11y__switch input:checked + .cb-a11y__switch-track {
    background: var(--cb-color-accent-text);
}

.cb-a11y__switch input:checked + .cb-a11y__switch-track::after {
    transform: translateX(18px);
}

.cb-a11y__switch input:focus-visible + .cb-a11y__switch-track {
    outline: 3px solid var(--cb-color-accent);
    outline-offset: 2px;
}

/* ── Controllo dimensione testo (3 pulsanti) ── */
.cb-a11y__text-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.cb-a11y__text-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #f5f5f5;
    color: #1a1a1a;
    cursor: pointer;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cb-a11y__text-btn:hover {
    background: #e8e8e8;
    border-color: #aaa;
}

.cb-a11y__text-btn.is-active {
    background: var(--cb-color-accent-text);
    border-color: var(--cb-color-accent-text);
    color: #fff;
}

.cb-a11y__text-btn:focus-visible {
    outline: 3px solid var(--cb-color-accent);
    outline-offset: 2px;
}

/* ── Separatore ── */
.cb-a11y__sep {
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 0.1rem 0;
}

/* ── Pulsante reset ── */
.cb-a11y__reset {
    font-size: 0.75rem;
    color: var(--museum-gray);
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.cb-a11y__reset:hover { color: #1a1a1a; }
.cb-a11y__reset:focus-visible {
    outline: 3px solid var(--cb-color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================
   MODALITÀ ACCESSIBILITÀ — classi applicate su <html>
   ============================================================ */

/* ── 1. Dimensione testo ── */
html.cb-a11y--text-md { font-size: 19px; }
html.cb-a11y--text-lg { font-size: 21px; }

/* ── 2. Alto contrasto ── */
html.cb-a11y--contrast {
    --cb-color-bg:      #ffffff;
    --cb-color-text:    #000000;
    --cb-color-primary: #000000;
    --cb-color-accent-text: #5a3e00;
    --museum-white:     #ffffff;
    --museum-black:     #000000;
    --museum-gray:      #444444;
    --cb-hero-fade:     #ffffff;
}

html.cb-a11y--contrast body {
    background: #ffffff;
    color: #000000;
}

/* Link su sfondo CHIARO (contenuto pagina) → blu scuro ad alto contrasto */
html.cb-a11y--contrast a {
    color: #0000cc;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Link su sfondo SCURO (header, footer, nav mobile) → bianco brillante.
   Questi elementi hanno background: var(--museum-black) / rgba(13,13,13,...).
   Il blu sarebbe illeggibile: uso bianco con sottolineatura visibile. */
html.cb-a11y--contrast .site-header a,
html.cb-a11y--contrast .main-navigation a,
html.cb-a11y--contrast .main-navigation .sub-menu a,
html.cb-a11y--contrast .mobile-nav a,
html.cb-a11y--contrast .mob-nav a,
html.cb-a11y--contrast .site-footer a,
html.cb-a11y--contrast .footer-col a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

html.cb-a11y--contrast .site-header a:hover,
html.cb-a11y--contrast .main-navigation a:hover,
html.cb-a11y--contrast .site-footer a:hover {
    color: #ffff00; /* giallo ad alta visibilità sull'hover su sfondo scuro */
}

html.cb-a11y--contrast .cb-hero__overlay,
html.cb-a11y--contrast .cbcat-archive .archive-hero::after,
html.cb-a11y--contrast .convegni-archive .archive-hero::after {
    /* gradiente più scuro in alto per leggibilità */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.5) 0%,
        transparent 45%,
        rgba(255,255,255,0) 55%,
        rgba(255,255,255,0.95) 80%,
        #ffffff 100%
    );
}

/* ── 3. Pausa animazioni (WCAG 2.3.3) ── */
html.cb-a11y--no-motion *,
html.cb-a11y--no-motion *::before,
html.cb-a11y--no-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* ── 4. Spaziatura testo (WCAG 1.4.12) ── */
html.cb-a11y--spacing {
    word-spacing: 0.16em;
}

html.cb-a11y--spacing body,
html.cb-a11y--spacing p,
html.cb-a11y--spacing li,
html.cb-a11y--spacing h1,
html.cb-a11y--spacing h2,
html.cb-a11y--spacing h3,
html.cb-a11y--spacing h4 {
    line-height: 1.9;
    letter-spacing: 0.05em;
}

/* ── 5. Evidenzia link (WCAG 1.4.1) ── */
html.cb-a11y--links a:not(.btn):not(.cb-a11y__reset) {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

/* ── Focus sempre visibile quando a11y è attivo (WCAG 2.4.7) ── */
html.cb-a11y--contrast :focus-visible,
html.cb-a11y--text-md :focus-visible,
html.cb-a11y--text-lg :focus-visible,
html.cb-a11y--spacing :focus-visible,
html.cb-a11y--links :focus-visible,
html.cb-a11y--no-motion :focus-visible {
    outline: 3px solid #0057b8 !important;
    outline-offset: 3px !important;
}