/* =========================================================
   ШАПКА: логотип, навигация, языки, соцсети, бургер-меню
   ========================================================= */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s;
}
/* После скролла появляется подложка, чтобы шапка читалась поверх контента */
.header.is-scrolled {
  background: rgba(0, 0, 0, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.logo span { font-weight: 300; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.5vw, 56px);
  margin-left: auto;
}

.nav__links { display: flex; gap: clamp(20px, 2.4vw, 40px); list-style: none; }

.nav__links a {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, .78);
  transition: color .3s;
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Переключатель языков KZ | RU | EN */
.lang { display: flex; align-items: center; font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.lang button { padding: 4px 2px; color: var(--dim); transition: color .3s; }
.lang button:hover { color: var(--muted); }
.lang button[aria-pressed="true"] { color: var(--fg); }
.lang__sep { color: var(--dim); padding-inline: 8px; }

.socials { display: flex; align-items: center; gap: 18px; }
.socials a { display: grid; place-items: center; width: 24px; height: 24px; opacity: .78; transition: opacity .3s; }
.socials a:hover { opacity: 1; }
.socials svg { width: 20px; height: 20px; }

/* Бургер — виден только на планшетах и телефонах */
.burger {
  display: none;
  width: 32px; height: 32px;
  position: relative;
  z-index: 2;
}
.burger span {
  position: absolute; left: 4px; right: 4px; height: 1px; background: var(--fg);
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.burger span:nth-child(1) { top: 12px; }
.burger span:nth-child(2) { top: 20px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 16px; transform: rotate(-45deg); }

/* ---------- Планшеты и телефоны: полноэкранное меню ---------- */
@media (max-width: 900px) {
  /* На телефонах шапка без подложки. В самом верху страницы видны логотип
     и кнопка меню; при прокрутке логотип исчезает, а кнопка становится
     плавающей темной «таблеткой». Меню открывается карточкой со скругленными
     углами: логотип и крестик сверху, пункты меню, внизу языки и соцсети. */
  .header,
  .header.is-scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    pointer-events: none;   /* пустая область шапки не мешает нажимать на страницу */
  }
  .header__inner { gap: 16px; }

  /* Логотип: виден в самом верху страницы и в открытом меню */
  .logo {
    position: relative;
    z-index: 2;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s, transform .4s var(--ease);
  }
  .header:not(.is-scrolled) .logo,
  .header.is-menu-open .logo { opacity: 1; visibility: visible; pointer-events: auto; }
  /* в карточке меню — чуть правее, по линии пунктов меню */
  .header.is-menu-open .logo { transform: translateX(8px); }

  /* Кнопка меню: темная «таблетка». Без размытия фона — на iPhone оно
     пересчитывается на каждом кадре прокрутки и дает подергивания. */
  .burger {
    display: block;
    width: 56px; height: 44px;
    border-radius: 14px;
    background: rgba(30, 30, 30, .9);
    pointer-events: auto;
    transition: background .3s;
  }
  /* В самом верху кнопка без подложки — просто две линии рядом с логотипом */
  .header:not(.is-scrolled):not(.is-menu-open) .burger { background: transparent; }
  .burger span { left: 18px; right: 18px; }
  .burger span:nth-child(1) { top: 18px; }
  .burger span:nth-child(2) { top: 25px; }
  .burger[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
  .burger[aria-expanded="true"] span:nth-child(1),
  .burger[aria-expanded="true"] span:nth-child(2) { top: 21.5px; }

  /* Карточка меню */
  .nav {
    position: fixed;
    top: 8px; left: 8px; right: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas: "links links" "lang socials";
    align-items: end;
    gap: 32px 16px;
    min-height: min(560px, 68svh);
    padding: calc(var(--header-h) + 8px) 24px 28px;
    border-radius: 24px;
    background: #1c1c1c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(.98);
    transform-origin: top right;
    transition: opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__links { grid-area: links; align-self: start; flex-direction: column; gap: 6px; }
  .nav__links a { font-size: clamp(30px, 8.5vw, 40px); font-weight: 300; letter-spacing: -.02em; color: var(--fg); }
  .nav__links a::after { display: none; }

  /* Языки: без разделителей, выбранный подчеркнут */
  .lang { grid-area: lang; gap: 28px; font-size: 18px; font-weight: 400; letter-spacing: .02em; }
  .lang__sep { display: none; }
  .lang button { padding: 4px 0; color: rgba(255, 255, 255, .7); border-bottom: 1px solid transparent; }
  .lang button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--fg); }

  .socials { grid-area: socials; gap: 4px; margin-right: -10px; }
  .socials a { width: 44px; height: 44px; }   /* зона нажатия под палец */
  .socials svg { width: 22px; height: 22px; }
  /* Невидимая зона нажатия вокруг букв языка — подчеркивание остается на месте */
  .lang button { position: relative; }
  .lang button::after { content: ""; position: absolute; inset: -10px -10px; }
}