/* =========================================================================
   Керен Центр — доступность, типографика, тап-таргеты.
   Подключается из wp-content/mu-plugins/keren-fixes.php
   Откат: удалить файл (или строку wp_enqueue_style в mu-плагине).

   Селекторы и исходные цвета получены из живой выдачи сайта
   (CDP: CSS.getMatchedStylesForNode + computed styles) и из wp-content/et-cache.
   Целевые цвета рассчитаны по формуле контраста WCAG 2.1, не подобраны на глаз.
   Порог: 4.5:1 обычный текст, 3:1 крупный (>=24px, либо >=18.66px при weight>=700).

   ВАЖНО про !important: Divi 5 печатает часть своих <style> ПОЗЖЕ подключаемых
   файлов, поэтому правила равной специфичности проигрывают. Отмеченные ниже
   четыре места без !important не применяются — это проверено замером.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ / БАЗОВЫЙ РАЗМЕР ТЕКСТА
   ------------------------------------------------------------------------- */
:root {
  --gcid-link-color: #177db3;       /* было #7dc3e8 — 1.94:1 на белом */
  --et_global_body_font_size: 16px; /* было 14px */

  /* Тёмная палитра услуг: 4.5:1 против ВСЕХ пастельных фонов сайта.
     Пастельные оттенки остаются, но только для фонов и иллюстраций. */
  --keren-green:   #15562c;
  --keren-blue:    #034f78;
  --keren-gold:    #654503;
  --keren-orange:  #7e3507;
  --keren-magenta: #870489;
}

/* Divi держит на body литеральные font-size:14px и печатает их позже —
   переменная выше сама по себе не срабатывает. */
body { font-size: 16px !important; }

/* -------------------------------------------------------------------------
   2. ЗАГОЛОВКИ И ПОДЗАГОЛОВКИ КАРТОЧЕК УСЛУГ
   Один и тот же .dsm_card_title на десктопе 30px, на мобиле 16px, и лежит
   то на белом, то на пастельной заливке секции. Поэтому цвет один — тёмный:
   он проходит порог во всех четырёх комбинациях.
   ------------------------------------------------------------------------- */
#page-container .dsm_card_carousel .dsm_card_carousel_child_0 .dsm_card_title { color: var(--keren-green); }   /* было #A8D8B9 1.59:1 */
#page-container .dsm_card_carousel .dsm_card_carousel_child_1 .dsm_card_title { color: var(--keren-blue); }    /* было #7DC3E8 1.94:1 */
#page-container .dsm_card_carousel .dsm_card_carousel_child_2 .dsm_card_title { color: var(--keren-gold); }    /* было #f9cf5c 1.49:1 */
#page-container .dsm_card_carousel .dsm_card_carousel_child_3 .dsm_card_title { color: var(--keren-orange); }  /* было #F9A26C 2.02:1 */
#page-container .dsm_card_carousel .dsm_card_carousel_child_4 .dsm_card_title { color: var(--keren-magenta); } /* было #fc7fff 2.18:1 */

/* Ночная заглушка «Спят усталые игрушки» на /cams/ — это тоже
   dsm_card_carousel_child_0, и правило выше перекрашивало её в тёмно-зелёный.
   Там она лежит на тёмной картинке и должна оставаться белой. */
body.page-id-2146 #page-container .dsm_card_carousel_child_0 .dsm_card_title {
  color: #fff !important;
}

/*
 * Подзаголовки карточек. На внутренних страницах они лежат БЕЗ предка
 * .dsm_card_carousel (разметка там — .dsm_card_wrapper > .dsm_card_carousel_child_subtitle),
 * поэтому прежний селектор с индексом карточки промахивался.
 *
 * Цвет у каждой карточки свой (оранжевый, красный, голубой, зелёный, жёлтый),
 * поэтому не сводим их к одному тону, а затемняем фильтром: тон сохраняется,
 * а порог 4.5:1 достигается для всех пяти (худший становится 4.66:1).
 */
