/* Accessibility Icon Button */
#accessibility-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #000;
    color: white;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 10000;
    transition: background-color 0.3s ease;
}

#accessibility-icon:hover {
    background-color: #333;
}

#accessibility-icon i {
    font-size: 28px;
    background: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

/* Modal Panel */
#accessibility-modal {
    display: none;
    position: fixed;
    bottom: 70px;
    right: 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 15px;
    width: 250px;
    z-index: 10000;
    transition: all 0.3s ease;
}

#accessibility-modal.show {
    display: block;
}

/* Modal Header */
#modal-header {
    background-color: #0073aa;
    color: white;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-radius: 8px 8px 0 0; /* Rounded corners on top */
}

/* Modal Body */
#modal-body {
    padding: 10px;
}

/* Modal Footer */
#modal-footer {
    background-color: #f0f0f0;
    padding: 5px;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #ddd;
    border-radius: 0 0 8px 8px; /* Rounded corners on bottom */
}

/* Button Styles */
button {
    background-color: #0073aa;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #005f8d;
}

/* High Contrast Mode */
.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
    transition: background-color 0.5s, color 0.5s;
}

/* All Text and Links in High-Contrast Mode */
.high-contrast * {
    background-color: #000 !important;
    color: #fff !important;
    text-shadow: none !important; /* Avoid text shadow effects */
}

/* Highlighting Links in High-Contrast Mode */
.high-contrast a {
    color: #00ff00 !important;
    text-decoration: underline !important;
}

.high-contrast a:hover {
    color: #ff00ff !important;
}

/* Buttons in High-Contrast Mode */
.high-contrast button {
    background-color: #fff !important;
    color: #000 !important;
}

.high-contrast button:hover {
    background-color: #555 !important;
    color: #fff !important;
}

/* Fixing Modal Colors in High-Contrast Mode */
.high-contrast #accessibility-modal {
    background-color: #000 !important;
    color: #fff !important;
}

.high-contrast #modal-header {
    background-color: #0073aa;
    color: white;
}

.high-contrast #modal-footer {
    background-color: #333;
    color: #fff;
}

/* Fixing Background Colors for Page */
.high-contrast body {
    background-color: #000 !important;
    color: #fff !important;
}

/* Zoom Levels */
body.zoom-small,
html.zoom-small {
    zoom: 85%; /* Zooms the entire page to 85% of its original size */
}

/* Medium Zoom (default size) */
body.zoom-medium,
html.zoom-medium {
    zoom: 100%; /* No zoom effect, standard size */
}

/* Large Zoom */
body.zoom-large,
html.zoom-large {
    zoom: 125%; /* Zooms the entire page to 125% of its original size */
}

/* Ensure that the dropdown content is visible on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Highlighting the text when it's being spoken */
.speaking {
    background-color: rgba(241, 241, 36, 0.3);  /* Yellow background with transparency */
    border-radius: 4px;
    font-weight: bold;
    /* font-size: xx-large; */
    /* padding: 0.2em; */
    /* transition: background-color 0.3s ease, transform 0.3s ease; */
}


/* Add subtle scaling effect for "speaking" state */
.speaking:hover {
    transform: scale(1.05); /* Slightly enlarges the element on hover */
}

/* Focus Styles */
button:focus, #accessibility-icon:focus, #accessibility-modal:focus {
    outline: 3px solid #FFD700; /* Gold outline for better visibility */
    outline-offset: 2px;
}

/* Hover Effects on Links */
a:hover {
    text-decoration: underline;
    transition: text-decoration 0.3s ease;
}

/* Ensure smooth transitions for modal visibility */
#accessibility-modal {
    transition: transform 0.3s ease-in-out;
}

/* Optional: Applying an overlay when the modal is active (optional) */
#accessibility-modal.show {
    transform: translateY(-10px); /* Slight upward shift when modal is shown */
}

/* Accessibility Icon Hover */
#accessibility-icon:hover {
    background-color: #333;
    transform: scale(1.1); /* Slightly enlarge the icon */
    transition: transform 0.3s ease, background-color 0.3s ease;
}