/* =====================================================================
   ОКСИТЕЛЬ — site-nav-upgrade.css
   Единое верхнее меню для /, /kokteyl/, /vozduh/, /pay/.
   Аддитивный слой поверх общего style.css (его НЕ меняем). Подключается
   только на этих 4 страницах. Без внешних библиотек/шрифтов.
   Структура/классы меню прежние (.site-header/.nav/.nav__menu/.nav__cta/
   .nav__burger) — работает существующий main.js (burger). Уважает
   prefers-reduced-motion.
   ===================================================================== */

/* ---------- Лёгкая «стеклянная» шапка + тень при скролле ---------- */
.site-header{ transition:box-shadow .25s var(--ease), background-color .25s var(--ease); }
.site-header.is-scrolled{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(160%) blur(8px); backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 6px 22px rgba(10,76,120,.12);
}

/* ---------- Пункты меню: ровный ритм + подчёркивание на hover ---------- */
.nav__menu a{ position:relative; padding:6px 2px; transition:color var(--dur) var(--ease); }
.nav__menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav__menu a:hover::after{ transform:scaleX(1); }

/* ---------- Active-состояние текущей страницы ---------- */
.nav__menu a.is-active{ color:var(--c-blue-deep); }
.nav__menu a.is-active::after{ transform:scaleX(1); background:linear-gradient(90deg,var(--c-blue),var(--c-green)); }

/* ---------- CTA «Оплатить курс»: чуть заметнее ---------- */
.nav__cta{ box-shadow:var(--sh-blue); }
.nav__cta:hover{ filter:brightness(1.03); }
/* На /pay/ — неактивный чип «Вы на оплате» */
.nav__cta--here{
  background:var(--c-sky); color:var(--c-blue-deep); border:1px solid var(--c-border);
  box-shadow:none; cursor:default; font-weight:800;
}
.nav__cta--here:hover{ filter:none; }

/* ---------- Мобильное меню (≤1080px): active-пункт виден ---------- */
@media (max-width:1080px){
  .nav__menu.is-open a{ position:relative; }
  .nav__menu.is-open a::after{ left:24px; right:auto; width:26px; bottom:8px; }
  .nav__menu.is-open a.is-active{ background:rgba(52,182,230,.10); }
}

/* ---------- Уважение prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .site-header{ transition:none; }
  .nav__menu a, .nav__menu a::after{ transition:none; }
}