/* ============================================================
   01-header.css — шапка сайта
   Мобильный вариант по умолчанию, десктоп — через @media.
   Префикс BEM: header__*
   ============================================================ */

/* padding-inline убран из .header — его задаёт .hero__header-wrap.
   На десктопе header растягивается на всю ширину hero__header-wrap. */
.header {
  position: relative;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: 0;
}

/* ── Логотип ──────────────────────────────────────────────── */

.header__logo-wrap {
  background: var(--c-white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-1);
}

.header__logo {
  border-radius: var(--r-pill);
  display: block;
  width: clamp(3.5rem, 2rem + 6.5vw, 7.125rem); /* 56 → 114 */
  height: auto;
}

/* ── Навигация ────────────────────────────────────────────── */

/* мобайл: полноэкранное меню. Прячем через opacity/visibility/transform (а не
   display), чтобы открытие/закрытие можно было анимировать. */
.header__nav {
  position: fixed;
  inset: 0;
  height: 100dvh;
  /* Стеклянный фон: тёмно-зелёный с лёгкой прозрачностью + размытие подложки. */
  background: rgb(18 50 6 / 0.85);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  padding: var(--s-12) var(--gutter) var(--s-9);
  z-index: var(--z-overlay);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-8);
  overflow-y: auto;

  /* закрытое состояние */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

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

/* Блок скрытых действий шапки внутри меню (email, телефон, CTA). */
.header__nav-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-7);
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-white-20);
}

.header__nav-extra .header__contact-item {
  align-items: flex-start;
}

.header__nav-extra .header__contact-value {
  font-size: 1.25rem; /* 20px */
}

.header__nav-extra .header__contact-label {
  font-size: 1.0625rem; /* 17px */
}

.header__nav-extra .header__cta {
  width: 100%;
  max-width: 22rem;
  font-size: 1.125rem; /* 18px */
}

.header__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.header__nav-list li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* разделители — прямые вертикальные линии, без transform */
.header__nav-divider {
  /* вертикальный разделитель — только на десктопе */
  display: none;
  width: 1px;
  height: 1.875rem; /* 30px */
  background: var(--c-white-25);
  flex-shrink: 0;
}

.header__nav-link {
  font-family: var(--f-text);
  font-size: 1.75rem; /* 28px — крупный шрифт для полноэкранного меню */
  font-weight: 700;
  color: var(--c-white);
  text-align: center;
  transition: opacity var(--dur) var(--ease);
}

.header__nav-link:hover,
.header__nav-link:focus-visible {
  opacity: 0.75;
}

/* ── Контакты (десктоп) ───────────────────────────────────── */

.header__contacts {
  display: none; /* скрыты на мобильном */
  align-items: center;
  gap: var(--s-8);
}

.header__contacts-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-5);
}

.header__contact-item {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
}

/* разделитель между «Написать нам» и «Заказать звонок» — прямая вертикальная черта */
.header__contacts-divider {
  display: block;
  width: 1px;
  height: 3.4375rem; /* 55px */
  background: var(--c-white);
  flex-shrink: 0;
}

.header__contact-value {
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-white);
  white-space: nowrap;
  transition: opacity var(--dur) var(--ease);
}

.header__contact-value:hover,
.header__contact-value:focus-visible {
  opacity: 0.75;
}

.header__contact-label {
  font-family: var(--f-text);
  font-size: var(--t-body-sm);
  font-weight: 700;
  color: var(--c-white);
  white-space: nowrap;
  /* Это действия, а не подписи: кнопка, а не span. Логика появится позже,
     сейчас нужны только состояния. */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  position: relative;
  transition: color var(--dur) var(--ease);
}

/* Подчёркивание растёт от левого края, а не появляется целиком. */
.header__contact-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.125rem;
  width: 100%;
  height: 1px;
  background: var(--c-lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.header__contact-label:hover,
.header__contact-label:focus-visible {
  color: var(--c-lime);
}

.header__contact-label:hover::after,
.header__contact-label:focus-visible::after {
  transform: scaleX(1);
}

.header__contact-label:active {
  opacity: 0.7;
}

/* ── CTA — «Забронировать дом» ────────────────────────────── */

/* высота 70px (из макета Frame 1000005451: 223x70).
   Шрифт 16px/19px (t-body-sm, line-height ~1.2).
   (70 - 19) / 2 = 25.5 → ближайший токен --s-6 = 25px → 25+19+25 = 69px. */
.header__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding-inline: var(--s-7);
  padding-block: var(--s-6); /* 25px×2 + 19px строки ≈ 69px ≈ 70px из макета */
  background: var(--c-lime);
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-size: var(--t-body-sm);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--c-black);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Ховер инвертирует кнопку: лайм → чёрный, содержимое → белое.
   Уголки нарисованы через currentColor, поэтому меняются вместе с
   текстом сами — отдельного правила для них не нужно. */
.header__cta:hover,
.header__cta:focus-visible {
  background: var(--c-black);
  color: var(--c-white);
}

/* L-образные уголки (декор) */
.header__cta-corner {
  position: absolute;
  pointer-events: none;
}

.header__cta-corner--tl {
  top: var(--s-2);
  left: var(--s-2);
}

/* Разворот больше не нужен: раньше в оба угла ставилась одна и та же
   иконка и нижняя доворачивалась на 180°. Теперь уголки инлайновые, и у
   нижнего свой путь — при повороте он превращался бы в верхний левый. */
.header__cta-corner--br {
  bottom: var(--s-2);
  right: var(--s-2);
}

/* ── Мобильный блок: телефон + бургер ────────────────────── */

