/*
 * Меню категорий (module/category_menu.tpl, .menu-top-box) — единый
 * vanilla-компонент, тот же принцип файла, что header.css/footer.css/
 * lane.css/product-filter.css (цельный узел разметки, не точечный mirror-фикс
 * в base.css). Разметку .tpl НЕ трогали — все селекторы ниже бьют по уже
 * существующим классам (.menu-top-box, ul.flyout-category, .icons-menu,
 * .menu-ico-N), это важно: assets/js/header.js строит бургер-drawer клоном
 * ЖИВОГО узла `.menu-top-box ul.flyout-category` — переименовывать классы
 * значило бы чинить и его тоже.
 *
 * Заменяет собой (файлы удалены, больше нигде не подключены):
 *   - www/catalog/css/category-menu.css (была подключена сайт-вайд в
 *     header.tpl, спрайт-карта .menu-ico-N перенесена сюда 1:1 по порядку
 *     — см. ниже про background-size:100% 1100% вместо абсолютных px)
 *   - www/catalog/script/jquery/category-menu.js (hover-флайаут на jQuery
 *     mouseenter/mouseleave + аккордеон-тоггл, последний не использовался:
 *     этот инстанс модуля рендерится со style=flyout/toggle=0)
 *   - www/assets/js/nav-touch.js (тач first-tap-open/second-tap-navigate) —
 *     логика перенесена в menu.js, дополнена hover-intent и клавиатурой.
 *
 * Кэш: catalog/controller/module/category_menu.php не кэширует свой вывод
 * (ни $this->cache, ни APPLICATION-уровневого namespace) — правки видны
 * сразу, Lightning-модуль тут не участвует.
 */

/* ============================================================
   0. Контейнер и сброс — общие для всех ширин.
   ============================================================ */
.menu-top-box {
  width: 100%;
  display: inline-block;
  clear: both;
  margin-top: var(--space-3, 10px);
}

.menu-top-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-top-box li {
  list-style: none;
}

