/* Версия для слабовидящих — стили (public/a11y.js ставит классы на <html>). Работают поверх стилей сайта через
 * !important: у основного сайта размеры в px (styled-components), у статических страниц — свои; включается только
 * классом a11y-on, обычная версия не затрагивается. */

/* кнопка в шапке — видна всегда */
[data-a11y-toggle] {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 4px; padding: 4px 10px;
}

/* панель настроек */
#a11y-panel {
  position: relative; top: 0; z-index: 2147483000; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  padding: 10px 16px; background: #fff; color: #000; border-bottom: 3px solid #000; font: 18px/1.3 Arial, sans-serif;
}
#a11y-panel[hidden] { display: none; }
/* на компьютере панель прилипает к верху; на телефоне — прокручивается вместе со страницей (иначе занимает экран) */
@media (min-width: 900px) { #a11y-panel { position: sticky; } }
@media (max-width: 899px) { #a11y-panel { gap: 8px 14px; padding: 8px 12px; } #a11y-panel button { min-width: 40px; min-height: 40px; padding: 2px 8px; } }
#a11y-panel .a11y-group { display: flex; align-items: center; gap: 6px; }
#a11y-panel button {
  font: 18px Arial, sans-serif; min-width: 44px; min-height: 44px; padding: 4px 10px; cursor: pointer;
  background: #fff; color: #000; border: 2px solid #000; border-radius: 4px;
}
#a11y-panel button[aria-pressed="true"] { background: #000; color: #fff; }

/* размер шрифта: весь текст не меньше выбранного, заголовки крупнее */
html.a11y-fs-1 body *:not(svg):not(svg *) { font-size: 20px !important; line-height: 1.5 !important; }
html.a11y-fs-2 body *:not(svg):not(svg *) { font-size: 24px !important; line-height: 1.5 !important; }
html.a11y-fs-3 body *:not(svg):not(svg *) { font-size: 30px !important; line-height: 1.5 !important; }
/* заголовки крупнее основного текста: :not(#a11y-x) поднимает специфичность над правилом размера для всех элементов */
html.a11y-fs-1 body h1:not(#a11y-x) { font-size: 32px !important; } html.a11y-fs-1 body h2:not(#a11y-x) { font-size: 26px !important; }
html.a11y-fs-2 body h1:not(#a11y-x) { font-size: 38px !important; } html.a11y-fs-2 body h2:not(#a11y-x) { font-size: 30px !important; }
html.a11y-fs-3 body h1:not(#a11y-x) { font-size: 46px !important; } html.a11y-fs-3 body h2:not(#a11y-x) { font-size: 36px !important; }
html.a11y-on body *:not(svg):not(svg *) { font-family: Arial, Helvetica, sans-serif !important; }
html.a11y-on #a11y-panel, html.a11y-on #a11y-panel * { font-size: 18px !important; }

/* интервал */
html.a11y-ls body *:not(svg):not(svg *) { letter-spacing: 0.12em !important; word-spacing: 0.2em !important; }

/* цветовые схемы: всё одним цветом, без теней и фоновых картинок под текстом */
html.a11y-c-bw body, html.a11y-c-bw body *:not(svg):not(svg *):not(img):not(#a11y-panel):not(#a11y-panel *) {
  background-color: #fff !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; text-shadow: none !important;
}
html.a11y-c-wb body, html.a11y-c-wb body *:not(svg):not(svg *):not(img):not(#a11y-panel):not(#a11y-panel *) {
  background-color: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important;
}
html.a11y-c-blue body, html.a11y-c-blue body *:not(svg):not(svg *):not(img):not(#a11y-panel):not(#a11y-panel *) {
  background-color: #9dd1ff !important; color: #063462 !important; border-color: #063462 !important; box-shadow: none !important; text-shadow: none !important;
}
html.a11y-on a { text-decoration: underline !important; }
html.a11y-noimg body *:not(svg):not(svg *) { background-image: none !important; }   /* фото объектов — фоном: убираем только при «Картинки: выкл» */
html.a11y-c-wb svg:not(.keep-color) { filter: invert(1); }

/* картинки выключены: вместо картинки — её подпись (alt) рамкой */
html.a11y-noimg img, html.a11y-noimg video, html.a11y-noimg iframe, html.a11y-noimg picture { visibility: hidden !important; }

/* анимации и переходы — выключить (вестибулярные нарушения, медленное чтение) */
html.a11y-on *, html.a11y-on *::before, html.a11y-on *::after { animation: none !important; transition: none !important; }

/* крупный текст не должен обрезаться блоками фиксированной высоты и вылезать за экран */
html.a11y-on, html.a11y-on body { overflow-x: hidden !important; }
html.a11y-on body *:not(svg):not(svg *):not(img):not(video):not(iframe) {
  max-width: 100% !important; overflow-wrap: normal !important; word-break: normal !important; white-space: normal !important;
  text-overflow: clip !important;
}
/* линейная раскладка (класс a11y-lin; на калькуляторе — шаговый мастер — выключена): фиксированные ширины — по содержимому, сетки — в одну колонку, флекс — с переносом */
html.a11y-lin body *:not(svg):not(svg *):not(img):not(video):not(iframe):not(input):not(textarea):not(select):not(#a11y-panel):not(#a11y-panel *) {
  width: auto !important; min-width: 0 !important; float: none !important;
  grid-template: none !important; grid-template-columns: none !important; grid-template-rows: none !important;
  grid-template-areas: none !important; grid-area: auto !important; grid-auto-rows: auto !important; grid-column: auto !important; grid-row: auto !important; flex-direction: column !important; flex-wrap: nowrap !important;
  flex: 0 0 auto !important;   /* всё — в одну колонку, элемент по содержимому (ряд с переносом и flex-basis уводили блоки вбок и накладывали) */
}
/* сдвиги (left/right у относительных блоков, отрицательные поля, transform) — тоже источник наложений */
html.a11y-lin body *:not(svg):not(svg *):not(#a11y-panel):not(#a11y-panel *) {
  inset: auto !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important;
  translate: none !important; rotate: none !important; scale: none !important;   /* отдельные свойства — transform их не сбрасывает */
  margin-top: 0 !important;   /* отрицательные поля сверху наезжали блоками (страница объекта) */
}
html.a11y-lin body [data-a11y-pos] { position: static !important; inset: auto !important; transform: none !important; margin-left: 0 !important; }
html.a11y-on body [data-a11y-hide] { display: none !important; }
html.a11y-on img { max-width: 100% !important; object-fit: contain; }   /* без height:auto — логотип с заданной высотой раздувался */
/* значки (svg в кнопках и обёртках с фиксированной шириной, с которых снята ширина) — в размер текста; карта глубин — как есть */
html.a11y-on body svg:not(.depthmap svg) { max-width: 2.5em !important; max-height: 2.5em !important; }
html.a11y-on body *:not(svg):not(svg *):not(img):not(video):not(iframe):not(input):not(textarea) {
  height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
}
html.a11y-on table { display: block !important; overflow-x: auto !important; }
/* картинки с прозрачным фоном (логотип, иконки) — на светлой подложке, чтобы не пропадали на тёмной схеме */
html.a11y-c-wb img, html.a11y-c-blue img { background: #fff !important; }
/* шапка основного сайта закреплена (fixed) — в этом режиме обычная: не прячется под панелью и не закрывает крупный текст */
html.a11y-on body header { position: relative !important; transform: none !important; }
/* номер телефона — одной строкой */
html.a11y-on a[href^="tel:"] { white-space: nowrap !important; overflow-wrap: normal !important; }
/* всплывающие подсказки кнопок (aria-hidden, напр. «Написать в MAX» у плавающих кнопок): в обычном режиме скрыты до
   наведения, а сброс высоты/overflow выше вытаскивал их поверх иконки — название у кнопки есть в aria-label */
html.a11y-on body [aria-hidden="true"]:not(svg):not(svg *) { display: none !important; }
/* кнопки-значки (мессенджеры, чат): без цветного круга в схемах — рамка, чтобы читались как кнопки */
html.a11y-on body a[aria-label^="Написать"], html.a11y-on body button[aria-label] {
  border: 2px solid currentColor !important; border-radius: 50% !important;
}
/* мелкие строчные флекс-элементы (значок + подпись в кнопке, ссылки в строке) — не растягивать */
html.a11y-lin body a, html.a11y-lin body button, html.a11y-lin body label { flex-direction: row !important; flex-wrap: wrap !important; }
html.a11y-lin body a > *, html.a11y-lin body button > *, html.a11y-lin body label > * { flex: 0 0 auto !important; }
/* декоративные схемы с точками-подсказками (MenuInformationPic) — в линейной раскладке не читаются, скрыты */
html.a11y-on body [data-a11y-decor] { display: none !important; }
html.a11y-on body img[alt="Гидротех"] { max-height: 64px !important; width: auto !important; }