/* ========================================
   WCAG 2.1 Accessibility Features
   High Contrast Modes
   ======================================== */

/* Accessibility Button - Inline in navigation */
.accessibility-btn-inline {
    background: transparent;
    color: #ffffff;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
}

.accessibility-btn-inline:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.accessibility-btn-inline:focus {
    outline: 2px solid #FFD700;
    outline-offset: 3px;
}

.accessibility-btn-inline .fa {
    pointer-events: none;
}

/* Accessibility Panel - Modal overlay */
.accessibility-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.accessibility-panel.active {
    display: flex;
    opacity: 1;
}

.accessibility-panel-content {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    animation: slideIn 0.3s ease;
}

/* Force white background and black text for panel content and all children in normal mode */
.accessibility-panel-content *:not(svg):not(path) {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.accessibility-panel-content h2 {
    color: #005A9C !important;
}

.accessibility-panel-content strong {
    color: #000000 !important;
}

.accessibility-panel-content .accessibility-option {
    border-color: #e0e0e0 !important;
    background-color: #ffffff !important;
}

.accessibility-panel-content .accessibility-option:hover {
    background-color: #f5f5f5 !important;
    border-color: #005A9C !important;
}

.accessibility-panel-content .accessibility-option-label span {
    color: #666666 !important;
}

.accessibility-panel-content p {
    color: #666666 !important;
}

.accessibility-panel-content kbd {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #ccc !important;
}

.accessibility-panel-content input[type="radio"] {
    background-color: #ffffff !important;
    border: 1px solid #999 !important;
}

.accessibility-panel-content .fa {
    background: transparent !important;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.accessibility-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.accessibility-panel-header h2 {
    margin: 0;
    font-size: 24px;
    color: #005A9C;
}

.accessibility-close-btn {
    background: transparent !important;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666666 !important;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.accessibility-close-btn:hover {
    background: #f5f5f5 !important;
    color: #000000 !important;
}

.accessibility-close-btn:focus {
    outline: 2px solid #005A9C;
    outline-offset: 2px;
}

.accessibility-panel-body {
    margin: 20px 0;
}

.accessibility-option {
    margin-bottom: 15px;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.accessibility-option:hover {
    border-color: #005A9C;
    background: #f5f5f5;
}

.accessibility-option:focus-within {
    outline: 3px solid #005A9C;
    outline-offset: 2px;
}

.accessibility-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    cursor: pointer;
    accent-color: #005A9C;
}

.accessibility-option-label {
    flex: 1;
    cursor: pointer;
}

.accessibility-option-label strong {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
    color: #000000;
}

.accessibility-option-label span {
    display: block;
    font-size: 14px;
    color: #666666;
}

.accessibility-option input[type="radio"]:checked + .accessibility-option-label {
    font-weight: 600;
}

.accessibility-option input[type="radio"]:checked ~ * {
    color: #005A9C;
}

/* ========================================
   HIGH CONTRAST MODES
   ======================================== */

/* Normal Mode - No changes */
body.contrast-normal {
    /* Default styles remain */
}

/* High Contrast Light Mode - Black on White */
body.contrast-light {
    background: #FFFFFF !important;
    color: #000000 !important;
}

body.contrast-light *:not(.fa):not([class*="icon"]):not(svg):not(path) {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

body.contrast-light a {
    color: #0000FF !important;
    text-decoration: underline !important;
}

body.contrast-light a:hover,
body.contrast-light a:focus {
    color: #8B0000 !important;
    text-decoration: underline !important;
}

body.contrast-light button,
body.contrast-light .btn,
body.contrast-light input[type="submit"],
body.contrast-light input[type="button"] {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.contrast-light button:hover,
body.contrast-light .btn:hover {
    background: #F0F0F0 !important;
}

body.contrast-light input,
body.contrast-light textarea,
body.contrast-light select {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.contrast-light img {
    opacity: 1 !important;
    filter: none !important;
}

/* High Contrast Dark Mode - White on Black */
body.contrast-dark {
    background: #000000 !important;
    color: #FFFFFF !important;
}

body.contrast-dark *:not(.fa):not([class*="icon"]):not(svg):not(path) {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

body.contrast-dark a {
    color: #FFFF00 !important;
    text-decoration: underline !important;
}

body.contrast-dark a:hover,
body.contrast-dark a:focus {
    color: #00FFFF !important;
    text-decoration: underline !important;
}

body.contrast-dark button,
body.contrast-dark .btn,
body.contrast-dark input[type="submit"],
body.contrast-dark input[type="button"] {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

body.contrast-dark button:hover,
body.contrast-dark .btn:hover {
    background: #333333 !important;
}

body.contrast-dark input,
body.contrast-dark textarea,
body.contrast-dark select {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

body.contrast-dark img {
    opacity: 0.8 !important;
    filter: grayscale(100%) contrast(150%) !important;
}

/* Override for accessibility panel itself in contrast modes */
body.contrast-light .accessibility-panel-content {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
}

body.contrast-dark .accessibility-panel-content {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 3px solid #FFFFFF !important;
}

/* Preserve icon visibility */
body.contrast-light .fa,
body.contrast-light [class*="icon"],
body.contrast-dark .fa,
body.contrast-dark [class*="icon"] {
    background: transparent !important;
}

/* SVG visibility in contrast modes (exclude accessibility panel) */
body.contrast-light svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) path,
body.contrast-light svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) g,
body.contrast-light svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) line,
body.contrast-light svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) circle,
body.contrast-light svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) rect {
    stroke: #000000 !important;
    fill: none !important;
}

body.contrast-dark svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) path,
body.contrast-dark svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) g,
body.contrast-dark svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) line,
body.contrast-dark svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) circle,
body.contrast-dark svg:not(.accessibility-panel svg):not(.accessibility-panel-content svg) rect {
    stroke: #FFFFFF !important;
    fill: none !important;
}

