/* =====================================
   ACCESSIBILITY MODE - SIMPLIFIED
   Removes all colors and styling for clean, accessible view
   ===================================== */

/* Remove all colors - make everything black text on white background */
body.accessibility-mode * {
    color: #000000 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background: #ffffff !important;
    border-color: #000000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Fix logo text visibility - override gradient text fill */
body.accessibility-mode .logo-title,
body.accessibility-mode .logo h1,
body.accessibility-mode .tagline {
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #000000 !important;
    background-clip: unset !important;
    color: #000000 !important;
    text-fill-color: #000000 !important;
}

/* Remove animations for users who prefer reduced motion */
body.accessibility-mode *,
body.accessibility-mode *::before,
body.accessibility-mode *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
}

/* Remove gradients and backgrounds */
body.accessibility-mode {
    background: #ffffff !important;
}

/* Enhanced focus indicators */
body.accessibility-mode *:focus,
body.accessibility-mode *:focus-visible {
    outline: 3px solid #000000 !important;
    outline-offset: 3px !important;
}

/* Ensure all interactive elements are keyboard accessible */
body.accessibility-mode button,
body.accessibility-mode a,
body.accessibility-mode input,
body.accessibility-mode textarea,
body.accessibility-mode select {
    cursor: pointer;
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* Better link visibility */
body.accessibility-mode a {
    text-decoration: underline !important;
    color: #000000 !important;
}

/* Clear button styles */
body.accessibility-mode button,
body.accessibility-mode .btn {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.accessibility-mode button:focus,
body.accessibility-mode .btn:focus,
body.accessibility-mode button:hover,
body.accessibility-mode .btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
    outline: 3px solid #000000 !important;
    outline-offset: 3px !important;
}

/* Remove all background images */
body.accessibility-mode *::before,
body.accessibility-mode *::after {
    background-image: none !important;
    background: transparent !important;
}

/* Forms - high contrast */
body.accessibility-mode input,
body.accessibility-mode textarea,
body.accessibility-mode select {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* Header and navigation */
body.accessibility-mode .header,
body.accessibility-mode .nav-menu,
body.accessibility-mode .footer {
    background: #ffffff !important;
    color: #000000 !important;
}

/* Navigation links - ensure visibility */
body.accessibility-mode .nav-menu a,
body.accessibility-mode .nav-menu li a {
    color: #000000 !important;
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

body.accessibility-mode .nav-menu a:hover,
body.accessibility-mode .nav-menu li a:hover,
body.accessibility-mode .nav-menu a.active,
body.accessibility-mode .nav-menu li a.active {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
}

/* Images stay visible but remove decorative elements */
body.accessibility-mode img {
    border: 1px solid #000000 !important;
}

/* Hide decorative SVGs */
body.accessibility-mode svg[aria-hidden="true"] {
    display: none !important;
}

/* =====================================
   TEXT SIZE CONTROLS
   Adjusts font size for entire page
   ===================================== */

/* Small text size */
body.text-size-small {
    font-size: 14px !important;
}

body.text-size-small h1 {
    font-size: 1.8rem !important;
}

body.text-size-small h2 {
    font-size: 1.5rem !important;
}

body.text-size-small h3 {
    font-size: 1.2rem !important;
}

body.text-size-small p,
body.text-size-small li,
body.text-size-small a,
body.text-size-small button {
    font-size: 14px !important;
}

/* Medium text size (default) */
body.text-size-medium {
    font-size: 16px !important;
}

body.text-size-medium h1 {
    font-size: 2.5rem !important;
}

body.text-size-medium h2 {
    font-size: 2rem !important;
}

body.text-size-medium h3 {
    font-size: 1.5rem !important;
}

body.text-size-medium p,
body.text-size-medium li,
body.text-size-medium a,
body.text-size-medium button {
    font-size: 16px !important;
}

/* Large text size */
body.text-size-large {
    font-size: 18px !important;
}

body.text-size-large h1 {
    font-size: 3rem !important;
}

body.text-size-large h2 {
    font-size: 2.5rem !important;
}

body.text-size-large h3 {
    font-size: 2rem !important;
}

body.text-size-large p,
body.text-size-large li,
body.text-size-large a,
body.text-size-large button {
    font-size: 18px !important;
}

/* Extra Large text size */
body.text-size-extra-large {
    font-size: 22px !important;
}

body.text-size-extra-large h1 {
    font-size: 3.5rem !important;
}

body.text-size-extra-large h2 {
    font-size: 3rem !important;
}

body.text-size-extra-large h3 {
    font-size: 2.5rem !important;
}

body.text-size-extra-large p,
body.text-size-extra-large li,
body.text-size-extra-large a,
body.text-size-extra-large button {
    font-size: 22px !important;
}
body.accessibility-mode textarea,
body.accessibility-mode select {
    background: #ffffff !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    font-size: 1.1rem !important;
    padding: 12px !important;
    border-radius: 0 !important;
}

body.accessibility-mode input:focus,
body.accessibility-mode textarea:focus,
body.accessibility-mode select:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    border-color: #0066cc !important;
}

/* Footer - simplified */
body.accessibility-mode .footer {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-top: 3px solid #ffffff !important;
}

body.accessibility-mode .footer a {
    color: #0066cc !important;
}

body.accessibility-mode .footer a:hover {
    background: #0066cc !important;
    color: #ffffff !important;
}

/* Images - hide all images in accessibility mode */
body.accessibility-mode img {
    display: none !important;
}

/* Hide background images */
body.accessibility-mode [style*="background-image"] {
    background-image: none !important;
}

/* Hide decorative elements */
body.accessibility-mode .hero-image-section,
body.accessibility-mode .hero-animation,
body.accessibility-mode .tooth-image,
body.accessibility-mode .circle,
body.accessibility-mode .qr-code-image,
body.accessibility-mode .qr-code-wrapper,
body.accessibility-mode .social-icon img,
body.accessibility-mode .gallery-image,
body.accessibility-mode .review-image,
body.accessibility-mode picture,
body.accessibility-mode svg:not(.accessibility-toggle-btn svg) {
    display: none !important;
}

/* Page headers - simplified */
body.accessibility-mode .page-header {
    background: #000000 !important;
    color: #ffffff !important;
    padding: 2rem 0 !important;
}

body.accessibility-mode .page-header h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.accessibility-mode .page-header p {
    color: #ffffff !important;
}

/* Focus indicators - always visible */
body.accessibility-mode *:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Mobile menu adjustments */
@media (max-width: 768px) {
    body.accessibility-mode .nav-menu {
        background: #000000 !important;
    }
    
    body.accessibility-mode .nav-toggle {
        background: #ffffff !important;
        border: 3px solid #000000 !important;
    }
    
    body.accessibility-mode .nav-toggle span {
        background: #000000 !important;
    }
}