/* ═══════════════════════════════════════════════════════════════════════════
   Стили НОВОЙ шапки (v2). Подключается только вместе с partials/header-v2 —
   то есть когда владелица включила флажок ?newmenu=1. На обычных посетителях
   не сказывается никак: файл не грузится вовсе.

   🔴 Ни одного класса webflow. Всё своё, с приставкой nm2-, чтобы правки
   этого файла физически не могли задеть остальной сайт.
   ═════════════════════════════════════════════════════════════════════════ */

.nm2 {
  position: sticky; top: 0; z-index: 1000;
  background: #fff;
  font-family: Montserrat, sans-serif;
  border-bottom: 1px solid #eceaf6;
}

.nm2-bar {
  display: flex; align-items: center; gap: 1rem;
  max-width: 85rem; margin: 0 auto; padding: .85rem 1.25rem;
}

.nm2-logo { display: block; flex: 0 0 auto; line-height: 0; }
/* width:auto обязателен вместе с height: иначе атрибуты ширины и высоты
   работают как стиль и задают своё соотношение сторон — логотип сплющивает. */
.nm2-logo img { display: block; height: 38px; width: auto; }

/* ── Строка пунктов: широкий экран ───────────────────────────────────────────
   Вид повторяет ПРЕЖНЮЮ шапку по образцу владелицы (15.08.2026): пункты
   заглавными и вразрядку, «Калькуляторы» в капсуле, кнопка кабинета
   градиентная. Механика при этом своя — webflow тут ни при чём. */
.nm2-row { display: none; align-items: center; gap: .95rem; margin-left: auto; }
.nm2-row-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #4a4f78; text-decoration: none; white-space: nowrap;
  font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: color .15s ease;
}
.nm2-row-link:hover { color: #5d6eff; }
.nm2-chev { flex: 0 0 auto; opacity: .55; }

/* Капсула «Калькуляторы» — единственный пункт в рамке, как в прежней шапке:
   она ведёт в денежный раздел и должна цеплять взгляд. */
.nm2-calc-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem .85rem; border-radius: 50rem;
  border: 1px solid rgba(139,96,255,.30);
  color: #241c3f; text-decoration: none; white-space: nowrap;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nm2-calc-pill:hover {
  border-color: rgba(139,96,255,.7);
  box-shadow: 0 6px 16px rgba(139,96,255,.14);
}
.nm2-pill-star { width: 18px; height: 18px; display: block; flex: 0 0 auto; }

/* ── Выпадающие панели «Калькуляторы» и «Обучение» ──────────────────────────
   Раскрываются наведением и с клавиатуры. JS не нужен вовсе: значит нечему
   залипать — ровно та болезнь, из-за которой переписывали меню.

   Мостик сверху (::after у .nm2-drop) нужен, чтобы курсор мог доехать от
   пункта до панели через зазор и она не закрывалась на полпути. */
.nm2-drop { position: relative; display: inline-flex; align-items: center; }
.nm2-drop::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
}
.nm2-drop-panel {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-6px);
  z-index: 60; opacity: 0; visibility: hidden; pointer-events: none;
  background: #fff; border: 1px solid #eceaf6; border-radius: 20px;
  box-shadow: 0 24px 60px rgba(36, 28, 63, .16);
  padding: 1.1rem; transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nm2-drop:hover .nm2-drop-panel,
.nm2-drop:focus-within .nm2-drop-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}

/* Обе панели — вертикальным списком: строка = иконка + название + подпись.
   Владелица 15.08.2026: сетка в несколько колонок растягивала панель через
   полэкрана; список у «Обучения» ей подошёл, калькуляторы приведены к нему,
   а шрифты в обеих сделаны крупнее. */
.nm2-drop-panel--calc { width: min(26rem, 92vw); }
.nm2-drop-panel--courses { width: min(30rem, 92vw); }

