/* Верхнее меню hotcpa.top.
   Подключается блокирующим <link> из render.ts (injectTheme) — шапка above-the-fold,
   меню не должно «прыгать» при загрузке. Все классы с префиксом hc-nav/hc-sub: старые
   uCoz-правила .top-nav/.uMenuV к новой разметке не цепляются, коллизий нет.
   Брейкпоинт 980px — тот же, на котором сайт исторически прячет меню в бургер. */

.hc-nav { float: right; }
.hc-nav-root { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hc-nav-i { position: relative; }

/* Заголовок пункта: ссылка + стрелка живут в одной коробке, чтобы курсор,
   переходя со слова на стрелку, не закрывал выпадашку. */
.hc-nav-h { display: flex; align-items: center; }
.hc-nav-l {
  display: block; padding: 12px 10px; font-size: 15px; line-height: 20px;
  color: #aeb4c0; text-decoration: none; white-space: nowrap;
  transition: color .18s ease;
}
.hc-nav-l:hover, .hc-nav-i:hover .hc-nav-l { color: #fff; text-decoration: none; }
.hc-nav-i[aria-current="true"] > .hc-nav-h > .hc-nav-l { color: #fe968d; }

.hc-nav-x {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 44px; margin-left: -6px; padding: 0;
  background: 0; border: 0; color: inherit; cursor: pointer;
}
.hc-nav-x svg { display: block; width: 12px; height: 12px; color: #7b8393; transition: transform .2s ease, color .18s ease; }
.hc-nav-i:hover .hc-nav-x svg { color: #fff; }

/* ---------- выпадающая панель (десктоп) ---------- */
.hc-sub {
  position: absolute; top: 100%; left: -8px; z-index: 130;
  min-width: 460px; max-width: calc(100vw - 28px); padding: 10px;
  background: #221f2b; border: 1px solid #34303f; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(-7px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hc-nav-i:hover > .hc-sub,
.hc-nav-i:focus-within > .hc-sub,
.hc-nav-i.is-open > .hc-sub { opacity: 1; visibility: visible; transform: none; }

.hc-sub-all {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  font-size: 14px; font-weight: 500; color: #fff; text-decoration: none;
  background: #2b2735; border-radius: 10px;
}
.hc-sub-all:hover { background: #35303f; color: #fff; text-decoration: none; }
.hc-sub-all span { color: #8a8397; font-size: 12.5px; font-weight: 400; }

.hc-sub-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; list-style: none; margin: 0; padding: 0; }
.hc-sub-list a {
  display: block; padding: 8px 12px; border-radius: 9px;
  font-size: 13.5px; line-height: 1.25; color: #b6bcc7; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-sub-list a:hover { background: #2f2a3a; color: #fff; text-decoration: none; }

/* ---------- бургер ---------- */
.hc-burger {
  display: none; float: right;
  width: 38px; height: 40px; margin-left: 2px; padding: 0;
  align-items: center; justify-content: center;
  background: 0; border: 0; color: #aeb4c0; cursor: pointer;
}
.hc-burger svg { display: block; }
.hc-burger .hc-ic-x { display: none; }
body.hc-menu-open .hc-burger .hc-ic-x { display: block; }
body.hc-menu-open .hc-burger .hc-ic-m { display: none; }

/* ---------- мобильная панель ---------- */
@media (max-width: 980px) {
  .hc-burger { display: flex; }
  .hc-nav {
    position: fixed; left: 0; right: 0; top: var(--hc-hdr, 56px); bottom: 0; z-index: 105;
    float: none; padding: 8px 16px 32px;
    background: #1c1a24; overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  body.hc-menu-open { overflow: hidden; }
  body.hc-menu-open .hc-nav { opacity: 1; visibility: visible; transform: none; }

  .hc-nav-root { display: block; }
  .hc-nav-i { border-bottom: 1px solid #2a2733; }
  .hc-nav-i:last-child { border-bottom: 0; }
  .hc-nav-h { justify-content: space-between; }
  .hc-nav-l { flex: 1; padding: 15px 4px; font-size: 17px; color: #e6e8ec; }
  .hc-nav-i[aria-current="true"] > .hc-nav-h > .hc-nav-l { color: #fe968d; }
  .hc-nav-x { width: 46px; height: 50px; margin: 0; }
  .hc-nav-x svg { width: 14px; height: 14px; }
  .hc-nav-i.is-open .hc-nav-x svg { transform: rotate(180deg); color: #fff; }

  /* аккордеон: панель раскрывается в потоке, а не всплывает */
  .hc-sub {
    position: static; min-width: 0; padding: 0 0 14px;
    background: 0; border: 0; box-shadow: none; border-radius: 0;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .hc-nav-i.is-open > .hc-sub { display: block; }
  .hc-nav-i:hover > .hc-sub, .hc-nav-i:focus-within > .hc-sub { display: none; }
  .hc-nav-i.is-open:hover > .hc-sub, .hc-nav-i.is-open:focus-within > .hc-sub { display: block; }

  .hc-sub-all { margin-bottom: 8px; padding: 11px 13px; font-size: 15px; }
  /* вертикали — плитками: 18 строк списком на телефоне не листаются */
  .hc-sub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hc-sub-list a {
    padding: 10px 11px; font-size: 13.5px; color: #c3c8d2;
    background: #262231; border-radius: 10px;
  }
  .hc-sub-list a:hover, .hc-sub-list a:active { background: #322c3e; color: #fff; }
}

/* Одна колонка — только на совсем узких экранах: в две 18 вертикалей листаются
   вдвое короче, и это важнее, чем пара сантиметров воздуха по бокам. */
@media (max-width: 330px) {
  .hc-sub-list { grid-template-columns: 1fr; }
}

/* ---------- светлая тема (сейчас отключена, но правила пусть будут корректными) ---------- */
html[data-theme="light"] .hc-nav-l { color: #4a5160; }
html[data-theme="light"] .hc-nav-l:hover { color: #14161c; }
html[data-theme="light"] .hc-sub { background: #fff; border-color: #e2e4ea; box-shadow: 0 18px 44px rgba(20, 22, 28, .14); }
html[data-theme="light"] .hc-sub-all { background: #f2f3f6; color: #14161c; }
html[data-theme="light"] .hc-sub-list a { color: #4a5160; }
html[data-theme="light"] .hc-sub-list a:hover { background: #f2f3f6; color: #14161c; }
@media (max-width: 980px) {
  html[data-theme="light"] .hc-nav { background: #fff; }
  html[data-theme="light"] .hc-nav-i { border-bottom-color: #ebedf1; }
  html[data-theme="light"] .hc-nav-l { color: #14161c; }
  html[data-theme="light"] .hc-sub-list a { background: #f2f3f6; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-sub, .hc-nav, .hc-nav-x svg, .hc-nav-l { transition: none; }
}