/* ==========================================================================
   cms-special.css — режим для слабовидящих
   --------------------------------------------------------------------------
   Требования: Постановление Правительства РФ от 07.02.2026 № 102
   (действует с 01.03.2026) и ГОСТ Р 52872-2019 (уровень АА).

   Что требуют:
     • текст масштабируется не менее чем на 200% без потери
       функциональности и без горизонтальной прокрутки;
     • читаемый шрифт без декоративных элементов;
     • достаточная контрастность;
     • движущуюся/мигающую информацию можно остановить;
     • заголовки описывают тему страницы.

   КАК СДЕЛАНО: никакой второй вёрстки. Режим включается КЛАССАМИ на
   <html>, которые переопределяют только CSS-переменные темы (`--cms-*`).
   Разметка страницы не меняется — значит контент, блоки и правки
   остаются одни и те же.

   Классы:
     .cms-special                  — базовый режим (крупный шрифт, без засечек)
     .cms-special--theme-mono      — чёрное на белом
     .cms-special--theme-inverse   — белое на чёрном
     .cms-special--theme-green     — тёмно-зелёное на светло-зелёном
     .cms-special--theme-blue      — тёмно-синее на светло-голубом
     .cms-special--font-large      — шрифт 1.5x
     .cms-special--font-huge       — шрифт 2x
     .cms-special--no-images       — скрыть изображения и фоновые картинки
     .cms-special--letter-wide     — увеличенный межбуквенный интервал
     .cms-special--letter-wider    — очень большой интервал
   ========================================================================== */

/* ── Базовый режим ─────────────────────────────────────────────────────
   Шрифт без засечек (ГОСТ: «без декоративных элементов»), повышенная
   базовая величина, минимум 20px как рекомендация Р 52872-2019. */
.cms-special {
  --cms-font: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --cms-font-heading: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --cms-special-font-size: 20px;
  --cms-special-letter-spacing: normal;
  --cms-special-line-height: 1.7;

  font-size: var(--cms-special-font-size);
  letter-spacing: var(--cms-special-letter-spacing);
  line-height: var(--cms-special-line-height);

  /* Плавные переходы отключаем: анимация мешает (ГОСТ про движение). */
  scroll-behavior: auto;
}

.cms-special body,
.cms-special .cms-site {
  font-family: var(--cms-font);
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* Заголовки — тот же читаемый шрифт, но крупнее и жирнее. */
.cms-special h1, .cms-special h2, .cms-special h3,
.cms-special h4, .cms-special h5, .cms-special h6 {
  font-family: var(--cms-font-heading);
  letter-spacing: inherit;
  line-height: 1.3;
}

/* Всё мигающее и движущееся останавливаем принудительно. */
.cms-special *,
.cms-special *::before,
.cms-special *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
}

/* ── Размер шрифта ─────────────────────────────────────────────────── */

.cms-special--font-large {
  --cms-special-font-size: 30px;       /* 1.5x от 20px */
}

.cms-special--font-huge {
  --cms-special-font-size: 40px;       /* 2x от 20px — требование ПП 102 */
}

/* На увеличенном шрифте сетки должны перестроиться, а не дать
   горизонтальную прокрутку (запрещено требованием). */
.cms-special--font-large .cms-section__grid,
.cms-special--font-huge .cms-section__grid {
  grid-template-columns: 1fr !important;
}

/* ── Темы (только значения переменных) ─────────────────────────────── */

/* Чёрное на белом — максимальный контраст 21:1 */
.cms-special--theme-mono {
  --cms-color-bg: #ffffff;
  --cms-color-bg-alt: #ffffff;
  --cms-color-text: #000000;
  --cms-color-text-muted: #000000;
  --cms-color-primary: #000000;
  --cms-color-primary-dark: #000000;
  --cms-color-accent: #000000;
  --cms-color-border: #000000;
  --cms-color-bg-dark: #000000;
}

/* Белое на чёрном — 21:1 в обратную сторону */
.cms-special--theme-inverse {
  --cms-color-bg: #000000;
  --cms-color-bg-alt: #000000;
  --cms-color-text: #ffffff;
  --cms-color-text-muted: #ffffff;
  --cms-color-primary: #ffffff;
  --cms-color-primary-dark: #ffffff;
  --cms-color-accent: #ffffff;
  --cms-color-border: #ffffff;
  --cms-color-bg-dark: #ffffff;
}

.cms-special--theme-inverse body,
.cms-special--theme-inverse .cms-site {
  background: #000000;
  color: #ffffff;
}