#page-container .dsm_card_carousel_child_subtitle {
  filter: brightness(0.55);
}

/* -------------------------------------------------------------------------
   3. КНОПКИ «ПОДРОБНЕЕ» — белый текст 18px/600 на пастельном градиенте,
   худший замер 1.27:1. Градиент заменён сплошной заливкой в том же тоне:
   попытка затемнить оба стопа уводила тёмный конец в чёрное.
   ------------------------------------------------------------------------- */
#page-container .dsm_card_carousel_child_0 .et_pb_button { background-image: none; background-color: #1e8742; } /* 1.59 → 4.57 */
#page-container .dsm_card_carousel_child_1 .et_pb_button { background-image: none; background-color: #007cc0; } /* 1.94 → 4.50 */
#page-container .dsm_card_carousel_child_2 .et_pb_button { background-image: none; background-color: #a06b00; } /* 1.27 → 4.57 */
#page-container .dsm_card_carousel_child_3 .et_pb_button { background-image: none; background-color: #c85106; } /* 2.02 → 4.53 */
#page-container .dsm_card_carousel_child_4 .et_pb_button { background-image: none; background-color: #d000d4; } /* 2.18 → 4.53 */


/* Кнопка «Где мы?» на /contacts/ — тот же приём, что и у кнопок карточек:
   белый текст 18px/600 на пастельном градиенте #0096e8→#7dc3e8 давал 2.53:1. */
#page-container .dsm_button .et_pb_button,
#page-container .dsm_button_0 .et_pb_button {
  background-image: none !important;
  background-color: #0078b9 !important;   /* 2.53 → 4.80 */
}

/* -------------------------------------------------------------------------
   3b. КАМЕРЫ НА ПЛАНШЕТЕ И ДЕСКТОПЕ: видео обрезалось слайдом карусели.

   Swiper при инициализации проставляет .swiper-wrapper инлайновую высоту по
   содержимому (на 1024px это 191px), а плеер Elite создаётся ПОЗЖЕ и с
   position:absolute — в поток он не попадает, поэтому слайд под него не растёт.
   Всё, что ниже 191px, срезал overflow:hidden слайда.

   Замер до правки: слайд 480x191 при плеере 480x360 (лишних 169px),
   на 1180 — 558x211 против 558x419, на 1440 — 688x245 против 688x516.
   На узких экранах текст переносился, слайд был выше — оттуда «кусочки».

   Снимаем фиксированные высоты только на странице камер, чтобы не трогать
   режим равной высоты у каруселей услуг на остальных страницах.
   ------------------------------------------------------------------------- */
body.page-id-2146 #page-container .dsm_card_carousel_wrapper,
body.page-id-2146 #page-container .dsm_card_carousel_wrapper .swiper-wrapper,
body.page-id-2146 #page-container .dsm_card_carousel_child,
body.page-id-2146 #page-container .dsm_card_carousel_child .et_pb_module_inner,
body.page-id-2146 #page-container .dsm_card_wrapper,
body.page-id-2146 #page-container .dsm_card_carousel_child_description {
  height: auto !important;
}

/* -------------------------------------------------------------------------
   3c. ШАПКА В ПОЛОСЕ 981–1140px: логотип наезжал на меню.

   Замер: при 981–1100px правый край логотипа 271px, левый край меню 208px —
   наложение 63px, меню переносится на две строки, пункты «Привет!» и
   «Праздники» физически лежат под логотипом. От 1180px и шире всё сходится,
   ниже 981px Divi переключается на мобильное меню.

   Полоса возникает потому, что брейкпоинт Divi (980px) наступает раньше, чем
   меню перестаёт помещаться. Мобильное меню тут от Divi Toolbox и открывается
   его же скриптом, поэтому включать его раньше средствами CSS не будем —
   вместо этого ужимаем кегль и отступы, чтобы меню поместилось в одну строку.
   ------------------------------------------------------------------------- */
