/* Шапка сайта (новая витрина, часть 1; спецификация 03; Р22, Р25, Р34, Р37) — по эталону
   docs/design/reference/layout.css. Первая строка на каждой странице: ☰ · логотип по центру экрана ·
   профиль. Размеры — только токены, цвета — только роли темы (сторожа те же, что у components.css). */

.site-header { background: var(--page); border-bottom: 1px solid var(--border); }
.header-row1 {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3);
  width: 100%; height: var(--header-row1); max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
  background: var(--page);
}
#burger { justify-self: start; }
#profile { justify-self: end; }
/* ☰ без разделов прячется, а место остаётся: логотип стоит по центру экрана, а не между кнопками. */
#burger[hidden] { display: inline-flex; visibility: hidden; }

/* Логотип сайта — ссылка на главную (Р34); нет своего знака — имя сайта текстом, до двух строк. */
.logo {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  max-width: var(--logo-box-w); height: var(--logo-box-h); color: var(--ink); text-decoration: none;
}
.logo__img { height: var(--logo-box-h); width: auto; max-width: var(--logo-box-w); object-fit: contain; }
.logo__img[hidden], .logo__name[hidden] { display: none; }
.logo__name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  max-height: var(--logo-box-h); text-align: center; overflow-wrap: anywhere;
  font-family: var(--font-title); font-size: var(--text-md); font-weight: var(--weight-medium);
  line-height: var(--leading-title); letter-spacing: 0.02em;
}
/* Крупнее — там, где коробка знака выше (от 1100: 56 против 40): две строки имени помещаются целиком. */
@media (min-width: 1100px) {
  .logo__name { font-size: var(--title-sm); }
}

/* ── Вторая строка — только на странице меню: заведение · способ · кошелёк (Р22, Р28, Р68) ─────────────── */
:root { --context-w: calc(var(--space-8) * 3 + var(--space-5)); }
@media (min-width: 1100px) { :root { --context-w: calc(var(--space-8) * 4 + var(--space-2)); } }
.context-row {
  display: grid; grid-template-columns: var(--context-w) minmax(0, 1fr) var(--context-w); align-items: center;
  gap: var(--space-4); width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) var(--space-4);
  background: var(--page); font-family: var(--font-text); font-size: var(--text-md); color: var(--ink);
}
.context-row--two { grid-template-columns: var(--context-w) minmax(0, 1fr); }
.scenario { display: grid; gap: var(--space-1); min-width: 0; }
.scenario .segments { display: flex; width: 100%; overflow: hidden; }
.scenario .segments__item { flex: 1 1 auto; padding: 0 var(--space-3); }
.scenario__single { display: flex; align-items: center; min-height: var(--control-lg); font-weight: var(--weight-semibold); }
.scenario__select { display: none; justify-content: flex-start; width: 100%; border-color: var(--border); }
.scenario__select > span { flex: 1; text-align: left; }
.scenario__select svg { width: var(--icon-md); height: var(--icon-md); color: var(--gold); flex: none; }
.scenario--compact .segments { display: none; }
.scenario--compact .scenario__select { display: inline-flex; }
.scenario__context {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--space-5);
  color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-title);
}
.scenario__context svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; color: var(--gold); }

@media (min-width: 768px) {
  /* Р28: вкладки способа — вровень с верхом карточек, строка под ними — вровень с низом. */
  .scenario { height: var(--context-card-h); align-content: space-between; gap: 0; }
  .scenario__context { min-height: 0; }
}
@media (max-width: 767px) {
  .context-row { grid-template-columns: 1fr 1fr; gap: var(--space-3); padding-top: var(--space-3); border-bottom: 1px solid var(--border); }
  #venue { grid-column: 1; grid-row: 1; }
  #wallet { grid-column: 2; grid-row: 1; }
  .context-row--two #venue { grid-column: 1 / -1; }
  .scenario { grid-column: 1 / -1; grid-row: 2; }
  .scenario .segments { display: none; }
  .scenario__select { display: inline-flex; }
  /* Узкие карточки (как у эталона): поля меньше, стрелки нет, знак меньше — место тексту. */
  .context-card { padding: 0 var(--space-3); gap: var(--space-2); }
  .context-card__chevron { display: none; }
  .context-card__logo { width: var(--control-sm); height: var(--control-sm); }
}

/* Высота липкой части шапки — для всего, что липнет под ней (лента категорий меню, полоса «Назад»
   кабинета) и для прокрутки к разделу: меряет `header.js`, умолчание — первая строка. */
:root { --header-h: var(--header-row1); }
html { scroll-padding-top: var(--header-h); }

/* Липкость (Р25): на ПК липнет вся шапка, на телефоне — первая строка; высота строки не меняется (Р37). */
@media (min-width: 768px) {
  .site-header { position: sticky; top: 0; z-index: var(--z-header); }
}
@media (max-width: 767px) {
  .site-header { display: contents; }
  .header-row1 { position: sticky; top: 0; z-index: var(--z-header); border-bottom: 1px solid var(--border); }
}