/* ============================================================
   Parliament CMS — Accessibility Widget
   ============================================================ */

/* ── Trigger button ──────────────────────────────────────── */
#a11y-trigger {
    position: fixed;
    bottom: 122px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px;
    background: #171747;
    color: #ffffff;
    border: none;
    border-radius: 22px;
    font-size: 0;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}
#a11y-trigger:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
#a11y-trigger:focus-visible { outline: 3px solid #6c63ff; outline-offset: 3px; }
#a11y-trigger svg { flex-shrink: 0; width: 22px; height: 22px; }

/* ── Panel ───────────────────────────────────────────────── */
#a11y-panel {
    position: fixed;
    bottom: 220px;
    right: 24px;
    z-index: 9998;
    width: 320px;
    max-height: 82vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
    padding: 18px;
    display: none;
    flex-direction: column;
    gap: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px;
    color: #374151;
    line-height: 1.4;
}
#a11y-panel.open { display: flex; }

/* ── Panel header ────────────────────────────────────────── */
#a11y-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-shrink: 0;
}
#a11y-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}
.a11y-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.a11y-reset-btn {
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.a11y-reset-btn:hover { background: #e5e7eb; color: #374151; }
.a11y-reset-btn:focus-visible { outline: 2px solid #6c63ff; outline-offset: 2px; }
#a11y-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #6b7280;
    transition: background 0.15s;
    flex-shrink: 0;
}
#a11y-close:hover { background: #e5e7eb; color: #111827; }
#a11y-close:focus-visible { outline: 2px solid #6c63ff; outline-offset: 2px; }

/* ── Sections ────────────────────────────────────────────── */
.a11y-section { margin-bottom: 16px; }
.a11y-section:last-of-type { margin-bottom: 0; }
.a11y-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 10px;
}

/* ── Toggle grid ─────────────────────────────────────────── */
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

/* ── Toggle card ─────────────────────────────────────────── */
.a11y-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    background: #f3f4f6;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.3;
}
.a11y-card:hover { background: #e9eaec; }
.a11y-card:focus-visible { outline: 2px solid #6c63ff; outline-offset: 2px; }
.a11y-card.active { background: #eef0ff; border-color: #6c63ff; color: #4338ca; }
.a11y-card.active .a11y-card-icon { color: #6c63ff; }
.a11y-card-icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    color: #6b7280;
    transition: color 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.a11y-card-label { font-size: 12px; font-weight: 500; line-height: 1.2; }

/* ── Inline controls (text size, text align) ─────────────── */
.a11y-inline-ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.a11y-inline-ctrl > span {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

/* ── Text size buttons ───────────────────────────────────── */
.a11y-sz-group { display: flex; gap: 4px; }
.a11y-sz-btn {
    width: 34px; height: 34px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
    padding: 0;
}
.a11y-sz-btn:nth-child(1) { font-size: 11px; }
.a11y-sz-btn:nth-child(2) { font-size: 14px; }
.a11y-sz-btn:nth-child(3) { font-size: 17px; }
.a11y-sz-btn:nth-child(4) { font-size: 21px; }
.a11y-sz-btn:hover { background: #e9eaec; border-color: #d1d5db; }
.a11y-sz-btn.active { background: #eef0ff; border-color: #6c63ff; color: #4338ca; }
.a11y-sz-btn:focus-visible { outline: 2px solid #6c63ff; outline-offset: 2px; }

/* ── Text align buttons ──────────────────────────────────── */
.a11y-align-group { display: flex; gap: 4px; }
.a11y-align-btn {
    width: 34px; height: 34px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
    border: 2px solid #e5e7eb;
}
.a11y-align-btn:hover { background: #e9eaec; border-color: #d1d5db; }
.a11y-align-btn.active { background: #eef0ff; border-color: #6c63ff; color: #4338ca; }
.a11y-align-btn:focus-visible { outline: 2px solid #6c63ff; outline-offset: 2px; }

/* ── Reader controls ─────────────────────────────────────── */
#a11y-reader-controls {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #f3f4f6;
    border-radius: 12px;
    margin-top: 8px;
}
#a11y-reader-controls.visible { display: flex; }
.a11y-reader-buttons { display: flex; gap: 8px; }
.a11y-reader-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px; font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, opacity 0.15s;
}
.a11y-reader-btn-play { background: #1a1a2e; color: white; }
.a11y-reader-btn-play:hover { opacity: 0.85; }
.a11y-reader-btn-pause { background: #e9eaec; color: #374151; }
.a11y-reader-btn-pause:hover { background: #dde0e4; }
.a11y-reader-btn-stop { background: #fee2e2; color: #ef4444; flex: 0 0 auto; padding: 8px 10px; }
.a11y-reader-btn-stop:hover { background: #fecaca; }
.a11y-reader-btn:focus-visible { outline: 2px solid #6c63ff; outline-offset: 2px; }
.a11y-reader-progress { height: 3px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
.a11y-reader-progress-fill { height: 100%; width: 0%; background: #6c63ff; border-radius: 2px; transition: width 0.3s; }
.a11y-reader-speed { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7280; }
.a11y-reader-speed input[type="range"] { flex: 1; height: 3px; accent-color: #6c63ff; }
.a11y-reader-speed-val { font-weight: 600; color: #374151; min-width: 28px; text-align: right; }

/* ── Reading mask ────────────────────────────────────────── */
#a11y-reading-mask {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9990;
}
#a11y-reading-mask.visible { display: block; }
.a11y-mask-top, .a11y-mask-bottom {
    position: fixed; left: 0; right: 0;
    background: rgba(0,0,0,0.7);
    pointer-events: none;
    transition: top 0.05s, height 0.05s;
}

/* ── Panel footer ────────────────────────────────────────── */
.a11y-panel-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}
.a11y-stmt-link {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s;
}
.a11y-stmt-link:hover { color: #6c63ff; text-decoration: underline; }

/* ── SR only / Announcer ─────────────────────────────────── */
.a11y-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
#a11y-announcer {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ── Reading highlight ───────────────────────────────────── */
.a11y-reading-highlight {
    background-color: #fef9c3 !important;
    outline: 2px solid #f59e0b !important;
    outline-offset: 3px !important;
    border-radius: 3px !important;
}

/* ============================================================
   Active states — ALL applied to #a11y-content-wrap so that
   the accessibility widget itself is never affected.
   Filters go on the wrap (not body) to preserve position:fixed.
   ============================================================ */

/* ── Text sizes ──────────────────────────────────────────── */
body.a11y-text-size-1 #a11y-content-wrap { zoom: 1.15; }
body.a11y-text-size-2 #a11y-content-wrap { zoom: 1.30; }
body.a11y-text-size-3 #a11y-content-wrap { zoom: 1.50; }

/* ── Line height ─────────────────────────────────────────── */
body.a11y-line-height #a11y-content-wrap * { line-height: 2 !important; }

/* ── Text align ──────────────────────────────────────────── */
body.a11y-align-left #a11y-content-wrap p,
body.a11y-align-left #a11y-content-wrap li,
body.a11y-align-left #a11y-content-wrap div,
body.a11y-align-left #a11y-content-wrap td { text-align: left !important; }

body.a11y-align-center #a11y-content-wrap p,
body.a11y-align-center #a11y-content-wrap li,
body.a11y-align-center #a11y-content-wrap div,
body.a11y-align-center #a11y-content-wrap td { text-align: center !important; }

body.a11y-align-right #a11y-content-wrap p,
body.a11y-align-right #a11y-content-wrap li,
body.a11y-align-right #a11y-content-wrap div,
body.a11y-align-right #a11y-content-wrap td { text-align: right !important; }

/* ── Readable font ───────────────────────────────────────── */
body.a11y-readable-font #a11y-content-wrap,
body.a11y-readable-font #a11y-content-wrap * {
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

/* ── Contrast / Grayscale — on wrap, not body ────────────── */
/* This is critical: filter on body breaks position:fixed.    */
/* By applying to the wrap, the widget stays truly fixed.     */
body.a11y-contrast #a11y-content-wrap { filter: contrast(150%) !important; }
body.a11y-grayscale #a11y-content-wrap { filter: grayscale(100%) !important; }
body.a11y-contrast.a11y-grayscale #a11y-content-wrap { filter: contrast(150%) grayscale(100%) !important; }

/* ── Hide images ─────────────────────────────────────────── */
body.a11y-hide-images #a11y-content-wrap img,
body.a11y-hide-images #a11y-content-wrap picture,
body.a11y-hide-images #a11y-content-wrap figure { visibility: hidden !important; }

/* ── Pause animations ────────────────────────────────────── */
body.a11y-pause-animations #a11y-content-wrap *,
body.a11y-pause-animations #a11y-content-wrap *::before,
body.a11y-pause-animations #a11y-content-wrap *::after {
    animation-play-state: paused !important;
    animation-duration: 0.001ms !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* ── Highlight links ─────────────────────────────────────── */
body.a11y-highlight-links #a11y-content-wrap a {
    background: #fef08a !important;
    color: #1a1a2e !important;
    text-decoration: underline !important;
    padding: 0 2px !important;
    border-radius: 2px !important;
}

/* ── Outline focus ───────────────────────────────────────── */
body.a11y-outline-focus #a11y-content-wrap *:focus,
body.a11y-outline-focus #a11y-content-wrap *:focus-visible {
    outline: 3px solid #6c63ff !important;
    outline-offset: 3px !important;
    border-radius: 3px !important;
}