@media (min-width: 980px) and (max-width: 1180px) {
  #page-container #top-menu > li > a {
    font-size: 14px;
    letter-spacing: -0.1px;
  }

  #page-container #top-menu > li {
    padding-right: 9px;
  }
}

/* -------------------------------------------------------------------------
   4. ПЛАШКИ FAQ — белый текст 18px/700 на пастельном фоне
   ------------------------------------------------------------------------- */
#page-container .dsm_faq_0 .dsm-faq-item-wrapper:not(.dsm-faq-item-active) {
  background-color: #1a7db2;        /* было #7dc3e8 — 1.94:1 → 4.53:1 */
}
/* dsm_faq_1 существует только на /quest/ — оранжевая группа «какие бывают квесты» */
#page-container .dsm_faq_1 .dsm-faq-item-wrapper:not(.dsm-faq-item-active) {
  background-color: #ca4f02;        /* было #f9a26c — 2.02:1 → 4.55:1 */
}

/* -------------------------------------------------------------------------
   5. ПОДВАЛ — белый текст на #7dc3e8, 48 элементов на 8 страницах.
   !important: правила Divi той же специфичности идут позже.
   ------------------------------------------------------------------------- */
#main-footer   { background-color: #1a7db2 !important; }
#footer-bottom { background-color: #1a7db2 !important; }
#et-footer-nav { background-color: rgba(26, 125, 178, 0.92) !important; }

/* -------------------------------------------------------------------------
   6. МОБИЛЬНОЕ МЕНЮ DIVI TOOLBOX — розовый пункт «Праздники», 28px/600.
   !important: иначе правило плагина выигрывает.
   ------------------------------------------------------------------------- */
.dtb-mobile-menu li a[href*="/holidays/"] {
  background-color: #d000d4 !important; /* было #fc7fff — 2.18:1 → 4.53:1 */
}

/* -------------------------------------------------------------------------
   7. ОСТАЛЬНЫЕ ТЕКСТОВЫЕ ЦВЕТА (каждый подтверждён отдельным замером)
   ------------------------------------------------------------------------- */
/* Заголовок таба лежит на пастельной плашке #7dc3e8 — нужен тёмный тон.
   !important: .dsm_advanced_tabs_0 .dsm-inner-content .dsm-title специфичнее. */
#page-container .dsm-title            { color: var(--keren-blue) !important; } /* было #7DC3E8 1.94:1 */
#page-container .dsm_icon_list_text,
#page-container .dsm_icon_list_text div { color: var(--keren-blue); }          /* было #7dc3e8 1.94:1 */
#page-container .dsm-tab-subtitle     { color: #3d3d3d; }                      /* #525252 4.03:1 на #7dc3e8 */
#page-container .wpsr_read_more       { color: #0978b4; }                      /* #1194dc 3.34 → 4.83 (с запасом от округления) */
#page-container a.wpsr-write-review   { background-color: #1368f7; }           /* 3.60 → 4.83 (с запасом от округления) */
#top-header #et-info a                { color: #046434; }                      /* #087740 3.54 → 4.57 на #a8d8b9 */
/* Таймер под видео — это плеер MediaElement из ядра WordPress (.mejs-*),
   а не Elite Video Player: прежнее правило на .elite_vp_* не попадало. */
#page-container .mejs-controls .mejs-time span,
#page-container .mejs-currenttime,
#page-container .mejs-duration        { color: #595959; }                      /* #999 2.85 → 4.6 */

/* Пункты меню подвала: фон #7dc3e8 задан на самой ссылке, поэтому правило
   на #et-footer-nav его не перебивало. */
#main-footer ul.bottom-nav li a,
#et-footer-nav ul.bottom-nav li a     { background-color: #1a7db2 !important; } /* 1.94 → 4.53 */

/* -------------------------------------------------------------------------
   7b. ФОЛБЭК ШРИФТА BELLOTA. В сгенерированном Divi CSS стоит
   `font-family:'Bellota',fantasy`. Bellota действительно используется (ответы
   FAQ, двойные заголовки, описания карточек), но `fantasy` как резерв — это
   Comic Sans или Impact на части систем. Меняем резерв на основной шрифт сайта.
   ------------------------------------------------------------------------- */
