/* Режим отображения для слабовидящих (ГОСТ Р 52872-2019).
   Оформление задаётся атрибутами на <html>, которые ставит сервер, —
   страница не успевает мигнуть обычным видом. */

/* ── Ссылка «к содержимому»: первое, что получает фокус ─────────────────── */

.a11y-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: .75rem 1.25rem;
    /* Белый текст на #1c9c74 давал 3.47:1 при норме 4.5:1. */
    background: #157a5b;
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 10px 0;
    text-decoration: none;
}

.a11y-skip:focus {
    left: 0;
    outline: 3px solid #0f5132;
    outline-offset: 2px;
    color: #fff;
}

/* ── Панель настроек ─────────────────────────────────────────────────────── */

.a11y-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: .85rem;
    color: inherit;
    cursor: pointer;
}

.a11y-toggle:hover { border-color: #1c9c74; color: #157a5b; }
.a11y-toggle:focus-visible { outline: 3px solid #1c9c74; outline-offset: 2px; }

.a11y-panel {
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    background: #f6f9f8;
    padding: 1rem 0;
}

.a11y-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem 1.5rem;
    align-items: start;
}

.a11y-group { border: 0; margin: 0; padding: 0; min-width: 0; }

.a11y-group legend {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #4b5563;
    margin-bottom: .4rem;
    padding: 0;
    float: none;
    width: auto;
}

.a11y-choices { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Переключатель-«таблетка»: сам input скрыт, но остаётся доступным с клавиатуры */
.a11y-choice { position: relative; }

.a11y-choice input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.a11y-choice span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: .35rem .8rem;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    background: #fff;
    font-size: .88rem;
    color: #1f2a26;
}

.a11y-choice input:checked + span { background: #1c9c74; border-color: #1c9c74; color: #fff; }
.a11y-choice input:focus-visible + span { outline: 3px solid #0f5132; outline-offset: 2px; }

.a11y-panel__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }

.a11y-btn {
    border: 1px solid #1c9c74;
    background: #1c9c74;
    color: #fff;
    border-radius: var(--btn-radius);
    font-weight: 600;
    font-size: var(--btn-font-sm);
    padding: var(--btn-pad-sm);
    min-height: var(--btn-h-sm);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.a11y-btn--ghost { background: transparent; color: #157a5b; }
.a11y-btn:focus-visible { outline: 3px solid #0f5132; outline-offset: 2px; }

/* ── Сам режим ───────────────────────────────────────────────────────────── */

/* Цветовые схемы. Задаются переменными и принудительно применяются ко всему
   дереву: тема сайта раскрашивает элементы десятками своих правил. */
:root[data-a11y="on"] {
    --a11y-bg: #ffffff;
    --a11y-fg: #000000;
    --a11y-accent: #000000;
    --a11y-border: #000000;
    --a11y-muted: #333333;
}

:root[data-a11y-scheme="white-on-black"] {
    --a11y-bg: #000000;
    --a11y-fg: #ffffff;
    --a11y-accent: #ffff00;
    --a11y-border: #ffffff;
    --a11y-muted: #e6e6e6;
}

:root[data-a11y-scheme="beige"] {
    --a11y-bg: #f7f3d6;
    --a11y-fg: #4d4b43;
    --a11y-accent: #4d4b43;
    --a11y-border: #4d4b43;
    --a11y-muted: #4d4b43;
}

:root[data-a11y="on"] body,
:root[data-a11y="on"] body * {
    background-image: none !important;
    background-color: transparent !important;
    color: var(--a11y-fg) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important;
}

:root[data-a11y="on"] body { background-color: var(--a11y-bg) !important; }

:root[data-a11y="on"] a,
:root[data-a11y="on"] a * { color: var(--a11y-accent) !important; text-decoration: underline !important; }

:root[data-a11y="on"] button,
:root[data-a11y="on"] input,
:root[data-a11y="on"] select,
:root[data-a11y="on"] textarea,
:root[data-a11y="on"] .card,
:root[data-a11y="on"] table,
:root[data-a11y="on"] th,
:root[data-a11y="on"] td {
    background-color: var(--a11y-bg) !important;
    border: 1px solid var(--a11y-border) !important;
}

:root[data-a11y="on"] button,
:root[data-a11y="on"] [type="submit"] { font-weight: 700 !important; }

/* Подсказки в полях: серый по умолчанию не проходит по контрасту */
:root[data-a11y="on"] ::placeholder { color: var(--a11y-muted) !important; opacity: 1 !important; }

/* Отключённые элементы тоже должны читаться */
:root[data-a11y="on"] :disabled,
:root[data-a11y="on"] [disabled] { opacity: 1 !important; color: var(--a11y-muted) !important; }

/* Фокус виден всегда и на любом фоне */
:root[data-a11y="on"] :focus-visible {
    outline: 4px solid var(--a11y-accent) !important;
    outline-offset: 2px !important;
}

/* Декоративное прячем: иконочные шрифты без подписи только мешают */
:root[data-a11y="on"] [aria-hidden="true"],
:root[data-a11y="on"] .fi,
:root[data-a11y="on"] [class^="fa-"],
:root[data-a11y="on"] [class*=" fa-"] { display: none !important; }

/* Переключатель темы в режиме не нужен: схему задаёт сам режим. */
:root[data-a11y="on"] [data-theme-toggle] { display: none !important; }

/* Цветные плашки, которые общее правило не накрывало: кнопки темы,
   активная вкладка калькуляторов, метки рубрик, подвал подписки —
   оставались зелёными/цветными в чёрно-белой схеме. */
:root[data-a11y="on"] .btn,
:root[data-a11y="on"] .eBtn,
:root[data-a11y="on"] .hc-tab,
:root[data-a11y="on"] .news-tag,
:root[data-a11y="on"] .badge,
:root[data-a11y="on"] .newsletter-wrapper,
:root[data-a11y="on"] .topto-btn,
:root[data-a11y="on"] .welcome-lang__option {
    background-color: var(--a11y-bg) !important;
    background-image: none !important;
    color: var(--a11y-fg) !important;
    border: 2px solid var(--a11y-border) !important;
}

:root[data-a11y="on"] .hc-tab.is-active,
:root[data-a11y="on"] .welcome-lang__option.is-active {
    background-color: var(--a11y-fg) !important;
    color: var(--a11y-bg) !important;
}

:root[data-a11y="on"] .btn *,
:root[data-a11y="on"] .eBtn *,
:root[data-a11y="on"] .hc-tab:not(.is-active) * { color: var(--a11y-fg) !important; }
:root[data-a11y="on"] .hc-tab.is-active * { color: var(--a11y-bg) !important; }

/* Тексты, которые тема красит своим тоном с !important и большей
   специфичностью: надзаголовки разделов, ссылки карточек, названия
   рубрик медиаклуба, активный пункт меню. В схеме «белым по чёрному»
   они оставались зелёными, а заголовок «Новости» — тёмным на чёрном. */
:root[data-a11y="on"] .small-title,
:root[data-a11y="on"] .section-title,
:root[data-a11y="on"] .title,
:root[data-a11y="on"] h1, :root[data-a11y="on"] h2, :root[data-a11y="on"] h3,
:root[data-a11y="on"] h4, :root[data-a11y="on"] h5, :root[data-a11y="on"] h6,
:root[data-a11y="on"] .club-text,
:root[data-a11y="on"] .news-title,
:root[data-a11y="on"] .news-detail,
:root[data-a11y="on"] .news-date { color: var(--a11y-fg) !important; }

:root[data-a11y="on"] .course-detail-link,
:root[data-a11y="on"] .nav-menu a.active,
:root[data-a11y="on"] .menu-parent-a.active,
:root[data-a11y="on"] a.active { color: var(--a11y-accent) !important; }

/* Ссылка карточки курса и рубрика медиаклуба заданы темой селекторами
   выше специфичности общих правил режима — добавляем цепочку предков. */
:root[data-a11y="on"] body .course-item a.course-detail-link,
:root[data-a11y="on"] body .course-item.featured a.course-detail-link,
:root[data-a11y="on"] body .media-club .club-card .club-text,
:root[data-a11y="on"] body .media-club .club-card:hover .club-text,
:root[data-a11y="on"] body .media-club .club-card.active .club-text { color: var(--a11y-fg) !important; }
:root[data-a11y="on"] body .associate-card .club-text,
:root[data-a11y="on"] body .partners-marquee .club-text { color: var(--a11y-accent) !important; }
:root[data-a11y="on"] body .course-item a.course-detail-link,
:root[data-a11y="on"] body .course-item.featured a.course-detail-link { color: var(--a11y-accent) !important; }

/* Панель настроек остаётся читаемой в любой схеме */
:root[data-a11y="on"] .a11y-panel,
:root[data-a11y="on"] .a11y-panel * { background-color: var(--a11y-bg) !important; color: var(--a11y-fg) !important; }
:root[data-a11y="on"] .a11y-choice span { border: 2px solid var(--a11y-border) !important; }
:root[data-a11y="on"] .a11y-choice input:checked + span { background-color: var(--a11y-fg) !important; color: var(--a11y-bg) !important; }
:root[data-a11y="on"] .a11y-btn { border: 2px solid var(--a11y-border) !important; font-weight: 700 !important; }

/* Размер шрифта */
/* Увеличение шрифта. Масштабирование корня поднимало только те размеры,
   что заданы в rem: тема пинит часть текста в px, и «A++» на них не влиял —
   пользователь нажимал и не видел разницы. zoom увеличивает отрисовку
   целиком, включая пиксельные размеры, отступы и значки. */
:root[data-a11y-font="large"] body { zoom: 1.25; }
:root[data-a11y-font="xlarge"] body { zoom: 1.5; }

/* Запасной путь для браузеров без zoom: как было, через размер корня. */
@supports not (zoom: 1.5) {
    :root[data-a11y-font="large"] { font-size: 125%; }
    :root[data-a11y-font="xlarge"] { font-size: 150%; }
}

:root[data-a11y-font="large"] body,
:root[data-a11y-font="xlarge"] body { line-height: 1.7 !important; }

/* Интервал между буквами */
:root[data-a11y-spacing="medium"] body * { letter-spacing: .08em !important; word-spacing: .12em !important; }
:root[data-a11y-spacing="large"] body * { letter-spacing: .16em !important; word-spacing: .24em !important; }

/* Изображения */
:root[data-a11y-images="grayscale"] img,
:root[data-a11y-images="grayscale"] video,
:root[data-a11y-images="grayscale"] svg { filter: grayscale(100%) !important; }

:root[data-a11y-images="off"] img,
:root[data-a11y-images="off"] video,
:root[data-a11y-images="off"] iframe:not([title]) { display: none !important; }

/* Анимации в режиме не нужны — они мешают читать */
:root[data-a11y="on"] *,
:root[data-a11y="on"] *::before,
:root[data-a11y="on"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}

/* Уважаем системную настройку «меньше движения» и вне режима */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Видимый фокус на всём сайте, а не только в режиме: без него управление
   с клавиатуры вслепую. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1c9c74;
    outline-offset: 2px;
}