/* Spectre - Accessibility options. Toggled via html.a11y-* classes set from localStorage. */

/* Always-on: visible keyboard focus ring (keyboard navigation only) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #c084fc !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* Text / page size */
html.a11y-text-large  { zoom: 1.12; }
html.a11y-text-xlarge { zoom: 1.25; }

/* Reduce motion */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Underline all links */
html.a11y-underline a { text-decoration: underline !important; }

/* Boost contrast of the main reading surfaces */
html.a11y-contrast .post-content-wrap,
html.a11y-contrast .bio-section,
html.a11y-contrast .content p,
html.a11y-contrast .content li,
html.a11y-contrast .content td {
    color: #f4f4ff !important;
}
html.a11y-contrast a { text-decoration: underline; }

/* Readable (dyslexia-friendly) font everywhere */
html.a11y-readable-font,
html.a11y-readable-font :where(*) {
    font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, 'Segoe UI', Arial, sans-serif !important;
    letter-spacing: 0.01em;
}

/* ---- Accessibility settings page UI ---- */
.a11y-panel { max-width: 700px; margin: 18px 0; }
.a11y-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px; background: rgba(14,14,28,0.8);
    border: 1px solid rgba(168,85,247,0.18); border-radius: 6px;
}
.a11y-row + .a11y-row { margin-top: 8px; }
.a11y-label { font-family: 'Cinzel', serif; font-weight: 700; color: #f0f0ff; font-size: 0.95rem; }
.a11y-desc  { color: #888899; font-size: 0.82rem; margin-top: 3px; line-height: 1.5; }
.a11y-control { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; }
.a11y-control label { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; color: #c8c8d8; font-size: 0.85rem; cursor: pointer; }
.a11y-control input[type=radio] { accent-color: #a855f7; cursor: pointer; }
.a11y-switch input[type=checkbox] { width: 20px; height: 20px; accent-color: #a855f7; cursor: pointer; }
@media (max-width: 560px) {
    .a11y-row { flex-direction: column; }
    .a11y-control { margin-left: 0; }
    .a11y-control label:first-child { margin-left: 0; }
}