.menu-top-box a {
  text-decoration: none;
  color: var(--c-text, #2b2f33);
}

/* ============================================================
   1. Спрайт иконок (.icons-menu i.menu-ico-N) — карта СОХРАНЕНА как есть
      (порядок/принадлежность категориям не менялись, см. исходник
      category-menu.css), но абсолютные px background-position заменены
      на резиновую пару background-size:100% 1100% / background-position-y
      в процентах: спрайт — 11 РАВНОВЫСОКИХ кадров, поэтому кадр N
      (0-based) = position-y: N/(11-1)*100%. При этой формуле рамка окна
      (width/aspect-ratio) может быть ЛЮБОЙ — картинка и вырез масштабируются
      синхронно. Раньше (мобильная лента) размер окна меняли
      (background-size:40px auto + transform:scale(.85)), а координаты
      position оставляли в оригинальных px — рассинхрон масштаба картинки и
      смещения резал/сдвигал каждую следующую иконку (тем сильнее, чем
      дальше строка в спрайте) — это и был баг «иконки обрезаны». Здесь
      такого рассинхрона в принципе не может быть: смещение процентное,
      завязано на собственный размер элемента, а не на абсолютные пиксели.
      Один набор правил работает и на 55×47 (десктоп, пиксель-в-пиксель как
      раньше), и на любом другом width ниже.
   ============================================================ */
.icons-menu i {
  display: block;
  aspect-ratio: 55 / 47;
  background-image: url('/image/data/i/menu/menu-sprite.svg');
  background-repeat: no-repeat;
  background-size: 100% 1100%;
  background-position-x: 0;
  flex-shrink: 0;
}

.icons-menu i.menu-ico-71 { background-position-y: 0%; }
.icons-menu i.menu-ico-61 { background-position-y: 10%; }
.icons-menu i.menu-ico-63 { background-position-y: 20%; }
.icons-menu i.menu-ico-94 { background-position-y: 30%; }
.icons-menu i.menu-ico-83 { background-position-y: 40%; }
.icons-menu i.menu-ico-92 { background-position-y: 50%; }
.icons-menu i.menu-ico-18 { background-position-y: 60%; }
.icons-menu i.menu-ico-68 { background-position-y: 70%; }
.icons-menu i.menu-ico-67 { background-position-y: 80%; }
.icons-menu i.menu-ico-87 { background-position-y: 90%; }
.icons-menu i.menu-ico-34 { background-position-y: 100%; }

/* ============================================================
   2. Десктоп (≥1024px) — один ряд на всю ширину + флайаут.
   ============================================================ */
@media (min-width: 1024px) {
  /* 2.0 Breakout из .container (980px): ряд расширяется до ширины шапки
     (1220px — тот же max, что у .hdr-* в header.css), симметрично вокруг
     центра контейнера (контейнер сам отцентрован → и ряд отцентрован в
     вьюпорте). Решение владельца: подписи должны помещаться В ОДНУ строку
     («СИНХРОНИЗАТОРЫ» в 980px не влезали без переноса). -32px — запас под
     скроллбар, чтобы breakout не породил горизонтальный скролл на 1024. */
  .menu-top-box {
    width: min(1220px, 100vw - 32px);
    margin-left: calc((100% - min(1220px, 100vw - 32px)) / 2);
  }

  /* 2.1 Верхний ряд: N пунктов (из БД, не хардкод) в ОДИН ряд; ячейки —
     от естественной ширины подписи (nowrap) с равномерным ростом на
     свободное место (flex-grow). Так широкая «СИНХРОНИЗАТОРЫ» получает
     сколько ей нужно, а ряд всё равно заполняет всю ширину. */
  .menu-top-box-content > ul.flyout-category {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-2, 8px);
  }

  .menu-top-box ul.flyout-category > li {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    padding-bottom: var(--space-2, 8px);
  }

  .menu-top-box .icons-menu {
    width: 100%;
  }

  .menu-top-box .icons-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1, 4px);
    height: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .menu-top-box .icons-menu i {
    width: 55px;
  }

  /* Подпись всегда в одну строку (решение владельца): breakout выше даёт
     ряду достаточную ширину, ячейка растёт от естественной ширины текста.
     Переносы/клампы убраны — при nowrap они не нужны. */
  .menu-top-box .icons-menu span {
    white-space: nowrap;
    line-height: 1.25;
  }

  .menu-top-box li.active > .icons-menu a,
  .menu-top-box .icons-menu a:hover,
  .menu-top-box .icons-menu a.active {
    color: var(--c-brand);
  }

  /* 2.2 Флайаут-панели (все вложенные <ul>, до 4 уровней). Первый уровень
     (дети топ-категории) раскрывается ПОД пунктом верхнего ряда; каждый
     следующий уровень — ВПРАВО от своего родителя (классический
     каскадный флайаут), у края экрана — .flip переворачивает панель на
     противоположную сторону (ставит JS после замера getBoundingClientRect). */
  .menu-top-box ul.flyout-category ul {
    display: none;
    position: absolute;
    z-index: 1000;
    margin: 0;
    padding: var(--space-2, 8px) 0;
    min-width: 220px;
    max-width: 300px;
    background: var(--c-white, #fff);
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-2, 0 4px 16px rgba(0, 0, 0, .1));
  }

  .menu-top-box ul.flyout-category li.is-open > ul {
    display: block;
  }

  .menu-top-box ul.flyout-category > li > ul {
    top: 100%;
    left: 0;
    margin-top: var(--space-1, 4px);
  }

  .menu-top-box ul.flyout-category > li.flip > ul {
    left: auto;
    right: 0;
  }

  .menu-top-box ul.flyout-category ul li {
    position: relative;
  }

  .menu-top-box ul.flyout-category ul ul {
    top: calc(-1 * var(--space-2, 8px));
    left: 100%;
    margin-left: var(--space-1, 4px);
  }

  .menu-top-box ul.flyout-category ul li.flip > ul {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: var(--space-1, 4px);
  }

  .menu-top-box ul.flyout-category ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    transition: background-color var(--transition, .2s ease), color var(--transition, .2s ease);
  }

  .menu-top-box ul.flyout-category ul li a span {
    flex: 1 1 auto;
  }

  /* Первый уровень флайаута (дети топ-категории, <ul class="flyout-category">
     > li > ul > li > a) — сохраняем капс как узнаваемую часть стиля,
     глубже (child2/child3/child4) — обычный регистр, читабельнее. */
  .menu-top-box ul.flyout-category > li > ul > li > a {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
  }

  .menu-top-box ul.flyout-category ul li a:hover,
  .menu-top-box ul.flyout-category ul li a.active {
    background: var(--c-brand-050, #d0e3ee);
    color: var(--c-brand-700, #147aa8);
  }

  /* Стрелка-индикатор у пунктов с дочерним подменю */
  .menu-top-box ul.flyout-category ul li:has(> ul) > a::after {
    content: '\203A';
    color: var(--c-muted, #808080);
    line-height: 1;
  }

  .menu-top-box ul.flyout-category ul li:has(> ul) > a:hover::after {
    color: inherit;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-top-box ul.flyout-category ul li a {
      transition: none;
    }
  }
}

/* ============================================================
   3. Мобильный/планшет (≤1023px) — горизонтальная scroll-snap лента.
      Флайаут здесь не открывается (нет места) — тап по пункту переходит
      сразу по ссылке, это решает menu.js (гейт на ширину, тот же приём,
      что раньше был в nav-touch.js).
   ============================================================ */
@media (max-width: 1023px) {
  .menu-top-box {
    margin-top: 0;
  }

  .menu-top-box ul.flyout-category {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 8px;
  }

  .menu-top-box ul.flyout-category::-webkit-scrollbar {
    display: none;
  }

  .menu-top-box ul.flyout-category > li {
    float: none;
    flex: 0 0 auto;
    scroll-snap-align: start;
    max-width: none;
    margin-right: 0;
    padding-bottom: 0;
  }

  /* Флайаут-панели физически не открываются на этой ширине (menu.js не
     добавляет .is-open здесь) — display:none по умолчанию достаточно,
     панель не media-scoped ниже, но класс просто никогда не появляется. */
  .menu-top-box ul.flyout-category ul {
    display: none;
  }

  .menu-top-box .icons-menu {
    width: auto;
    min-width: 64px;
    padding: 4px 10px;
  }

  .menu-top-box .icons-menu i {
    width: 34px;
    margin-bottom: 2px;
  }

  .menu-top-box .icons-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
    min-height: 44px;
    justify-content: center;
    white-space: nowrap;
  }

  .menu-top-box .icons-menu a:hover,
  .menu-top-box .icons-menu a.active,
  .menu-top-box li.active > .icons-menu a {
    color: var(--c-brand);
  }
}