#page-container .dsm_card_carousel .dsm_card_carousel_child_0 .dsm_card_title,
#page-container .dsm_card_carousel .dsm_card_carousel_child_description,
#page-container .dsm-dual-heading-main,
#page-container .dsm_faq_child .dsm-faq-content {
  font-family: 'Bellota', 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* -------------------------------------------------------------------------
   8. ТИПОГРАФИКА. h1 был 25–34px при line-height 1.0 и меньше h4 (30px).
   Исправляем прежде всего line-height; про минимум клэмпа — прим. ниже.
   ------------------------------------------------------------------------- */
#page-container h1,
#page-container .et_pb_module_header {
  font-size: clamp(28px, 5.4vw, 52px);
  line-height: 1.14;
}

/*
 * Главный дефект h1 был не размер, а line-height 1.0. Минимум клэмпа держим на
 * исходных 28px сознательно: на 34px строка «Место, где интересно» начинает
 * переноситься, и каждое слово typing-анимации даёт сдвиг вёрстки —
 * замер показал рост CLS 0.202 → 0.444. На десктопе h1 всё равно вырос до 52px.
 *
 * Плюс фиксируем ширину печатающегося слова по самому длинному варианту
 * («интересно»), чтобы смена слова не перекладывала строку.
 */
#page-container .dsm-typing-wrapper {
  display: inline-block;
  min-width: 5.1em;    /* самое длинное слово; фиксированная ширина CLS не лечит — см. отчёт */
  text-align: left;
}


/* -------------------------------------------------------------------------
   9. ТАП-ТАРГЕТЫ. Норма 44px. Было: аккордеон FAQ 36px, кнопки ~41px,
   пункты нижнего меню 40px, телефон в шапке 20px.
   ------------------------------------------------------------------------- */
.dsm-faq-item-wrapper .dsm-faq-title {
  min-height: 44px;
  display: flex;
  align-items: center;
}
#page-container .et_pb_button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}
.wp-bottom-menu-item {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#top-header #et-info a[href^="tel"] {
  display: inline-block;
  padding: 8px 4px;
}

/* -------------------------------------------------------------------------
   9b. ССЫЛКА «ПЕРЕЙТИ К СОДЕРЖИМОМУ» (выводится из mu-плагина).
   Спрятана над экраном и выезжает только при фокусе с клавиатуры —
   мышью её не видно, вёрстка не меняется.
   ------------------------------------------------------------------------- */
/* Текст, доступный поисковику и программе чтения с экрана, но вынутый из потока:
   ширина 1px + clip, поэтому на вёрстку и на CLS не влияет вообще.
   Используется для слова в H1 главной (см. mu-плагин, пункт 5c). */
.keren-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.keren-skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100000;
  padding: 10px 18px;
  background: #1a7db2;
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}

