/* Base font size adjustment handled via JS */
html {
    font-size: 100%; /* Default, will be overridden by JS */
}

/* Grayscale Mode */
body.grayscale * {
    filter: grayscale(100%) !important;
}


/* Disable animations - more comprehensive selector */
body.no-animations *,
body.no-animations *::before,
body.no-animations *::after {
    animation: none !important;
    transition: none !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* Overlay for clicking outside */
#accessibility-overlay {
    background-color: transparent;
    cursor: pointer;
}

/* Accessibility Toolbar Styling */
/* Accessibility Toolbar Styling */
#accessibility-toolbar {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

/* Flat buttons without backgrounds */
.btn-flat {
    background: transparent;
    border: none;
    padding: 12px 15px;
    color: var(--primary);
    transition: all 0.2s ease;
}

.btn-flat:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Button active state styling */
.btn-flat.active {
    position: relative;
    background-color: rgba(0, 123, 255, 0.1) !important;
    color: #007bff !important;
}

/* Add indicator for active buttons */
.btn-flat.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background-color: #007bff;
}

/* Reset button feedback */
#reset-all.active-feedback {
    animation: pulse-feedback 1s ease;
}

@keyframes pulse-feedback {
    0% { color: inherit; }
    50% { color: #007bff; }
    100% { color: inherit; }
}

/* Make the icons larger and more visible */
#accessibility-toolbar i.fa-lg {
    font-size: 1.5em;
}

#accessibility-toolbar i.fa-minus,
#accessibility-toolbar i.fa-plus,
#accessibility-toolbar i.fa-undo {
    font-size: 0.8em;
    margin-left: -5px;
    vertical-align: 5px;
}

/* Update toggle button to match other buttons when expanded */
#accessibility-toolbar:not(.accessibility-collapsed) #accessibility-toggle {
    padding: 12px 15px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Show the chevron when expanded */
#accessibility-toolbar:not(.accessibility-collapsed) .toggle-icon {
    display: inline-block !important;
}

/* Remove the "Accessibility" text */
/* #accessibility-toolbar:not(.accessibility-collapsed) #accessibility-toggle::before {
    content: 'Accessibility';
    font-size: 0.9em;
    font-weight: 500;
    margin-left: 5px;
} */

/* Align the icon when expanded */
#accessibility-toolbar:not(.accessibility-collapsed) #accessibility-toggle i.fa-universal-access {
    margin-right: 5px;
}

/* Enhance the tooltip when collapsed */
#accessibility-toolbar.accessibility-collapsed #accessibility-toggle::after {
    content: 'Open accessibility options';
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    left: 110%;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#accessibility-toolbar.accessibility-collapsed #accessibility-toggle:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Screen reader helper class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High Contrast Mode - Global Styles */
body.high-contrast,
body.high-contrast * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* Links */
body.high-contrast a,
body.high-contrast a *,
body.high-contrast .read-more,
body.high-contrast button,
body.high-contrast .btn {
    color: #ffff00 !important;
}

body.high-contrast a:hover,
body.high-contrast a:focus,
body.high-contrast .read-more:hover,
body.high-contrast button:hover,
body.high-contrast .btn:hover {
    color: #fff45c !important;
    text-decoration: underline !important;
}
body.hi-contrast ul.nav-list-arrows li a.active:after { background: #000 !important; }

/* Buttons */
body.high-contrast .btn,
body.high-contrast button {
    background-color: #000 !important;
    border: 2px solid #fff !important;
    color: #ffff00 !important;
}

/* Ensure images have borders for visibility */
body.high-contrast img,
body.high-contrast video,
body.high-contrast iframe,
body.high-contrast canvas,
body.high-contrast svg {
    border: 1px solid #fff !important;
}

/* Form elements */
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea,
body.high-contrast .form-control {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

body.high-contrast input::placeholder,
body.high-contrast textarea::placeholder {
    color: #aaa !important;
}

/* Required indicators */
body.high-contrast .form-required {
    color: #ffff00 !important;
}

/* Header elements */
body.high-contrast #header,
body.high-contrast .header-nav-main,
body.high-contrast .header-nav-features {
    background-color: #000 !important;
    color: #fff !important;
    border-bottom: 2px solid #fff !important;
}

/* Navigation pills */
body.high-contrast .nav-pills-subnav li a {
    border: 1px solid #fff !important;
}

body.high-contrast .nav-pills-subnav li a.active {
    border: 2px solid #ffff00 !important;
}

/* Cards and boxes */
body.high-contrast .card,
body.high-contrast .featured-box,
body.high-contrast .box-content {
    background-color: #000 !important;
    border: 1px solid #fff !important;
}

/* Override for icons */
body.high-contrast .icon-featured,
body.high-contrast i.fas,
body.high-contrast i.far,
body.high-contrast i.fa,
body.high-contrast i.fab {
    color: #fff !important;
}

/* Improve focus visibility for keyboard navigation */
body.high-contrast a:focus,
body.high-contrast button:focus,
body.high-contrast input:focus,
body.high-contrast select:focus,
body.high-contrast textarea:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
}

/* Make accessibility toolbar more visible */
body.high-contrast #accessibility-toolbar {
    background-color: #333 !important;
    border: 2px solid #fff !important;
}

body.high-contrast #accessibility-toolbar button {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* Override specific elements that might need distinct styling */
body.high-contrast .overlay,
body.high-contrast .bg-light,
body.high-contrast .bg-white,
body.high-contrast .bg-grey-100,
body.high-contrast .bg-color-light,
body.high-contrast .dropdown-menu,
body.high-contrast .dropdown-item {
    background-color: #000 !important;
    color: #fff !important;
}

/* Make sure all text elements are white */
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6,
body.high-contrast p,
body.high-contrast span,
body.high-contrast div,
body.high-contrast td,
body.high-contrast th,
body.high-contrast li,
body.high-contrast label {
    color: #fff !important;
}

/* Make sure any dark elements have white text */
body.high-contrast .text-dark {
    color: #fff !important;
}

/* Make sure no elements have black text that would be invisible */
body.high-contrast .text-black {
    color: #fff !important;
}