/**
 * Accessibility Controls Stylesheet
 *
 * Styles for the comprehensive accessibility panel including:
 * - Text size scaling
 * - High contrast mode
 * - Reduced motion support
 * - Focus indicators (WCAG AA compliant)
 * - Skip links
 *
 * Author: Luke Steuber
 */

/* ==================== TEXT SCALING ==================== */

:root {
    --text-scale: 1.0;
}

/* Apply text scaling to all text elements */
body {
    font-size: calc(16px * var(--text-scale));
}

h1 { font-size: calc(3.5rem * var(--text-scale)); }
h2 { font-size: calc(2rem * var(--text-scale)); }
h3 { font-size: calc(1.5rem * var(--text-scale)); }
h4 { font-size: calc(1.25rem * var(--text-scale)); }
h5 { font-size: calc(1.125rem * var(--text-scale)); }
h6 { font-size: calc(1rem * var(--text-scale)); }

.hero h1 {
    font-size: calc(3.5rem * var(--text-scale));
}

.hero-tagline {
    font-size: calc(1.25rem * var(--text-scale));
}

.word-header h1 {
    font-size: calc(3rem * var(--text-scale));
}

/* Maintain readable sizes for small elements */
@media (max-width: 768px) {
    .hero h1 {
        font-size: calc(2.5rem * var(--text-scale));
    }

    .hero-tagline {
        font-size: calc(1.125rem * var(--text-scale));
    }

    .word-header h1 {
        font-size: calc(2rem * var(--text-scale));
    }
}

/* ==================== HIGH CONTRAST MODE ==================== */

/* High-contrast colour tokens live in design-system.css under
   `body.high-contrast-mode`. Component-shape overrides only here. */

body.high-contrast-mode .btn,
body.high-contrast-mode .btn-outline {
    border-width: 2px;
}

body.high-contrast-mode .feature-card,
body.high-contrast-mode .section,
body.high-contrast-mode .card {
    border-width: 2px;
}

body.high-contrast-mode .highlight,
body.high-contrast-mode mark.keyword {
    background: var(--color-warning-bg);
    color: var(--color-text);
    border: 1px solid var(--color-text);
}

/* ==================== REDUCED MOTION ==================== */

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* ==================== ACCESSIBILITY PANEL ==================== */

.a11y-panel {
    position: fixed;
    bottom: var(--space-lg);
    left: var(--space-lg);
    z-index: 2000;
}

.a11y-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.a11y-toggle:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
    border-color: var(--accent);
}

.a11y-toggle:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.a11y-toggle svg {
    width: 20px;
    height: 20px;
    stroke: var(--accent);
}

.a11y-panel-content {
    position: absolute;
    bottom: calc(100% + var(--space-sm));
    left: 0;
    width: 380px;
    max-width: calc(100vw - var(--space-lg) * 2);
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-base),
                visibility var(--transition-base),
                transform var(--transition-base);
}

.a11y-panel.open .a11y-panel-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.a11y-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.a11y-panel-header h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: calc(1.25rem * var(--text-scale));
    color: var(--primary);
}

.a11y-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.a11y-close:hover {
    background: var(--hover);
    color: var(--text);
}

.a11y-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.a11y-section {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.a11y-section:last-child {
    border-bottom: none;
}

.a11y-label {
    display: block;
    margin-bottom: var(--space-sm);
}

.a11y-label-text {
    display: block;
    font-weight: 600;
    font-size: calc(0.875rem * var(--text-scale));
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.a11y-label-desc {
    display: block;
    font-size: calc(0.8125rem * var(--text-scale));
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ==================== BUTTON GROUPS ==================== */

.a11y-button-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-xs);
}

.a11y-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--sans);
    font-size: calc(0.8125rem * var(--text-scale));
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.a11y-option:hover {
    background: var(--hover);
    border-color: var(--accent);
}

.a11y-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.a11y-option.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.a11y-option svg {
    width: 20px;
    height: 20px;
}

.a11y-option.active svg {
    stroke: #ffffff;
}

/* ==================== TOGGLE SWITCH ==================== */

.a11y-toggle-switch {
    display: flex;
    align-items: center;
}

.a11y-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.a11y-switch-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    user-select: none;
}

.a11y-switch-slider {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    background: var(--border);
    border-radius: 24px;
    transition: background var(--transition-base);
}

.a11y-switch-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform var(--transition-base);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.a11y-checkbox:checked + .a11y-switch-label .a11y-switch-slider {
    background: var(--accent);
}

.a11y-checkbox:checked + .a11y-switch-label .a11y-switch-slider::after {
    transform: translateX(24px);
}

.a11y-checkbox:focus-visible + .a11y-switch-label .a11y-switch-slider {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.a11y-switch-text {
    font-size: calc(0.875rem * var(--text-scale));
    color: var(--text);
}

/* ==================== ACTION BUTTONS ==================== */

.a11y-actions {
    padding-top: var(--space-sm);
}

.a11y-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--sans);
    font-size: calc(0.875rem * var(--text-scale));
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.a11y-reset:hover {
    background: var(--hover);
    border-color: var(--accent);
}

.a11y-reset:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.a11y-reset svg {
    width: 18px;
    height: 18px;
}

/* ==================== MOBILE RESPONSIVE ==================== */

@media (max-width: 768px) {
    .a11y-panel {
        bottom: var(--space-md);
        left: var(--space-md);
    }

    .a11y-toggle {
        padding: var(--space-sm) var(--space-md);
    }

    .a11y-panel-content {
        width: 340px;
        max-width: calc(100vw - var(--space-md) * 2);
    }

    .a11y-button-group {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .a11y-panel {
        position: fixed;
        bottom: var(--space-sm);
        left: var(--space-sm);
        right: auto;
    }

    .a11y-toggle {
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
    }

    .a11y-panel-content {
        width: 320px;
        max-width: calc(100vw - var(--space-sm) * 2);
        bottom: calc(100% + var(--space-sm));
        max-height: 70vh;
        overflow-y: auto;
        border-radius: var(--radius-lg);
    }

    .a11y-panel.open .a11y-panel-content {
        transform: translateY(0);
    }
}

/* ==================== ENHANCED FOCUS INDICATORS ==================== */

/* Global focus styles for better keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: 10000;
    transition: top var(--transition-base);
}

.skip-to-content:focus {
    top: var(--space-md);
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ==================== PRINT STYLES ==================== */

@media print {
    .a11y-panel,
    .settings-dropdown {
        display: none !important;
    }
}