/* ============================================================
   ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ  (ГОСТ Р 52872-2019, ФЗ-419)
   Самоподключаемый модуль. Кнопка, верхняя панель, блок настроек,
   режимы отображения vi-*.
   ============================================================ */

/* ---------- Кнопка вызова в шапке ---------- */
.vi-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  min-width: 40px;
  justify-content: center;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border, #B5DDD8);
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 600;
  color: #00665E;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.vi-toggle:hover { background: var(--accent-light, #D3F0EF); border-color: var(--accent, #00A09D); }
.vi-toggle svg { flex-shrink: 0; }

/* Кнопка слабовидящих в шапке — только иконка глаза, без подписи (компактно,
   разгружает шапку). Действует на всех ширинах. */
.vi-toggle span { display: none; }
.vi-toggle { padding: 0 10px; gap: 0; }

.vi-toggle--floating {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9998;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

/* ============================================================
   ПАНЕЛЬ (фиксированный собственный масштаб — НЕ зависит от
   режима шрифта страницы: всегда читаема и стабильна).
   ============================================================ */
.vi-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: none;
  background: #d6e9fb;
  color: #0b2a4a;
  border-bottom: 2px solid #00A09D;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.vi-panel.is-open { display: block; }
.vi-panel * { box-sizing: border-box; }

/* Верхняя строка управления */
.vi-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding: 10px 16px;
}
.vi-bar__group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vi-bar__label {
  font-size: 14px;
  font-weight: 700;
  color: #0b2a4a;
}

