/* Шапка сайта: слева логотип с подписью и соцсети, справа переключатель
   языка. Общая для всех страниц — разметка дублируется в каждом HTML,
   стили лежат здесь (см. ARCHITECTURE.md, 5.2).

   Шапка лежит отдельным слоем поверх первого экрана и высоты не
   занимает: так первый экран центрируется по всей высоте окна.
   z-index держит её над декоративными плитками главной. */

.header {
  position: absolute;
  top: calc(var(--gutter) * 0.5);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 2;
  display: flex;
  /* Не center: на мобильном слева два ряда (логотип и соцсети), и по
     центру переключатель языка уехал бы к середине этой колонки.
     Выравниваем по верху; кнопка языка центрируется по первой строке
     сама — см. .header__lang. */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gutter);
  font-size: var(--subtitle-size);
  letter-spacing: 0.01em;
}

/* Левая сторона: логотип и соцсети в один ряд. */
.header__side {
  display: flex;
  align-items: center;
  gap: 3.2em;
}

/* Логотип: временная стрелка + подпись. На внутренних страницах —
   ссылка на главную, на самой главной просто текст. */
.header__logo {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.header__logo:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Стрелка ростом с подпись: 1em по кеглю. */
.header__logo-mark {
  flex: none;
  width: 1em;
  height: 1em;
}

/* Соцсети текстом, без иконок. */
.header__socials {
  display: flex;
  align-items: center;
  gap: 1.6em;
}

.header__social {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.header__social:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Переключатель языка справа: подпись текущего языка с галкой
   и выпадающий список.

   Высота блока — ровно строка шапки (1lh). Кнопка с паддингами выше
   этой строки и выступает из неё поровну вверх и вниз, поэтому шапка
   и логотип слева стоят на месте: размер кнопки на них не влияет.
   1.37em — запасная высота строки для браузеров без единицы lh
   (метрики Manrope при line-height: normal).

   --header-lang-offset — запас для страницы: на мобильной главной
   правый верхний угол занят кнопкой контакта, и переключатель
   опускается под неё. */
.header__lang {
  /* Кегль подписи в кнопке: мельче шапки, чтобы кнопка вышла
     маленькой и аккуратной. Им же набран выпадающий список. */
  --lang-size: 0.78em;

  display: flex;
  align-items: center;
  /* Не сжимать: на мобильном соцсети слева занимают почти всю строку,
     и без этого кнопка вылезала бы правым краем за колонку отступа. */
  flex: none;
  height: 1.37em;
  height: 1lh;
  margin-top: var(--header-lang-offset, 0px);
  font-weight: 500;
}

/* Отсчёт для выпадающего списка. Отдельным элементом, а не на
   .header__lang: тому задана высота строки, а список должен висеть
   под кнопкой, которая выше. */
.header__lang-anchor {
  position: relative;
  display: flex;
}

/* Пилюля один в один с кнопкой контакта (.talk в components.css):
   тот же тёмный фон, та же тонкая обводка, та же заливка белым
   при наведении. Отличие только в размере. */
.header__lang-button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0.6em 0.72em 0.6em 0.92em;
  border: 1px solid var(--color-pill-border);
  border-radius: 999px;
  background-color: var(--color-pill);
  color: var(--color-text);
  font: inherit;
  font-size: var(--lang-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* Заглушка на страницах без перевода: кнопка на месте, но неактивна —
   ни курсора-руки, ни отклика на наведение. */
.header__lang-button[aria-disabled="true"] {
  cursor: default;
}

.header__lang-button:not([aria-disabled="true"]):hover,
.header__lang-button:not([aria-disabled="true"]):focus-visible {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.header__lang-button:focus-visible,
.header__lang-option:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Галка мельче подписи и приглушена; при открытии разворачивается. */
.header__lang-chevron {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  opacity: 0.5;
  transition: transform 0.3s var(--ease);
}

.header__lang--open .header__lang-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Список под кнопкой, по её правой кромке. Скрыт через visibility —
   уходит и из дерева доступности. */
.header__lang-list {
  position: absolute;
  top: calc(100% + 0.5em);
  /* По правой кромке кнопки — панель не должна выходить за колонку отступа. */
  right: 0;
  z-index: 2;
  min-width: 100%;
  margin: 0;
  padding: 0.3em;
  list-style: none;
  font-size: var(--lang-size);
  border-radius: 1.3em;
  background-color: var(--color-pill);
  border: 1px solid var(--color-pill-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.3em);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}

.header__lang--open .header__lang-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Пункт: код языка и его название. Код в своей колонке фиксированной
   ширины, чтобы названия шли ровно друг под другом. */
.header__lang-option {
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: 100%;
  padding: 0.45em 0.85em;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  color: rgba(244, 244, 244, 0.5);
  font: inherit;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.header__lang-code {
  flex: none;
  min-width: 1.5em;
}

.header__lang-option:hover {
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.07);
}

.header__lang-option--active {
  color: var(--color-text);
}

/* На мобильном логотип и соцсети в одну строку не помещаются —
   ставим их друг под другом. */
@media (max-width: 767px) {
  .header__side {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.2em;
  }

  .header__socials {
    gap: 1.1em;
  }

  /* Переключатель здесь опущен под кнопку контакта (--header-lang-offset)
     и со строкой соцсетей по ширине не спорит. Но во флексе он всё равно
     требует себе место рядом с ними, и в строку они вдвоём не влезают —
     кнопку выносило за колонку отступа. Убираем её из потока и вешаем
     на правый край шапки; смещение вниз продолжает считать margin-top. */
  .header__lang {
    position: absolute;
    top: 0;
    right: 0;
  }
}