/* Navigation buttons visibility in contrast modes */
body.contrast-light .rightNav button:not(.btn),
body.contrast-light .rightNav a:not(.btn) {
    background: transparent !important;
    color: #000000 !important;
}

body.contrast-light .rightNav .fa {
    color: #000000 !important;
}

body.contrast-dark .rightNav button:not(.btn),
body.contrast-dark .rightNav a:not(.btn) {
    background: transparent !important;
    color: #FFFFFF !important;
}

body.contrast-dark .rightNav .fa {
    color: #FFFFFF !important;
}

/* Navbar toggler bars visibility */
body.contrast-light .navbar-toggler .bar {
    background: #000000 !important;
}

body.contrast-dark .navbar-toggler .bar {
    background: #FFFFFF !important;
}

body.contrast-light .navbar-toggler {
    border-color: #000000 !important;
}

body.contrast-dark .navbar-toggler {
    border-color: #FFFFFF !important;
}

/* Custom tiles - captions visibility */
body.contrast-light .custom-tile .caption,
body.contrast-light .custom-tile .caption h4,
body.contrast-light .custom-tile .caption h3,
body.contrast-light .custom-tile .caption p {
    color: #000000 !important;
    background: #FFFFFF !important;
    padding: 10px !important;
    border: 2px solid #000000 !important;
}

body.contrast-dark .custom-tile .caption,
body.contrast-dark .custom-tile .caption h4,
body.contrast-dark .custom-tile .caption h3,
body.contrast-dark .custom-tile .caption p {
    color: #FFFFFF !important;
    background: #000000 !important;
    padding: 10px !important;
    border: 2px solid #FFFFFF !important;
}

/* Remove overlays in contrast modes */
body.contrast-light .custom-tile .overlay,
body.contrast-dark .custom-tile .overlay {
    display: none !important;
}

/* Images in custom tiles */
body.contrast-light .custom-tile .image,
body.contrast-light .custom-tile .image-wrapper {
    background: #FFFFFF !important;
    border: 2px solid #000000 !important;
}

body.contrast-dark .custom-tile .image,
body.contrast-dark .custom-tile .image-wrapper {
    background: #000000 !important;
    border: 2px solid #FFFFFF !important;
}

/* Custom tile icons */
body.contrast-light .custom-tile .fa {
    color: #000000 !important;
    background: transparent !important;
}

body.contrast-dark .custom-tile .fa {
    color: #FFFFFF !important;
    background: transparent !important;
}

/* Custom tile links */
body.contrast-light .custom-tile .linkOverlay {
    background: transparent !important;
}

body.contrast-dark .custom-tile .linkOverlay {
    background: transparent !important;
}

/* Custom tile hover states */
body.contrast-light .custom-tile:hover .caption,
body.contrast-light .custom-tile:focus-within .caption {
    background: #f0f0f0 !important;
    border: 3px solid #000000 !important;
}

body.contrast-dark .custom-tile:hover .caption,
body.contrast-dark .custom-tile:focus-within .caption {
    background: #333333 !important;
    border: 3px solid #FFFFFF !important;
}

/* Ensure .btn buttons remain visible with borders */
body.contrast-light .btn-primary,
body.contrast-light .btn {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
}

body.contrast-dark .btn-primary,
body.contrast-dark .btn {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 3px solid #FFFFFF !important;
}

/* Focus indicators for all modes */
body.contrast-light *:focus,
body.contrast-dark *:focus {
    outline: 3px solid #FFD700 !important;
    outline-offset: 2px !important;
}

/* Screen reader only text */
.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;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .accessibility-btn-inline {
        font-size: 20px;
    }

    .accessibility-panel-content {
        padding: 20px;
        width: 95%;
    }

    .accessibility-panel-header h2 {
        font-size: 20px;
    }
}