.header__mobile-actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  position: relative;
  /* Не поднимаем весь блок над оверлеем (z-overlay=200): поверх меню должен
     оставаться только сам бургер (его z-index задан ниже).
     Блок стоит по центру строки шапки; опуск от верха задаёт сам .header. */
}

.header__burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  cursor: pointer;
  padding: var(--s-1);
  flex-shrink: 0;
  background: none;
  border: 0;
  /* Поверх полноэкранного меню, чтобы крестик оставался видимым
     и кликабельным. Поднят только бургер, не весь блок действий. */
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}

/* Коробка под две полоски. Размер как у исходной иконки (33×9). */
.header__burger-box {
  position: relative;
  display: block;
  width: 2.0625rem; /* 33px */
  height: 0.5625rem; /* 9px */
}

.header__burger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-white);
  border-radius: 2px;
  transition:
    top var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.header__burger-bar:nth-child(1) {
  top: 0;
}

.header__burger-bar:nth-child(2) {
  top: calc(100% - 2px);
}

/* Открыто: обе полоски съезжаются в центр и разворачиваются в крестик. */
.header__burger[aria-expanded='true'] .header__burger-bar:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.header__burger[aria-expanded='true'] .header__burger-bar:nth-child(2) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

.header__burger-label {
  font-family: var(--f-text);
  font-size: var(--t-body-sm);
  font-weight: 400;
  color: var(--c-white);
  line-height: 1;
}

/* ============================================================
   Desktop (≥ 1024px)
   ============================================================ */

@media (min-width: 64em) {
  /* навигация «липнет» к логотипу слева.
     header: логотип | nav (прижат к лого, auto-gap вправо) | contacts. */
  .header {
    gap: 0;
  }

  /* Показываем навигацию в потоке, прижатую к логотипу. Сбрасываем drawer:
     скрытие через opacity/visibility/transform больше не нужно. */
  .header__nav {
    display: flex;
    flex-direction: row;
    position: static;
    inset: auto;
    height: auto;
    overflow: visible;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    padding: 0;
    flex: none;
    margin-inline-start: var(--s-8); /* небольшой отступ от логотипа (≈40px) */
    z-index: auto;
    gap: 0;

    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  /* Дублирующий блок действий — только для мобильного меню. */
  .header__nav-extra {
    display: none;
  }

  .header__nav-list {
    flex-direction: row;
    align-items: center;
    gap: 0; /* gap задаётся через divider */
  }

  .header__nav-list li {
    gap: 0;
  }

  /* разделитель показываем, строго вертикальный */
  .header__nav-divider {
    display: block;
    height: 1.875rem;
    /* горизонтальный отступ вокруг разделителя ≈ gap:57/2 из брифа */
    margin-inline: calc(var(--s-7) / 2);
  }

  .header__nav-link {
    font-size: 1.125rem; /* 18px */
  }

  /* Показываем контакты, прижатые к правому краю через margin-inline-start:auto */
  .header__contacts {
    display: flex;
    margin-inline-start: auto;
  }

  /* Прячем мобильный блок */
  .header__mobile-actions {
    display: none;
  }
}

/* ============================================================
   ≤ 1440px (и меньше): контакты ужимаем.
   Скрываем второй контакт (телефон «Заказать звонок») и разделитель —
   на экранах шире 1440 оба остаются видимыми.
   ============================================================ */

@media (max-width: 90em) {
  .header__contacts-group .header__contact-item:last-child {
    display: none;
  }

  .header__contacts-divider {
    display: none;
  }
}

@media (max-width: 79.9375em) {
  .header__cta {
    padding-inline: var(--s-5);
    padding-block: var(--s-4);
    font-size: 0.9375rem;
  }

  .header__nav-divider {
    margin-inline: calc(var(--s-5) / 2);
  }

  .header__logo {
    width: clamp(3.5rem, 2rem + 6.5vw, 5.625rem);
  }

  .header__logo-wrap {
    padding: calc(var(--s-1) / 2);
  }

  .header__contacts {
    gap: var(--s-5);
  }

  .header__contacts-divider {
    height: 2.5rem;
  }
}

/* Вертикальный отступ навигации — только для десктопа 1024–1279.
   На мобильном (≤1023) паддинги задаёт полноэкранное меню, поэтому нельзя
   применять эту правку ко всему диапазону ≤1279. */
@media (min-width: 64em) and (max-width: 79.9375em) {
  .header__nav {
    padding-block: var(--s-3);
  }
}

/* ============================================================
   Телефоны (≤640px): бургер-меню компактнее целиком —
   меньше паддинги оверлея, шаги списка и кегль ссылок.
   ============================================================ */
@media (max-width: 40em) {
  /* Логотип на телефонах чуть крупнее. */
  .header__logo {
    width: 4.25rem; /* 68 вместо 56 из clamp */
  }

  .header__nav {
    padding: var(--s-9) var(--gutter) var(--s-7);
    gap: var(--s-6);
  }

  .header__nav-list {
    gap: var(--s-5);
  }

  .header__nav-link {
    font-size: 1.375rem; /* 22 вместо 28 */
  }

  .header__nav-extra {
    gap: var(--s-5);
    padding-top: var(--s-6);
  }

  .header__nav-extra .header__contact-value {
    font-size: 1.0625rem; /* 17 вместо 20 */
  }

  .header__nav-extra .header__contact-label {
    font-size: 0.9375rem; /* 15 вместо 17 */
  }

  .header__nav-extra .header__cta {
    max-width: none;
    padding: var(--s-4) var(--s-5);
    font-size: 1rem;
  }
}