/* ═══ ШАПКА И МЕНЮ ════════════════════════════════════════════════════════ */

/* ─── шапка: живёт поверх всей страницы, цвет ведёт hero-таймлайн ─────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--gap-m);
  padding: clamp(20px, 3vh, 34px) var(--gutter);
  color: var(--ivory);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

/* Подложка шапки. Она непрозрачная и меняет цвет вместе с секцией,
   над которой шапка сейчас находится. Без неё переход по якорю на тёмную
   секцию оставлял сверху полосу слоновой кости от предыдущей секции,
   и белый логотип на ней пропадал. */
.topbar__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: var(--ivory);
  border-bottom: 1px solid var(--bordeaux-8);
  opacity: 0;
  pointer-events: none;
}

.topbar__right {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 30px);
  font-size: var(--fs-small);
  padding-top: 6px;
}
.topbar__phone {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; text-decoration: none;
  white-space: nowrap; letter-spacing: 0.02em;
}
.topbar__phone:hover { color: var(--gold); }

/* Переключатель языка. Двуязычность в Казахстане обязательна, поэтому
   ссылка стоит в шапке рядом с телефоном, а не прячется в меню. Рамка
   в текущем цвете шапки — знак работает и на тёмном, и на светлом. */
.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 32px; padding: 0 10px;
  border: 1px solid currentColor; border-radius: 2px;
  font: 600 var(--fs-micro)/1 var(--text);
  letter-spacing: 0.1em; text-decoration: none;
  opacity: 0.72;
  transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lang:hover, .lang:focus-visible { opacity: 1; }
.topbar__phone-mark { display: none; width: 18px; height: 18px; fill: currentColor; }

.menu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  color: inherit; font: 500 var(--fs-small)/1 var(--text);
  letter-spacing: 0.02em;
}
.menu-btn__bars { display: grid; gap: 4px; width: 22px; }
.menu-btn__bars i { display: block; height: 1.5px; background: currentColor; }
.menu-btn__bars i:last-child { width: 62%; justify-self: end; }
.menu-btn:hover .menu-btn__bars i:last-child { width: 100%; transition: width var(--t-fast) var(--ease); }

/* На узком экране телефон остаётся в шапке иконкой: звонок — главное
   действие, прятать его в меню нельзя. */
@media (max-width: 640px) {
  .topbar__phone-text { display: none; }
  .lang { min-width: 40px; padding: 0 7px; letter-spacing: 0.06em; }
  .topbar__phone-mark { display: block; }
  .topbar__phone { min-width: 44px; justify-content: center; }
}

/* ─── меню: шторка бордо сверху вниз ──────────────────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bordeaux);
  color: var(--ivory);
  transform: translateY(-100%);
  visibility: hidden;
  display: flex; flex-direction: column;
  padding: clamp(20px, 3vh, 34px) var(--gutter) clamp(24px, 4vh, 48px);
  will-change: transform;
}
.menu[data-open="1"] { visibility: visible; }

.menu__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--gap-m);
}

.menu__nav {
  flex: 1;
  display: flex; align-items: center;
  margin-block: clamp(12px, 2.2vh, 34px);
}
.menu__list { list-style: none; margin: 0; padding: 0; width: 100%; }
/* Обрезка нужна только на время выезда пунктов: они приходят снизу
   из-за собственной кромки. Как только шторка встала, обрезку снимаем —
   иначе она срезает кольцо фокуса, которое рисуется с outline-offset: 3px
   ЗА пределами строки. Открытое меню — единственная тёмная поверхность
   с интерактивом на сайте, и обход её с клавиатуры был бы не виден. */
.menu__list li { overflow: hidden; }
.menu.is-settled .menu__list li { overflow: visible; }

.menu__item {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-mega); line-height: 0.84;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ivory);
  transition: color var(--t-fast) var(--ease);
}
/* --fs-mega на kk уже уменьшен множителем (0.78), здесь добираем до 0.62
   от исходного: пять строк меню должны поместиться в экран по высоте,
   а самый длинный пункт — в одну строку по ширине. */
[lang="kk"] .menu__item { font-size: calc(var(--fs-mega) * 0.8); line-height: 1.02; }
.menu__item:hover,
.menu__item:focus-visible { color: var(--ivory); }

.menu__foot {
  list-style: none; margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px clamp(18px, 2.5vw, 34px);
  border-top: 1px solid var(--ivory-faint);
  padding: clamp(16px, 2.4vh, 26px) 0 0;
  font-size: var(--fs-small);
}
/* косая принадлежит следующему пункту — так она не остаётся висеть
   в конце строки при переносе */
.menu__foot li + li::before { content: '/'; color: var(--gold); margin-right: 1em; }
.menu__foot li { display: flex; align-items: center; }
.menu__foot a {
  text-decoration: none;
  /* палец, а не курсор: цель не ниже 44px */
  display: inline-flex; align-items: center; min-height: 44px;
}
.menu__foot a:hover { color: var(--gold); }
.menu__lang { text-decoration: underline; text-underline-offset: 4px; }

/* Узкий экран: строка «телефон / WhatsApp / часы» не помещается, и при
   переносе косая либо повисает в конце строки, либо открывает следующую.
   Поэтому здесь просто столбик без разделителей. */
@media (max-width: 640px) {
  .menu__foot { flex-direction: column; align-items: flex-start; gap: 0; }
  .menu__foot li + li::before { content: none; }
}

@media (max-width: 900px) {
  /* На телефоне наведения не бывает, и контурные буквы остаются контурными
     навсегда — весь список висит пустыми очерками. Заливаем сразу, обводку
     оставляем только там, где она работает как состояние. */
  .menu__item {
    color: var(--ivory);
    -webkit-text-stroke-width: 0;
    line-height: 0.96;
  }
  .menu__nav { align-items: center; margin-block: clamp(16px, 3vh, 32px); }
  /* кегль упирается в ширину самого длинного пункта, поэтому вертикаль
     добираем расстоянием между строками, а не размером */
  .menu__list li + li { margin-top: clamp(8px, 2.6vh, 26px); }
}

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}