/* Тёмно-зелёное на светло-зелёном (типовая тема гос-сайтов) */
.cms-special--theme-green {
  --cms-color-bg: #fffff0;
  --cms-color-bg-alt: #f0f5e8;
  --cms-color-text: #1b3a1b;
  --cms-color-text-muted: #1b3a1b;
  --cms-color-primary: #1b3a1b;
  --cms-color-primary-dark: #0d2a0d;
  --cms-color-accent: #1b3a1b;
  --cms-color-border: #1b3a1b;
  --cms-color-bg-dark: #1b3a1b;
}

/* Тёмно-синее на светло-голубом */
.cms-special--theme-blue {
  --cms-color-bg: #f0f6ff;
  --cms-color-bg-alt: #e0ecfa;
  --cms-color-text: #0d2b4e;
  --cms-color-text-muted: #0d2b4e;
  --cms-color-primary: #0d2b4e;
  --cms-color-primary-dark: #071a30;
  --cms-color-accent: #0d2b4e;
  --cms-color-border: #0d2b4e;
  --cms-color-bg-dark: #0d2b4e;
}

/* Фон страницы берём из переменной темы — иначе тело останется белым. */
.cms-special body,
.cms-special .cms-site {
  background-color: var(--cms-color-bg);
  color: var(--cms-color-text);
}

/* ── Отключение изображений ──────────────────────────────────────────
   Требование: пользователь должен уметь убрать всё нетекстовое.
   Скрываем картинки и декоративные фоны, но не ломаем разметку. */
.cms-special--no-images img,
.cms-special--no-images picture,
.cms-special--no-images video,
.cms-special--no-images svg.cms-decorative,
.cms-special--no-images [class*="--bg-image"],
.cms-special--no-images [class*="--bg-photo"] {
  display: none !important;
}

.cms-special--no-images .cms-hero,
.cms-special--no-images .cms-section {
  background-image: none !important;
}

/* ── Межбуквенный интервал (кернинг) ───────────────────────────────── */

.cms-special--letter-wide {
  --cms-special-letter-spacing: 0.05em;
}

.cms-special--letter-wider {
  --cms-special-letter-spacing: 0.12em;
}

/* ── Ссылки: подчёркивание обязательно ───────────────────────────────
   Цвет как единственный признак ссылки недопустим (Р 52872-2019). */
.cms-special a,
.cms-special a:hover,
.cms-special a:visited {
  color: var(--cms-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ── Видимый фокус ───────────────────────────────────────────────────
   3px контур и смещение — пункт про навигацию с клавиатуры. */
.cms-special a:focus-visible,
.cms-special button:focus-visible,
.cms-special input:focus-visible,
.cms-special select:focus-visible,
.cms-special textarea:focus-visible,
.cms-special [tabindex]:focus-visible {
  outline: 3px solid var(--cms-color-accent);
  outline-offset: 2px;
}

/* ── Кнопки: границы видны в монохромных темах ─────────────────────── */

.cms-special .cms-button,
.cms-special button,
.cms-special .cms-btn {
  border: 2px solid var(--cms-color-border);
  text-decoration: none;
}

/* ── Таблицы читаемы в любой теме ──────────────────────────────────── */

.cms-special table {
  border-collapse: collapse;
}

.cms-special th,
.cms-special td {
  border: 1px solid var(--cms-color-border);
  padding: 0.5em 0.75em;
}

/* ── Печать: режим сохраняется ───────────────────────────────────────
   Нормальные сайты при печати теряют контраст; здесь наоборот —
   печатаем чёрным по белому независимо от выбранной темы. */
@media print {
  .cms-special,
  .cms-special * {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* ── Служебный блок с настройками режима ───────────────────────────── */

.cms-special-panel {
  background: var(--cms-color-bg-alt);
  border-bottom: 2px solid var(--cms-color-border);
  padding: 0.75rem 1rem;
  font-size: 0.9em;
}

.cms-special-panel__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.cms-special-panel__label {
  font-weight: 600;
  min-width: 10em;
}

.cms-special-panel__button {
  background: var(--cms-color-bg);
  color: var(--cms-color-text);
  border: 1px solid var(--cms-color-border);
  border-radius: 4px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-family: inherit;
  font-size: .95em;
}

.cms-special-panel__button:hover {
  background: var(--cms-color-bg-alt);
}

.cms-special-panel__button[aria-pressed="true"] {
  border-width: 3px;
  font-weight: 700;
}

/* Кнопка включения режима в шапке обычной версии */
.cms-special-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.cms-special-toggle:hover {
  text-decoration: none;
}