/* ==========================================================================
   ИАПП — версия для слабовидящих, v1.0
   Режимы включаются классами на <html> (ставит js/a11y.js):
     a11y-on               включена хотя бы одна настройка
     a11y-fs               увеличен шрифт (сам размер задаёт JS)
     a11y-scheme-{bw|wb|blue|beige}
     a11y-img-{gray|hide}
     a11y-ls-{1|2}         интервал между буквами
     a11y-lh-{1|2}         межстрочный интервал
     a11y-ff-{sans|serif}  шрифт
     a11y-cursor           крупный курсор
   Цвета схем — по ГОСТ Р 52872-2019.
   ========================================================================== */

/* Всё, что НЕ панель: так режимы не ломают саму панель настроек */
/* (селектор повторяется ниже как :not(.iapp-a11y):not(.iapp-a11y *)) */

/* ==========================================================================
   1. КНОПКА В ШАПКЕ
   ========================================================================== */

.container-header.iapp-header .iapp-a11y-toggle {
    order: 20;                      /* на десктопе — крайняя справа */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1.5px solid var(--iapp-blue-500, #36609c);
    border-radius: 50%;
    background: #fff;
    color: var(--iapp-blue-500, #36609c);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.container-header.iapp-header .iapp-a11y-toggle:hover,
.container-header.iapp-header .iapp-a11y-toggle[aria-expanded="true"] {
    background: var(--iapp-blue-500, #36609c);
    color: #fff;
}

.container-header.iapp-header .iapp-a11y-toggle:focus-visible {
    outline: 3px solid var(--iapp-blue-300, #90bae4);
    outline-offset: 2px;
}

.container-header.iapp-header .iapp-a11y-toggle svg { width: 24px; height: 24px; display: block; }

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container-header.iapp-header .iapp-a11y-toggle { width: 36px; height: 36px; }
    .container-header.iapp-header .iapp-a11y-toggle svg { width: 20px; height: 20px; }
}

/* Мобильные: рядом с бургером, а не внутри выпадающего меню */
@media (max-width: 1199.98px) {
    .container-header.iapp-header .iapp-a11y-toggle { order: 0; margin-inline-start: auto; }
    .container-header.iapp-header .iapp-a11y-toggle + .iapp-burger { margin-inline-start: 0; }
}

/* ==========================================================================
   2. ПАНЕЛЬ НАСТРОЕК
   Размеры в px и свои цвета: панель не должна меняться вместе с сайтом.
   ========================================================================== */

.iapp-a11y {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    width: min(380px, 100vw);
    background: #fff;
    color: #14294a;
    box-shadow: -12px 0 40px rgba(20, 41, 74, .22);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    font: 16px/1.35 Arial, "Helvetica Neue", sans-serif;
    letter-spacing: normal;
    word-spacing: normal;
    text-align: left;
}

.iapp-a11y[hidden] { display: none; }
.iapp-a11y.is-open { transform: none; }

.iapp-a11y *,
.iapp-a11y *::before,
.iapp-a11y *::after {
    box-sizing: border-box;
    font-family: inherit !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: 1.35 !important;
    cursor: auto;
}

.iapp-a11y button { cursor: pointer !important; }
.iapp-a11y button:disabled { cursor: not-allowed !important; }

.iapp-a11y__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #d9e2ec;
}

.iapp-a11y__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #14294a;
}

.iapp-a11y__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #f0f4fb;
    color: #14294a;
}

.iapp-a11y__close:hover { background: #e4edf7; }

.iapp-a11y__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 20px 20px;
    overscroll-behavior: contain;
}

.iapp-a11y__group { padding: 14px 0; border-bottom: 1px solid #edf1f6; }
.iapp-a11y__group:last-child { border-bottom: 0; }
.iapp-a11y__group[hidden] { display: none; }

.iapp-a11y__label {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #14294a;
}

.iapp-a11y__options {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
}

.iapp-a11y__group.is-schemes .iapp-a11y__options {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
}

.iapp-a11y__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border: 2px solid #d9e2ec;
    border-radius: 10px;
    background: #fff;
    color: #14294a;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}

.iapp-a11y__group.is-schemes .iapp-a11y__opt { justify-content: flex-start; text-align: left; }

.iapp-a11y__opt:hover { border-color: #90bae4; background: #f4f8fd; }

.iapp-a11y__opt[aria-pressed="true"] {
    border-color: #36609c;
    background: #e4edf7;
    box-shadow: inset 0 0 0 1px #36609c;
}

.iapp-a11y__opt:disabled { opacity: .45; }

.iapp-a11y__opt:focus-visible,
.iapp-a11y__close:focus-visible,
.iapp-a11y__reset:focus-visible {
    outline: 3px solid #ff8a00;
    outline-offset: 2px;
}

/* Кнопки размера шрифта */
.iapp-a11y__options.is-fs { grid-auto-columns: 1fr 1.2fr 1fr; }
.iapp-a11y__opt.is-fs-dec { font-size: 16px; }
.iapp-a11y__opt.is-fs-inc { font-size: 22px; }
.iapp-a11y__opt.is-fs-val { font-variant-numeric: tabular-nums; }

/* Образцы цветовых схем */
.iapp-a11y__swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .15);
    font-size: 17px;
    font-weight: 700;
}

.iapp-a11y__swatch.is-default { background: #e4edf7; color: #36609c; }
.iapp-a11y__swatch.is-bw      { background: #fff;    color: #000; }
.iapp-a11y__swatch.is-wb      { background: #000;    color: #fff; }
.iapp-a11y__swatch.is-blue    { background: #9dd1ff; color: #063462; }
.iapp-a11y__swatch.is-beige   { background: #f7f3d6; color: #4d4b43; }

.iapp-a11y__hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #5b6b7e;
}

.iapp-a11y__foot {
    padding: 14px 20px 18px;
    border-top: 1px solid #d9e2ec;
}

.iapp-a11y__reset {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: #36609c;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.iapp-a11y__reset:hover { background: #2a4e82; }

@media (prefers-reduced-motion: reduce) {
    .iapp-a11y { transition: none; }
}

/* ==========================================================================
   3. ОБЩЕЕ ДЛЯ ВКЛЮЧЁННОГО РЕЖИМА
   ========================================================================== */

/* Без анимаций и «прыжков» карточек — они мешают при увеличенном тексте */
html.a11y-on body *:not(.iapp-a11y):not(.iapp-a11y *) {
    transition: none !important;
    animation: none !important;
}

html.a11y-on body *:not(.iapp-a11y):not(.iapp-a11y *):hover { transform: none !important; }

/* Заметный фокус с клавиатуры */
html.a11y-on :focus-visible {
    outline: 3px solid var(--a11y-fg, #14294a) !important;
    outline-offset: 3px !important;
}

/* Пояснения, которые на обычной версии проявляются только при наведении,
   показываем сразу — наведение недоступно многим пользователям */
html.a11y-on .rspbld-page .vinaidete1 .rspbld-content {
    position: static !important;
    height: auto !important;
    opacity: 1 !important;
    padding: 0 1.25rem 1.25rem !important;
    background: transparent !important;
    color: inherit !important;
    pointer-events: auto !important;
}

/* Шапка в режиме для слабовидящих не «липнет» — с крупным текстом
   она заняла бы пол-экрана */
html.a11y-on .container-header.iapp-header { position: relative !important; }

/* …и переносится на несколько строк, а не наезжает сама на себя
   (крупный шрифт, широкие интервалы, подписи вместо иконок) */
html.a11y-on .container-header.iapp-header .iapp-header-main {
    flex-wrap: wrap;
    row-gap: .75rem;
    min-height: 0;
    padding-block: .75rem;
}

html.a11y-on .container-header.iapp-header .iapp-header-main > *,
html.a11y-on .container-header.iapp-header .iapp-collapse > * { flex-shrink: 0; }
html.a11y-on .container-header.iapp-header .iapp-nav-main { flex: 1 1 auto; }
html.a11y-on .container-header.iapp-header .iapp-nav-main .mod-menu { flex-wrap: wrap; }
html.a11y-fs .container-header.iapp-header .iapp-brand .logo { max-height: 56px; }

/* Кнопки и вкладки — высота по содержимому */
html.a11y-fs .iapp-btn,
html.a11y-fs .rspbld-button,
html.a11y-fs .iapp-events__tab { height: auto !important; min-height: 44px; white-space: normal !important; }

/* ==========================================================================
   4. ЦВЕТОВЫЕ СХЕМЫ
   ========================================================================== */

html.a11y-scheme-bw    { --a11y-bg: #fff;    --a11y-fg: #000;    --a11y-link: #0000c8; --a11y-icon: brightness(0); }
html.a11y-scheme-wb    { --a11y-bg: #000;    --a11y-fg: #fff;    --a11y-link: #ffff00; --a11y-icon: brightness(0) invert(1); }
html.a11y-scheme-blue  { --a11y-bg: #9dd1ff; --a11y-fg: #063462; --a11y-link: #063462; --a11y-icon: brightness(0) saturate(100%) invert(14%) sepia(56%) saturate(2400%) hue-rotate(196deg); }
html.a11y-scheme-beige { --a11y-bg: #f7f3d6; --a11y-fg: #4d4b43; --a11y-link: #4d4b43; --a11y-icon: brightness(0) saturate(100%) invert(28%) sepia(9%) saturate(560%) hue-rotate(15deg); }

html[class*="a11y-scheme-"],
html[class*="a11y-scheme-"] body {
    background: var(--a11y-bg) !important;
    color: var(--a11y-fg) !important;
}

/* Фон, текст и рамки — одного цвета; фоновые картинки, тени и «стекло» убираем */
html[class*="a11y-scheme-"] body *:not(.iapp-a11y):not(.iapp-a11y *):not(svg *):not(img) {
    background-color: var(--a11y-bg) !important;
    background-image: none !important;
    color: var(--a11y-fg) !important;
    border-color: var(--a11y-fg) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[class*="a11y-scheme-"] body *:not(.iapp-a11y):not(.iapp-a11y *)::before,
html[class*="a11y-scheme-"] body *:not(.iapp-a11y):not(.iapp-a11y *)::after {
    box-shadow: none !important;
    border-color: var(--a11y-fg) !important;
}

/* Декоративные полоски и линии, нарисованные фоном псевдоэлемента */
html[class*="a11y-scheme-"] .rspbld-page .obuchpsih2::before,
html[class*="a11y-scheme-"] .rspbld-page .row:has(.kakorganizobuch1)::before {
    background: var(--a11y-fg) !important;
}

/* Ссылки — заметны всегда */
html[class*="a11y-scheme-"] body a:not(.iapp-a11y *) {
    color: var(--a11y-link) !important;
    text-decoration: underline !important;
    text-underline-offset: .15em;
}

/* Кнопки — рамкой, а не заливкой */
html[class*="a11y-scheme-"] body :is(button, .btn, .iapp-btn, .rspbld-button, .iapp-events__tab, .iapp-course__badge):not(.iapp-a11y *):not(.mod-menu__toggle-sub):not(.iapp-burger):not(.mainblock1 .rspbld-button):not(.obuchpsih2 .rspbld-button) {
    border: 2px solid var(--a11y-fg) !important;
}

html[class*="a11y-scheme-"] body :is(.iapp-btn, .rspbld-button, .iapp-events__tab.is-active, .iapp-a11y-toggle[aria-expanded="true"]):not(.iapp-a11y *) {
    text-decoration: none !important;
    font-weight: 700 !important;
}

html[class*="a11y-scheme-"] body .iapp-events__tab.is-active {
    background-color: var(--a11y-fg) !important;
    color: var(--a11y-bg) !important;
}

/* Иконки соцсетей — картинки SVG белого цвета: перекрашиваем под схему */
html[class*="a11y-scheme-"] body .iapp-social img {
    filter: var(--a11y-icon) !important;
}

/* Инлайн-иконки (стрелки, иконка в кнопке) — цветом текста */
html[class*="a11y-scheme-"] body svg:not(.iapp-a11y svg) [fill]:not([fill="none"]) { fill: currentColor !important; }
html[class*="a11y-scheme-"] body svg:not(.iapp-a11y svg) [stroke]:not([stroke="none"]) { stroke: currentColor !important; }

/* Картинки фон схемы не получают (исключены выше): иначе фильтр перекраски
   иконок зальёт и фон, и вместо значка будет квадрат */

/* ==========================================================================
   5. ИЗОБРАЖЕНИЯ
   ========================================================================== */

html.a11y-img-gray body > *:not(.iapp-a11y):not(script) { filter: grayscale(1); }

html.a11y-img-hide body :is(img, picture, video):not(.iapp-a11y *) { display: none !important; }
html.a11y-img-hide body *:not(.iapp-a11y):not(.iapp-a11y *) { background-image: none !important; }

/* Вместо картинки — её подпись (alt) */
.iapp-a11y-alt { display: none; }

html.a11y-img-hide .iapp-a11y-alt {
    display: inline-block;
    max-width: 100%;
    margin: .25em 0;
    padding: .35em .6em;
    border: 1px dashed currentColor;
    border-radius: 4px;
    font-size: .875em;
    font-style: italic;
    line-height: 1.3;
}

/* Иконки соцсетей без картинки превращаются в пустые кружки — подписываем */
html.a11y-img-hide .iapp-social a { width: auto !important; padding-inline: .6em; border-radius: 999px !important; }
html.a11y-img-hide .iapp-social a::after { content: attr(aria-label); font-size: .8125rem; font-weight: 600; }

/* ==========================================================================
   6. ИНТЕРВАЛЫ И ШРИФТ
   ========================================================================== */

html.a11y-ls-1 body *:not(.iapp-a11y):not(.iapp-a11y *) { letter-spacing: .06em !important; word-spacing: .12em !important; }
html.a11y-ls-2 body *:not(.iapp-a11y):not(.iapp-a11y *) { letter-spacing: .12em !important; word-spacing: .24em !important; }

html.a11y-lh-1 body *:not(.iapp-a11y):not(.iapp-a11y *) { line-height: 1.8 !important; }
html.a11y-lh-2 body *:not(.iapp-a11y):not(.iapp-a11y *) { line-height: 2.2 !important; }

html.a11y-ff-sans  body *:not(.iapp-a11y):not(.iapp-a11y *):not(i):not([class*="icon-"]):not([class*="fa-"]) { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; }
html.a11y-ff-serif body *:not(.iapp-a11y):not(.iapp-a11y *):not(i):not([class*="icon-"]):not([class*="fa-"]) { font-family: Georgia, "Times New Roman", Times, serif !important; }

/* ==========================================================================
   7. КРУПНЫЙ КУРСОР
   Стрелка 48px с белой обводкой — видна на любом фоне.
   ========================================================================== */

html.a11y-cursor,
html.a11y-cursor body,
html.a11y-cursor body *:not(.iapp-a11y *) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3v38l10-10 7 15 7-3-7-15h14z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

html.a11y-cursor body :is(a, button, [role="button"], label, summary) *:not(.iapp-a11y *),
html.a11y-cursor body :is(a, button, [role="button"], label, summary):not(.iapp-a11y *) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3v38l10-10 7 15 7-3-7-15h14z' fill='%2336609c' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer !important;
}

/* ==========================================================================
   8. ЧТЕНИЕ ВСЛУХ — подсветка читаемого фрагмента
   ========================================================================== */

.iapp-a11y-reading {
    outline: 3px solid #ffb800 !important;
    outline-offset: 4px !important;
    background-color: #fff3c4 !important;
    color: #000 !important;
}

/* ==========================================================================
   9. ПЕЧАТЬ — панель и кнопку не печатаем
   ========================================================================== */

@media print {
    .iapp-a11y,
    .iapp-a11y-toggle { display: none !important; }
}