/* ============================================================
   Шапка сайта
   ============================================================ */
.site-header {
  /* Высота синей полосы контактов. Sticky-offset = −высота,
     поэтому при скролле синяя полоса уезжает вверх вместе со страницей
     и возвращается при подъёме к верху, а белая полоса с меню всегда
     остаётся прижатой к верху окна. Значения — фактические высоты
     .header-top (desktop 47 / tablet 51 / mobile 0). */
  --header-top-h: 47px;
  position: sticky;
  top: calc(-1 * var(--header-top-h));
  z-index: 10;
  background-color: var(--color-white);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

/* Верхняя полоса контактов */
.header-top {
  background-color: var(--color-brand);
  color: var(--color-white);
  padding-block: 12px;
}

.header-top__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 23px;
}

/* Нижняя полоса: лого + меню */
.header-main {
  background-color: var(--color-white);
  padding-block: 6px;
}

.header-main__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 46px;
}

.header-logo {
  flex: 0 0 15%;
  max-width: 144px;
  display: block;
}

.header-logo img {
  width: 100%;
  height: auto;
}

.header-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.header-actions {
  /* На десктопе бургер скрыт, т.е. колонка пустая — не резервируем под неё 15%:
     в оригинале меню занимает всю ширину справа от логотипа (замер: шапка 143..1392, контейнер
     меню 1249px), иначе у меню меньше места и оно раньше переносится (и центр меню уезжает влево). */
  flex: 0 0 auto;
}

/* Бургер — только на мобильных */
.header-burger {
  display: none;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-brand);
}

.header-burger svg {
  width: 32px;
  height: 32px;
}

@media (max-width: 1024px) {
  .site-header {
    --header-top-h: 51px;
  }

  .header-logo {
    flex: 0 0 50%;
    max-width: 174px;
  }

  .header-nav {
    display: none;
  }

  .header-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
  }

  .header-burger {
    display: flex;
  }

  .header-main {
    padding-block: 20px;
  }

  .header-top {
    padding-block: 14px;
  }

  .header-main__inner {
    justify-content: space-between;
    min-height: 43px;
  }
}

@media (max-width: 767px) {
  .site-header {
    --header-top-h: 0px;
  }

  .header-top {
    display: none;
  }

  .header-logo {
    flex: 0 0 66%;
    max-width: 119px;
  }

  .header-main__inner {
    min-height: 31px;
  }
}