/* Кнопки-квадраты в баре */
.vi-sq {
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  background: #fff;
  color: #0b2a4a;
  border: 2px solid #00A09D;
  border-radius: 4px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, box-shadow .15s;
}
.vi-sq:hover { background: #eaf3fd; }
.vi-sq.is-active { background: #00A09D; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.vi-sq svg { display: block; }
.vi-sq--font-s { font-size: 14px; }
.vi-sq--font-m { font-size: 19px; }
.vi-sq--font-l { font-size: 24px; }
.vi-sq--c { font-size: 16px; }
.vi-sq--c.is-active { box-shadow: inset 0 0 0 2px #00A09D, 0 0 0 2px #ffd54a; }

/* Образцы цветовых схем на кнопках Ц */
.vi-sq--c-wb { background:#fff;     color:#000;     border-color:#000; }
.vi-sq--c-bw { background:#000;     color:#fff;     border-color:#000; }
.vi-sq--c-bb { background:#9dd1ff;  color:#003a66;  border-color:#003a66; }
.vi-sq--c-cb { background:#f5ecd7;  color:#5a3e00;  border-color:#5a3e00; }
.vi-sq--c-gd { background:#2b1d0e;  color:#7cd957;  border-color:#7cd957; }

/* ---------- Блок «Настройки» (раскрывается) ---------- */
.vi-settings {
  display: none;
  border-top: 1px solid #9cc3e8;
  background: #e8f3fd;
  padding: 14px 20px 18px;
}
.vi-settings.is-open { display: block; }
.vi-settings__inner { max-width: 1280px; margin: 0 auto; }
.vi-settings__h {
  font-size: 17px;
  font-weight: 700;
  color: #0b2a4a;
  margin: 6px 0 10px;
  border-bottom: 1px solid #9cc3e8;
  padding-bottom: 6px;
}
.vi-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.vi-row__label {
  font-size: 14px;
  color: #0b2a4a;
  min-width: 230px;
}
.vi-opt {
  min-height: 42px;
  padding: 6px 16px;
  background: #fff;
  color: #00A09D;
  border: 1px solid #00A09D;
  border-radius: 8px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  transition: background .15s, box-shadow .15s;
}
.vi-opt:hover { background: #eaf3fd; }
.vi-opt.is-active { background: #00A09D; color: #fff; }

/* Цветовые опции в блоке настроек — показывают сами себя */
.vi-opt--c-wb { background:#fff;    color:#000;    border-color:#000; }
.vi-opt--c-bw { background:#000;    color:#fff;    border-color:#000; }
.vi-opt--c-bb { background:#9dd1ff; color:#003a66; border-color:#003a66; }
.vi-opt--c-cb { background:#f5ecd7; color:#5a3e00; border-color:#5a3e00; }
.vi-opt--c-gd { background:#2b1d0e; color:#7cd957; border-color:#7cd957; }
.vi-opt--c.is-active { box-shadow: 0 0 0 3px #ffd54a; }

.vi-settings__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.vi-default, .vi-close {
  min-height: 42px;
  padding: 8px 18px;
  background: #fff;
  color: #00A09D;
  border: 1px solid #00A09D;
  border-radius: 8px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.vi-default:hover, .vi-close:hover { background: #eaf3fd; }

/* Резервируем место под фиксированную панель отступом на html.
   В режиме слабовидящего шапку делаем СТАТИЧНОЙ (без sticky) — так
   при крупном шрифте/большом интервале нет наложений: всё в потоке. */
html.vi-panel-open { padding-top: var(--vi-pad, 56px); scroll-padding-top: 0; }
html.vi-panel-open .header { position: static !important; }

@media (max-width: 700px) {
  /* Панель остаётся фиксированной полосой сверху (как на приёмнике).
     Бар — одна строка с горизонтальной прокруткой, кнопки в ряд. */
  /* Все кнопки в одну строку без горизонтального скролла (как на приёмнике):
     скрываем текстовые подписи групп, оставляем только компактные иконки. */
  .vi-bar {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 5px;
    padding: 8px 8px;
  }
  .vi-bar__label { display: none; }
  .vi-bar__group { flex-shrink: 0; gap: 4px; }
  .vi-sq { min-width: 32px; height: 32px; padding: 0 4px; }
  /* Блок настроек прокручивается внутри, не уезжая за экран */
  .vi-settings { max-height: 70vh; overflow-y: auto; padding: 12px 14px 16px; }
  .vi-row__label { min-width: 100%; }

  /* Таблицы параметров (без горизонт. скролл-контейнера) при крупном шрифте/
     кернинге распирали страницу. fixed-layout + перенос держат их в ширине экрана.
     Таблицы с .sveden-table--scroll не трогаем — у них свой горизонт. скролл. */
  html.vi-on .sveden-table:not(.sveden-table--scroll) {
    table-layout: fixed;
    width: 100%;
  }
  html.vi-on .sveden-table:not(.sveden-table--scroll) th,
  html.vi-on .sveden-table:not(.sveden-table--scroll) td {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   РЕЖИМ СЛАБОВИДЯЩЕГО  (html.vi-on …) — применяется к КОНТЕНТУ.
   Панель .vi-panel НЕ перекрашивается режимом (свои стили выше).
   ============================================================ */
html.vi-on .bg-lines { display: none !important; }
html.vi-on :not(.vi-panel):not(.vi-panel *) {
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
}
/* Декоративное hero-фото — это фон псевдоэлемента ::after, а правило
   background-image:none выше НЕ покрывает псевдоэлементы. Убираем его
   отдельно, иначе фото перекрывает контент поверх бело-чёрной схемы. */
html.vi-on .hero::after,
html.vi-on .hero::before { display: none !important; }

/* ---- Семейство шрифта ---- */
html.vi-face-arial body,
html.vi-face-arial body *:not(.vi-panel):not(.vi-panel *) { font-family: Arial, sans-serif !important; }
html.vi-face-times body,
html.vi-face-times body *:not(.vi-panel):not(.vi-panel *) { font-family: 'Times New Roman', Georgia, serif !important; }

/* ---- Шапка адаптируется под крупный шрифт/интервалы ----
   В обычной версии высота фиксирована (68px). В режиме слабовидящего
   разрешаем шапке расти по содержимому и переносить пункты меню. */
html.vi-on .header__inner {
  height: auto !important;
  min-height: 68px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  row-gap: 8px;
}
html.vi-on .nav {
  flex-wrap: wrap;
  row-gap: 8px;
}
/* Сдвиг sticky-шапки пересчитывается из JS по её реальной высоте */

/* ---- Размер шрифта ----
   Масштабируем через переопределение токенов темы (--t-*) и базового
   размера. Так увеличивается ВЕСЬ текст, включая заголовки. */
/* Размер «обычный» в режиме слабовидящих = 18px (минимум по ГОСТ), а не 16px */
html.vi-font-s body {
  font-size: 18px !important;
  --t-xs:14px; --t-sm:16px; --t-base:18px; --t-md:20px;
  --t-lg:22px; --t-xl:26px; --t-2xl:34px; --t-3xl:44px; --t-4xl:54px;
}
html.vi-font-m body {
  font-size: 21px !important;
  --t-xs:16px; --t-sm:18px; --t-base:21px; --t-md:23px;
  --t-lg:26px; --t-xl:30px; --t-2xl:38px; --t-3xl:48px; --t-4xl:58px;
}
html.vi-font-l body {
  font-size: 25px !important;
  --t-xs:19px; --t-sm:21px; --t-base:25px; --t-md:27px;
  --t-lg:31px; --t-xl:36px; --t-2xl:46px; --t-3xl:56px; --t-4xl:68px;
}
/* clamp-заголовки (hero, sveden-hero) переопределяем фиксировано */
html.vi-font-s .hero__title, html.vi-font-s .sveden-hero__title { font-size: 36px !important; }
html.vi-font-m .hero__title, html.vi-font-m .sveden-hero__title { font-size: 42px !important; }
html.vi-font-l .hero__title, html.vi-font-l .sveden-hero__title { font-size: 50px !important; }
/* перенос длинных слов при увеличении, чтобы текст не уезжал.
   anywhere ломает и длинные неразрывные строки (URL, кнопки скачивания) —
   при крупном шрифте + большом кернинге без этого текст распирал страницу. */
html.vi-on body :where(h1,h2,h3,h4,p,td,th,a,span,li,button,.btn) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- Кернинг (межбуквенный) ---- */
html.vi-kern-mid body :not(.vi-panel):not(.vi-panel *) { letter-spacing: 0.06em !important; }
html.vi-kern-big body :not(.vi-panel):not(.vi-panel *) { letter-spacing: 0.12em !important; }

/* ---- Межстрочный интервал ---- */
html.vi-line-15 body :not(.vi-panel):not(.vi-panel *) { line-height: 1.5 !important; }
html.vi-line-2  body :not(.vi-panel):not(.vi-panel *) { line-height: 2 !important; }

/* ---- Изображения скрыты ---- */
html.vi-noimg img:not(.vi-panel img) { display: none !important; }

/* ============================================================
   ЦВЕТОВЫЕ СХЕМЫ — перекрываем тему на КОНТЕНТЕ
   ============================================================ */
html.vi-on body,
html.vi-on .header,
html.vi-on .hero,
html.vi-on .page-hero,
html.vi-on .contacts__form,
html.vi-on .director-card,
html.vi-on .section,
html.vi-on .cta-section,
html.vi-on .footer,
html.vi-on .footer__bottom,
html.vi-on .sveden-hero,
html.vi-on .sveden-block,
html.vi-on .sveden-toc,
html.vi-on .doc-item,
html.vi-on .sveden-empty,
html.vi-on .nav__dropdown-menu,
html.vi-on .form,
html.vi-on .form__input,
html.vi-on .btn {
  background: var(--vi-bg) !important;
  color: var(--vi-fg) !important;
  border-color: var(--vi-fg) !important;
}

html.vi-on .sveden-table th,
html.vi-on .sveden-table td {
  background: var(--vi-bg) !important;
  color: var(--vi-fg) !important;
  border-color: var(--vi-fg) !important;
}

html.vi-on h1, html.vi-on h2, html.vi-on h3, html.vi-on h4,
html.vi-on p, html.vi-on span:not(.vi-panel span), html.vi-on li, html.vi-on label,
html.vi-on .logo__title, html.vi-on .logo__sub,
html.vi-on .section__title, html.vi-on .section__sub,
html.vi-on .sveden-block__title, html.vi-on .sveden-block__num,
html.vi-on .hero__title, html.vi-on .hero__desc, html.vi-on .hero__label,
html.vi-on .footer__heading, html.vi-on .footer__text, html.vi-on .footer__copy,
html.vi-on .doc-item__name, html.vi-on .doc-item__meta {
  color: var(--vi-fg) !important;
  -webkit-text-fill-color: var(--vi-fg) !important;
  background: transparent !important;
}

/* Ссылки красим в --vi-link, но НЕ кнопки (.btn) — они оформляются ниже
   как сплошные блоки fg/bg, иначе текст-ссылка делал их нечитаемыми. */
html.vi-on a:not(.vi-panel a):not(.btn),
html.vi-on .nav__link,
html.vi-on .nav__phone,
html.vi-on .doc-item__action,
html.vi-on .footer__link {
  color: var(--vi-link) !important;
  -webkit-text-fill-color: var(--vi-link) !important;
  text-decoration: underline !important;
}
html.vi-on a:not(.vi-panel a):not(.btn):hover { opacity: .75; }

/* Кнопки. Контекстные правила style.css (.hero__actions .btn--primary,
   .cta-section .btn--primary, .hero__actions .btn--ghost) имеют специфичность
   (0,2,0) и перебивали vi-цвета — текст становился нечитаемым (белый на белом
   в схеме wb и т.п.). Поднимаем специфичность vi-правил до (0,3,0) повторением
   класса html, чтобы режим слабовидящего всегда побеждал. */
html.vi-on.vi-on .btn--primary,
html.vi-on.vi-on .hero__actions .btn--primary,
html.vi-on.vi-on .cta-section .btn--primary,
html.vi-on.vi-on .form .btn--primary,
html.vi-on.vi-on .nav__cta,
html.vi-on.vi-on .nav__cta--mobile {
  background: var(--vi-fg) !important;
  color: var(--vi-bg) !important;
  border: 2px solid var(--vi-fg) !important;
  -webkit-text-fill-color: var(--vi-bg) !important;
}

html.vi-on.vi-on .btn--ghost,
html.vi-on.vi-on .hero__actions .btn--ghost {
  background: var(--vi-bg) !important;
  color: var(--vi-fg) !important;
  border: 2px solid var(--vi-fg) !important;
  -webkit-text-fill-color: var(--vi-fg) !important;
}

html.vi-on svg:not(.vi-panel svg) { stroke: var(--vi-fg) !important; color: var(--vi-fg) !important; }
html.vi-on.vi-on .btn--primary svg { stroke: var(--vi-bg) !important; color: var(--vi-bg) !important; }
html.vi-on.vi-on .btn--ghost svg { stroke: var(--vi-fg) !important; color: var(--vi-fg) !important; }

/* Значения схем */
html.vi-color-wb { --vi-bg:#ffffff; --vi-fg:#000000; --vi-link:#00309e; }
html.vi-color-bw { --vi-bg:#000000; --vi-fg:#ffffff; --vi-link:#ffe24a; }
html.vi-color-bb { --vi-bg:#9dd1ff; --vi-fg:#003a66; --vi-link:#002a4d; }
html.vi-color-cb { --vi-bg:#f5ecd7; --vi-fg:#5a3e00; --vi-link:#7a2e00; }
html.vi-color-gd { --vi-bg:#2b1d0e; --vi-fg:#7cd957; --vi-link:#ffe24a; }