/* Дизайн-система 72dom.life — общий слой ВСЕХ публичных страниц
   (витрина, сервисные, каталог /kvartiry/). Подключается после main.css,
   до странично-специфичных css. Док: docs/plans/Дизайн-система 72dom.life.md
   Направление: «тёплая готовая квартира после Севера» (04.07, /frontend-design). */

:root {
  /* --v-* — алиасы на канон main.css (равные значения, no-op) */
  --v-paper: var(--paper);   /* тёплая бумага — фон страниц */
  --v-ink: var(--ink);       /* тёплый чернильный — текст */
  --v-night: var(--night);   /* тёплый тёмный — оверлеи, таблички, тёмные секции */
  --v-night-2: var(--night-2);
  --v-line: var(--line);     /* линии и границы */
  --v-muted: var(--muted);   /* вторичный текст */
  /* --r-card/-btn/-plate убраны (R-195): дублировали канон main.css литералами (дрейф-риск);
     наследуются из main, который грузится раньше site.css на всех .site-head страницах. */
  --font-v: var(--font);
}

body {
  font-family: var(--font-v);
  background: var(--v-paper);
  color: var(--v-ink);
}

h1, h2, h3 { font-family: var(--font-v); letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 6.5vw, 3.3rem); font-weight: 800; line-height: 1.08; }
h2 { font-size: clamp(1.45rem, 4vw, 2.1rem); font-weight: 700; line-height: 1.15; margin: 0 0 1.1rem; }

.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--space-2);
}

/* ── Сквозная шапка ── */
.site-head { background: #fff; border-bottom: 1px solid var(--v-line); position: sticky; top: 0; z-index: 40; }
.site-head__row { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3) .15rem; }
.site-head__row .topbar__logo { font-size: 1.25rem; font-weight: 800; }
.site-head__row .topbar__phone { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* R-207: рядом с бургером номер ломался на 2 строки */
@media (max-width: 400px) { .site-head__row .topbar__phone { font-size: var(--text-caption); } }
/* Замер 07.09: на 360 ряд шапки требует 366 px при доступных 328 — лого 157 + телефон 149
   + бургер 44 + гэпы. Документ получал горизонтальный скролл, а бургер уезжал за край
   (тот же дефект, что при увеличенном системном шрифте). Логотип на узких — сжимаем. */
@media (max-width: 420px) {
  .site-head__row { gap: var(--space-2); }
  .site-head__row .topbar__logo { flex: 0 1 auto; min-width: 0; }
  .site-head__row .topbar__logo img { width: 104px; max-width: 100%; height: auto; }
}
.site-nav {
  display: flex; gap: 1.35rem;
  overflow-x: auto;
  padding-block: var(--space-1) var(--space-3);
  scrollbar-width: none;
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav::-webkit-scrollbar { display: none; }
/* мобайл: 7 пунктов не влезают → горизонтальный скролл. Правый фейд-намёк «есть ещё»,
   иначе последний пункт обрезался без сигнала прокрутки (70% трафика — мобайл). */
@media (max-width: 700px) {
  .site-nav {
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
    mask-image: linear-gradient(to right, #000 90%, transparent);
  }
}
/* Бургер <560px (R-207): 7 пунктов резались в скролл-ленте без сигнала. nav.js вешает
   .has-burger - без JS остаётся скролл-фолбэк с фейдом выше. */
.site-nav-toggle { display: none; }
@media (max-width: 560px) {
  .site-head.has-burger .site-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; border: 1px solid var(--c-line); background: var(--card); color: var(--v-ink); border-radius: var(--r-btn); cursor: pointer; padding: 0; flex: none; }
  .site-nav-toggle svg { width: 20px; height: 20px; }
  .site-nav-toggle[aria-expanded="true"] { border-color: var(--c-accent); color: var(--c-accent); }
  .site-head.has-burger .site-nav { display: none; -webkit-mask-image: none; mask-image: none; }
  .site-head.has-burger .site-nav.open { display: flex; flex-direction: column; gap: 0; white-space: normal; padding-block: 0 var(--space-2); }
  /* R-218 E5: раскрытие бургера - fade+сдвиг вместо мгновенного display:flex */
  @media (prefers-reduced-motion: no-preference) {
    .site-head.has-burger .site-nav.open { animation: nav-in .2s ease-out; }
  }
  .site-head.has-burger .site-nav.open a { display: flex; align-items: center; min-height: 44px; padding-block: var(--space-2); border-bottom: 1px solid var(--c-line); }
  .site-head.has-burger .site-nav.open a:last-child { border-bottom: 0; }
  .site-head.has-burger .site-nav.open a[aria-current="page"] { color: var(--c-accent); border-bottom-color: var(--c-line); }
}
/* ── Десктоп ≥1200px: шапка ОДНОЙ строкой - логотип · навигация · телефон · CTA
   (фикс «разъезда» 21.07: на ПК двухэтажная шапка читалась развалившейся - навигация
   сиротой под логотипом, справа воздух). display:contents вливает детей __row в общий
   флекс с .site-nav; порядок задаёт order. Ниже 1200px - прежние две строки. ── */
@media (min-width: 1360px) {
  /* контейнер шапки шире контентного (1360 > 1200): 7 пунктов + телефон + CTA в одну
     строку в 1200 не помещаются физически (замер: не хватало 116px) */
  .site-head > .wrap { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-3); max-width: 1360px; }
  .site-head__row { display: contents; }
  .site-head__row .topbar__logo { order: 0; flex: none; }
  .site-nav { order: 1; flex: 1; min-width: 0; padding-block: 0; font-size: .88rem; gap: 1rem; }
  .site-head__row .topbar__phone { order: 2; flex: none; font-size: .95rem; }
  .site-head .btn--nav { order: 3; flex: none; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-4px); } }
.site-nav a { color: var(--v-ink); text-decoration: none; padding-block: .1rem; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--c-accent); }
.site-nav a[aria-current="page"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.site-nav a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.site-head .btn--nav { padding: var(--space-2) var(--space-4); font-size: .9rem; }
@media (max-width: 560px) { .site-head .btn--nav { display: none; } }