/* ЛОКАЛЬНЫЙ СЛОЙ — шапка. Все имена начинаются с zw-header (кроме вложенного
   блока zw-city), за пределы блока файл не выходит. */

.zw-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  /* Хайрлайн отделяет шапку от первого экрана: без него тёмная плита
     сливается с тёмным героем. Отсюда же высота 81 px. */
  border-bottom: 1px solid rgba(241, 245, 249, 0.16);
}

.zw-header__inner {
  display: flex;
  align-items: center;
  /* 22 px — шаг между городом, телефоном и кнопкой, как в макете.
     Логотипу до меню нужно больше, он добирает своим margin. */
  gap: 22px;
  min-height: 80px;
  padding-block: var(--sp-3);
}

.zw-header__logo {
  font-family: var(--font-head);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
  /* Логотипу до первого пункта меню нужно 36 px против общих 22:
     имя сервиса не должно слипаться с навигацией. */
  margin-inline-end: 16px;
}

.zw-header__logo b { color: var(--accent); font-weight: 800; }

.zw-header__nav {
  display: flex;
  gap: 26px;
  margin-inline-end: auto;
}

.zw-header__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Палец: 44 px в обе стороны. Короткие «Цены» и «Блог» добирают ширину
     до этой меры, поэтому шаг пунктов ровный. */
  min-width: 44px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-on-dark);
}

.zw-header__nav a:hover { color: var(--on-accent); text-decoration: underline; text-underline-offset: 6px; }

/* Телефон в шапке мельче общего .zw-phone: рядом с кнопкой записи
   он подпись, а не заголовок. */
.zw-header__phone {
  color: var(--ink-on-dark);
  white-space: nowrap;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.zw-header__cta { min-height: 50px; padding-inline: 26px; font-size: 16px; }

/* --- переключатель города ------------------------------------------------ */

.zw-city { position: relative; }

.zw-city__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink-on-dark);
}

.zw-city__name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  white-space: nowrap;
}

/* Галочка — моноширинный ▼: тот же знак, что у остальной служебной
   мелочи в шапке. Открытое меню разворачивает её вверх. */
.zw-city__caret {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
  color: var(--ink-on-dark-muted);
}
.zw-city.is-open .zw-city__caret { transform: rotate(180deg); }

.zw-city__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  /* Панель светлая: она выпадает на светлую землю страницы, а не
     продолжает тёмную плиту шапки. */
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

/* display: flex перебивает браузерный [hidden], возвращаем его явно */
.zw-city__menu[hidden] { display: none; }

.zw-city__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px;
  text-align: left;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.zw-city__opt:hover { background: rgba(5, 27, 50, 0.06); }
.zw-city__opt.is-current { background: var(--surface-sunken); }

.zw-city__opt-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--size-caption);
  line-height: 1.3;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.zw-city__opt-phone {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-body);
}

/* --- мобильное меню ------------------------------------------------------ */
/* Переключатель — чекбокс: панель открывается без единой строки скрипта. */

.zw-header__toggle { display: none; }

.zw-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-inline-start: auto;
  border: 1px solid var(--line-on-dark);
  cursor: pointer;
}

.zw-header__burger span,
.zw-header__burger span::before,
.zw-header__burger span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink-on-dark);
}

.zw-header__burger span::before { transform: translateY(-6px); }
.zw-header__burger span::after { transform: translateY(4px); }

@media (max-width: 1200px) {
  .zw-header__nav { gap: var(--sp-4); font-size: var(--size-small); }
  .zw-header__phone { font-size: var(--size-small); }
}

/* меню уезжает в бургер раньше, чем строка перестаёт помещаться:
   ниже 1100 телефон и кнопка уже не влезают рядом с семью пунктами */
@media (max-width: 1100px) {
  .zw-header__burger { display: flex; }
  .zw-header__nav {
    display: none;
    order: 3;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    border-top: 1px solid var(--line-on-dark);
  }
  .zw-header__toggle:checked ~ .zw-header__nav { display: flex; }
  .zw-header__inner { flex-wrap: wrap; gap: var(--sp-4); min-height: 64px; }
  .zw-header__phone,
  .zw-header__cta { display: none; }
  .zw-city__menu { left: auto; right: 0; }
}