/* ---------------------------------------------------------------------------
   Доступность — ת"י 5568 (WCAG 2.0 AA)
   Добавлено 22.08.2026.

   Файл отдельный и подключается последним. Существующие стили сайта не
   изменялись: так правку видно целиком в одном месте и её можно снять одной
   строкой, если что-то поедет.
   --------------------------------------------------------------------------- */

/* 1. Видимый фокус с клавиатуры (2.4.7).

   В theme.css стоит `a:focus, img:focus { outline: 0 }` — контур снят у всех
   ссылок сайта. Человек, идущий по странице с клавиатуры, не видит, где
   находится. Перебиваем через !important: пол доступности не должен
   отключаться правилом, оставленным в чужом файле.

   :focus-visible, а не :focus — контур появляется от клавиатуры и не появляется
   от мыши, поэтому внешний вид при обычной работе не меняется. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Select2 рисует свой список поверх скрытого <select>: там контур нужен на
   самом виджете, иначе фокус не виден вообще. */
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px !important;
}

/* 2. Ссылка «перейти к содержимому» (2.4.1).

   Не видна мышью, появляется при фокусе с клавиатуры первым же Tab и позволяет
   перепрыгнуть меню, которое иначе приходится прослушивать на каждой странице. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: #ffffff;
  color: #10285a;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #1d4ed8;
  border-radius: 4px;
  transition: top 0.15s ease-in-out;
}

.skip-link:focus {
  top: 8px;
}

/* На иврите страница идёт справа налево — ссылка должна быть у правого края. */
html[dir="rtl"] .skip-link {
  left: auto;
  right: 8px;
}

/* 3. Подписи, доступные только диктору (1.3.1, 3.3.2).

   Для полей, у которых на экране подписи нет по замыслу дизайна: текст
   существует в разметке и читается диктором, но не занимает места. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 4. Контраст текста (1.4.3).

   Из 46 надписей на главной 28 не проходили норму — от 1.02 при требуемых 3.0
   у заголовка поверх фотографии до 3.53 у серого текста. Причин при этом всего
   пять, и все они правятся здесь.

   Фирменный оранжевый #ff9f2d не тронут нигде: он опознаваемый, и менять его
   ради контраста дороже, чем поменять цвет надписи поверх него.

   !important здесь по той же причине, что и у фокуса: правило доступности не
   должно проигрывать более длинному селектору в чужом файле. */

/* 4.1. Заголовок поверх фотографии: было 1.02, текст сливался с фоном. Поверх
   фото контраст нельзя посчитать заранее — он зависит от того, какой пиксель
   окажется под буквой. Поэтому под содержимое кладётся полупрозрачная подложка:
   она делает фон известным при любой фотографии, а сама фотография видна. */
.top-form .container {
  background: rgba(8, 22, 92, 0.62);
  border-radius: 10px;
}

/* Акцентное слово в заголовке: оранжевое на подложке давало 2.42. Осветлено до
   янтарного — акцент сохраняется, норма выполняется. */
.top-form .container h1 span {
  color: #ffc97a !important;
}

/* На остальных страницах заголовок лежит на фотографии так же и давал те же 1.02.
   Подложка тут во всю ширину, поэтому без скругления. */
.page-header .title,
.flight-header .title {
  background: rgba(8, 22, 92, 0.62);
}

.flight-header .title h1 span {
  color: #ffc97a !important;
}

/* 4.2. Строка вкладок: белый текст на бирюзовом давал 2.8. Бирюзовый затемнён. */
.top-form .form-block .tabs-line {
  background: #17798a !important;
}

/* 4.3. Подписи полей поиска: серо-синий на тёмно-синем давал 2.54. Осветлены,
   оттенок тот же. */
.form-block .label p {
  color: #8590bd !important;
}

/* 4.4. Серый текст на белом: #878787 в блоке «почему мы» давал 3.53, #959595
   у подписей в заявке — ровно 3.00. Оба затемнены до одного оттенка. */
.why-block .item .text,
.flight-form .label {
  color: #6b6b6b !important;
}

/* 4.5. Зелёная плашка: белый текст на светло-зелёном давал 2.17. */
.why-block .green-side {
  background: #23a06e !important;
}

/* 4.6. Всё, что стоит на оранжевом, — кнопки и выбранный пункт меню: белым по
   оранжевому это 2.05. Оранжевый остаётся, тёмным становится текст. */
.top-menu .link.selected a,
.button,
.tours .tours-list .container .tour .info .button a {
  color: #3a2400 !important;
}

/* Серый ховер у кнопки заявки не проходил и раньше — 4.12 белым текстом.
   Заменён на затемнённый оранжевый, чтобы надпись читалась в обоих состояниях. */
.flight-form .container .members .submit-button .button:hover {
  background: #d97d00 !important;
}

/* 5. Фокус у переключателей, спрятанных под свою же картинку (2.4.7).

   Пол пассажира и багаж сделаны так: настоящий <input> уводится в
   `opacity: 0; width: 0; height: 0`, а рисуется соседний `.checkmark`.
   Правило фокуса выше к такому полю применяется, но контур рисовать не на чем —
   поле нулевого размера. Человек, идущий по форме с клавиатуры, не видит, где
   находится. Поэтому контур переносится на видимую часть. */
.radio-input input:focus-visible ~ .checkmark {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px;
}

/* 6. Согласие с правилами перед отправкой заявки.

   Новый блок в форме заявки, своих стилей в theme.css у него нет. Здесь ровно
   то, что нужно для читаемой строки: галочка не сжимается, текст переносится,
   между галочкой и текстом есть расстояние. Размер галочки задан явно — по
   умолчанию она мельче, чем цель в 24 пикселя, до которой удобно попадать
   пальцем на телефоне. */
.consent-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 20px 20px;
}

.consent-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.consent-line input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
}

/* Ссылка на правила: цвет сайта вместо браузерного синего. Подчёркивание
   оставлено намеренно — по нему ссылка опознаётся и без различения цвета (1.4.1). */
.consent-link {
  color: #10285a;
  text-decoration: underline;
}

/* 7. Значок доступности — ссылка на декларацию.

   Владелец хотел привычный значок. Сделан статичной ссылкой на страницу
   декларации, а не накладкой с меню: накладка законом не требуется и иногда
   сама ломает клавиатуру и диктора, а декларация — требуется.

   Стоит в шапке, рядом со сменой языка. */
.a11y-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin-inline-start: 6px;
  border-radius: 50%;
  background: #10285a;
  /* !important: у темы есть более длинный селектор `header .container .languages a`,
     который красит ссылку в тёмно-серый. Без этого рисунок почти сливался с синим
     кругом — на глаз при 30 пикселях этого не видно, поймалось замером. */
  color: #ffffff !important;
  text-decoration: none;
}

.a11y-badge svg {
  width: 19px;
  height: 19px;
}

.a11y-badge:hover {
  background: #1d4ed8;
}

/* Ниже 991 пикселей их макет перестраивается: верхнее меню прячется, шапка
   сжимается, и телефон там наезжает на переключатель языка ещё без нашего
   значка. Добавлять туда что-либо нельзя, поэтому значок уходит в угол экрана.
   Слева, потому что справа обычно садится чат-виджет. */
@media (max-width: 991px) {
  .a11y-badge {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9000;
    width: 48px;
    height: 48px;
    margin: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }

  .a11y-badge svg {
    width: 28px;
    height: 28px;
  }
}