/* панель */
.accessibility-panel {
    position: fixed; /* Панель фиксирована на экране, не прокручивается вместе с содержимым */
    top: 0; /* Прикреплена к верхнему краю экрана */
    right: 0; /* Прикреплена к правому краю экрана */
    height: 100dvh; /* Высота 100% от динамической высоты вьюпорта (учитывает адресную строку на мобильных) */
    width: 500px; /* Фиксированная ширина панели */
    overflow-y: auto; /* Появится вертикальная полоса прокрутки, если содержимое превысит высоту панели */

    background: #fff; /* Белый фон панели */
    z-index: 1040; /* Панель будет поверх большинства других элементов на странице */
    transition: transform 0.3s ease; /* Анимация перемещения панели в течение 0.3 секунды с плавным ускорением/замедлением */
    transform: translateX(100%); /* Изначально панель полностью сдвинута за пределы экрана вправо (скрыта) */
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); /* Тень слева от панели, создающая эффект выдвижения */
    min-height: 100vh; /* Минимальная высота 100% от высоты вьюпорта (для совместимости) */
}

@media (max-width: 575.98px) { /* Медиа-запрос: стили применяются, когда ширина экрана 575.98px или меньше */
    .accessibility-panel {
        width: 60%; /* На маленьких экранах ширина панели уменьшается до 60% от ширины вьюпорта */
    }
}
/* Кнопка открытия панели */
.accessibility-btn {
    position: fixed; /* Кнопка фиксирована на экране */
    bottom: 1rem; /* Отступ 1rem от нижнего края экрана */
    right: 1rem; /* Отступ 1rem от правого края экрана */

    z-index: 1050; /* Кнопка будет поверх панели доступности и других элементов */
    background: #007bff; /* Синий фон кнопки */
    color: white; /* Белый цвет текста/иконки */
    border: none; /* Без рамки */
    border-radius: 50%; /* Делает кнопку круглой */
    width: 48px; /* Ширина кнопки */
    height: 48px; /* Высота кнопки */
    font-size: 24px; /* Размер шрифта для иконки/текста внутри кнопки */
    display: flex; /* Используем flexbox для центрирования содержимого */
    align-items: center; /* Выравнивание содержимого по центру по вертикали */
    justify-content: center; /* Выравнивание содержимого по центру по горизонтали */
}

/* Открытая панель */
.accessibility-panel.show {
    transform: translateX(0); /* Перемещает панель в исходное положение (полностью на экране) */
}

/* Высокая контрастность */
body.high-contrast {
    background-color: #000 !important; /* Фон становится чёрным (важно, чтобы переопределить другие стили) */
    color: #fff !important; /* Текст становится белым (важно) */
}

body.high-contrast a {
    color: #0ff !important; /* Ссылки становятся ярко-голубыми в режиме высокой контрастности (важно) */
}

/* Высокая контрастность (более общий подход) */
body.high-contrast * {
    color: white !important; /* Весь текст становится белым (важно) */
    background-color: black !important; /* Все фоны становятся чёрными (важно) */
    border-color: white !important; /* Все границы становятся белыми (важно) */
}


/* Оттенки серого */
/* Применяется filter: grayscale(100%) только к нужным элементам, а не ко всему body */
body.grayscale #page-wrapper,
body.grayscale .accessibility-panel,
body.grayscale .accessibility-btn {
    filter: grayscale(100%); /* Применяет 100% оттенков серого (делает элементы чёрно-белыми) */
}


/* Подсветка ссылок */
body.highlight-links a {
    text-decoration: underline !important; /* Добавляет подчеркивание к ссылкам (важно) */
    text-decoration-color: #ff9800 !important; /* Цвет подчеркивания становится оранжевым (важно) */
}


/* Отключение анимаций */
body.no-animation * {
    animation: none !important; /* Отключает все CSS-анимации (важно) */
    transition: none !important; /* Отключает все CSS-переходы (важно) */
}

/* Стоп анимации (более всеобъемлющий подход) */
html.animations-disabled *,
html.animations-disabled *::before,
html.animations-disabled *::after {
    animation: none !important; /* Отключает все CSS-анимации на всех элементах и псевдоэлементах (важно) */
    transition: none !important; /* Отключает все CSS-переходы на всех элементах и псевдоэлементах (важно) */
    scroll-behavior: auto !important; /* Отключает плавную прокрутку, делая её мгновенной (важно) */
}


/* Подсветка фокуса (outline для активного элемента) */
body.focus-highlight *:focus {
    outline: 3px solid orange !important; /* Добавляет оранжевую рамку толщиной 3px при фокусе (важно) */
    outline-offset: 2px; /* Отступ рамки от элемента на 2px */
}


/* Кнопки в панели доступности  */
#increase-font,
#decrease-font,
#increase-line-height,
#decrease-line-height,
#toggle-contrast,
#toggle-grayscale,
#highlight-links,
#disable-animations,
#focus_highlight,   /* Возможно, опечатка или старый ID */
#tts-toggle,
#focus-highlight {
    font-size: 1.1rem; /* Размер шрифта для текста внутри кнопок */
    margin: 5px 5px; /* Внешний отступ 5px сверху/снизу и 5px слева/справа */
    cursor: pointer; /* Курсор меняется на "указатель" при наведении, показывая, что элемент кликабелен */
}