/* ============================================================
   Панель доступности. Режимы включаются классами на <html>:
   a11y-font-125 / a11y-font-150  — увеличение шрифта
   a11y-contrast-bw               — чёрным по белому
   a11y-contrast-wb               — белым по чёрному
   a11y-noimg                     — скрыть изображения
   a11y-nomotion                  — отключить анимации
   ============================================================ */
/* ----- Размер шрифта: масштабируем корневой rem ----- */
html.a11y-font-125 { font-size: 125%; }
html.a11y-font-150 { font-size: 150%; }
/* ----- Контраст: токены темы ----- */
/* Компоненты theme.css построены на --ap-*: переопределение токенов
   переключает полосы, плашки дат, иконки и рамки без перечисления
   каждого класса. Списки ниже добивают компоненты Bootstrap */
html.a11y-contrast-bw {
  --ap-bg: #fff; --ap-paper: #fff; --ap-ink: #000; --ap-ink-2: #000;
  --ap-muted: #000; --ap-accent: #000; --ap-accent-hover: #000;
  --ap-accent-active: #000; --ap-on-accent: #fff; --ap-line: #000;
  --ap-control-border: #000; --ap-footer-bg: #fff; --ap-footer-text: #000;
}
html.a11y-contrast-wb {
  --ap-bg: #000; --ap-paper: #000; --ap-ink: #fff; --ap-ink-2: #fff;
  --ap-muted: #fff; --ap-accent: #fff; --ap-accent-hover: #fff;
  --ap-accent-active: #fff; --ap-on-accent: #000; --ap-line: #fff;
  --ap-control-border: #fff; --ap-footer-bg: #000; --ap-footer-text: #fff;
}
/* Плашки с инверсией (красный фон → чёрный/белый фон) */
html.a11y-contrast-bw .section-title,
html.a11y-contrast-bw .hero-accent,
html.a11y-contrast-bw .date-tile-month { background: #000 !important; color: #fff !important; }
html.a11y-contrast-wb .section-title,
html.a11y-contrast-wb .hero-accent,
html.a11y-contrast-wb .date-tile-month { background: #fff !important; color: #000 !important; }
/* Ссылки подвала и тёмная тема футера */
html.a11y-contrast-bw .site-footer a,
html.a11y-contrast-bw .footer-title,
html.a11y-contrast-bw .footer-brand { color: #000 !important; }
html.a11y-contrast-wb .site-footer a,
html.a11y-contrast-wb .footer-title,
html.a11y-contrast-wb .footer-brand { color: #fff !important; }
/* Ссылка-плитка — блок, рамка на ней уместна, подчёркивание текста нет */
html.a11y-contrast-bw .tile,
html.a11y-contrast-wb .tile { text-decoration: none; }

/* ----- Контраст: чёрным по белому ----- */
/* Кроме общих поверхностей перечислены те, у которых тема задаёт
   собственный фон (theme.css) или собственный цвет текста: без
   переопределения в режиме они остались бы нечитаемыми */
html.a11y-contrast-bw body,
html.a11y-contrast-bw .card,
html.a11y-contrast-bw .navbar,
html.a11y-contrast-bw footer,
html.a11y-contrast-bw .bg-light,
html.a11y-contrast-bw .bg-warning,
html.a11y-contrast-bw .alert,
html.a11y-contrast-bw .hero,
html.a11y-contrast-bw .info-plaque,
html.a11y-contrast-bw .empty-state,
html.a11y-contrast-bw .form-control,
html.a11y-contrast-bw .form-select,
html.a11y-contrast-bw .detail-price,
html.a11y-contrast-bw .text-dark,
html.a11y-contrast-bw .text-muted,
html.a11y-contrast-bw .info-label,
html.a11y-contrast-bw .hero-crafts,
html.a11y-contrast-bw .hero-lead,
html.a11y-contrast-bw .site-topbar,
html.a11y-contrast-bw .site-header,
html.a11y-contrast-bw .site-footer,
html.a11y-contrast-bw .band,
html.a11y-contrast-bw .tile,
html.a11y-contrast-bw .tile-text,
html.a11y-contrast-bw .date-tile,
html.a11y-contrast-bw .date-tile-weekday,
html.a11y-contrast-bw .cta-panel,
html.a11y-contrast-bw .hero-figure,
html.a11y-contrast-bw .meta-row,
html.a11y-contrast-bw .stat-label,
html.a11y-contrast-bw .media-placeholder,
html.a11y-contrast-bw #a11y-panel,
html.a11y-contrast-bw .cookie-notice {
  background: #fff !important;
  color: #000 !important;
}
html.a11y-contrast-bw a,
html.a11y-contrast-bw .btn,
html.a11y-contrast-bw .nav-link,
html.a11y-contrast-bw .badge {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  text-decoration: underline;
}
html.a11y-contrast-bw img:not(.a11y-keep),
html.a11y-contrast-bw iframe {
  filter: grayscale(100%);
}
/* Пунктирная рамка пустого состояния: #C8C8C8 на белом = 1.67:1 */
html.a11y-contrast-bw .empty-state {
  border-color: #1C1C1C !important;
}
/* .site-footer a:hover в теме перебивает html.a11y-contrast-bw a
   по порядку подключения: розовый на белом = 1.5:1. Дублируем правило */
html.a11y-contrast-bw .site-footer a:hover {
  color: #000 !important;
}
/* ----- Контраст: белым по чёрному ----- */
html.a11y-contrast-wb body,
html.a11y-contrast-wb .card,
html.a11y-contrast-wb .navbar,
html.a11y-contrast-wb footer,
html.a11y-contrast-wb .bg-light,
html.a11y-contrast-wb .bg-warning,
html.a11y-contrast-wb .alert,
html.a11y-contrast-wb .hero,
html.a11y-contrast-wb .info-plaque,
html.a11y-contrast-wb .empty-state,
html.a11y-contrast-wb .form-control,
html.a11y-contrast-wb .form-select,
html.a11y-contrast-wb .detail-price,
html.a11y-contrast-wb .text-dark,
html.a11y-contrast-wb .text-muted,
html.a11y-contrast-wb .info-label,
html.a11y-contrast-wb .hero-crafts,
html.a11y-contrast-wb .hero-lead,
html.a11y-contrast-wb .site-topbar,
html.a11y-contrast-wb .site-header,
html.a11y-contrast-wb .site-footer,
html.a11y-contrast-wb .band,
html.a11y-contrast-wb .tile,
html.a11y-contrast-wb .tile-text,
html.a11y-contrast-wb .date-tile,
html.a11y-contrast-wb .date-tile-weekday,
html.a11y-contrast-wb .cta-panel,
html.a11y-contrast-wb .hero-figure,
html.a11y-contrast-wb .meta-row,
html.a11y-contrast-wb .stat-label,
html.a11y-contrast-wb .media-placeholder,
html.a11y-contrast-wb #a11y-panel,
html.a11y-contrast-wb .cookie-notice {
  background: #000 !important;
  color: #fff !important;
}
html.a11y-contrast-wb a,
html.a11y-contrast-wb .btn,
html.a11y-contrast-wb .nav-link,
html.a11y-contrast-wb .badge {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  text-decoration: underline;
}
html.a11y-contrast-wb img:not(.a11y-keep),
html.a11y-contrast-wb iframe {
  filter: grayscale(100%);
}
/* Поля формы: рамка #767676 на чёрном = 2.42:1, поднимаем до белой */
html.a11y-contrast-wb .form-control,
html.a11y-contrast-wb .form-select {
  border-color: #fff !important;
}
/* Стрелка выпадающего списка: в Bootstrap это переменная,
   тёмный контур на чёрном = 1.70:1 */
html.a11y-contrast-wb .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* Пунктирная рамка пустого состояния */
html.a11y-contrast-wb .empty-state {
  border-color: #fff !important;
}
/* Крестик закрытия — тёмный SVG, на чёрном фоне не виден */
html.a11y-contrast-wb .btn-close {
  filter: invert(1);
}
/* Бургер: иконка и рамка кнопки задаются переменными Bootstrap */
html.a11y-contrast-wb .navbar-toggler {
  --bs-navbar-toggler-icon-bg: #fff;
  --bs-navbar-toggler-border-color: #fff;
}
/* Ховеры из темы перебивают общие правила по специфичности,
   а красный #A31621 на чёрном = 2.69:1 */
html.a11y-contrast-wb .navbar .nav-link:hover,
html.a11y-contrast-wb .navbar .nav-link:focus,
html.a11y-contrast-wb .navbar-brand:hover {
  color: #fff !important;
}
/* Разделитель-тире в строке городов */
html.a11y-contrast-wb .hero-crafts span + span::before {
  color: #fff;
}
/* ----- Без изображений ----- */
html.a11y-noimg img,
html.a11y-noimg iframe {
  display: none !important;
}
/* Скрытая картинка уносит из дерева доступности свой alt, и ссылка
   остаётся фокусируемой, но без имени. Признак такой ссылки —
   картинка как единственный элемент внутри неё (карточки товаров,
   новостей, плитки площадок, галереи, логотипы партнёров) */
html.a11y-noimg a:has(> img:only-child) {
  display: none !important;
}
/* ----- Без анимаций (и для слабовидящих, и для РАС) ----- */
/* Сам <html> не попадает под html.a11y-nomotion * (это потомки),
   а плавный скролл объявлен в motion.css именно на html */
html.a11y-nomotion {
  scroll-behavior: auto !important;
}
html.a11y-nomotion *,
html.a11y-nomotion *::before,
html.a11y-nomotion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
/* ============================================================
   Общая доступность — работает всегда, без панели
   ============================================================ */
/* Уважение к системной настройке «уменьшить движение».
   Многие люди с РАС и вестибулярными нарушениями включают её в ОС —
   сайт должен подчиниться автоматически, без всяких панелей */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Видимый фокус при навигации с клавиатуры */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #d97706 !important;
  outline-offset: 2px;
}
/* Ссылка «Перейти к содержимому» — первая по Tab, видна только при фокусе */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 2000;
  background: #fff;
  color: #000;
  padding: .5rem 1rem;
  border: 2px solid #000;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}
#a11y-panel .btn {
  min-height: 44px; /* крупные цели нажатия — важны и для моторики */
}