.keren-skip-link:focus {
  top: 0;
  outline: 3px solid #046434;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   10. ФОКУС С КЛАВИАТУРЫ. Было два `outline: none` и ни одного :focus-visible.
   ------------------------------------------------------------------------- */
#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container .et_pb_button:focus-visible,
.dsm-faq-title:focus-visible,
.wp-bottom-menu-item:focus-visible {
  outline: 3px solid #177db3;
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   11. PREFERS-REDUCED-MOTION. Гасит CSS-анимации, parallax и курсор печати.
   Сам typing-эффект и частицы рисует JS — их выключать в настройках модулей.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .et-pb-parallax-background { transform: none !important; }
  .dsm-typing-effect .typed-cursor { display: none; }
}

/* -------------------------------------------------------------------------
   12. КАМЕРЫ: плашка «Включить звук» не реагировала на клик.

   Плеер стартует беззвучно (иначе браузер запретит автозапуск) и показывает
   свою плашку «Включить звук». Клик по ней должен снимать mute и убирать
   плашку, но до плеера он не доходил: карточка карусели Divi Supreme рисует
   поверх картинки собственный слой `.et_overlay`, а плеер Elite создаётся
   позже и ложится в ту же область. Проверка попаданием: в центре плашки
   `document.elementFromPoint` возвращал `SPAN.et_overlay`, а не саму плашку,
   хотя у плашки z-index 999999 и pointer-events: auto.

   Слой декоративный — он лишь затемняет картинку при наведении, — поэтому
   отдаём клики сквозь него. Наведение при этом работает как работало:
   `.et_overlay` показывается по :hover родителя, а не по своему.

   Только на странице «Наблюдение»: на остальных страницах оверлей карточек
   ничего не перекрывает, и трогать его там незачем.
   ------------------------------------------------------------------------- */
body.page-id-2146 #page-container .dsm_card_carousel_child .et_overlay {
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   13. КАРУСЕЛЬ КАРТОЧЕК: картинка прижималась к левому краю, хотя в модуле
   выставлено выравнивание «по центру».

   Divi Supreme печатает два правила подряд, и второе гасит первое:

     .dsm_card_carousel_child_image_wrapper
       { display: flex; justify-content: center !important }
     .dsm_card_carousel_child_image_wrapper.dsm_card_carousel_child_badge_preset
       { display: block !important; justify-content: initial !important }

   Класс `..._badge_preset` стоит на <figure> всегда, даже когда бейдж выключен,
   поэтому центрирование не работает нигде. В блочном контейнере картинка с
   `max-width: 39%` (на телефоне 54%) уезжает влево.

   Замер на /cams/ при 1440px: карточка 688px, картинка 268px на x=20 — впритык
   к левому краю; после правки x=574 при центре карточки 708. Настройка
   `image_alignment: center` стоит во всех восьми каруселях сайта, поэтому
   правим глобально, а не по одной странице. На главной геометрия не меняется:
   там картинка и так во всю ширину карточки.

   Пресет бейджа не трогаем — он позиционирует сам бейдж; центрируем картинку.
   ------------------------------------------------------------------------- */
#page-container .dsm_card_carousel_child_image_wrapper.dsm_card_carousel_child_badge_preset > .dsm_card_carousel_child_img {
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------------------------
   14. КАМЕРЫ: вне рабочего времени одинокая карточка стояла в левой половине.

   В карусели три карточки с условиями показа Divi по времени: два слайда с
   камерами (10:00–22:00) и заглушка «Спят усталые игрушки» (22:00–24:00 и
   00:00–10:00). Вне рабочего времени в слайдере остаётся ровно один слайд, а
   `slide_to_show` на десктопе равен 2 — Swiper отдаёт слайду половину ширины и
   ставит его слева, вторая половина остаётся пустой. Стрелки и точки на
   десктопе выключены настройками модуля, листать нечего — страница выглядит
   сломанной.

   Замер при 1440px: слайд 688px на x=20 (правые 700px пусты); после правки
   x=364 — по центру контейнера.

   Центрируем только когда слайд действительно один: при двух камерах
   `:only-child` не срабатывает и раскладка остаётся прежней (проверено на
   копии страницы с тремя слайдами — сдвигов нет).
   ------------------------------------------------------------------------- */
body.page-id-2146 #page-container .dsm_card_carousel_wrapper > .swiper-wrapper:has(> .swiper-slide:only-child) {
  justify-content: center;
}

/* Swiper вешает на слайд inline `margin-right: 24px` (это space_between), и
   в подсчёт центрирования он попадает: одинокая карточка уезжала влево ровно
   на половину этого отступа — 12px (десктоп 364 вместо 376, телефон -2 вместо
   10, при том что карточка 370px в окне 390px). Отступ между слайдами
   единственному слайду не нужен, снимаем. */
body.page-id-2146 #page-container .dsm_card_carousel_wrapper > .swiper-wrapper:has(> .swiper-slide:only-child) > .swiper-slide {
  margin-right: 0 !important;
}