/*
 * Add project-specific CSS below.
 * Keep a backup before updating the template package.
 */

/* ============================================================================
 * KAMENSKIH — мобильное меню Veloura: кликабельная кнопка «Меню ✕» + крупный шрифт меню
 * Версия: v2 (для tpl_veloura-1.3.2, 2026-10-02). Файл: /media/templates/site/veloura/css/user.css
 *
 * Причина дефекта: панель #site-menu-panel (position:fixed; inset:0) лежит внутри
 * .site-header, а на «залипание» в box хедера работали три ловушки, каждая из которых
 * делает предка containing block для fixed-потомка:
 *   1) .site-header { backdrop-filter: blur(16px) }                     — editorial.css
 *   2) .site-header.is-scrolled { backdrop-filter: blur(18px) }         — editorial.css
 *   3) .site-header.is-scrolled { animation: vl2HeaderIn .45s both }    — fill-mode
 *      «прибивает» идентичный transform к хедеру навсегда (главная/has-vl2-hero).
 * В итоге при открытии меню панель сжималась до размеров хедера и накрывала кнопку.
 * ==========================================================================*/
@media (max-width:1060px){
  /* снять все источники containing block у хедера, пока меню открыто */
  .js .menu-open .site-header {
    animation: none !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* поднять кнопку и бренд над полноэкранной панелью (z панели = 49) */
  .js .menu-open .menu-toggle,
  .js .menu-open .site-header__inner > .brand { position: relative; z-index: 51; }
  /* цвета поверх тёмной панели, включая вариант главной в scrolled-состоянии */
  .menu-open .site-header .menu-toggle,
  .menu-open .site-header .brand__wordmark { color: var(--vl-white) !important; }
  .menu-open .site-header .brand__tagline  { color: rgba(255,253,249,.5) !important; }

  /* --- v1.3.2: читабельность открытого меню -------------------------------
   * Причина: editorial.css задаёт .primary-navigation a{font-size:12px} для
   * десктопной строки шапки, и так же специфичное (= побеждает по порядку
   * подключения) правило затирает мобильный полноэкранный режим, где задуман
   * крупный serif (template.css: clamp(2.4rem,8vw,5rem)). Возвращаем размер
   * только для ОТКРЫТОГО мобильного меню (body.menu-open) — десктопная
   * inline-навигация остаётся 12px как утверждено. */
  .js .menu-open .primary-navigation a,
  .js .menu-open .primary-navigation .nav-header,
  .js .menu-open .primary-navigation .separator {
    font-size: clamp(2.05rem, 7.6vw, 3.3rem);
    letter-spacing: -.015em;
    line-height: 1.14;
  }
  /* подпункты, если появятся в меню: чуть крупнее текущих 10.9px */
  .js .menu-open .primary-navigation li ul a {
    font-size: .9rem;
    letter-spacing: .06em;
  }
  /* подпись кнопки «Меню/Закрыть»: 10.4px → 11.8px */
  .js .menu-open .menu-toggle__label { font-size: .74rem; }
}

/* --- опционально: подпись «Меню» → «Закрыть» (иконка и так становится крестиком) ---
@media (max-width:1060px){
  .js .menu-open .menu-toggle__label { font-size: 0; }
  .js .menu-open .menu-toggle__label::after {
    content: "Закрыть";
    display: inline-block;
    font-size: .65rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  }
}
----------------------------------------------------------------------------------- */