/* Версия для слабовидящих (прототип 09.10.2026). Включается классами на <html>, ставит их a11y.js.
   Ориентир — ГОСТ Р 52872-2019: размер текста, цветовая схема, изображения, интервалы, без анимаций.
   Своё решение, без внешних виджетов: ноль сторонних запросов. */

/* ── кнопка в шапке и панель ── */
.a11y-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px;
  border: 2px solid var(--violet, #673889); border-radius: 12px; background: #fff;
  color: var(--violet, #673889); font: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
}
.a11y-btn svg { width: 26px; height: 26px; flex-shrink: 0; }
.a11y-btn { flex-shrink: 0; white-space: nowrap; }
html.a11y-on :is(button, .btn, .brand span) { overflow-wrap: normal; word-break: normal; }
/* На телефоне кнопка — отдельной строкой во всю ширину: в одну строку с логотипом и меню не помещается */
@media (max-width: 640px) { header.top .top-in { flex-wrap: wrap; } .a11y-btn { order: 10; flex: 1 1 0; min-width: 0; justify-content: center; } header.top .menu { order: 11; } }
.a11y-panel {
  border-bottom: 3px solid currentColor; background: #fff; color: #000; padding: 14px 0 16px;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel .a11y-in { max-width: 1180px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; }
.a11y-group { display: flex; flex-direction: column; gap: 6px; }
.a11y-group > span { font-size: 16px; font-weight: 800; }
.a11y-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.a11y-opt {
  min-width: 52px; min-height: 52px; padding: 0 12px; border: 2px solid #000; border-radius: 10px;
  background: #fff; color: #000; font: inherit; font-weight: 800; font-size: 18px; cursor: pointer; line-height: 1;
}
.a11y-opt[aria-pressed="true"] { outline: 4px solid var(--a-fg, #000); outline-offset: 3px; background: #FFE36E; color: #000; }
/* на тёмной схеме чёрная кнопка-образец не должна сливаться с фоном */
.a11y-opt { box-shadow: 0 0 0 2px var(--a-bg, #fff), 0 0 0 4px var(--a-fg, #000); }
.a11y-opt.sz1 { font-size: 18px; } .a11y-opt.sz2 { font-size: 24px; } .a11y-opt.sz3 { font-size: 30px; }
.a11y-opt.c-bw { background: #fff; color: #000; }
.a11y-opt.c-wb { background: #000; color: #fff; border-color: #000; }
.a11y-opt.c-blue { background: #9DD1FF; color: #063462; border-color: #063462; }
.a11y-opt.c-brown { background: #F7F3D6; color: #4D4B43; border-color: #4D4B43; }
.a11y-reset { min-height: 52px; padding: 0 18px; border: 2px solid #000; border-radius: 10px; background: #000; color: #fff; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; }

/* ── размер: масштабируем всю страницу — px-размеры вёрстки растут вместе, ничего не обрезается ── */
/* zoom на корне ведёт себя как масштаб браузера: ширина страницы делится на коэффициент, вёрстка
   перестраивается и горизонтальной прокрутки нет (на body ширина вылезала за экран) */
html.a11y-sz2 { zoom: 1.25; }
html.a11y-sz3 { zoom: 1.5; }
/* Телефон: базовый шрифт и так 19 px, а ширина маленькая — увеличиваем мягче */
@media (max-width: 480px) { html.a11y-sz2 { zoom: 1.15; } html.a11y-sz3 { zoom: 1.3; } }

/* ── интервалы ── */
html.a11y-sp2 body, html.a11y-sp2 body * { letter-spacing: .12em !important; word-spacing: .2em !important; line-height: 1.8 !important; }

/* ── без анимаций, крупный фокус — всегда в режиме для слабовидящих ── */
html.a11y-on *, html.a11y-on *::before, html.a11y-on *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-on :focus-visible { outline: 5px solid #000 !important; outline-offset: 3px !important; box-shadow: 0 0 0 9px #FFE36E !important; }
html.a11y-on a { text-decoration: underline !important; }

/* ── цветовые схемы: один фон, один цвет текста, рамки тем же цветом ── */
html.a11y-cs body, html.a11y-cs body *:not(svg):not(path):not(.a11y-opt):not(img) {
  background-color: var(--a-bg) !important; color: var(--a-fg) !important; border-color: var(--a-fg) !important;
  box-shadow: none !important; text-shadow: none !important; background-image: none !important;
}
html.a11y-cs .btn, html.a11y-cs button:not(.a11y-opt), html.a11y-cs .a11y-reset, html.a11y-cs .app-btn {
  background-color: var(--a-fg) !important; color: var(--a-bg) !important; border: 3px solid var(--a-fg) !important;
}
html.a11y-cs svg path, html.a11y-cs svg polygon { stroke: var(--a-fg) !important; }
html.a11y-cs .okrug-map path, html.a11y-cs svg.map path { fill: var(--a-bg) !important; stroke-width: 2px !important; }
html.a11y-cs svg text { fill: var(--a-fg) !important; }
html.a11y-cs .seats-bar > i, html.a11y-cs progress { background-color: var(--a-fg) !important; }
html.a11y-c-bw    { --a-bg: #FFFFFF; --a-fg: #000000; }
html.a11y-c-wb    { --a-bg: #000000; --a-fg: #FFFFFF; }
html.a11y-c-blue  { --a-bg: #9DD1FF; --a-fg: #063462; }
html.a11y-c-brown { --a-bg: #F7F3D6; --a-fg: #4D4B43; }

/* ── изображения ── */
html.a11y-img-gray img { filter: grayscale(1) contrast(1.1); }
html.a11y-img-off img { display: none !important; }
.a11y-alt { display: none; }
html.a11y-img-off .a11y-alt {
  display: inline-block; padding: 8px 12px; border: 2px dashed currentColor; border-radius: 8px; font-size: 16px; margin: 4px 0;
}

/* Колонки вёрстки при крупном тексте: число колонок по реальной ширине окна уже не годится —
   после увеличения места меньше, поэтому колонки подстраиваются под ширину сами */
html.a11y-sz2 :is(.hero-grid, .grid, .dirs, .links, .events, .gallery, .posters, .videos, .contacts-grid, .foot-grid),
html.a11y-sz3 :is(.hero-grid, .grid, .dirs, .links, .events, .gallery, .posters, .videos, .contacts-grid, .foot-grid) {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
}
html.a11y-sz3 :is(.hero-grid, .events, .contacts-grid, .foot-grid) { grid-template-columns: 1fr !important; }
html.a11y-on main { overflow-wrap: break-word; }
/* Карта округов и стрелки-указатели: заливка и значки — цветом схемы, а не фиолетовым */
html.a11y-cs main svg path { fill: var(--a-bg) !important; stroke: var(--a-fg) !important; stroke-width: 1.5px !important; }
html.a11y-cs main svg path:hover, html.a11y-cs main svg a:focus path { fill: var(--a-fg) !important; }
html.a11y-cs *::before, html.a11y-cs *::after { color: var(--a-fg) !important; border-color: var(--a-fg) !important; }

/* ── redesign 12.10.2026: header over the photo, hero slider, pills, horizontal cards ── */
/* In a11y mode the header is a normal block and the hero text goes under the photo, not over it */
html.a11y-on header.top.top-over { position: relative; }
html.a11y-on .hero { background: none; color: inherit; }
html.a11y-on .slide { display: block; min-height: 0; }
html.a11y-on .slide-media { position: relative; display: block; height: 280px; }
html.a11y-on .slide-media::after { display: none; }
html.a11y-on .slide-text { padding-top: 20px; padding-bottom: 24px; }
html.a11y-on .slide-t, html.a11y-on .slide-lead { text-shadow: none; }
html.a11y-on .slide-t { font-size: 34px; }
html.a11y-on .hero-ctrl { position: static; padding: 0 16px 16px; justify-content: flex-start; }
html.a11y-on .hero-dot::before { border-color: currentColor; }
html.a11y-on .hero-dot[aria-current="true"]::before { background: currentColor; }
html.a11y-on .hero-arrow, html.a11y-on .hero-dot { color: inherit; }
html.a11y-img-off .slide-media { height: auto; }
html.a11y-cs .pill, html.a11y-cs .pill-phone, html.a11y-cs .car-arrow:not(:disabled) {
  background-color: var(--a-fg) !important; color: var(--a-bg) !important; border: 3px solid var(--a-fg) !important;
}
html.a11y-cs .hero-dot, html.a11y-cs .hero-arrow { background-color: var(--a-bg) !important; color: var(--a-fg) !important; border: 0 !important; }
html.a11y-cs .hero-dot::before { background-color: var(--a-bg) !important; border: 2px solid var(--a-fg) !important; }
html.a11y-cs .hero-dot[aria-current="true"]::before { background-color: var(--a-fg) !important; }
html.a11y-cs .menu summary .bars, html.a11y-cs .menu summary .bars::before, html.a11y-cs .menu summary .bars::after { background-color: var(--a-fg) !important; }
html.a11y-cs .menu[open] summary .bars, html.a11y-cs .menu[open] summary .bars::before, html.a11y-cs .menu[open] summary .bars::after { background-color: var(--a-fg) !important; }
html.a11y-cs .hcard-ico span { filter: grayscale(1); }
html.a11y-sz2 .hcard, html.a11y-sz3 .hcard { flex-direction: column; }
html.a11y-sz2 .hcard-media, html.a11y-sz3 .hcard-media { width: auto; aspect-ratio: 16 / 7; }
html.a11y-sz2 .news-track, html.a11y-sz3 .news-track { grid-auto-columns: minmax(min(100%, 300px), 1fr); }
html.a11y-cs .car-arrow:not(:disabled) svg path { stroke: var(--a-bg) !important; fill: none !important; }
html.a11y-cs .hero-arrow svg path, html.a11y-cs .car-arrow:disabled svg path { fill: none !important; }