/* ─────────────────────────────────────────────────────────────────────
   СКВОЗНОЕ МЕНЮ САЙТА — один компонент на лендинг и на страницы кейсов.

   Плавающая пилюля вверху по центру. Фон у неё свой (тёмное стекло),
   поэтому она одинаково читается и над светлым первым экраном лендинга,
   и над тёмной страницей кейса — цвет текста не приходится переключать
   под каждой секцией.

   На узком экране пилюля превращается в карточку: ссылки уезжают вниз
   вторым рядом и показываются по кнопке-бургеру.

   Токены берутся из страницы, но у каждого прописан запасной цвет —
   у страниц кейсов свой :root, и общего файла палитры они не грузят.
   ───────────────────────────────────────────────────────────────────── */

.sitenav {
  position: fixed; z-index: 60; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  /* Ширина полосы = колонка страницы: те же поля, что у заголовков и текста,
     поэтому меню стоит на общей сетке, а не распирает экран. */
  width: min(calc(100vw - 2 * var(--edge, 18px)), var(--nav-col, 1232px));
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  border: 1px solid rgba(238, 241, 239, .16);
  background: rgba(3, 24, 30, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  color: #eef1ef;
  font: 500 13.5px/1 var(--sans, 'Manrope', system-ui, sans-serif);
  box-shadow: 0 12px 34px rgba(3, 24, 30, .22);
  transition: border-radius .22s ease, background-color .22s ease;
}
.sitenav a { color: inherit; text-decoration: none; }

.sitenav__brand { margin-right: 10px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
/* Пальцем нажимают по площади, а не по глифам: у имени, кнопки и бургера
   тапаемая цель доводится до 40 px по высоте. Ширину это не трогает —
   на 320 px имя, «Написать» и бургер по-прежнему стоят в одну строку. */
@media (pointer: coarse) {
  .sitenav__brand { display: flex; align-items: center; min-height: 40px; }
}

/* Имя слева, всё остальное прижато к правому краю полосы. */
.sitenav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sitenav__links a {
  display: block; padding: 9px 12px; border-radius: 999px; white-space: nowrap;
  color: rgba(238, 241, 239, .62);
  transition: color .16s, background-color .16s;
}
.sitenav__links a:hover,
.sitenav__links a:focus-visible { color: #eef1ef; background: rgba(238, 241, 239, .09); }
.sitenav__links a[aria-current='page'] { color: #eef1ef; background: rgba(238, 241, 239, .12); }

/* Селектор с классом ссылки ОБЯЗАТЕЛЕН: правило `.sitenav a { color: inherit }`
   весит больше одиночного класса и иначе перекрашивает кнопку в цвет пилюли —
   светлое по светлому, контраст 1,1:1. */
.sitenav a.sitenav__cta {
  margin-left: 8px; padding: 9px 17px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chalk, #e9e4d8); color: var(--petrol, #05262e); font-weight: 700;
  transition: filter .16s;
}
.sitenav a.sitenav__cta:hover { filter: brightness(1.06); }
@media (pointer: coarse) { .sitenav a.sitenav__cta { min-height: 40px; } }

.sitenav__burger { display: none; }

/* Подложка под раскрытым меню. Карточка меню накрывает первый заголовок
   страницы, и без затемнения это читается как сломанная вёрстка — половина
   букв срезана краем панели. С подложкой то же перекрытие читается как
   «открыто меню». Живёт только на узком экране: на широком список стоит
   в строке и ничего не накрывает. */
.sitenav__scrim { display: none; }

/* ── Узкий экран: пилюля раскрывается в карточку ── */
@media (max-width: 900px) {
  .sitenav { gap: 0; padding: 5px 5px 5px 14px; }

  .sitenav__links {
    display: none; order: 3; width: 100%; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 1px;
    padding: 6px 2px 2px;
  }
  /* Пункт раскрытого списка — тапаемая цель: 15px при line-height 1 давали
     37 px высоты, палец требует 40. */
  .sitenav__links a { display: flex; align-items: center; min-height: 40px;
                      padding: 10px 12px; border-radius: 12px; font-size: 15px; }

  .sitenav a.sitenav__cta { margin-left: auto; }

  .sitenav__burger {
    display: grid; place-content: center; gap: 4px; margin-left: 6px;
    width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%;
    background: rgba(238, 241, 239, .10); cursor: pointer;
  }
  .sitenav__burger span {
    display: block; width: 15px; height: 1.6px; border-radius: 2px; background: #eef1ef;
    transition: transform .22s ease;
  }

  .sitenav__scrim {
    display: block; position: fixed; inset: 0; z-index: 59;
    background: rgba(3, 24, 30, .58);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  html.nav-open .sitenav__scrim { opacity: 1; pointer-events: auto; }

  .sitenav.is-open { border-radius: 22px; background: rgba(3, 24, 30, .93); }
  .sitenav.is-open .sitenav__links { display: flex; }
  .sitenav.is-open .sitenav__burger span:first-child { transform: translateY(2.8px) rotate(45deg); }
  .sitenav.is-open .sitenav__burger span:last-child  { transform: translateY(-2.8px) rotate(-45deg); }
}

@media (max-width: 430px) {
  .sitenav { padding-left: 13px; }
  .sitenav__brand { font-size: 13px; }
  .sitenav a.sitenav__cta { padding: 8px 14px; font-size: 13px; }
}

/* Переход по пункту меню — прокруткой, а не прыжком. Отключается системной
   настройкой «меньше движения». */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .sitenav, .sitenav *, .sitenav__burger span, .sitenav__scrim { transition: none !important; }
}