/*
 * Accessibility Toolbar CSS — Uganda Museums
 * Version: 4.0
 * Mandate: Museums and Monuments Act 2023 + WCAG 2.1 AA
 *
 * Sections:
 *   1. Toolbar container + toggle button
 *   2. Toolbar panel (expanded controls)
 *   3. High contrast mode
 *   4. Font size overrides
 *   5. Dyslexia-friendly font
 *   6. Reduce motion
 *   7. Focus indicators (global)
 */

/* ── 1. TOOLBAR CONTAINER ── */
.um-a11y-toolbar {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 400;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
}

.um-a11y-toggle {
    width: 44px; height: 44px;
    background: var(--text-primary); color: #fff;
    border: none; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}
.um-a11y-toggle:hover { background: var(--terracotta); transform: scale(1.06); }
.um-a11y-toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }


/* ── 2. TOOLBAR PANEL ── */
.um-a11y-panel {
    display: flex; flex-direction: column; gap: 0.35rem;
    background: #fff; border: 1px solid var(--border-medium);
    border-radius: var(--border-radius-lg); padding: 0.5rem;
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(8px) scale(0.96);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.um-a11y-panel[aria-hidden="false"] {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
}

.um-a11y-btn {
    min-width: 44px; min-height: 36px;
    padding: 0.35rem 0.65rem;
    background: var(--bg-section); border: 1px solid var(--border-light);
    border-radius: var(--border-radius); cursor: pointer;
    font-family: var(--font-body); font-size: var(--text-xs);
    font-weight: 600; color: var(--text-secondary);
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.um-a11y-btn:hover { background: var(--terracotta-muted); color: var(--terracotta); border-color: var(--terracotta); }
.um-a11y-btn[aria-pressed="true"] { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.um-a11y-btn:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }


/* ── 3. HIGH CONTRAST MODE ── */
body.um-high-contrast {
    --bg-white:   #000000;
    --bg-section: #111111;
    --bg-warm:    #0A0A0A;
    --text-primary:   #FFFFFF;
    --text-secondary: #F0F0F0;
    --text-muted:     #CCCCCC;
    --terracotta:     #FFB347;
    --forest:         #00E676;
    --border-light:   rgba(255,255,255,0.2);
    --border-medium:  rgba(255,255,255,0.3);
    background: #000; color: #fff;
}
body.um-high-contrast .site-header { background: #111; border-bottom-color: rgba(255,255,255,0.2); }
body.um-high-contrast .mobile-menu__panel { background: #111; }
body.um-high-contrast .um-search-overlay__panel { background: #111; }
body.um-high-contrast img { filter: contrast(1.1) brightness(0.95); }


/* ── 4. FONT SIZE OVERRIDES ── */
html[data-font-size="14"] { font-size: 14px; }
html[data-font-size="16"] { font-size: 16px; }
html[data-font-size="18"] { font-size: 18px; }
html[data-font-size="20"] { font-size: 20px; }


/* ── 5. DYSLEXIA-FRIENDLY FONT ── */
body.um-dyslexia-font {
    --font-body: 'OpenDyslexic', Arial, sans-serif;
    font-family: 'OpenDyslexic', Arial, sans-serif;
    line-height: 1.85;
    letter-spacing: 0.05em;
    word-spacing: 0.15em;
}
body.um-dyslexia-font h1, body.um-dyslexia-font h2,
body.um-dyslexia-font h3, body.um-dyslexia-font h4 {
    font-family: 'OpenDyslexic', Arial, sans-serif;
    letter-spacing: 0.03em;
}


/* ── 6. REDUCE MOTION ── */
body.um-reduce-motion *,
body.um-reduce-motion *::before,
body.um-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}


/* ── 7. GLOBAL FOCUS INDICATORS (WCAG 2.1 AA) ── */
:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }