/* ══════════════════════════════════════════════════════════════════════════
   20.10.2026 — ШАПКА И ПОДВАЛ СТРАНИЦ УСЛУГ = ТОЧНО КАК /docs/
   Хозяин: «на страницах услуг шапка и подвал тоже другие — сделай как на /docs/».
   ЭТАЛОН (замеры при 1280): шапка высота 76, padding 10px max(24px,(100vw-1120)/2+24px),
   логотип left 104, метка left 258, меню справа left 961; подвал ширина 1120, padding 24px.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ШАПКА: как html body header.doc-top на /docs/ ── */
html body header.doc-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px max(24px, calc((100vw - 1120px) / 2 + 24px)) !important;
  min-height: 76px !important;
  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 !important;
}
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;
}

/* ── ЛОГОТИП ── */
html body header.doc-top .doc-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  height: 30px !important;
  flex: 0 0 auto !important;
  text-decoration: none !important;
}
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) !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
}
html body header.doc-top .doc-brand .mark svg {
  width: 18px !important;
  height: 18px !important;
}
html body header.doc-top .doc-brand .brand-text {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  color: #ececf5 !important;
}

/* ── МЕТКА «API Documentation» (span, НЕ ссылка) ── */
html body header.doc-top .doc-tag {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  padding: 0 12px !important;
  margin-left: 24px !important;
  border: 1px solid rgba(139, 92, 246, .28) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #9a9ab0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* ── МЕНЮ справа ── */
html body header.doc-top nav.doc-links {
  margin-left: auto !important;
  margin-right: 20px !important;   /* эталон /docs/: right 1141, не 1161 */
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  height: 39px !important;
  font-size: 14.5px !important;
}
html body header.doc-top nav.doc-links a {
  padding: 8px 12px !important;
  border-radius: 9px !important;
  color: #9a9ab0 !important;
  text-decoration: none !important;
  transition: color .18s, background .18s !important;
}
html body header.doc-top nav.doc-links a:hover {
  color: #fff !important;
  background: rgba(139, 92, 246, .16) !important;
}

/* ── ПОДВАЛ: ширина и отступы как на /docs/ ── */
html body footer.doc-foot {
  max-width: 1120px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-top: 1px solid rgba(36, 36, 58, .8) !important;
  color: #8b8ba7 !important;
  font-size: 13px !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; font-size: 13.5px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   20.10.2026 — ФОН СТРАНИЦЫ УСЛУГ = ФОН ГЛАВНОЙ (иначе шапка «видна» сразу)
   Хозяин: «на главной шапка по умолчанию одинакового цвета с фоном и только при
   скролле меняется, а на услугах сразу виден лёгкий фон и полосочка».

   ПРИЧИНА НАЙДЕНА ЗАМЕРОМ:
     главная:  body background = rgb(15,15,20)      шапка rgba(15,15,20,.72)
     услуги:   body background = #0a0a0f (10,10,15) шапка rgba(15,15,20,.72)
   На главной шапка СЛИВАЕТСЯ с фоном (одинаковый цвет), на услугах её фон
   СВЕТЛЕЕ фона страницы → полупрозрачная плашка видна ещё до скролла.

   РЕШЕНИЕ: привести фон body услуг к фону главной. Тогда в покое шапка
   невидима, а при скролле появляется плотный фон + тень + линия — 1 в 1.
   ══════════════════════════════════════════════════════════════════════════ */
html body {
  background: rgb(15, 15, 20) !important;
  background-color: rgb(15, 15, 20) !important;
}
/* слой-подложка главной (если он даёт оттенок) — тот же тон */
html {
  background: rgb(15, 15, 20) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   20.10.2026 — КОНТЕНТ СТРАНИЦ УСЛУГ: ШИРЕ И ПОД ЛОГОТИПОМ (как /docs/)
   Хозяин: «основной контент под шапкой и над подвалом не такой зауженный,
   а как на главной и на /docs/ — текст идёт чётко под лого, а не правее».

   ЗАМЕРЫ /docs/ (эталон): контейнер .doc-wrap — 1120px, left 73,
     padding 32px 24px 80px 31.5px → содержимое начинается на 73+31.5 ≈ 104.5,
     то есть РОВНО под логотипом (логотип left 104).
   ЗАМЕРЫ УСЛУГ ДО: .wrap — max-width 1000, left 133, padding 36px 24px 64px
     → содержимое на 133+24 = 157, а логотип на 104. Сдвиг +53 вправо и уже на 120px.

   РЕШЕНИЕ: контейнер услуг = 1120 с тем же padding-left 31.5,
   что у .doc-wrap. Сайдбара на страницах услуг нет, поэтому контент
   занимает всю ширину — как и должно быть.
   ══════════════════════════════════════════════════════════════════════════ */

html body .wrap {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 32px 24px 80px 31.5px !important;
  box-sizing: border-box !important;
}

/* на всякий случай: если внутри .wrap есть grid-обёртка — одна колонка */
html body .wrap > .doc-wrap {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: 1fr !important;
}

@media (max-width: 1168px) {
  html body .wrap { padding: 24px 20px 60px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   20.10.2026 v2 — КОНТЕНТ УСЛУГ РОВНО ПОД ЛОГОТИПОМ (устранены 8px).
   ЗАМЕР: шапка — padding 10px max(24px, (100vw-1120)/2 + 24px) →
          логотип left 104 при 1280.
          контейнер — margin auto 72.5 + padding-left 31.5 = 112.
          Разница 8px (112 - 104).
   РЕШЕНИЕ: padding-left контейнера = padding-left шапки (24px), тогда
          left контейнера 73(80) + 24 = 104 — ровно под иконкой логотипа.
   ══════════════════════════════════════════════════════════════════════════ */

html body .wrap {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 32px 24px 80px 31px !important;   /* 73 + 31 = 104 — ровно под логотипом */
  box-sizing: border-box !important;
}
