/**
 * Accessibility Panel Styles
 * High contrast and reduced motion modes
 */

/* ================================
   High Contrast Mode
   ================================ */

.high-contrast {
    /* Increase border widths for better visibility */
    --border-width: 2px;
}

.high-contrast * {
    /* Force stronger borders */
    border-width: var(--border-width) !important;
}

.high-contrast button,
.high-contrast a,
.high-contrast input,
.high-contrast select,
.high-contrast textarea {
    /* Stronger focus indicators */
    outline-width: 4px !important;
    outline-offset: 3px !important;
}

/* High contrast text */
.high-contrast {
    --text-primary: #000000;
    --text-secondary: #1a1a1a;
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
}

.high-contrast.dark {
    --text-primary: #ffffff;
    --text-secondary: #e6e6e6;
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
}

.high-contrast body,
.high-contrast main {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.high-contrast .bg-gray-50,
.high-contrast .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.high-contrast .dark\\:bg-slate-800,
.high-contrast .dark\\:bg-slate-900 {
    background-color: var(--bg-primary) !important;
}

/* High contrast buttons */
.high-contrast button:not(:disabled),
.high-contrast a.button {
    border: 3px solid currentColor !important;
    font-weight: 700 !important;
}

.high-contrast button:hover,
.high-contrast button:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.high-contrast.dark button:hover,
.high-contrast.dark button:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* High contrast form inputs */
.high-contrast input,
.high-contrast select,
.high-contrast textarea {
    border: 3px solid #000000 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.high-contrast.dark input,
.high-contrast.dark select,
.high-contrast.dark textarea {
    border: 3px solid #ffffff !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* High contrast links */
.high-contrast a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
}

/* ================================
   Reduced Motion Mode
   ================================ */

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

/* Disable fade-in animations */
.reduce-motion .animate-fade-in,
.reduce-motion .animate-pulse,
.reduce-motion .animate-spin,
.reduce-motion .animate-bounce {
    animation: none !important;
}

/* Disable smooth scrolling */
.reduce-motion {
    scroll-behavior: auto !important;
}

/* Disable parallax effects */
.reduce-motion [data-parallax] {
    transform: none !important;
}

/* ================================
   Font Size Adjustments
   ================================ */

/* These are applied via JavaScript to html element font-size
   All rem-based sizes will scale accordingly */

/* Small: 14px base */
/* Medium: 16px base (default) */
/* Large: 18px base */
/* XL: 20px base */

/* ================================
   Screen Reader Only Utility
   ================================ */

.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;
}

.sr-only.focus\\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ================================
   Accessibility Panel Specific
   ================================ */

#a11y-panel-trigger {
    /* Ensure trigger button is always visible and accessible */
    z-index: 9999;
}

/* Smooth transitions for panel (will be disabled in reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    #a11y-panel {
        transition: opacity 0.2s ease-in-out;
    }

    #a11y-panel.hidden {
        opacity: 0;
        pointer-events: none;
    }

    #a11y-panel:not(.hidden) {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Focus trap for panel */
#a11y-panel:not(.hidden) {
    /* Prevent background scrolling when panel is open */
    overflow-y: auto;
}

/* ================================
   Responsive Design
   ================================ */

@media (max-width: 640px) {
    #a11y-panel-trigger {
        bottom: 5.5rem;
        right: 0.75rem;
    }
}

/* ================================
   Print Styles
   ================================ */

@media print {
    #a11y-panel,
    #a11y-panel-trigger {
        display: none !important;
    }
}