/* ================================================================
   РЕЖИМ ДЛЯ СЛАБОВИДЯЩИХ — ФЗ №419 + ГОСТ Р 52872-2019

   Единственное место, где описан внешний вид режима (п. 2, 2026-08-19).
   До переработки те же правила лежали в трёх файлах: здесь (в составе
   main.css), внутри скрипта a11y.js своей копией и отдельным набором прямо
   в privacy.html — эта страница не подключает main.css вовсе. Копии успели
   разойтись: имя класса выбранной кнопки в стилях было `active`, в скрипте
   `a11y-btn-active`, а на главной выбранная кнопка не помечалась вообще.

   Файл подключают все страницы, где есть кнопка-глаз в шапке.
   Управляет классами скрипт assets/js/a11y.js.
   ================================================================ */
.a11y-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  /* Круг остаётся кругом: в тесной строке шапки браузер ужимал всех, кому не
     запрещено, и глаз превращался в овал (05.09.2026, вместе со сплющенным
     логотипом). */
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  margin-right: 8px;
}
@media (max-width: 760px){
  /* В шапках промежутки задаёт сама строка (`gap`), и собственный отступ кнопки
     шёл вторым — лишние 8px ширины там, где её и так не хватало: строка шапки
     переносилась на две. Правило нужно во всех трёх видах шапок сразу. */
  .nav-cta .a11y-toggle{ margin-right: 0; }
}
.a11y-toggle:hover, .a11y-toggle:focus{
  border-color: var(--accent);
  background: rgba(126,165,147,.08);
}
.a11y-panel{
  position: sticky; top: 0; z-index: 55;
  background: #1A1A15;
  border-bottom: 1px solid var(--divider-strong);
  padding: 12px 0;
}
.a11y-panel-inner{
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  font-size: 14px;
  /* Ширина и отступы заданы здесь, а не классом .wrap, как было в рукописных
     панелях: .wrap описан в main.css, а страница политики его не подключает —
     там панель прижалась бы к самому краю экрана. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}
/* Обёртка настроек (всё, кроме кнопки выхода). Нужна, чтобы на телефоне
   сворачивать настройки одной кнопкой, см. @media в конце файла.

   display:contents — чтобы на широком экране обёртки как будто нет: группы
   остаются прямыми детьми .a11y-panel-inner и раскладываются ровно так же,
   как до появления обёртки. Обычный flex здесь давал лишнюю строку — группы
   переносились раньше, потому что делили ширину с кнопкой выхода: замер на
   1440×900 показал 166 px против 126 px в исходной вёрстке. */
.a11y-panel-body{ display: contents; }

/* Кнопка «Настройки отображения» нужна только на узком экране — на широком
   настройки и так помещаются в одну строку и прятать их незачем. */
.a11y-collapse{
  display: none;
  align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 8px;
  color: var(--fg);
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.a11y-collapse:hover, .a11y-collapse:focus{ border-color: var(--accent); }
/* Стрелка-указатель рисуется из состояния кнопки, а не подставляется скриптом:
   так подпись и её значок остаются в одном месте (§🔁 один факт — одно место). */
.a11y-collapse::after{ content: '▾'; font-size: 11px; }
.a11y-collapse[aria-expanded="false"]::after{ content: '▸'; }

.a11y-group{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a11y-group-label{ color: var(--fg-muted); font-size: 13px; margin-right: 4px; }
.a11y-btn{
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 8px;
  color: var(--fg);
  font: inherit; font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.a11y-btn:hover{ border-color: var(--accent); }
.a11y-btn.active{ background: var(--accent); color: #0B0B0A; border-color: var(--accent); }
.a11y-check{
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 13px;
}
.a11y-close{
  margin-left: auto;
  padding: 8px 16px;
  background: rgba(220,80,60,.15);
  border: 1px solid rgba(220,80,60,.4);
  border-radius: 8px;
  color: #E88070;
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.a11y-close:hover{ background: rgba(220,80,60,.25); }

/* Активные режимы — применяются к body */
body.a11y-font-large{ font-size: 18px; }
body.a11y-font-large h1{ font-size: 56px !important; }
body.a11y-font-large h2, body.a11y-font-large .section-title{ font-size: 40px !important; }
body.a11y-font-large p, body.a11y-font-large li, body.a11y-font-large a{ font-size: 18px !important; }
body.a11y-font-xlarge{ font-size: 22px; }
body.a11y-font-xlarge h1{ font-size: 64px !important; }
body.a11y-font-xlarge h2, body.a11y-font-xlarge .section-title{ font-size: 48px !important; }
body.a11y-font-xlarge p, body.a11y-font-xlarge li, body.a11y-font-xlarge a{ font-size: 22px !important; }

/* Жирный шрифт (п. 2, решение Vadim'а 19.08.2026: включённый режим — это
   тёмный фон и жирный шрифт). Включён по умолчанию, снимается галочкой в
   панели.

   Курсив внутри режима отключаем: тонкое курсивное начертание — ровно то, что
   плохо читается слабовидящему, а на сайте им набраны подзаголовки, строка
   стажа врача и цитаты отзывов. */
body.a11y-bold,
body.a11y-bold h1, body.a11y-bold h2, body.a11y-bold h3, body.a11y-bold h4,
body.a11y-bold p, body.a11y-bold li, body.a11y-bold a,
body.a11y-bold label, body.a11y-bold button, body.a11y-bold input,
body.a11y-bold span, body.a11y-bold div, body.a11y-bold em, body.a11y-bold strong{
  font-weight: 700 !important;
}
body.a11y-bold em, body.a11y-bold i, body.a11y-bold .meta, body.a11y-bold cite{
  font-style: normal !important;
}

/* Ч/Б схема — чёрный на белом */
body.a11y-bw{
  background: #FFFFFF !important;
  color: #000000 !important;
}
body.a11y-bw *,
body.a11y-bw *::before,
body.a11y-bw *::after{
  background: transparent !important;
  background-image: none !important;
  color: #000000 !important;
  border-color: #666666 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
body.a11y-bw a, body.a11y-bw a *{ color: #0000EE !important; text-decoration: underline !important; }
body.a11y-bw .btn, body.a11y-bw button, body.a11y-bw .nav-book{
  background: #000 !important; color: #FFF !important;
  border: 2px solid #000 !important;
  text-decoration: none !important;
}
body.a11y-bw .nav, body.a11y-bw .a11y-panel{ background: #FFF !important; border-bottom: 2px solid #000 !important; }
body.a11y-bw .a11y-btn.active{ background: #000 !important; color: #FFF !important; }

/* Белым по чёрному */
body.a11y-wb{
  background: #000000 !important;
  color: #FFFFFF !important;
}
body.a11y-wb *,
body.a11y-wb *::before,
body.a11y-wb *::after{
  background: transparent !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #999999 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
body.a11y-wb a, body.a11y-wb a *{ color: #FFFF00 !important; text-decoration: underline !important; }
body.a11y-wb .btn, body.a11y-wb button, body.a11y-wb .nav-book{
  background: #FFF !important; color: #000 !important;
  border: 2px solid #FFF !important;
  text-decoration: none !important;
}
body.a11y-wb .nav, body.a11y-wb .a11y-panel{ background: #000 !important; border-bottom: 2px solid #FFF !important; }
body.a11y-wb .a11y-btn.active{ background: #FFF !important; color: #000 !important; }

/* Синий на светло-голубом */
body.a11y-blue{ background: #9DD1FF !important; color: #063462 !important; }
body.a11y-blue *,
body.a11y-blue *::before,
body.a11y-blue *::after{
  background: transparent !important;
  background-image: none !important;
  color: #063462 !important;
  border-color: #063462 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
body.a11y-blue a, body.a11y-blue a *{ color: #06336C !important; text-decoration: underline !important; }
body.a11y-blue .btn, body.a11y-blue button, body.a11y-blue .nav-book{
  background: #063462 !important; color: #9DD1FF !important;
  border: 2px solid #063462 !important;
  text-decoration: none !important;
}
body.a11y-blue .nav, body.a11y-blue .a11y-panel{ background: #9DD1FF !important; border-bottom: 2px solid #063462 !important; }
body.a11y-blue .a11y-btn.active{ background: #063462 !important; color: #9DD1FF !important; }

/* Отключаем декоративное в a11y-mode */
body.a11y-mode .blob,
body.a11y-mode .kinetic,
body.a11y-mode .hero-spotlight,
body.a11y-mode .hero-bg,
body.a11y-mode .bg-headline,
body.a11y-mode .media-hero__detail,
body.a11y-mode video{ display: none !important; }

/* title-mask (обёртка section-title с cinematic reveal) — заменяем на обычный текст */
body.a11y-mode .title-mask{ overflow: visible !important; display: inline !important; }
body.a11y-mode .title-mask > .title-inner{
  transform: none !important;
  display: inline !important;
}

/* Отключаем все анимации/переходы */
body.a11y-mode *{
  animation: none !important;
  transition: none !important;
}
body.a11y-mode *::before,
body.a11y-mode *::after{
  animation: none !important;
  transition: none !important;
}

/* Section titles — ограничиваем максимальный размер (был clamp'ы с 5-6vw) */
body.a11y-mode h1{ font-size: 44px !important; line-height: 1.15 !important; }
body.a11y-mode h2, body.a11y-mode .section-title{
  font-size: 32px !important; line-height: 1.2 !important;
}
body.a11y-mode.a11y-font-large h1{ font-size: 52px !important; }
body.a11y-mode.a11y-font-large h2, body.a11y-mode.a11y-font-large .section-title{
  font-size: 38px !important;
}
body.a11y-mode.a11y-font-xlarge h1{ font-size: 60px !important; }
body.a11y-mode.a11y-font-xlarge h2, body.a11y-mode.a11y-font-xlarge .section-title{
  font-size: 44px !important;
}

/* Длинные куски заголовка при крупном шрифте.
   Размеры выше намеренно НЕ уменьшаем на телефоне: крупный текст — это и есть
   смысл режима, а замеры на 320 / 360 / 390 px показали, что заголовки
   переносятся и за край не выходят. Но на некоторых страницах слова в
   заголовке склеены неразрывными пробелами («в Набережных Челнах»
   — один кусок в 36 символов), и такой кусок переносить не по чему.
   Разрешаем разрывать его, вместо того чтобы вылезать за край экрана. */
body.a11y-mode h1,
body.a11y-mode h2,
body.a11y-mode .section-title{ overflow-wrap: break-word; }

/* Панель a11y — sticky + позиция top */
body.a11y-mode .a11y-panel{
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
/* Убираем скрытую перекрышку — nav не должен перекрывать текст ниже */
body.a11y-mode .nav{ position: relative !important; }
body.a11y-hide-images img{ visibility: hidden; }

/* Правила режима для отдельных блоков сайта. */
body.a11y-mode .mobile-bar{ display: none !important; }
body.a11y-mode .hero-review{
  position: static !important;
  width: auto !important;
  margin-top: 20px !important;
  backdrop-filter: none !important;
  background: var(--bg-card) !important;
}

/* Иконки внутри кнопок при включённом режиме.

   Правило `body.a11y-wb *` красит в белый ВСЕХ потомков, включая иконки, а
   кнопки при этом становятся белыми — рисунок пропадал. Проверено на снимках
   экрана: от глаза в шапке оставался белый круг, от трубки в кнопке звонка —
   тоже. Иконки нарисованы линиями цвета currentColor, поэтому достаточно
   задать им цвет текста самой кнопки.

   Правило намеренно про ЛЮБУЮ кнопку, а не только про глаз: иначе каждая
   новая кнопка с иконкой будет заново терять рисунок. */
body.a11y-wb .a11y-toggle svg, body.a11y-wb .a11y-toggle svg *,
body.a11y-wb .btn svg, body.a11y-wb .btn svg *,
body.a11y-wb button svg, body.a11y-wb button svg *{
  color: #000 !important; stroke: #000 !important;
}
body.a11y-bw .a11y-toggle svg, body.a11y-bw .a11y-toggle svg *,
body.a11y-bw .btn svg, body.a11y-bw .btn svg *,
body.a11y-bw button svg, body.a11y-bw button svg *{
  color: #FFF !important; stroke: #FFF !important;
}
body.a11y-blue .a11y-toggle svg, body.a11y-blue .a11y-toggle svg *,
body.a11y-blue .btn svg, body.a11y-blue .btn svg *,
body.a11y-blue button svg, body.a11y-blue button svg *{
  color: #9DD1FF !important; stroke: #9DD1FF !important;
}

/* Стрелка на кнопке «Настройки отображения» — та же беда, что у иконок выше:
   правило схемы красит ВСЕ псевдоэлементы (`*::after`) в цвет текста страницы,
   а сама кнопка при этом заливается контрастным фоном — стрелка пропадала,
   сливаясь с заливкой. Возвращаем ей цвет текста кнопки. */
body.a11y-wb .a11y-collapse::after{ color: #000 !important; }
body.a11y-bw .a11y-collapse::after{ color: #FFF !important; }
body.a11y-blue .a11y-collapse::after{ color: #9DD1FF !important; }

/* Кнопки при увеличенном шрифте не должны вылезать за экран.

   Замер на телефоне 375 px: в режиме страница уезжала на 16 px вправо —
   кнопка «Записаться на консультацию →» в блоке рассрочки от крупного шрифта
   становилась 336 px шириной и не влезала вместе со своими отступами.
   Разрешаем кнопке переносить текст и не превышать ширину родителя. */
/* Строка шапки в режиме: шрифт крупный, и восемь пунктов меню не помещаются
   даже на широком экране — замер 07.09.2026 при «очень крупном»: правый край
   строки уходил на 1529 при экране 1440, то есть кнопка записи оказывалась за
   краем. В режиме шапка стоит в потоке (не прибита), значит ей можно стать
   выше: разрешаем перенос. */
body.a11y-mode .nav-inner{ flex-wrap: wrap; row-gap: 10px; }
body.a11y-mode .nav-links{ flex-wrap: wrap; row-gap: 8px; }

body.a11y-mode .btn,
body.a11y-mode button,
/* Кнопка записи в шапке носит свой класс `.nav-book` (не общий `.btn`), и
   до 07.09.2026 в этот список не попадала: в режиме она оставалась
   неперносимой строкой без ограничения ширины и вылезала за край. */
body.a11y-mode .nav-book{
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* Кнопки мессенджеров в режиме. Стекло убираем — фон должен быть ровным;
   цвет иконок задаёт правило схемы выше (в режиме они становятся цветом
   ссылок, то есть заметными на своём фоне). */
body.a11y-mode .msg-fab__btn{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ================================================================
   ТЕЛЕФОН (≤720px) — панель не должна съедать экран.

   Замечание маркетолога от 04.09.2026, п. 2: «версия для слабовидящих
   в мобильной версии закреплена к верху и нельзя скрыть, контентная часть
   остаётся на 1/3».

   Как было. Мобильных правил в файле не было вообще — ни одного @media.
   Замеры до правки (окно просмотра телефона, режим включён, шрифт «Крупный»):
     390×844 — панель 365 px, это 43% высоты экрана;
     360×844 — панель 405 px, 48%;
     320×844 — панель 405 px, 46%.
   Плюс панель была «липкой» (position: sticky) — ехала вместе со страницей и
   не пролистывалась, а кнопка выхода из-за margin-left:auto прижималась к
   правому краю и занимала отдельную строку целиком.

   Что стало: панель прокручивается вместе со страницей; настройки спрятаны
   под кнопку «Настройки отображения» и по умолчанию свёрнуты; кнопка
   «Обычная версия ✕» видна всегда, в том числе при свёрнутых настройках.

   Порог 720px описан ТОЛЬКО здесь: скрипт a11y.js ширину экрана не проверяет
   (§🔁 один факт — одно место). Разворачивает настройки класс is-open,
   и правила для него живут внутри этого @media — поэтому состояние,
   выбранное на телефоне, ничего не сворачивает на широком экране.
   ================================================================ */
@media (max-width: 720px){
  /* Прокручивается вместе со страницей. !important и селектор с body.a11y-mode
     повторяют форму правила выше по файлу — иначе sticky не перебить. */
  .a11y-panel,
  body.a11y-mode .a11y-panel{
    position: static !important;
    padding: 8px 0;
  }

  .a11y-panel-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
    padding: 0 14px;
  }

  .a11y-collapse{ display: flex; width: 100%; }

  /* По умолчанию свёрнуто. */
  .a11y-panel-body{ display: none; }
  .a11y-panel.is-open .a11y-panel-body{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  /* Аккуратные строки: подпись группы — своей строкой, кнопки под ней,
     обе галочки делят одну общую строку. */
  .a11y-panel-body > .a11y-group{ flex: 1 1 100%; gap: 6px; }
  .a11y-panel-body > .a11y-group--check{ flex: 0 1 auto; }
  /* line-height ужимаем именно у подписей — это чистый воздух. Размеры самих
     кнопок не трогаем: это цель для пальца, а режим сделан как раз для тех,
     кому трудно попасть по мелкому. */
  .a11y-group-label{ flex: 1 1 100%; margin: 0; font-size: 12px; line-height: 1.2; }

  .a11y-btn{ padding: 6px 10px; font-size: 12px; }
  .a11y-check{ font-size: 12px; gap: 6px; }

  /* Кнопка выхода — на всю ширину строки. margin-left:auto уводил её вправо:
     на узком экране она вставала отдельной строкой у самого края, а на
     экранах уже 360 px рисковала уехать за него. */
  .a11y-close{
    margin-left: 0;
    width: 100%;
    padding: 9px 12px;
  }

  /* Ничего из панели не вылезает за правый край. */
  .a11y-panel *{ max-width: 100%; }
  .a11y-btn, .a11y-close, .a11y-collapse{ overflow-wrap: break-word; }
}