/* ========================================
   Accessibility Styles
   Font scaling is handled by JavaScript (dynamic)
   CSS handles: panel styling, spacing, contrast
   ======================================== */

/* ========================================
   Accessibility Toggle Button
   ======================================== */

#accessibility-toggle {
    cursor: pointer !important;
    background: transparent !important;
}

#accessibility-toggle:hover {
    opacity: 0.8;
}

#accessibility-toggle i {
    color: var(--bs-primary, #3f78e0);
}

#accessibility-toggle span {
    color: var(--bs-body-color, #60697b) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* High contrast mode overrides */
body.a11y-contrast-high #accessibility-toggle i,
body.a11y-contrast-high #accessibility-toggle span {
    color: #ff0 !important;
}

/* ========================================
   Accessibility Controls Panel
   ======================================== */

.accessibility-controls {
    background-color: #000 !important;
    color: #fff !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    animation: a11y-slideDown 0.3s ease-in-out !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

@keyframes a11y-slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accessibility-heading {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.accessibility-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.accessibility-controls .form-check {
    margin-bottom: 0.75rem;
}

.accessibility-controls .form-check-input {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.accessibility-controls .form-check-input:checked {
    background-color: #ffd700;
    border-color: #ffd700;
}

.accessibility-controls .form-check-input:focus {
    border-color: #ffd700;
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

.accessibility-controls .form-check-label {
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.accessibility-controls .form-group {
    margin-bottom: 0;
}

/* Preview classes for accessibility labels */
.accessibility-controls .fs-20 {
    font-size: 20px !important;
}

.accessibility-controls .fs-30 {
    font-size: 30px !important;
}

.accessibility-controls .word-spacing-preview {
    word-spacing: 0.3em;
}

.accessibility-controls .letter-spacing-preview {
    letter-spacing: 0.2em;
}

#accessibility-close {
    transition: color 0.2s ease;
}

#accessibility-close:hover {
    color: #ffd700 !important;
}

/* Hide on mobile */
@media (max-width: 991.98px) {
    .accessibility-controls {
        display: none !important;
    }
}

/* ========================================
   Accessibility Spacing Classes
   ======================================== */

/* Paragraph Spacing */
body.a11y-paragraph-spacing p,
body.a11y-paragraph-spacing li,
body.a11y-paragraph-spacing div:not(.accessibility-controls):not(.accessibility-controls *) {
    line-height: 2 !important;
    margin-bottom: 1.5rem !important;
}

/* Word Spacing */
body.a11y-word-spacing *:not(.accessibility-controls):not(.accessibility-controls *) {
    word-spacing: 0.3em !important;
}

/* Letter Spacing */
body.a11y-letter-spacing *:not(.accessibility-controls):not(.accessibility-controls *) {
    letter-spacing: 0.1em !important;
}

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

body.a11y-contrast-high,
body.a11y-contrast-high .body,
body.a11y-contrast-high .main {
    background-color: #000 !important;
}

body.a11y-contrast-high a,
body.a11y-contrast-high button,
body.a11y-contrast-high .btn,
body.a11y-contrast-high h1,
body.a11y-contrast-high h2,
body.a11y-contrast-high h3,
body.a11y-contrast-high h4,
body.a11y-contrast-high h5,
body.a11y-contrast-high h6,
body.a11y-contrast-high p,
body.a11y-contrast-high span,
body.a11y-contrast-high div,
body.a11y-contrast-high li,
body.a11y-contrast-high label,
body.a11y-contrast-high strong,
body.a11y-contrast-high em,
body.a11y-contrast-high i:not(.uil):not([class*="icon"]),
body.a11y-contrast-high b,
body.a11y-contrast-high input,
body.a11y-contrast-high textarea,
body.a11y-contrast-high select {
    color: #ff0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

body.a11y-contrast-high .dropdown-menu {
    background-color: #000 !important;
    border-color: #ff0 !important;
}

body.a11y-contrast-high .dropdown-item {
    color: #ff0 !important;
    background-color: transparent !important;
}

body.a11y-contrast-high .dropdown-item:hover,
body.a11y-contrast-high .dropdown-item:focus,
body.a11y-contrast-high .dropdown-item.active {
    background-color: #333 !important;
    color: #ff0 !important;
}

body.a11y-contrast-high a,
body.a11y-contrast-high button {
    text-decoration: underline;
}

body.a11y-contrast-high a:hover,
body.a11y-contrast-high button:hover {
    color: #fff !important;
}

body.a11y-contrast-high img {
    filter: grayscale(100%) contrast(120%) brightness(1.2);
    opacity: 0.8;
}

body.a11y-contrast-high svg {
    filter: none;
    opacity: 1;
}

body.a11y-contrast-high input,
body.a11y-contrast-high textarea,
body.a11y-contrast-high select,
body.a11y-contrast-high button,
body.a11y-contrast-high .btn {
    border: 2px solid #ff0 !important;
    background-color: #000 !important;
}

body.a11y-contrast-high .form-check-input {
    background-color: #000 !important;
    border-color: #ff0 !important;
}

body.a11y-contrast-high .form-check-input:checked {
    background-color: #000 !important;
    border-color: #ff0 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffff00' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

body.a11y-contrast-high .form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffff00'/%3e%3c/svg%3e") !important;
}

body.a11y-contrast-high .form-check-label {
    color: #ff0 !important;
}

/* Override theme-specific backgrounds */
body.a11y-contrast-high .bg-primary,
body.a11y-contrast-high .bg-secondary,
body.a11y-contrast-high .bg-tertiary,
body.a11y-contrast-high .bg-light,
body.a11y-contrast-high .bg-dark,
body.a11y-contrast-high [class*="bg-"],
body.a11y-contrast-high section,
body.a11y-contrast-high header,
body.a11y-contrast-high footer,
body.a11y-contrast-high nav,
body.a11y-contrast-high .container,
body.a11y-contrast-high .row,
body.a11y-contrast-high [class*="col-"],
body.a11y-contrast-high .card,
body.a11y-contrast-high .card-body,
body.a11y-contrast-high .card-header,
body.a11y-contrast-high .card-footer {
    background-color: #000 !important;
    background-image: none !important;
}

/* Override SVG fills */
body.a11y-contrast-high svg path[fill]:not([fill="none"]) {
    fill: #ff0 !important;
}

body.a11y-contrast-high svg text {
    fill: #ff0 !important;
    color: #ff0 !important;
}

/* Ensure borders are visible */
body.a11y-contrast-high .card,
body.a11y-contrast-high .border,
body.a11y-contrast-high [class*="border"] {
    border-color: #ff0 !important;
}