/* Шапка сайта «h3» (макет docs/design/src/h3.html): логотип-слоган по центру, контур города, меню разделов отдельной строкой.
   Разметка — partials/site-header/header.html (вписывает tools/sync-site-header.py). Цвет — var(--accent) из css/styles.css. */
.site-hd {
  --h-ink: #1b2430; --h-muted: #5f6b7a; --h-line: #e6eaef;
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--h-line);
  color: var(--h-ink);
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
.site-hd *, .site-hd *::before, .site-hd *::after { box-sizing: border-box; }
.site-hd a { color: inherit; text-decoration: none; }
.site-hd .wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

.site-hd .band { position: relative; padding: 26px 16px 8px; text-align: center; }
.site-hd .brand { display: block; font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--h-ink); }
.site-hd .brand b { color: var(--accent, #1c3d78); font-weight: 700; }
.site-hd .brand .g { color: #6b7686; font-weight: 600; font-style: normal; }
.site-hd .mbr { display: none; }

.site-hd .sky { height: 64px; color: var(--accent, #1c3d78); margin-top: 6px; opacity: .9; }
.site-hd .sky svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.site-hd .menu { border-top: 1px solid var(--h-line); }
.site-hd .menu .wrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; height: 48px; overflow-x: auto; scrollbar-width: none; }
.site-hd .menu .wrap::-webkit-scrollbar { display: none; }
.site-hd .menu a { font-size: 15px; white-space: nowrap; flex: none; }
.site-hd .menu a:hover, .site-hd .menu a.nav-active { color: var(--accent, #1c3d78); }
.site-hd .menu a.nav-active { font-weight: 600; }
.site-hd .menu a[hidden] { display: none; }
/* «скоро» (слово владельца 01.11): не ссылка — span, не нажимается, курсор обычный */
.site-hd .menu span.soon { font-size: 15px; white-space: nowrap; flex: none; cursor: default; user-select: none; }
.site-hd .menu .soon small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--h-muted); border: 1px solid var(--h-line); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }

/* «Войти» — одна кнопка (на ней держится окно входа): справа в строке меню, на телефоне — сверху справа */
.site-hd .login { display: inline-block; min-width: 0; font: 400 14px/1.4 "Outfit", "Segoe UI", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--h-ink); border: 1px solid var(--h-ink); border-radius: 999px; padding: 5px 16px; background: #fff; }
.site-hd .login::before { content: none; }
.site-hd .menu .login { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); margin: 0; }
.site-hd .menu .login:hover { color: var(--accent, #1c3d78); border-color: var(--accent, #1c3d78); }

@media (max-width: 1000px) and (min-width: 701px) {
  .site-hd .brand { font-size: 26px; }
  .site-hd .menu .wrap { justify-content: flex-start; padding-right: 110px; }
}
@media (max-width: 700px) {
  .site-hd .band { padding: 10px 16px 6px; text-align: left; }
  .site-hd .brand { font-size: 18px; line-height: 1.25; }
  .site-hd .mbr { display: inline; }
  .site-hd .sky { height: 40px; }
  .site-hd .menu .wrap { position: static; justify-content: flex-start; gap: 20px; height: 44px; }
  .site-hd .menu .login { position: absolute; right: 16px; top: 10px; transform: none; font-size: 13px; padding: 4px 12px; }
}

@media (max-width: 360px) { .site-hd .brand { font-size: 16px; } }

/* Строка поиска страницы «Большой выбор» под шапкой */
.site-chrome--dock .site-chrome__search { padding: 10px 16px 12px; border-bottom: 1px solid #e6eaef; background: #fff; }
@media (max-width: 900px) { .site-chrome--dock .site-chrome__search { padding: 8px 16px 10px; } }

/* Плашка тестового режима (app/sitedata/test_mode.py, js/test-mode.js): неброская, в потоке страницы над шапкой —
   не поверх контента, без «закрыть»; длинный текст переносится (на телефоне нет прокрутки вбок). */
.tm-bar { background: #f4f6f9; color: #4a5565; border-bottom: 1px solid #e6eaef; font-family: "Outfit", "Segoe UI", system-ui, sans-serif; font-size: 13px; line-height: 1.45; }
.tm-bar[hidden], html[data-tm="off"] .tm-bar { display: none !important; }
.tm-bar__in { max-width: 1240px; margin: 0 auto; padding: 6px 16px; text-align: center; overflow-wrap: anywhere; }
.tm-bar__more { color: var(--accent, #1c3d78); text-decoration: underline; white-space: nowrap; }
@media (max-width: 480px) { .tm-bar { font-size: 12px; } .tm-bar__in { text-align: left; } }
/* Видно только в тестовом режиме / только вне его (кнопка «Следить за машиной» вместо заявки и т. п.) */
html[data-tm="off"] .tm-on-only { display: none !important; }
html:not([data-tm="off"]) .tm-off-only { display: none !important; }