/* Color Blindness Accessibility Filters */

/* Base accessibility styles - always applied */
.accessibility-enabled {
    /* Ensure sufficient contrast for all text */
    --text-contrast-boost: 1.2;
}

/* Deuteranomaly (Green Color Blindness) Filter */
#accessibility-filter-wrapper.color-filter-deuteranomaly {
    filter: 
        /* Adjust green channel to be more distinguishable */
        sepia(0.1)
        saturate(1.3)
        hue-rotate(10deg)
        contrast(1.1)
        brightness(1.05);
}

/* Alternative color palette for deuteranomaly */
.color-filter-deuteranomaly {
    --primary-teal: #2c4f5f; /* Shifted more blue */
    --secondary-teal: #4a7080; /* Shifted more blue */
    --accent-gold: #ffffff; /* Changed to white for better contrast against dark backgrounds */
    --cream: #f5f5dc; /* Keep cream for backgrounds */
    --text-dark: #000000; /* Enhanced contrast */
    --calendar-today-gold: #ffffff; /* Changed to white */
}

/* Event time text contrast fix for deuteranomaly */
.color-filter-deuteranomaly .events .events-grid .event-time {
    color: #ffffff !important;
    background-color: rgba(44, 79, 95, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Protanopia (Red Color Blindness) Filter */
#accessibility-filter-wrapper.color-filter-protanopia {
    filter: 
        /* Remove red channel and enhance blue/yellow contrast */
        sepia(0.15)
        saturate(1.4)
        hue-rotate(-15deg)
        contrast(1.15)
        brightness(1.1);
}

/* Alternative color palette for protanopia */
.color-filter-protanopia {
    --primary-teal: #2c5f5f; /* Keep teal strong */
    --secondary-teal: #4a8080; /* Keep teal strong */
    --accent-gold: #ffffff; /* Changed to white for better contrast against dark backgrounds */
    --cream: #f5f5dc; /* Keep cream for backgrounds */
    --text-dark: #000000; /* Enhanced contrast */
    --calendar-today-gold: #ffffff; /* Changed to white */
    
    /* Social media colors adjusted */
    --facebook-blue: #1877f2; /* Keep blue strong */
    --instagram-pink: #9c5fc7; /* Shift to purple */
    --yelp-red: #cccccc; /* Changed to light gray */
}

/* Event time text contrast fix for protanopia */
.color-filter-protanopia .events .events-grid .event-time {
    color: #ffffff !important;
    background-color: rgba(44, 95, 95, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Tritanopia (Blue Color Blindness) Filter */
#accessibility-filter-wrapper.color-filter-tritanopia {
    filter: 
        /* Enhance red/green contrast, reduce blue */
        sepia(0.1)
        saturate(1.2)
        hue-rotate(25deg)
        contrast(1.1)
        brightness(1.05);
}

/* Alternative color palette for tritanopia */
.color-filter-tritanopia {
    --primary-teal: #2c5f2c; /* Shift to green */
    --secondary-teal: #4a804a; /* Shift to green */
    --accent-gold: #ffffff; /* Changed to white - better contrast against dark backgrounds */
    --cream: #f5f5dc; /* Keep cream for backgrounds */
    --text-dark: #000000; /* Enhanced contrast */
    --calendar-today-gold: #ffffff; /* Changed to white for better visibility */
    
    /* Social media colors adjusted */
    --facebook-blue: #2d5016; /* Shift to green */
    --twitter-blue: #2d5016; /* Shift to green */
}

/* Event time text contrast fix for tritanopia */
.color-filter-tritanopia .events .events-grid .event-time {
    color: #ffffff !important;
    background-color: rgba(44, 95, 44, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Dark Mode - No filter, just color changes */
.color-filter-dark-mode {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Dark mode color palette */
.color-filter-dark-mode {
    --primary-teal: #4a9999; /* Lighter teal for dark backgrounds */
    --secondary-teal: #6bb3b3; /* Lighter secondary teal */
    --accent-gold: #ffd700; /* Bright gold for visibility */
    --cream: #2d2d2d; /* Dark cream equivalent */
    --text-dark: #ffffff; /* White text */
    --text-light: #ffffff; /* White text for dark backgrounds */
    --background-dark: #1a1a1a; /* Dark background */
    --background-light: #2d2d2d; /* Lighter dark background */
    --shadow: rgba(255, 255, 255, 0.1); /* Light shadows */
    --shadow-dark: rgba(255, 255, 255, 0.2); /* Stronger light shadows */
}

/* Event time text contrast fix for dark mode */
.color-filter-dark-mode .events .events-grid .event-time {
    color: #ffd700 !important;
    background-color: rgba(26, 26, 26, 0.9);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #4a9999;
}

/* Dark mode background and text overrides */
.color-filter-dark-mode,
.color-filter-dark-mode * {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.color-filter-dark-mode .hero-section,
.color-filter-dark-mode .section,
.color-filter-dark-mode .footer,
.color-filter-dark-mode .nav-container,
.color-filter-dark-mode .hours-banner {
    background-color: #1a1a1a !important;
}

.color-filter-dark-mode .feature-card,
.color-filter-dark-mode .menu-item,
.color-filter-dark-mode .event-card {
    background-color: #2d2d2d !important;
    border-color: #4a4a4a !important;
}

.color-filter-dark-mode .btn {
    background-color: #4a9999 !important;
    color: #ffffff !important;
    border-color: #4a9999 !important;
}

.color-filter-dark-mode .btn:hover {
    background-color: #6bb3b3 !important;
}

/* Light Mode - Clean white theme */
.color-filter-light-mode {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Light mode color palette */
.color-filter-light-mode {
    --primary-teal: #1a4a4a; /* Darker teal for light backgrounds */
    --secondary-teal: #2a5a5a; /* Darker secondary teal */
    --accent-gold: #b8860b; /* Dark gold for visibility */
    --cream: #ffffff; /* Pure white for light mode */
    --text-dark: #000000; /* Black text */
    --text-light: #000000; /* Black text for light backgrounds */
    --background-dark: #ffffff; /* White background */
    --background-light: #f8f8f8; /* Light gray background */
    --shadow: rgba(0, 0, 0, 0.2); /* Dark shadows */
    --shadow-dark: rgba(0, 0, 0, 0.3); /* Stronger dark shadows */
}

/* Event time text contrast fix for light mode */
.color-filter-light-mode .events .events-grid .event-time {
    color: #000000 !important;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #1a4a4a;
}

/* Light mode background and text overrides */
.color-filter-light-mode,
.color-filter-light-mode * {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.color-filter-light-mode .hero-section,
.color-filter-light-mode .section,
.color-filter-light-mode .footer,
.color-filter-light-mode .nav-container,
.color-filter-light-mode .hours-banner {
    background-color: #ffffff !important;
}

.color-filter-light-mode .feature-card,
.color-filter-light-mode .menu-item,
.color-filter-light-mode .event-card {
    background-color: #f8f8f8 !important;
    border-color: #cccccc !important;
}

.color-filter-light-mode .btn {
    background-color: #1a4a4a !important;
    color: #ffffff !important;
    border-color: #1a4a4a !important;
}

.color-filter-light-mode .btn:hover {
    background-color: #2a5a5a !important;
}

/* Light mode mobile navbar button fix */
.color-filter-light-mode .nav-toggle .bar {
    background: #1a4a4a !important; /* Dark teal for visibility on white */
}

.color-filter-light-mode .nav-toggle:hover .bar {
    background: #000000 !important; /* Black on hover */
}

/* Light mode overlay fixes */
.color-filter-light-mode .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%) !important;
}

.color-filter-light-mode .hero-text {
    background: transparent !important;
    color: #1a4a4a !important;
}

.color-filter-light-mode .hero-content {
    background: transparent !important;
    color: #1a4a4a !important;
}

.color-filter-light-mode .hero-content *,
.color-filter-light-mode .hero-section *,
.color-filter-light-mode .hero-banner,
.color-filter-light-mode .hero-banner *,
.color-filter-light-mode .hero-wrapper,
.color-filter-light-mode .hero-wrapper *,
.color-filter-light-mode .hero-container,
.color-filter-light-mode .hero-container * {
    background: transparent !important;
    color: #1a4a4a !important;
}

.color-filter-light-mode .gallery-overlay {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1a4a4a !important;
}

/* Naughty Mode - Fun colorful theme */
#accessibility-filter-wrapper.color-filter-naughty-mode {
    filter: 
        saturate(2)
        hue-rotate(45deg)
        contrast(1.2)
        brightness(1.1);
}

/* Naughty mode color palette */
.color-filter-naughty-mode {
    --primary-teal: #ff1493; /* Hot pink */
    --secondary-teal: #ff69b4; /* Pink */
    --accent-gold: #ffd700; /* Bright gold */
    --accent-gold: #ffd700; /* Bright gold for visibility in naughty mode */
    --cream: #ffb6c1; /* Light pink cream equivalent */
    --text-dark: #4b0082; /* Indigo */
    --text-light: #ffffff; /* White text */
    --background-dark: #ff1493; /* Hot pink background */
    --background-light: #ffb6c1; /* Light pink background */
    --shadow: rgba(255, 20, 147, 0.3); /* Pink shadows */
    --shadow-dark: rgba(255, 20, 147, 0.5); /* Stronger pink shadows */
}

/* Naughty mode background and text styling */
.color-filter-naughty-mode .title-main,
.color-filter-naughty-mode .menu-hero-title {
    color: #00ffff !important; /* Bright cyan for better visibility */
    text-shadow: 2px 2px 4px rgba(255, 215, 0, 0.8), 0 0 10px rgba(0, 255, 255, 0.6) !important;
    font-weight: bold !important;
    animation: naughty-glow 2s ease-in-out infinite alternate;
}

.color-filter-naughty-mode .hours-text {
    color: #00ff00 !important; /* Bright lime green */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 8px rgba(0, 255, 0, 0.5) !important;
}

.color-filter-naughty-mode .logo-text,
.color-filter-naughty-mode .footer-logo-text {
    color: #00ffff !important; /* Bright cyan for header logo */
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 8px rgba(0, 255, 255, 0.5) !important;
}

.color-filter-naughty-mode .nav-link,
.color-filter-naughty-mode .nav-link span {
    color: #00ff00 !important; /* Bright lime green for navbar links */
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 6px rgba(0, 255, 0, 0.4) !important;
    font-weight: bold !important;
}

.color-filter-naughty-mode .nav-link:hover,
.color-filter-naughty-mode .nav-link:hover span {
    color: #ffff00 !important; /* Bright yellow on hover */
    text-shadow: 1px 1px 2px rgba(255, 20, 147, 0.8), 0 0 8px rgba(255, 255, 0, 0.6) !important;
    transform: scale(1.05) !important;
}

.color-filter-naughty-mode .section-title {
    color: #ff1493 !important;
    text-shadow: 2px 2px 4px rgba(255, 215, 0, 0.8), 0 0 10px rgba(255, 20, 147, 0.6) !important;
    animation: naughty-rainbow 3s ease-in-out infinite;
}

/* Epic Kipuka Collective effects in naughty mode */
.color-filter-naughty-mode .powered-by {
    background: linear-gradient(45deg, #ff1493, #00ffff, #ffff00, #32cd32, #ff4500) !important;
    background-size: 300% 300% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
    text-shadow: none !important;
    animation: naughty-rainbow-bg 4s ease-in-out infinite, naughty-pulse 2s ease-in-out infinite alternate !important;
    padding: 10px !important;
    border: 2px solid transparent !important;
    border-image: linear-gradient(45deg, #ff1493, #00ffff, #ffff00) 1 !important;
    border-radius: 8px !important;
    position: relative !important;
    overflow: hidden !important;
}

.color-filter-naughty-mode .powered-by::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    animation: naughty-shine 3s ease-in-out infinite !important;
    z-index: 1 !important;
}

.color-filter-naughty-mode .powered-by a {
    background: linear-gradient(45deg, #ff1493, #00ffff, #ffff00, #32cd32, #ff4500) !important;
    background-size: 300% 300% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 2 !important;
    animation: naughty-rainbow-bg 4s ease-in-out infinite reverse !important;
}

.color-filter-naughty-mode .powered-by a:hover {
    transform: scale(1.1) rotate(2deg) !important;
    filter: drop-shadow(0 0 10px rgba(255, 20, 147, 0.8)) !important;
    animation: naughty-rainbow-bg 1s ease-in-out infinite, naughty-bounce 0.6s ease-in-out infinite !important;
}

.color-filter-naughty-mode .btn {
    background: linear-gradient(45deg, #ff1493, #ff69b4, #ffd700) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.5) !important;
    border: 2px solid #ff1493 !important;
    animation: naughty-pulse 1.5s ease-in-out infinite !important;
}

.color-filter-naughty-mode .btn:hover {
    background: linear-gradient(45deg, #ff69b4, #ffd700, #ff1493) !important;
    transform: scale(1.05) !important;
}

.color-filter-naughty-mode a {
    color: #ff1493 !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

.color-filter-naughty-mode a:hover {
    color: #ffd700 !important;
    text-shadow: 1px 1px 2px rgba(255, 20, 147, 0.5) !important;
}

/* Naughty mode footer quick links fix - high contrast */
.color-filter-naughty-mode .footer-section a,
.color-filter-naughty-mode .footer-section ul li a {
    color: #00ffff !important; /* Bright cyan for visibility */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 255, 255, 0.4) !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

.color-filter-naughty-mode .footer-section a:hover,
.color-filter-naughty-mode .footer-section ul li a:hover {
    color: #ffff00 !important; /* Bright yellow on hover */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 255, 0, 0.6) !important;
    transform: scale(1.05) !important;
}

/* Naughty mode calendar active day - high contrast */
.color-filter-naughty-mode .calendar-day.today {
    border: 3px solid #00ffff !important; /* Bright cyan border */
    font-weight: bold !important;
    background: rgba(0, 0, 0, 0.8) !important; /* Dark background for contrast */
    color: #00ffff !important; /* Bright cyan text */
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 6px rgba(0, 255, 255, 0.5) !important;
}

.color-filter-naughty-mode .calendar-day.has-event {
    border: 3px solid #00ff00 !important; /* Bright green border */
    font-weight: bold !important;
    background: rgba(0, 0, 0, 0.7) !important; /* Dark background for contrast */
    color: #00ff00 !important; /* Bright green text */
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 6px rgba(0, 255, 0, 0.4) !important;
}

/* Naughty mode scrolling hours text - high contrast */
.color-filter-naughty-mode .hours-banner .hours-text,
.color-filter-naughty-mode .hours-text {
    color: #00ff00 !important; /* Bright lime green */
    font-weight: bold !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 255, 0, 0.6) !important;
    background: rgba(0, 0, 0, 0.3) !important; /* Semi-transparent dark background */
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Naughty mode animations */
@keyframes naughty-glow {
    0% { text-shadow: 2px 2px 4px rgba(255, 215, 0, 0.8), 0 0 10px rgba(255, 20, 147, 0.5); }
    100% { text-shadow: 2px 2px 4px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 20, 147, 0.8); }
}

@keyframes naughty-pulse {
    0% { box-shadow: 0 0 5px rgba(255, 20, 147, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 20, 147, 0.8), 0 0 25px rgba(255, 215, 0, 0.5); }
    100% { box-shadow: 0 0 5px rgba(255, 20, 147, 0.5); }
}

@keyframes naughty-rainbow-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes naughty-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes naughty-shine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

@keyframes naughty-rainbow {
    0% { color: #ff1493; }
    16.66% { color: #00ffff; }
    33.33% { color: #ffff00; }
    50% { color: #32cd32; }
    66.66% { color: #ff4500; }
    83.33% { color: #9370db; }
    100% { color: #ff1493; }
}

/* Enhanced contrast mode for severe color blindness */
#accessibility-filter-wrapper.color-filter-high-contrast {
    filter: 
        contrast(1.3)
        brightness(1.1)
        saturate(1.5);
}

.color-filter-high-contrast {
    --primary-teal: #1a3a3a;
    --secondary-teal: #2a4a4a;
    --accent-gold: #ffffff; /* Changed to white for maximum contrast against dark backgrounds */
    --cream: #1a1a1a; /* Dark cream equivalent for high contrast */
    --text-dark: #000000;
    --text-light: #ffffff;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-dark: rgba(0, 0, 0, 0.5);
}

/* Accessibility switch styles */
.accessibility-switch {
    position: fixed !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    z-index: 10000 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 1rem;
    border: 2px solid var(--accent-gold);
    transition: all 0.3s ease;
    max-width: 280px;
    font-family: var(--font-secondary);
}

/* Ensure accessibility switch is never affected by filters */
body.color-filter-deuteranomaly .accessibility-switch,
body.color-filter-protanopia .accessibility-switch,
body.color-filter-tritanopia .accessibility-switch,
body.color-filter-high-contrast .accessibility-switch {
    position: fixed !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    z-index: 10000 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    filter: none !important;
}

/* Dark mode specific accessibility switch styling */
body.color-filter-dark-mode .accessibility-switch {
    position: fixed !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    z-index: 10000 !important;
    background: rgba(45, 45, 45, 0.95) !important;
    color: #ffffff !important;
    border: 2px solid #ffd700 !important;
    filter: none !important;
}

/* Dark mode accessibility switch text colors */
body.color-filter-dark-mode .accessibility-switch-title {
    color: #ffffff !important;
}

body.color-filter-dark-mode .accessibility-option label {
    color: #ffffff !important;
}

body.color-filter-dark-mode .accessibility-option-description {
    color: #cccccc !important;
}

body.color-filter-dark-mode .accessibility-toggle-btn {
    background: #ffd700 !important;
    color: #000000 !important;
}

body.color-filter-dark-mode .accessibility-toggle-btn:hover {
    background: #ffffff !important;
    color: #000000 !important;
}

body.color-filter-dark-mode .accessibility-option label:hover {
    background: rgba(255, 215, 0, 0.2) !important;
}

/* Additional isolation for accessibility switch and all its children */
.accessibility-switch,
.accessibility-switch *,
.accessibility-switch::before,
.accessibility-switch::after {
    filter: none !important;
    position: relative !important;
}

/* Override for the main switch container */
.accessibility-switch {
    position: fixed !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
}

/* Create a new stacking context to isolate from filters */
.accessibility-switch {
    isolation: isolate !important;
    contain: layout style !important;
}

.accessibility-switch.collapsed {
    padding: 0.5rem;
    max-width: 60px;
}

.accessibility-switch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    cursor: pointer;
}

.accessibility-switch.collapsed .accessibility-switch-header {
    margin-bottom: 0;
}

.accessibility-switch-title {
    font-weight: 600;
    color: var(--primary-teal);
    font-size: 0.9rem;
    margin: 0;
}

.accessibility-switch.collapsed .accessibility-switch-title {
    display: none;
}

.accessibility-toggle-btn {
    background: var(--primary-teal);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.accessibility-toggle-btn:hover {
    background: var(--secondary-teal);
    transform: scale(1.1);
}

.accessibility-switch-content {
    transition: all 0.3s ease;
}

.accessibility-switch.collapsed .accessibility-switch-content {
    display: none;
}

.accessibility-option {
    margin-bottom: 0.8rem;
}

.accessibility-option:last-child {
    margin-bottom: 0;
}

.accessibility-option label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-dark);
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.accessibility-option label:hover {
    background: rgba(44, 95, 95, 0.1);
}

.accessibility-option input[type="radio"] {
    margin-right: 0.5rem;
    accent-color: var(--primary-teal);
}

.accessibility-option-description {
    font-size: 0.75rem;
    color: var(--warm-slate);
    margin-left: 1.2rem;
    margin-top: 0.2rem;
    line-height: 1.3;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .accessibility-switch {
        right: 10px;
        max-width: 260px;
        font-size: 0.9rem;
    }
    
    .accessibility-switch.collapsed {
        max-width: 50px;
    }
    
    .accessibility-toggle-btn {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
    
    .accessibility-option label {
        font-size: 0.8rem;
        padding: 0.4rem;
    }
    
    .accessibility-option-description {
        font-size: 0.7rem;
        margin-left: 1rem;
    }
}

@media (max-width: 480px) {
    .accessibility-switch {
        right: 5px;
        max-width: 240px;
        padding: 0.8rem;
    }
    
    .accessibility-switch.collapsed {
        padding: 0.4rem;
        max-width: 45px;
    }
    
    .accessibility-toggle-btn {
        width: 26px;
        height: 26px;
        font-size: 0.9rem;
    }
}

/* Focus states for accessibility */
.accessibility-option input[type="radio"]:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.accessibility-toggle-btn:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Animation for filter transitions */
body {
    transition: filter 0.5s ease;
}

/* Ensure text remains readable with all filters */
.color-filter-deuteranomaly *,
.color-filter-protanopia *,
.color-filter-tritanopia *,
.color-filter-high-contrast *,
.color-filter-dark-mode * {
    text-shadow: none !important;
}

/* Critical navbar positioning fixes - ensure header stays fixed */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    isolation: isolate !important;
    contain: layout style !important;
    transform: translateZ(0) !important; /* Force hardware acceleration */
    will-change: transform !important;
}

/* Ensure header and all children are never affected by accessibility filters */
.header,
.header *,
.header::before,
.header::after {
    filter: none !important;
    backdrop-filter: none !important;
}

/* Force header to create its own stacking context */
.header {
    transform-style: preserve-3d !important;
}

/* Ensure body has proper top margin to account for fixed header */
body {
    margin-top: 80px !important; /* Adjust based on header height */
}

/* Override for accessibility modes to ensure header isolation */
body.color-filter-deuteranomaly .header,
body.color-filter-protanopia .header,
body.color-filter-tritanopia .header,
body.color-filter-high-contrast .header,
body.color-filter-naughty-mode .header,
body.color-filter-dark-mode .header,
body.color-filter-light-mode .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate !important;
    contain: layout style !important;
    transform: translateZ(0) !important;
}

/* Dark mode specific text and element styling */
.color-filter-dark-mode .title-main,
.color-filter-dark-mode .menu-hero-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: bold !important;
}

.color-filter-dark-mode .hours-text {
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.color-filter-dark-mode .logo-text,
.color-filter-dark-mode .footer-logo-text {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.color-filter-dark-mode .section-title {
    color: #4a9999 !important;
    font-weight: bold !important;
}

/* Dark mode button and link enhancements */
.color-filter-dark-mode .btn {
    border-width: 2px;
    font-weight: 600;
    background: #4a9999 !important;
    color: #ffffff !important;
}

.color-filter-dark-mode a {
    color: #ffd700 !important;
    text-decoration: underline;
    font-weight: 500;
}

/* Dark mode mobile navbar button fix */
.color-filter-dark-mode .nav-toggle .bar {
    background: #ffd700 !important; /* Bright gold for visibility */
}

.color-filter-dark-mode .nav-toggle:hover .bar {
    background: #ffffff !important; /* White on hover */
}

/* Dark mode overlay fixes */
.color-filter-dark-mode .hero-overlay {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.7) 0%, rgba(26, 26, 26, 0.5) 100%) !important;
}

.color-filter-dark-mode .hero-text {
    background: transparent !important;
    color: #ffffff !important;
}

.color-filter-dark-mode .hero-content {
    background: transparent !important;
    color: #ffffff !important;
}

.color-filter-dark-mode .hero-content *,
.color-filter-dark-mode .hero-section *,
.color-filter-dark-mode .hero-banner,
.color-filter-dark-mode .hero-banner *,
.color-filter-dark-mode .hero-wrapper,
.color-filter-dark-mode .hero-wrapper *,
.color-filter-dark-mode .hero-container,
.color-filter-dark-mode .hero-container * {
    background: transparent !important;
    color: #ffffff !important;
}

.color-filter-dark-mode .gallery-overlay {
    background: rgba(26, 26, 26, 0.8) !important;
    color: #ffd700 !important;
}

/* Dark mode calendar improvements */
.color-filter-dark-mode .calendar-day.today {
    border: 3px solid #ffd700;
    font-weight: bold;
    background: rgba(255, 215, 0, 0.2) !important;
    color: #ffffff !important;
}

.color-filter-dark-mode .calendar-day.has-event {
    border: 3px solid #4a9999;
    font-weight: bold;
    background: rgba(74, 153, 153, 0.2) !important;
    color: #ffffff !important;
}

/* Enhanced button visibility for color blind users */
.color-filter-deuteranomaly .btn,
.color-filter-protanopia .btn,
.color-filter-tritanopia .btn {
    border-width: 2px;
    font-weight: 600;
}

/* Enhanced link visibility */
.color-filter-deuteranomaly a,
.color-filter-protanopia a,
.color-filter-tritanopia a {
    text-decoration: underline;
    font-weight: 500;
}

/* Status indicator for active filter */
.accessibility-status {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-gold);
    border: 2px solid white;
    display: none;
}

.accessibility-switch.active .accessibility-status {
    display: block;
}

/* Improved icon visibility for color blind users */
.color-filter-deuteranomaly .nav-icon,
.color-filter-protanopia .nav-icon,
.color-filter-tritanopia .nav-icon,
.color-filter-deuteranomaly .feature-icon,
.color-filter-protanopia .feature-icon,
.color-filter-tritanopia .feature-icon,
.color-filter-deuteranomaly .event-icon,
.color-filter-protanopia .event-icon,
.color-filter-tritanopia .event-icon {
    filter: contrast(1.2) brightness(1.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 2px;
}

/* Calendar improvements for color blind users */
.color-filter-deuteranomaly .calendar-day.today,
.color-filter-protanopia .calendar-day.today,
.color-filter-tritanopia .calendar-day.today {
    border: 3px solid #ffffff;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
}

.color-filter-deuteranomaly .calendar-day.has-event,
.color-filter-protanopia .calendar-day.has-event,
.color-filter-tritanopia .calendar-day.has-event {
    border: 3px solid #cccccc;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
}

/* Gallery overlay improvements */
.color-filter-deuteranomaly .gallery-overlay,
.color-filter-protanopia .gallery-overlay,
.color-filter-tritanopia .gallery-overlay {
    background: rgba(0, 0, 0, 0.8);
    font-weight: bold;
    font-size: 1.1rem;
}

/* Menu item improvements */
.color-filter-deuteranomaly .menu-item,
.color-filter-protanopia .menu-item,
.color-filter-tritanopia .menu-item {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.color-filter-deuteranomaly .menu-item-price,
.color-filter-protanopia .menu-item-price,
.color-filter-tritanopia .menu-item-price {
    font-weight: bold;
    text-decoration: underline;
}

/* Hero title improvements for color blind users */
.color-filter-deuteranomaly .title-main,
.color-filter-protanopia .title-main,
.color-filter-tritanopia .title-main,
.color-filter-high-contrast .title-main {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: bold !important;
}

/* Hours banner improvements for color blind users */
.color-filter-deuteranomaly .hours-text,
.color-filter-protanopia .hours-text,
.color-filter-tritanopia .hours-text,
.color-filter-high-contrast .hours-text {
    color: #000000 !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Logo text improvements for color blind users */
.color-filter-deuteranomaly .logo-text,
.color-filter-protanopia .logo-text,
.color-filter-tritanopia .logo-text,
.color-filter-high-contrast .logo-text {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Section title improvements for color blind users */
.color-filter-deuteranomaly .section-title,
.color-filter-protanopia .section-title,
.color-filter-tritanopia .section-title,
.color-filter-high-contrast .section-title {
    color: var(--primary-teal) !important;
    font-weight: bold !important;
}

/* Footer logo text improvements */
.color-filter-deuteranomaly .footer-logo-text,
.color-filter-protanopia .footer-logo-text,
.color-filter-tritanopia .footer-logo-text,
.color-filter-high-contrast .footer-logo-text {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Menu hero title improvements */
.color-filter-deuteranomaly .menu-hero-title,
.color-filter-protanopia .menu-hero-title,
.color-filter-tritanopia .menu-hero-title,
.color-filter-high-contrast .menu-hero-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: bold !important;
}

/* Footer quick links contrast improvements for all color blindness modes */
.color-filter-deuteranomaly .footer-section a,
.color-filter-deuteranomaly .footer-section ul li a,
.color-filter-protanopia .footer-section a,
.color-filter-protanopia .footer-section ul li a,
.color-filter-tritanopia .footer-section a,
.color-filter-tritanopia .footer-section ul li a {
    color: #ffffff !important; /* White for high contrast */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(255, 255, 255, 0.3) !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

.color-filter-deuteranomaly .footer-section a:hover,
.color-filter-deuteranomaly .footer-section ul li a:hover,
.color-filter-protanopia .footer-section a:hover,
.color-filter-protanopia .footer-section ul li a:hover,
.color-filter-tritanopia .footer-section a:hover,
.color-filter-tritanopia .footer-section ul li a:hover {
    color: #ffff00 !important; /* Bright yellow on hover */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(255, 255, 0, 0.5) !important;
    transform: scale(1.05) !important;
}

/* Scrolling hours text contrast improvements for all color blindness modes */
.color-filter-deuteranomaly .hours-banner .hours-text,
.color-filter-deuteranomaly .hours-text,
.color-filter-protanopia .hours-banner .hours-text,
.color-filter-protanopia .hours-text,
.color-filter-tritanopia .hours-banner .hours-text,
.color-filter-tritanopia .hours-text {
    color: #000000 !important; /* Black text for better contrast */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.2) !important; /* Light background for contrast */
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* MENU PRICE VISIBILITY FIXES FOR ALL ACCESSIBILITY MODES */

/* Menu price improvements for deuteranomaly (green color blindness) */
.color-filter-deuteranomaly .menu-item-price,
.color-filter-deuteranomaly .full-menu-item .menu-item-price,
.color-filter-deuteranomaly .price {
    color: #ffffff !important; /* White text for maximum contrast */
    background: rgba(0, 0, 0, 0.8) !important; /* Dark background */
    font-weight: bold !important;
    text-decoration: underline !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 2px solid #ffffff !important;
    display: inline-block !important;
}

/* Menu price improvements for protanopia (red color blindness) */
.color-filter-protanopia .menu-item-price,
.color-filter-protanopia .full-menu-item .menu-item-price,
.color-filter-protanopia .price {
    color: #ffffff !important; /* White text for maximum contrast */
    background: rgba(0, 0, 0, 0.8) !important; /* Dark background */
    font-weight: bold !important;
    text-decoration: underline !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 2px solid #ffffff !important;
    display: inline-block !important;
}

/* Menu price improvements for tritanopia (blue color blindness) */
.color-filter-tritanopia .menu-item-price,
.color-filter-tritanopia .full-menu-item .menu-item-price,
.color-filter-tritanopia .price {
    color: #ffffff !important; /* White text for maximum contrast */
    background: rgba(0, 0, 0, 0.8) !important; /* Dark background */
    font-weight: bold !important;
    text-decoration: underline !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 2px solid #ffffff !important;
    display: inline-block !important;
}

/* Menu price improvements for high contrast mode */
.color-filter-high-contrast .menu-item-price,
.color-filter-high-contrast .full-menu-item .menu-item-price,
.color-filter-high-contrast .price {
    color: #ffffff !important; /* White text for maximum contrast */
    background: rgba(0, 0, 0, 0.9) !important; /* Very dark background */
    font-weight: bold !important;
    text-decoration: underline !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    border: 3px solid #ffffff !important;
    display: inline-block !important;
    font-size: 1.1em !important; /* Slightly larger for better visibility */
}

/* Menu price improvements for naughty mode */
.color-filter-naughty-mode .menu-item-price,
.color-filter-naughty-mode .full-menu-item .menu-item-price,
.color-filter-naughty-mode .price {
    color: #00ffff !important; /* Bright cyan for visibility */
    background: rgba(0, 0, 0, 0.8) !important; /* Dark background */
    font-weight: bold !important;
    text-decoration: underline !important;
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 8px rgba(0, 255, 255, 0.6) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 2px solid #00ffff !important;
    display: inline-block !important;
    animation: naughty-price-glow 2s ease-in-out infinite alternate;
}

/* Menu price improvements for dark mode */
.color-filter-dark-mode .menu-item-price,
.color-filter-dark-mode .full-menu-item .menu-item-price,
.color-filter-dark-mode .price {
    color: #ffd700 !important; /* Bright gold for visibility */
    background: rgba(0, 0, 0, 0.7) !important; /* Dark background */
    font-weight: bold !important;
    text-decoration: underline !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 2px solid #ffd700 !important;
    display: inline-block !important;
}

/* Menu price improvements for light mode */
.color-filter-light-mode .menu-item-price,
.color-filter-light-mode .full-menu-item .menu-item-price,
.color-filter-light-mode .price {
    color: #000000 !important; /* Black text for light backgrounds */
    background: rgba(255, 255, 255, 0.9) !important; /* Light background */
    font-weight: bold !important;
    text-decoration: underline !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 2px solid #000000 !important;
    display: inline-block !important;
}

/* Animation for naughty mode price glow */
@keyframes naughty-price-glow {
    0% { 
        text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 8px rgba(0, 255, 255, 0.6);
        border-color: #00ffff;
    }
    100% { 
        text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 16px rgba(0, 255, 255, 0.9);
        border-color: #ffff00;
    }
}

/* Additional menu item styling for better overall contrast */
.color-filter-deuteranomaly .full-menu-item,
.color-filter-protanopia .full-menu-item,
.color-filter-tritanopia .full-menu-item,
.color-filter-high-contrast .full-menu-item {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

.color-filter-naughty-mode .full-menu-item {
    border: 2px solid rgba(0, 255, 255, 0.5) !important;
    background: rgba(255, 20, 147, 0.1) !important;
}

/* EVENT TIMES VISIBILITY FIXES FOR ALL ACCESSIBILITY MODES */

/* Event times improvements for deuteranomaly (green color blindness) */
.color-filter-deuteranomaly .event-time {
    color: #ffffff !important; /* White text for maximum contrast */
    background: rgba(0, 0, 0, 0.8) !important; /* Dark background */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 2px solid #ffffff !important;
    display: inline-block !important;
    margin: 4px 0 !important;
}

/* Event times improvements for protanopia (red color blindness) */
.color-filter-protanopia .event-time {
    color: #ffffff !important; /* White text for maximum contrast */
    background: rgba(0, 0, 0, 0.8) !important; /* Dark background */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 2px solid #ffffff !important;
    display: inline-block !important;
    margin: 4px 0 !important;
}

/* Event times improvements for tritanopia (blue color blindness) */
.color-filter-tritanopia .event-time {
    color: #ffffff !important; /* White text for maximum contrast */
    background: rgba(0, 0, 0, 0.8) !important; /* Dark background */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 2px solid #ffffff !important;
    display: inline-block !important;
    margin: 4px 0 !important;
}

/* Event times improvements for high contrast mode */
.color-filter-high-contrast .event-time,
.color-filter-high-contrast .events .events-grid .event-time {
    color: #ffffff !important; /* White text for maximum contrast */
    background: rgba(0, 0, 0, 0.9) !important; /* Very dark background */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1) !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    border: 3px solid #ffffff !important;
    display: inline-block !important;
    margin: 4px 0 !important;
    font-size: 1.1em !important; /* Slightly larger for better visibility */
}

/* Event times improvements for naughty mode */
.color-filter-naughty-mode .event-time {
    color: #00ffff !important; /* Bright cyan for visibility */
    background: rgba(0, 0, 0, 0.8) !important; /* Dark background */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 8px rgba(0, 255, 255, 0.6) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 2px solid #00ffff !important;
    display: inline-block !important;
    margin: 4px 0 !important;
    animation: naughty-event-glow 2s ease-in-out infinite alternate;
}

/* Event times improvements for dark mode */
.color-filter-dark-mode .event-time {
    color: #ffd700 !important; /* Bright gold for visibility */
    background: rgba(0, 0, 0, 0.7) !important; /* Dark background */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 2px solid #ffd700 !important;
    display: inline-block !important;
    margin: 4px 0 !important;
}

/* Event times improvements for light mode */
.color-filter-light-mode .event-time {
    color: #000000 !important; /* Black text for light backgrounds */
    background: rgba(255, 255, 255, 0.9) !important; /* Light background */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 2px solid #000000 !important;
    display: inline-block !important;
    margin: 4px 0 !important;
}

/* Animation for naughty mode event time glow */
@keyframes naughty-event-glow {
    0% { 
        text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 8px rgba(0, 255, 255, 0.6);
        border-color: #00ffff;
    }
    100% { 
        text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.8), 0 0 16px rgba(0, 255, 255, 0.9);
        border-color: #ffff00;
    }
}

/* Additional event card styling for better overall contrast */
.color-filter-deuteranomaly .event-card,
.color-filter-protanopia .event-card,
.color-filter-tritanopia .event-card,
.color-filter-high-contrast .event-card {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

.color-filter-naughty-mode .event-card {
    border: 2px solid rgba(0, 255, 255, 0.5) !important;
    background: rgba(255, 20, 147, 0.1) !important;
}

/* Naughty Mode Epic Animations */
@keyframes naughty-rainbow {
    0% { filter: hue-rotate(0deg) saturate(1.5) brightness(1.2); }
    25% { filter: hue-rotate(90deg) saturate(2) brightness(1.3); }
    50% { filter: hue-rotate(180deg) saturate(1.8) brightness(1.1); }
    75% { filter: hue-rotate(270deg) saturate(2.2) brightness(1.4); }
    100% { filter: hue-rotate(360deg) saturate(1.5) brightness(1.2); }
}

@keyframes naughty-rainbow-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes naughty-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

@keyframes naughty-shine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

@keyframes naughty-bounce {
    0%, 100% { transform: scale(1.1) rotate(2deg) translateY(0); }
    50% { transform: scale(1.1) rotate(2deg) translateY(-5px); }
}