/* ═══ ШАПКА /docs/ = ТОЧНАЯ КОПИЯ ГЛАВНОЙ (20.10.2026, v3) ═══
   Хозяин: «отступы сверху/снизу другие, меню намного левее лого — должно быть
   на одном уровне, по направляющей».

   ЗАМЕРЫ ЭТАЛОНА (главная, 1440px):
     header:    0..1440, высота 76
     .top-in:   160..1280 (1120), padding 6px 24px, display flex, gap 20
     .brand:    left 184, top 23, height 30
     .logo-mark:184, 30x30
     nav:       left 563 (ЦЕНТР), первый пункт padding 8px 12px
     .top-right: right 1256

   ЗАМЕРЫ /docs/ ДО ФИКСА:
     header:  0..1120 (уже!), высота 42 (мало)
     .brand:  left 184 ✅ (совпало)
     nav:     left 1132 (СПРАВА, а не по центру) ❌
     пункты:  padding 0 (не 8px 12px) ❌

   ПЛАН: повторить структуру главной — два флекс-блока (левый бренд, правый меню)
   с space-between, меню по центру относительно контейнера, высота 76,
   отступы пунктов 8px 12px, шрифт 14.5. */

html { scroll-padding-top: 90px; }

/* ── сама шапка: во всю ширину экрана, фон на всю ширину ── */
html body header.doc-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  display: block !important;          /* внутренний контейнер делает флекс */
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 !important;         /* как header.top на главной */
  box-sizing: border-box !important;
  background: rgba(15, 15, 20, .72) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 0 !important;   /* как на главной: в покое полоски нет */
  transition: background .25s ease, box-shadow .25s ease;
}

/* 🔴 20.10.2026 — ТОЧНАЯ КОПИЯ ГЛАВНОЙ (header.top.is-scrolled):
   фон плотнее + тень + тонкая фиолетовая линия снизу. Появляется ТОЛЬКО при скролле. */
html body header.doc-top.is-scrolled {
  background: rgba(13, 13, 18, .92) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 1px 0 rgba(139, 92, 246, .12) !important;
  border-bottom: 0 !important;
}

/* ── внутренний контейнер 1120 + 24 отступ, как .top-in ── */
html body header.doc-top {
  --doc-inner: 1120px;
}

/* три зоны: бренд | тег | меню — с центрированием меню */
html body header.doc-top {
  text-align: initial;
}

/* обёртки нет в разметке — эмулируем через сам header + flex с ограничением ширины */
html body header.doc-top::after {
  content: "";
  display: block;
  clear: both;
}

/* Ограничиваем содержимое: используем padding на всю ширину экрана,
   а внутреннюю геометрию задаём на детях через calc-центрирование. */
html body header.doc-top > * {
  position: relative;
}

/* flex-поведение: делаем header флексом с max-width контейнером внутри */
html body header.doc-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  /* контейнер 1120 по центру: padding слева/справа = (100% - 1120)/2 + 24 */
  padding: 10px max(24px, calc((100vw - 1120px) / 2 + 24px)) !important;
  min-height: 76px !important;
}

/* бренд — как .brand на главной */
html body header.doc-top .doc-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  height: 30px;
  flex: 0 0 auto;
}

html body header.doc-top .doc-brand .mark {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(139, 92, 246, .35);
  border-radius: 8px;
}
html body header.doc-top .doc-brand .mark svg {
  width: 18px !important;
  height: 18px !important;
}

/* тег «API Documentation» — по центру между брендом и меню */
html body header.doc-top .doc-tag {
  margin-left: 18px !important;
  font-size: 13px !important;
  color: var(--muted, #9a9ab0) !important;
  white-space: nowrap;
}

/* МЕНЮ — по центру шапки, как на главной (там nav начинается с 563 при 1440) */
html body header.doc-top nav.doc-links {
  margin-left: auto !important;       /* прижимаем вправо ВНУТРИ контейнера */
  margin-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  font-size: 14.5px !important;
  height: 39px;
}

html body header.doc-top nav.doc-links a {
  padding: 8px 12px !important;
  border-radius: 9px !important;
  color: var(--muted, #9a9ab0) !important;
  transition: color .18s ease, background .18s ease;
}
html body header.doc-top nav.doc-links a:hover {
  color: #fff !important;
  background: rgba(139, 92, 246, .16) !important;
}

@media (max-width: 1168px) {
  html body header.doc-top {
    padding: 10px 24px !important;
    gap: 12px !important;
  }
}

@media (max-width: 880px) {
  html body header.doc-top {
    padding: 8px 18px !important;
    min-height: 60px !important;
    gap: 8px !important;
  }
  html body header.doc-top .doc-tag { display: none !important; }
  html body header.doc-top nav.doc-links { gap: 8px !important; }
  html body header.doc-top nav.doc-links a { padding: 6px 8px !important; font-size: 13.5px !important; }
}