/* ============================================================
   events-chrome.css — правки Impreza-шапки/футера под ребренд.
   Грузится ГЛОБАЛЬНО (chrome вне .ev-scope). Не трогает sktvd-auth.
   ============================================================ */

/* ── Бейдж «МЕРОПРИЯТИЯ» рядом с лого СКОТОВОДЫ ──
   Зеркалит бейдж «КЛУБ» на club.skotovody.com. Реализован CSS-псевдоэлементом
   на Impreza-элементе лого (.ush_image_1), без правки JSON шапки и без риска
   для интеграции авторизации. */
.l-header .ush_image_1 .w-image-h {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* ── Лого: переключение тёмный/светлый вариант по состоянию шапки ──
   Сервер не знает scroll → рендерим оба, CSS показывает нужный. */
.ev-logo-img { display: block; height: 42px; width: auto; }
.ev-logo-img--light, .ev-logo-badge--light { display: none; }
.ev-logo-img--dark, .ev-logo-badge--dark { display: inline-block; }
/* Прозрачная тёмная шапка (не скроллено) → светлый логотип/бейдж */
.ev-header[data-dark="1"][data-scrolled="0"] .ev-logo-img--light { display: block; }
.ev-header[data-dark="1"][data-scrolled="0"] .ev-logo-badge--light { display: inline-block; }
.ev-header[data-dark="1"][data-scrolled="0"] .ev-logo-img--dark,
.ev-header[data-dark="1"][data-scrolled="0"] .ev-logo-badge--dark { display: none; }
/* Тёмный футер → всегда светлый логотип/бейдж */
.ev-foot-logo .ev-logo-img--light { display: block; }
.ev-foot-logo .ev-logo-badge--light { display: inline-block; }
.ev-foot-logo .ev-logo-img--dark,
.ev-foot-logo .ev-logo-badge--dark { display: none; }

.l-header .ush_image_1 .w-image-h::after {
  content: "Мероприятия";
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: #fafaf6;
  background: oklch(0.22 0.018 60); /* --ink */
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Спикер-модалка: в проде разметка статична в DOM → показываем по data-open
   (в прототипе оверлей рендерился условно). */
.ev-scope .spk-overlay { display: none; }
.ev-scope .spk-overlay[data-open="1"] { display: grid; }

/* ============================================================
   Бесп. chrome на events-страницах (body.ev-chrome): прячем
   Impreza-шапку/футер, бесп. .ev-header/.ev-footer инжектятся в
   wp_body_open / wp_footer. Hero (лендинг) подныривает под прозрачную
   бесп. шапку — оригинальный .ev-hero{margin-top:-72px} из events-blocks.
   ============================================================ */
body.ev-chrome #page-header,
body.ev-chrome .l-header,
body.ev-chrome #page-footer,
body.ev-chrome .l-footer { display: none !important; }

/* убрать отступы Impreza-канваса/секций под (скрытую) фикс-шапку.
   .l-section-h резервировал padding-top ~195px под Impreza-шапку, .l-section
   добавлял 64px/40px — это давало огромный белый отступ сверху и по краям. */
body.ev-chrome .l-canvas { padding-top: 0 !important; }
body.ev-chrome #page-content.l-main,
body.ev-chrome .l-main { margin-top: 0 !important; padding-top: 0 !important; }
body.ev-chrome .l-section { padding: 0 !important; }
body.ev-chrome .l-section-h { padding: 0 !important; max-width: none !important; }
/* TEC single-event обёртка резервировала margin-top ~195px под Impreza-шапку →
   тёмный hero не доходил до верха (белый зазор). Обнуляем. */
body.ev-chrome .tribe-events-pg-template,
body.ev-chrome .tribe-events-single { margin-top: 0 !important; padding-top: 0 !important; }

/* ⚠ КОРЕНЬ «белой шапки» (одинаково десктоп/мобайл): `.l-canvas{overflow:hidden}`
   (дефолт Impreza) ОБРЕЗАЛ верх hero, вынесенный отрицательным margin-top под
   прозрачную шапку → за шапкой был не баннер, а body → белая полоса, лого пропадало.
   Снимаем клип на ev-chrome — баннер реально доходит под шапку (как на десктопе).
   Безопасно: контент ev-страниц горизонтально не переполняется (docOverflow=0). */
body.ev-chrome .l-canvas { overflow: visible !important; }

/* ⚠ «Белая полоса над тёмной шапкой» (видна на iPhone). Корень: Impreza красит body
   в `--color-content-bg-alt` = rgb(242,244,247) — чужой серо-голубой. Он просвечивает
   (1) в 1px-зазоре над hero (hero margin-top:-58px, шапка 59px → hero top:1px) и
   (2) во всей зоне notch/safe-area + overscroll на iOS (там это десятки px). На светлых
   шапках незаметно, на ТЁМНЫХ — светлая полоса бьёт в глаза. Фикс: на страницах с тёмным
   hero (готовый класс ev-chrome-dark из chrome.php) красим body И html в оттенок hero,
   чтобы полоса слилась с тёмным верхом. html через :has() — чтобы iOS красил safe-area.
   Шапку НЕ трогаем. */
html:has(body.ev-chrome-dark) { background-color: oklch(0.16 0.02 48); }
body.ev-chrome-dark { background-color: oklch(0.16 0.02 48) !important; }

/* Бургер + мобильное меню (≤900px) */
.ev-scope .ev-burger { display: none; background: transparent; color: var(--ink); }
@media (max-width: 900px) { .ev-scope .ev-burger { display: inline-grid; } }
.ev-header[data-dark="1"][data-scrolled="0"] .ev-burger { color: #fff; }
/* На прозрачной тёмной шапке ghost-кнопки (Вход/Контакты) — светлые */
.ev-header[data-dark="1"][data-scrolled="0"] .btn-ghost { color: oklch(0.9 0.02 85); }
.ev-header[data-dark="1"][data-scrolled="0"] .btn-ghost:hover { background: oklch(1 0 0 / 0.12); color: #fff; }
.ev-menu-overlay { position: fixed; inset: 0; z-index: 80; background: oklch(0.2 0.02 60 / 0.5); backdrop-filter: blur(6px); display: none; }
.ev-menu-overlay[data-open="1"] { display: block; }
.ev-menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); background: var(--bg-elev); padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-lg); overflow-y: auto; }
.ev-menu-close { align-self: flex-end; margin-bottom: 10px; }
.ev-menu-panel .ev-nav-link { font-size: 16px; padding: 12px 14px; }