/* ============================================================================
   Главная — группа «вопросы и контакт».
   template-parts/front/faq.php · contacts.php · cta.php

   Здесь НЕТ описания блоков. Все три уже описаны один раз:

     assets/service-page.css  — аккордеон вопросов (.dkQ__*)
     assets/contacts-page.css — контакты и карта (.dkK__*)
     assets/site.css          — финальный призыв (.dkPgCta*), грузится везде

   Главная обязана подключить service-page.css (он ей и так нужен под цены
   и отзывы) и contacts-page.css, иначе блоки останутся без стилей.

   Первая редакция файла завела свой префикс .dkFk и перенесла сюда ~190 строк
   правил из contacts-page.css под новыми именами. Это ровно то, чего проект
   избегает: две копии одной карточки контактов расходятся при первой правке,
   а какая победит — решает порядок enqueue. Блок переведён на .dkK__*,
   файл сократился до того, чего в исходных файлах нет.

   Подложка под картой (.dkK__mapStub*), position: relative на .dkK__map
   и правило, прячущее кнопку «Показать карту» (.dkK__mapBox--auto .dkK__btn--map),
   раньше жили здесь под .dkK--front — тогда автопоказ был только на главной.
   С 03.08.2026 то же устройство показывает карту и на page-kontakty.php,
   поэтому все три правила общие и описаны один раз в contacts-page.css.
   Здесь остались только отличия главной от страницы «Контакты» — пропорция
   карты и место блока в разметке. Копий чужих правил в файле по-прежнему ноль.

   Порядок подключения: tokens.css → service.css → service-page.css →
   contacts-page.css → front-kontakt.css. Файл идёт последним, но на порядок
   не полагается — и это проверено, а не заявлено: перекрытия весят на класс
   больше, чем правило, которое гасят, !important нет. Если добавляете сюда
   правило — считайте специфичность того, что гасите, а не позицию файла.

   Значения только из assets/tokens.css. Литералов цвета нет, кроме #fff.
   Тени только синие — они приходят из contacts-page.css (--sh1).
   ========================================================================== */

/* --- 1. Фон секции ---------------------------------------------------------
   Чередование #fff → --air → #fff → --tint складывается из всей страницы,
   а не из отдельного блока: между вопросами и контактами могут встать блоки
   других групп. Поэтому фон задаёт front-page.php аргументом:

     get_template_part( 'template-parts/front/faq', null, [ 'bg' => 'white' ] );

   Имена модификаторов те же, что у групп «люди» и «услуги» (--bgAir и т. д.).
   Без аргумента остаётся фон по умолчанию: .dkQ — --air (service-page.css),
   .dkK — #fff (.dkK__sec в contacts-page.css). */
