/* Шапка. Лежит поверх первого экрана, собственного фона не имеет: цвет под
   ней даёт градиентная зона страницы. Ширина и боковые отступы — те же, что
   у `.container`: логотип и кнопки стоят на одних вертикалях с контентом
   секций. */

.header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: calc(var(--grid-container) + var(--grid-margin) * 2);
  height: var(--header-height);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* Логотип стоит по центру своего бокса: в макете он уже бокса на 3.66 с каждой
   стороны. Размер задаётся высотой, ширину даёт пропорция вектора. */
.header__logo {
  display: flex;
  justify-content: center;
  flex: none;
  width: 150px;
}

.header__logo img {
  width: auto;
  height: 36px;
}

/* Горизонтальная навигация помещается в шапку только на 1440: семь пунктов
   занимают 729 при логотипе 199 и блоке действий 306. Ниже она уезжает в меню. */
.header__nav { display: none; }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Кнопки входа на мобильном переезжают в меню. */
.header__auth { display: none; }

/* Если кнопки входа выключены в настройках, их зона не должна занимать место:
   пустой блок оставлял в шапке дыру справа, а переключатель языка не
   дотягивался до края. Пустая зона выпадает из потока, и переключатель
   встаёт на место кнопок. */
.header__auth-zone:empty { display: none; }

.header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Зона нажатия 44x44 - минимум для пальца. Сам значок остаётся --icon-xl:
     отрицательный внешний отступ гасит прибавку, чтобы соседние элементы
     шапки не разъехались. */
  width: 44px;
  height: 44px;
  margin: -10px;
  color: var(--text-strong);
}

.header__burger .icon {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

@media (min-width: 768px) {
  .header__logo { width: 199px; }
  .header__logo img { height: 48px; }

  .header__actions { gap: var(--space-3); }

  .header__auth {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
}

@media (min-width: 1440px) {
  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .header__burger { display: none; }
}

.header__link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  white-space: nowrap;
}

.header__link:hover,
.header__link[aria-current="page"] { color: var(--text-strong); }

/* Переключатель языка. Пока просто раскрывающийся список: других языков
   в макете нет, но точка расширения нужна. */
/* inline-flex, а не блок: иначе кнопка встаёт на текстовую строку родителя
   и высота переключателя тянется до интерлиньяжа страницы. */
.lang {
  position: relative;
  display: inline-flex;
  flex: none;
}

.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.lang__toggle .icon:last-child {
  width: var(--icon-sm);
  height: var(--icon-sm);
  transition: transform 0.15s ease;
}

.lang.is-open .lang__toggle .icon:last-child { transform: rotate(180deg); }

.lang__list {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 1;
  display: none;
  min-width: 140px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--elevation-md);
  list-style: none;
}

.lang.is-open .lang__list { display: block; }

.lang__option {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-body);
}


.lang__option[aria-current="true"] { color: var(--text-link); }

/* Шапка авторизованного. Отличается меньшим логотипом и профилем вместо
   кнопок входа. */
.header--authenticated .header__logo { width: 163px; }

.header--authenticated .header__logo img { height: 38px; }

.header--authenticated .header__actions { gap: var(--space-3); }

/* На мобильном от профиля остаётся только аватар. */
.profile__name,
.profile__chevron { display: none; }

@media (min-width: 768px) {
  .profile__name { display: block; }
  .profile__chevron { display: block; }
}

/* Снимок профиля на этапе статики прописан здесь, при посадке в тему
   переменная придёт из ACF. */
.profile__avatar { --media-image: url("../../img/avatar-current-user.webp"); }

.profile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.profile__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  white-space: nowrap;
}

.profile__chevron {
  width: var(--icon-sm);
  height: var(--icon-sm);
}