/* ============================================================================
   base.css — шрифты, сброс, типографика, контейнер, утилиты.
   Подключается после tokens.css и до компонентов.
   ========================================================================= */

/* ── Шрифты: self-host, без внешних CDN ─────────────────────────────────── */

@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("../fonts/archivo-narrow-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Вариативные: одно начертание покрывает весь диапазон 100–900,
   в макете используются 400/500/600/700/800/900 */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Сброс ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Заголовки в макете — исключительно Archivo Black капсом.
   Межстрочный в px: Figma округляет высоту бокса до целого пикселя. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* Разделитель: у браузера свой margin-block: .5em — обнуляем явно,
   иначе модалки и текстовые страницы становятся выше макета. */
hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

table { border-collapse: collapse; border-spacing: 0; }

/* ── Фокус ───────────────────────────────────────────────────────────────
   Видимое кольцо обязательно. На тёмных полосах красное неразличимо,
   поэтому там оранжевое.                                                  */

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.on-dark :focus-visible,
.rg-bar :focus-visible,
.site-footer :focus-visible,
.rg-section :focus-visible { outline: var(--focus-outline-on-dark); }

/* ── Контейнер ───────────────────────────────────────────────────────────
   Фрейм 1440 при padding-inline 80 → контент 1280.
   На мобильном фрейме 390 боковой отступ 16.                              */

.container {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 1023px) {
  .container { padding-inline: 40px; }
}

@media (max-width: 767px) {
  .container { padding-inline: var(--gutter-mobile); }
}

/* Секция во всю ширину с внутренним контейнером */
.section { padding-block: var(--space-15); }

/* ── Утилиты ─────────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ссылка «к содержимому» для клавиатуры */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-toast);
  padding: var(--space-4) var(--space-8);
  background: var(--color-ink);
  color: var(--color-surface);
  font-weight: var(--fw-black);
  transform: translateY(-120%);
}

.skip-link:focus-visible { transform: none; }

/* Тап-зона 24×24 для мелких текстовых ссылок (WCAG 2.2 AA, 2.5.8).
   Псевдоэлементом, а не паддингом: паддинг увёл бы соседние блоки.
   Привязка к обоим краям обязательна — width:100% у строчной ссылки
   разрешается не от её бокса и вылезает за экран. */
.tap {
  position: relative;
}

.tap::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  translate: 0 -50%;
  height: 100%;
  min-height: 24px;
  z-index: var(--z-base);
}

/* Скрытие по ширинам: мобильный фрейм местами показывает другой состав,
   а не тот же в другом порядке. */
/* Порог переключения состава: десктопная навигация занимает 1041px и не
   помещается в 768 и 1024, поэтому меню уходит в бургер до 1150.
   Макетные ширины 390 и 1440 остаются по разные стороны порога. */
@media (max-width: 1149px) {
  .only-wide { display: none !important; }
}

@media (min-width: 1150px) {
  .only-narrow { display: none !important; }
}

/* Атрибут hidden должен побеждать любые display у компонентов: правило
   [hidden] в браузере имеет ту же специфичность, что классы, и проигрывало
   по порядку — скрытые ответы FAQ занимали по 90px. */
[hidden] { display: none !important; }

/* Блокировка прокрутки под открытым оверлеем */
body.is-locked { overflow: hidden; }

/* ── Якорные переходы под липкой шапкой ──────────────────────────────────
   Шапка прилипает сверху, поэтому цель перехода вставала под неё: заголовок
   секции оказывался закрыт. Отступ прокрутки равен высоте шапки плюс зазор. */
:target,
[id] { scroll-margin-top: calc(var(--h-header) + var(--space-8)); }

/* Токен --h-header остаётся 80 и на мобильном (там высота задана в правиле
   .site-header), поэтому цель якоря отодвигалась на 96 при шапке 56 —
   лишние 40px пустоты. Задаём отступ по фактической высоте. */
@media (max-width: 767px) {
  [id] { scroll-margin-top: 72px; }
}

/* Полоса 18+ над шапкой видна только в самом верху страницы, поэтому в
   отступ прокрутки она не входит. */

/* ── Стойкость к длинному контенту ───────────────────────────────────────
   Макет нарисован под идеальный текст. На живом сайте приходят длинные
   названия команд, адреса и слова без пробелов: без переноса они распирают
   документ (замер на стресс-прогоне — до 3021px горизонтального скролла).
   Перенос включается только когда слово реально не помещается, поэтому
   геометрия совпадающих с макетом блоков не меняется. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, figcaption, blockquote,
th, td, label, summary, button, a {
  overflow-wrap: break-word;
}

/* Водяные знаки — декоративный слой поверх секции: они по замыслу шире
   контента и не должны добавлять странице горизонтальную прокрутку. */
.hero,
.page-intro,
.about-hero,
.help-hero,
.sd-hero,
.bs-hero,
.legal-hero,
.rg-section,
.explore { overflow-x: clip; }