/* Версия для слабовидящих: панель управления и сами режимы.
   Вынесено в отдельный файл, чтобы правки доступности не задевали основную вёрстку. */

.a11y-bar { background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border); }
.a11y-bar__inner { display: flex; justify-content: flex-end; }
.a11y-bar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 10px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.a11y-bar__toggle:hover { color: var(--color-primary); }
.a11y-bar__toggle svg { flex-shrink: 0; }

.a11y-panel { background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
.a11y-panel[hidden] { display: none; }
.a11y-panel__inner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-start; }
.a11y-panel__group { display: flex; flex-direction: column; gap: 6px; }
.a11y-panel__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-ink-soft); }
.a11y-panel__options { display: flex; flex-wrap: wrap; gap: 6px; }
.a11y-panel__options button {
  min-height: 40px;
  min-width: 40px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-ink);
  cursor: pointer;
}
.a11y-panel__options button:hover { border-color: var(--color-primary); }
.a11y-panel__options button.is-active { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); font-weight: 700; }
.a11y-panel__btn--large { font-size: 1.25rem; }
.a11y-panel__btn--xlarge { font-size: 1.625rem; }
.a11y-panel__btn--bw { background: #fff; color: #000; }
.a11y-panel__btn--wb { background: #000; color: #fff; }
.a11y-panel__btn--by { background: #000; color: #ff0; }
.a11y-panel__reset {
  align-self: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

/* --- Режимы --- */

html[data-a11y-font="large"] { font-size: 125%; }
html[data-a11y-font="xlarge"] { font-size: 155%; }

/* Шапка свёрстана в один ряд под обычный размер шрифта. При увеличенном
   тексту не хватает ширины, и телефоны начинают переноситься по одной букве,
   уезжая за край экрана. Поэтому в режиме для слабовидящих шапке разрешено
   переноситься на несколько строк — высота тут менее важна, чем читаемость. */
html.a11y-on .site-header__nav { flex-wrap: wrap; }
html.a11y-on .site-header__contacts { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; }
html.a11y-on .site-header__phone,
html.a11y-on .site-footer__phone { white-space: nowrap; }
html.a11y-on .site-header__inner { flex-wrap: wrap; }
html.a11y-on .site-header__assocs { flex-wrap: wrap; }

html[data-a11y-spacing="wide"] body { letter-spacing: 0.08em; word-spacing: 0.16em; line-height: 1.9; }

/* Картинки убираем целиком, а не делаем прозрачными: смысл режима в том, чтобы
   на странице остался только текст и не осталось пустых дыр в вёрстке. */
html[data-a11y-images="off"] img,
html[data-a11y-images="off"] svg:not(.a11y-bar__toggle svg),
html[data-a11y-images="off"] video,
html[data-a11y-images="off"] iframe { display: none !important; }

html.a11y-on[data-a11y-theme="bw"],
html.a11y-on[data-a11y-theme="wb"],
html.a11y-on[data-a11y-theme="by"] {
  --a11y-bg: #fff;
  --a11y-ink: #000;
  --a11y-accent: #000;
}
html.a11y-on[data-a11y-theme="wb"] { --a11y-bg: #000; --a11y-ink: #fff; --a11y-accent: #fff; }
html.a11y-on[data-a11y-theme="by"] { --a11y-bg: #000; --a11y-ink: #ff0; --a11y-accent: #ff0; }

html.a11y-on[data-a11y-theme="bw"] body,
html.a11y-on[data-a11y-theme="wb"] body,
html.a11y-on[data-a11y-theme="by"] body {
  background: var(--a11y-bg) !important;
  color: var(--a11y-ink) !important;
}

/* Один правило-переопределение вместо перечисления всех классов сайта: в
   контрастном режиме цветовая палитра целиком заменяется на две краски. */
html.a11y-on[data-a11y-theme="bw"] *,
html.a11y-on[data-a11y-theme="wb"] *,
html.a11y-on[data-a11y-theme="by"] * {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--a11y-ink) !important;
  border-color: var(--a11y-ink) !important;
  box-shadow: none !important;
}

html.a11y-on[data-a11y-theme="bw"] a,
html.a11y-on[data-a11y-theme="wb"] a,
html.a11y-on[data-a11y-theme="by"] a { text-decoration: underline !important; }

/* Липкая шапка после сброса фонов стала бы прозрачной, и текст страницы
   поехал бы прямо сквозь меню. Возвращаем ей фон и границу. */
html.a11y-on[data-a11y-theme="bw"] .site-header,
html.a11y-on[data-a11y-theme="wb"] .site-header,
html.a11y-on[data-a11y-theme="by"] .site-header,
html.a11y-on[data-a11y-theme="bw"] .cookie-banner,
html.a11y-on[data-a11y-theme="wb"] .cookie-banner,
html.a11y-on[data-a11y-theme="by"] .cookie-banner {
  background-color: var(--a11y-bg) !important;
  border-bottom: 2px solid var(--a11y-ink) !important;
}

html.a11y-on[data-a11y-theme="bw"] button,
html.a11y-on[data-a11y-theme="wb"] button,
html.a11y-on[data-a11y-theme="by"] button,
html.a11y-on[data-a11y-theme="bw"] .btn,
html.a11y-on[data-a11y-theme="wb"] .btn,
html.a11y-on[data-a11y-theme="by"] .btn {
  border: 2px solid var(--a11y-ink) !important;
  border-radius: 6px !important;
}

/* Модальные окна в контрастном режиме должны оставаться непрозрачными, иначе
   текст страницы просвечивает сквозь форму записи. */
html.a11y-on[data-a11y-theme="bw"] .modal-booking__dialog,
html.a11y-on[data-a11y-theme="wb"] .modal-booking__dialog,
html.a11y-on[data-a11y-theme="by"] .modal-booking__dialog,
html.a11y-on[data-a11y-theme="bw"] .contacts-sheet__dialog,
html.a11y-on[data-a11y-theme="wb"] .contacts-sheet__dialog,
html.a11y-on[data-a11y-theme="by"] .contacts-sheet__dialog {
  background-color: var(--a11y-bg) !important;
  border: 2px solid var(--a11y-ink) !important;
}
html.a11y-on[data-a11y-theme="bw"] .modal-booking__overlay,
html.a11y-on[data-a11y-theme="wb"] .modal-booking__overlay,
html.a11y-on[data-a11y-theme="by"] .modal-booking__overlay,
html.a11y-on[data-a11y-theme="bw"] .contacts-sheet__overlay,
html.a11y-on[data-a11y-theme="wb"] .contacts-sheet__overlay,
html.a11y-on[data-a11y-theme="by"] .contacts-sheet__overlay {
  background-color: rgba(0, 0, 0, 0.75) !important;
}