.nm2-dp-grid { display: flex; flex-direction: column; gap: .2rem; }
.nm2-dp-card {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem; border-radius: 14px; text-decoration: none;
  transition: background-color .15s ease;
}
.nm2-dp-card:hover { background: #f6f5ff; }
.nm2-dp-ico { flex: 0 0 auto; display: flex; }
.nm2-dp-ico img {
  width: 52px; height: 52px; display: block;
  filter: drop-shadow(0 5px 9px rgba(36, 28, 63, .16));
  filter: drop-shadow(0 5px 9px color-mix(in srgb, var(--tone) 34%, transparent));
}
.nm2-dp-tt { display: flex; flex-direction: column; gap: .14rem; min-width: 0; }
.nm2-dp-t { color: #241c3f; font-size: .95rem; font-weight: 700; line-height: 1.25; }
.nm2-dp-d { color: #8a87a8; font-size: .82rem; line-height: 1.3; }

.nm2-dp-courses { display: flex; flex-direction: column; gap: .25rem; }
.nm2-dp-course {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem; border-radius: 14px; text-decoration: none;
  transition: background-color .15s ease;
}
.nm2-dp-course:hover { background: #f6f5ff; }
.nm2-dp-course img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; display: block; flex: 0 0 auto; }

.nm2-dp-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem;
  margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #f0eefa;
}
/* Нижняя строка — тем же кеглем, что и сами пункты: панель должна читаться
   целиком, а не «крупный список и мелкий подвал». */
.nm2-dp-fl {
  display: flex; flex-direction: column; color: #4a4f78; text-decoration: none;
  font-size: .9rem; font-weight: 600; line-height: 1.25;
}
.nm2-dp-fl span { color: #8a87a8; font-size: .78rem; font-weight: 500; }
.nm2-dp-fl:hover { color: #5d6eff; }
.nm2-dp-all {
  margin-left: auto; color: #5d6eff; text-decoration: none;
  font-size: .9rem; font-weight: 700; white-space: nowrap;
}
.nm2-dp-all:hover { text-decoration: underline; }

/* Переключатель языка: глобус рисует сам партиал, здесь только размер строки. */
.nm2-lang { display: inline-flex; align-items: center; }
.nm2-lang-link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: #4a4f78; text-decoration: none;
  font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.nm2-lang-link:hover { color: #5d6eff; }
.nm2-lang-link svg, .nm2-lang-link img { width: 17px; height: 17px; display: block; }

.nm2-right { display: flex; align-items: center; gap: .55rem; margin-left: auto; }

/* Соцсети — залитые светлые кружки, как в прежней шапке (там они не пустые
   с обводкой, а с мягкой заливкой). */
.nm2-soc {
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background-color: #eef1ff;
  background-position: center; background-repeat: no-repeat; background-size: 17px 17px;
  transition: transform .15s ease, background-color .15s ease;
}
.nm2-soc:hover { transform: translateY(-2px); background-color: #e0e5ff; }
.nm2-soc--tg { background-image: url('/assets/images/telegram_1.svg'); }
.nm2-soc--yt { background-image: url('/assets/images/youtube.svg'); }

.nm2-auth {
  border: 0; cursor: pointer; white-space: nowrap;
  padding: .72rem 1.35rem; border-radius: 50rem;
  background: linear-gradient(90deg, #6c7af5 0%, #8b60ff 100%);
  color: #fff; font: inherit; font-weight: 700; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(108,122,245,.30);
}
.nm2-auth:hover { filter: brightness(1.06); }

/* ── Кнопка меню ─────────────────────────────────────────────────────────── */
.nm2-burger {
  /* touch-action: manipulation — браузер не ждёт возможного двойного тапа,
     иначе нажатие срабатывает примерно на треть секунды позже. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 11px; border: 0; background: none; cursor: pointer;
}
.nm2-burger span {
  display: block; height: 2px; border-radius: 2px; background: #241c3f;
  transition: transform .2s ease, opacity .15s ease;
}
/* Три полоски → крестик */
.nm2.is-open .nm2-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nm2.is-open .nm2-burger span:nth-child(2) { opacity: 0; }
.nm2.is-open .nm2-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Шторка ──────────────────────────────────────────────────────────────── */
.nm2-panel { display: none; }

/* Пока меню закрыто, содержимое шторки не раскладываем вовсе: в ней шесть
   карточек калькуляторов и десяток пунктов, и на слабом телефоне эта работа
   заметна. Открытие снимает правило целиком. */
.nm2:not(.is-open) .nm2-panel { content-visibility: hidden; }

@media (min-width: 992px) {
  .nm2-row { display: flex; }
  .nm2-panel { display: none !important; }   /* на широком экране шторки нет */
}

@media (max-width: 991px) {
  .nm2-burger { display: flex; }
  .nm2-row { display: none; }
  /* На телефоне в шапке остаётся логотип, соцсети и кнопка меню: кнопку входа
     показываем внутри шторки, иначе строка не помещается. */
  .nm2-auth { display: none; }

  .nm2.is-open .nm2-panel {
    display: block;
    /* Прибито к экрану ПОД шапкой: верх — её высота, низ — край экрана.
       Так шторка никогда не наезжает на логотип и всегда закрывает низ.
       Именно это ломалось у старого меню: слоем служил элемент, который
       рисует скрипт webflow, и высота считалась через 100dvh — на телефоне
       значение плавает, и белый фон обрывался на середине экрана. */
    position: fixed; left: 0; right: 0; bottom: 0;
    top: 61px;
    background: #fff;
    overflow: hidden;
  }
  .nm2-panel-inner {
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1.1rem 2.5rem;
  }
  /* Пока шторка открыта, страница под ней не прокручивается. */
  body.nm2-locked { overflow: hidden; }
}

.nm2-group { margin-bottom: 1.35rem; }
.nm2-group-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #9a97b5; margin: 0 0 .6rem;
}

/* Пункты в шторке компактнее прежнего: владелица просила короче. */
.nm2-panel-inner .nm2-item { padding: .7rem .9rem; margin-bottom: .35rem; }

/* ── Калькуляторы: карточки по две в ряд, три ряда ───────────────────────────
   Решение владелицы 15.08.2026: не лента с прокруткой, а сетка — все шесть
   видны сразу, и шторка остаётся короткой (жалоба «слишком длинное»). */
.nm2-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  margin-bottom: 1.1rem;
}
.nm2-tile {
  --tone: #5d6eff;                       /* цвет задаётся модификатором ниже */
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .5rem; padding: 1rem .55rem .9rem;
  border: 1px solid #eceaf6; border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(36, 28, 63, .05);
  text-decoration: none; min-height: 146px; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nm2-tile:active {
  transform: translateY(1px);
  border-color: var(--tone);
  box-shadow: 0 2px 8px rgba(36, 28, 63, .08);
}
/* Иконка без подложки: владелица просила убрать кружки и оставить сами
   значки, размером с прежний кружок. Объём даёт мягкая тень под иконкой —
   она в цвет калькулятора, поэтому карточки остаются разными на вид. */
.nm2-tile-ico {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
}
.nm2-tile-ico img {
  width: 72px; height: 72px; display: block;
  /* Тень в цвет калькулятора. Первая строка — запасная, серая: color-mix
     понимают не все телефоны (Safari до 16.2, старые андроиды), и без неё
     там тени не было бы вовсе. */
  filter: drop-shadow(0 7px 12px rgba(36, 28, 63, .16));
  filter: drop-shadow(0 7px 12px color-mix(in srgb, var(--tone) 34%, transparent));
}
.nm2-tile-title {
  color: #241c3f; font-weight: 700; font-size: .86rem; line-height: 1.2;
  text-wrap: balance;
}
.nm2-tile-text { color: #8a87a8; font-size: .72rem; line-height: 1.2; }

/* Цвета — те же, что у плашек «КАЛЬКУЛЯТОР» на странице /numerology/:
   меню и страница должны выглядеть одинаково (просьба владелицы 15.08.2026). */
.nm2-tile--coral  { --tone: #f2545b; }   /* чакроанализ */
.nm2-tile--orange { --tone: #f5871f; }   /* совместимость */
.nm2-tile--gold   { --tone: #f5c518; }   /* матрица судьбы */
.nm2-tile--mint   { --tone: #17c3a2; }   /* квадрат Пифагора */
.nm2-tile--sky    { --tone: #4bb3e8; }   /* призма души */
.nm2-tile--purple { --tone: #8b3fd6; }   /* психологический портрет */

/* Призма: у неё ромб, а не круг, и в ряду он смотрится мельче прочих даже при
   одинаковой ширине. Даём немного больше — и тень оставляем насыщенной, тогда
   как у остальных она приглушена (просьба владелицы 15.08.2026).
   Размер уточнён в тот же день: 104px оказалось слишком, сбавлено до 92px. */
.nm2-tile--zoom .nm2-tile-ico { width: 92px; height: 92px; }
.nm2-tile--zoom .nm2-tile-ico img {
  width: 92px; height: 92px;
  filter: drop-shadow(0 8px 14px rgba(36, 28, 63, .22));
  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--tone) 60%, transparent));
}

/* ── Свёрнутые разделы ──────────────────────────────────────────────────────
   Делает сам браузер (тег details) — без единой строки JS, поэтому залипать
   тут физически нечему. */
.nm2-fold {
  border: 1px solid #eceaf6; border-radius: 14px; margin-bottom: .4rem;
  background: #fff; overflow: hidden;
}
.nm2-fold > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: .8rem .9rem; color: #4a4f78; font-weight: 600; font-size: .95rem;
  display: flex; align-items: center; justify-content: space-between;
}
.nm2-fold > summary::-webkit-details-marker { display: none; }
.nm2-fold > summary::after {
  content: ""; width: 8px; height: 8px; margin-left: .6rem; flex: 0 0 auto;
  border-right: 2px solid #9a97b5; border-bottom: 2px solid #9a97b5;
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.nm2-fold[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.nm2-fold-body { padding: 0 .55rem .55rem; }
.nm2-fold-body .nm2-item { border: 0; padding: .6rem .35rem; margin: 0; font-weight: 500; }
.nm2-fold-body .nm2-item + .nm2-item { border-top: 1px solid #f2f1f9; }

.nm2-item {
  display: block; text-decoration: none;
  padding: .8rem .9rem; margin-bottom: .4rem;
  border: 1px solid #eceaf6; border-radius: 14px;
  color: #4a4f78; font-weight: 600; font-size: .95rem;
}
.nm2-item:active { background: #f7f6ff; }
.nm2-item--club {
  border-color: rgba(139,96,255,.35);
  background: linear-gradient(90deg, rgba(139,96,255,.07), rgba(93,110,255,.05));
  color: #5b3fd6;
}

.nm2-all {
  display: inline-block; margin-top: .2rem;
  color: #5d6eff; font-weight: 700; font-size: .9rem; text-decoration: none;
}
.nm2-all::after { content: " →"; }

.nm2-panel-auth { margin-top: 1.2rem; }
.nm2-panel-auth button {
  width: 100%; border: 0; cursor: pointer;
  padding: .85rem; border-radius: 50rem;
  background: #5d6eff; color: #fff; font: inherit; font-weight: 700; font-size: .95rem;
}

/* Логотип numersoul — текстовый, а не картинка. */
.nm2-logo--text {
  font-weight: 800; font-size: 1.5rem; line-height: 1;
  letter-spacing: -.01em; white-space: nowrap; text-decoration: none;
}