/* ==========================================================================
   Шапка
   Опорные значения макета (ширина 1920):
     лого        170 × 97, отступ слева 73, сверху 24
     меню        20px Muller, uppercase, letter-spacing -1px, x 1171…1603
     телефон     x 1643…1823 (правое поле 97 → выравнивание по правому краю)
   Меню и телефон центрируются по вертикали относительно лого.
   ========================================================================== */

.header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  padding-top: clamp(0.75rem, 1.25vw, 1.5rem);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.0833vw, 2.5rem);
  min-height: clamp(3.5rem, 5.0521vw, 6.0625rem);

  /* В макете поля шапки асимметричны: 73px слева, 97px справа */
  padding-right: clamp(1.25rem, 6.0521vw, 6.0625rem);
}

/* --- Лого ----------------------------------------------------------------- */

.header__logo {
  flex-shrink: 0;
  width: clamp(6.875rem, 5vw, 10.625rem);
}

.header__logo img {
  width: 100%;
  height: auto;
  margin-left: 15px;
}

/* --- Меню + телефон ------------------------------------------------------- */

.header__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.0833vw, 2.5rem);
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.25vw, 1.5rem);
}

.nav__link,
.header__phone {
  font-size: var(--fs-nav);
  line-height: normal;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
  transition: color 0.25s ease;
}

.nav__link:hover,
.nav__link:focus-visible,
.header__phone:hover,
.header__phone:focus-visible {
  color: var(--accent-hover);
}

/* --- Шапка на тёмной подложке ----------------------------------------------
   «Архитектурный проект»: лого и бургер лежат на матовой панели заголовка,
   поэтому берутся в белом. Меню и телефон остаются чёрными — они правее, на
   светлой части фотографии (на мобильных — на серой панели меню).
   -------------------------------------------------------------------------- */

.header--on-dark .burger__line {
  background-color: var(--text-inverse);
}

/* --- Мобильная версия ----------------------------------------------------- */

@media (max-width: 900px) {
  .header__logo img {
    margin-left: 0px;
  }
  .header__inner {
    gap: 1rem;
  }

  .header__menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: -1;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin-left: 0;
    padding: 1.75rem var(--container-pad) 2rem;
    background-color: var(--bg-muted);
    border-top: 1px solid color-mix(in srgb, var(--border-strong) 8%, transparent);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--color-black) 8%, transparent);

    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s ease;
  }

  .header--menu-open .header__menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav {
    width: 100%;
  }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
  }

  .nav__link,
  .header__phone {
    font-size: 1rem;
  }

  .header__phone {
    padding-top: 0.5rem;
  }
}