/* Навигация: возврат к меню на длинных страницах и связка двух шапок.
   Подключается после бандла страницы, поэтому переопределяет его правила.

   Две шапки оставлены намеренно разными: прозрачная над героем на лендинге и плотная на
   внутренних страницах. Чинится не их несхожесть, а то, что до меню бывает не дотянуться. */

/* 0. Без этого правила липкость не работает нигде.

   В бандлах стоит `html, body { overflow-x: hidden }` — обычная защита от горизонтальной
   прокрутки. Побочный эффект: страница становится собственным контейнером прокрутки, и
   `position: sticky` внутри неё перестаёт цепляться за окно. Проверка показала ровно это:
   правило sticky применено, а шапка всё равно уезжает вверх (верх шапки = -567 при
   прокрутке 567).

   `overflow-x: clip` так же не пускает горизонтальную прокрутку, но контейнер прокрутки не
   создаёт, поэтому липкость остаётся живой. */
html,
body {
  overflow-x: clip;
}

/* 1. Липкая внутренняя шапка там, где её не было.
      В catalog.css и product.css правило уже есть, здесь оно повторяется для контактов,
      корзины, политики и 404 — раньше на них шапка просто уезжала вверх, и вернуться в
      каталог или корзину можно было только прокруткой в самое начало. */
.top {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* 2. Слои внутри героя. У шапки и у текста героя одинаковый `z-index: 2`, а текст идёт в
      разметке позже — значит рисуется поверх. Пока шторки на лендинге не было, это никому не
      мешало; с ней открытое меню оказывалось ПОД заголовком «OUT EXP» и просвечивало.
      Шапка со шторкой должна быть выше содержимого героя. */
.hero .nav {
  z-index: 20;
}

/* 3. Лендинг. Над героем шапка остаётся ровно такой, какой была — прозрачной поверх фото.
      Стоит уйти ниже героя, и она превращается в ту же плотную шапку, что на внутренних
      страницах: человека, которого вернуло на лендинг с внутренней страницы, встречает
      знакомая панель, а не пустота. */
.hero .nav.is-stuck {
  position: fixed;
  top: 0;
  padding: 13px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(var(--ink-rgb), 0.05);
  z-index: 60;
  animation: outexp-nav-drop 0.22s ease-out;
}

@keyframes outexp-nav-drop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}

/* На фоне светлой панели белые ссылки и лого стали бы невидимыми. */
.hero .nav.is-stuck .links a {
  color: var(--ink-soft);
}

.hero .nav.is-stuck .links a:hover {
  color: var(--accent-ink);
}

.hero .nav.is-stuck .logo {
  color: var(--ink);
}

/* Бургер над героем белый намеренно — он лежит на фотографии. В плотной шапке он оставался
   белым на почти белом фоне: кнопка на месте, нажимается, но её не видно. Именно это
   выглядело как «при скролле бургера нет вообще». */
.hero .nav.is-stuck .burger {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none;
}

.hero .nav.is-stuck .burger span {
  background: var(--ink);
}

/* 4. Полоски бургера не были отцентрованы по вертикали — на всех страницах, всегда.

   В бандле у кнопки стоит `place-items: center; flex-direction: column`. В колоночном флексе
   `place-items` задаёт выравнивание только поперёк оси, то есть по горизонтали; за вертикаль
   отвечает `justify-content`, и его не задали — полоски прижались к началу оси.

   Замерено до правки: кнопка 42x42, центры полос по вертикали 1.75 и 8.25 вместо 17.75 и
   24.25. Полоски стояли у верхнего края круга — это и выглядело кривым. */
.burger {
  justify-content: center;
}

/* 5. Сам бургер над фотографией. Кольцо вокруг него читалось как лишняя деталь, но просто
      убрать его нельзя: белые полоски теряются на светлом небе в кадре. Вместо кольца —
      мягкая тёмная подложка с размытием: она держит контраст на любом кадре и не выглядит
      наклейкой поверх фотографии. */
.hero .burger {
  background: rgba(var(--ink-rgb), 0.28);
  border-color: transparent;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* Наведения на телефоне нет, а переход фона мешал измерять состояние кнопки: под
   virtual-time-budget он застывал на стартовом значении, и проверка показывала цвет
   прозрачной подложки там, где правило уже задало белый. */
.hero .burger:hover {
  background: rgba(var(--ink-rgb), 0.42);
}

/* 5. Выпадающее меню. Было: невысокая полоса, падающая из-под шапки, с мелкими пунктами и
      телефоном в виде ссылки; под ней просвечивала фотография, и меню читалось как случайный
      кусок страницы. Стало: панель на весь экран под шапкой, строки по 58 px — в такую
      попадаешь пальцем не целясь, — и телефон отдельной кнопкой акцентом.

      Селектор с `:not([hidden])` взят не для красоты: правило `.hero .drawer a` из бандла
      имеет ту же силу, что простое `.drawer a`, и перекрывало бы цвет. */
.drawer:not([hidden]) {
  position: fixed;
  top: var(--outexp-bar, 72px);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 4px var(--gut) 28px;
  background: var(--dark);
  border-top: 1px solid var(--dark-line);
  overflow-y: auto;
  z-index: 70;
}

.drawer:not([hidden]) nav {
  flex: 1 1 auto;
}

.drawer:not([hidden]) a {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0;
  font-size: 1.16rem;
  color: var(--dark-ink);
  border-bottom: 1px solid var(--dark-line);
}

/* Текущий раздел видно без подписей: акцентная черта слева и полный контраст текста. */
.drawer:not([hidden]) a.on {
  color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 14px;
}

.drawer:not([hidden]) .dphone {
  justify-content: center;
  min-height: 54px;
  margin-top: 22px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.drawer:not([hidden]) .dphone:hover {
  background: var(--accent-hover);
}

/* Пока меню открыто, страница под ним не ездит. */
html.outexp-menu-open,
html.outexp-menu-open body {
  overflow: hidden;
}

/* 6. Переход между страницами. Лого — общий элемент двух шапок, поэтому браузер
      переносит его из одной в другую, а не перерисовывает страницу рывком.
      Работает там, где поддерживается; где нет — обычный переход, ничего не ломается. */
@view-transition {
  navigation: auto;
}

.top .logo,
.navin .logo {
  view-transition-name: outexp-brand;
}

@media (prefers-reduced-motion: reduce) {
  .hero .nav.is-stuck {
    animation: none;
  }

  .top .logo,
  .navin .logo {
    view-transition-name: none;
  }
}