.dkQ.dkQ--bgWhite,
.dkK.dkK--bgWhite { background: #fff; }

.dkQ.dkQ--bgAir,
.dkK.dkK--bgAir { background: var(--air); }

.dkQ.dkQ--bgTint,
.dkK.dkK--bgTint { background: var(--tint); }

/* --- 2. Контакты на главной ------------------------------------------------
   Отличий от страницы «Контакты» ровно три, и все они про место блока
   на странице, а не про его вид. */

/* На странице контактов лид — последний элемент секции-шапки, поэтому
   margin: 0. На главной под ним сразу идут карточки. */
.dkK--front .dkK__lead { margin-bottom: var(--sp-8); }

/* Карточка на странице контактов всегда белая, потому что лежит на --air.
   На главной фон секции задаёт front-page.php, и на белой секции белая
   карточка сливается. Порядок двух правил ниже значим и потому они рядом:
   специфичность у них одинаковая (0,2,0), выигрывает последнее. */
.dkK--front .dkK__card { background: var(--air); }

.dkK--bgAir .dkK__card,
.dkK--bgTint .dkK__card { background: #fff; }

/* --- 2а. Карта: видна сразу, грузится сама ---------------------------------
   Карта стоит первой в блоке, а ряд кнопок — под ней: до 02.08.2026 было
   наоборот, потому что карты на главной не было вообще и кнопки были всем
   содержимым блока.

   Устройство (подложка, position: relative, .dkK__mapBox--auto, скрипт
   assets/map-auto.js) с 03.08.2026 общее для этой страницы и для
   page-kontakty.php и описано один раз в contacts-page.css — здесь только
   то, чем главная отличается от страницы «Контакты»: расположение блока
   в разметке и пропорция карты.

   Пропорция: 16/9 на ширине 1200 даёт 675 px карты в блоке, который на главной
   не главный. 21/9 — 514 px при той же ширине: карта читается, а блок не съедает
   экран. На странице «Контакты» пропорция остаётся прежней (16/9,
   contacts-page.css), правило заперто в .dkK--front. */
.dkK--front .dkK__map {
  margin: 0 0 var(--sp-6);
  background: var(--tint);
  aspect-ratio: 21 / 9;
  min-height: 320px;
}

@media (max-width: 640px) {
  /* Повтор обязателен. Мобильная пропорция в contacts-page.css задана
     селектором из одного класса (0,1,0), а правило выше — из двух (0,2,0):
     медиазапрос сам по себе специфичность не поднимает, и без этой строки
     широкий desktop-формат выиграл бы и на 375 px. */
  .dkK--front .dkK__map { aspect-ratio: 4 / 5; min-height: 0; }
}

/* --- 3. Видимый фокус ------------------------------------------------------
   В contacts-page.css правил :focus-visible нет, а в блоке шесть целей
   нажатия. Клавиатурная навигация без видимого фокуса — это WCAG 2.4.7.
   Селекторы из двух классов: kit Elementor красит ссылки правилом
   .elementor-kit-N a и гасит одиночный класс. */
.dkK .dkK__btn:focus-visible,
.dkK .dkK__link:focus-visible,
.dkK .dkK__chip:focus-visible,
.dkK .dkK__val--tel:focus-visible,
.dkK .dkK__val--mail:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* --- 3.5. Вопросы на главной -----------------------------------------------
   Аккордеон целиком описан в assets/service-page.css и здесь не повторяется.
   Своё описание получают только два элемента, которых на странице услуги нет
   и быть не может, потому что там вопросы принадлежат одной услуге:

     .dkQ__sub  — строка «собрано со страниц услуг» под заголовком;
     .dkQ__src  — ссылка под ответом на ту услугу, откуда вопрос взят.

   Второе — не украшение. На главной лежит выборка (по 4 вопроса с услуги
   из 18 и 6), и человеку, которому ответа мало, нужен путь к полному списку,
   а не поиск по меню. */
/* Цвет --body, а не --muted. Секция вопросов на главной идёт на --tint
   (front-page.php передаёт bg => 'tint'), и --muted #7D94A5 на #EBF5FE даёт
   2.86:1 при 13px — измерено в браузере на реплике, порог AA 4.5:1.
   С --body получается 5.5:1. Тот же разбор уже записан в front-uslugi.css
   у .dkP__sub («в service.css он --blue, а это 2.03:1 на белом»), и вывод
   там тот же: подзаголовок секции цветом подписи не красим.
   --muted в теме остаётся для сносок на белом — там он тоже ниже порога
   (.dkHero__note 3.16:1, .dkFacts__note 3.00:1), но это чужие блоки. */
.dkQ--front .dkQ__sub {
  font-size: var(--fz-meta);
  line-height: 1.5;
  color: var(--body);
  max-width: 68ch;
  margin: var(--sp-3) 0 0;
}

/* Отбивка от абзаца ответа: без неё ссылка читается как его продолжение. */
.dkQ--front .dkQ__src {
  margin: var(--sp-3) 0 0;
  font-size: var(--fz-meta);
  line-height: 1.4;
}

/* Селектор из ДВУХ классов: kit Elementor красит ссылки правилом
   .elementor-kit-N a и гасит одиночный класс. !important не нужен. */
.dkQ .dkQ__srcLink {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color var(--dur) var(--ease);
}

.dkQ .dkQ__srcLink:hover,
.dkQ .dkQ__srcLink:focus-visible {
  color: var(--cyan);
  text-decoration-color: currentColor;
}

.dkQ .dkQ__srcLink:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- 4. Плашка редактора ---------------------------------------------------
   Видна только тем, кто может править сайт, — отсюда и вид служебной пометки,
   а не элемента дизайна. Класс общий для блоков главной: на странице контактов
   ту же роль играет .dkK__admin, но он заперт в файле, которого на других
   блоках главной нет. */
.dkFront__admin {
  border: 1px dashed var(--blue);
  border-radius: var(--r-md);
  background: var(--tint);
  padding: 14px 18px;
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
  max-width: 68ch;
}

/* Отдельного блока под prefers-reduced-motion здесь нет намеренно: в tokens.css
   при этой настройке --dur становится 1 мс, и все переходы гаснут сами. */