/* ═══════════════════════════════════════════════
   REALTRAC PUBLIC — LAYOUT
   Версия: 1.2.0
   1.2.0: шапка на узких экранах (скриншоты владельца 2026-10-18): до 1280px телефон — кнопка со значком
   (номер скрыт, ссылка tel: и подмена Roistat остаются), у вошедшего пользователя только аватар; до 1100px —
   плотнее отступы; 901–1000px — пункты меню без стрелок, «Вход» без подписи; до 480px — логотип и кнопки
   компактнее, до 340px без кнопки темы. Раньше меню, номер и e-mail не помещались и выходили за край экрана
   (пустая полоса справа), на 375px номер налезал на логотип: правило .topbar-phone .tel-roistat не скрывало
   номер с классом tel-roistat-spb (1.1.5). Закрытые выпадающие списки последних пунктов меню выходили за правый
   край и растягивали страницу на 1024–1200px — шапка на десктопе обрезает выход по горизонтали (overflow-x: clip,
   без своей прокрутки: sticky и раскрытие вниз работают), список не шире окна; подгонка — site.js 1.2.3.
   1.1.9: комментарий к подложке: .menu-overlay и #topbarMenu должны лежать внутри .site-header
   (её контекст наложения, z-index 200); подложка на уровне body перекрывала панель (header.php 1.2.2).
   1.1.8: выдвижное меню приведено к виду sidebar кабинета (скриншоты владельца 2026-10-11):
   общая ширина --drawer-w 280px, блок логотипа 80px с логотипом в натуральную величину
   и защитной областью 20px, кнопка закрытия без рамки, пункты первого уровня весом 500.
   1.1.7: мобильное меню (до 900px) выдвигается слева панелью с подложкой, как sidebar кабинета
   (правка владельца 2026-10-11), вместо раскрытия вниз под шапкой; шапка панели с логотипом
   и кнопкой закрытия; логотип в мобильной шапке 40px высотой с защитной областью 12px сверху
   и снизу и 16px по бокам.
   App shell (grid: шапка на всю ширину, под ней sidebar и контент),
   шапка с логотипом и мегаменю, sidebar с якорями страницы
   (раскрывается только кнопкой со стрелкой внизу),
   окно поиска, шапка страницы, page-content, футер, адаптив.
   Единый мобильный брейкпоинт — 900px.
═══════════════════════════════════════════════ */

/* ── APP SHELL ── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  min-height: 100dvh;
}
html[data-sidebar="expanded"] .app-shell {
  grid-template-columns: var(--sidebar-w-expanded) minmax(0, 1fr);
}
.main-area { grid-column: 2; grid-row: 2; min-width: 0; display: flex; flex-direction: column; }

/* ── SITE HEADER: логотип + topbar ── */
.site-header {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  height: var(--topbar-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Логотип в натуральную величину с защитной областью, как в кабинете */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 var(--space-5);
  border-right: 1px solid var(--color-divider);
}
.logo-link { display: flex; align-items: center; }
.logo-img { width: 143px; height: 50px; max-width: none; }

.topbar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-3);
}
.hamburger-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  align-self: center;
  margin-left: var(--space-3);
  color: var(--color-text-muted);
}
.hamburger-btn svg, .hamburger-btn i { width: 20px; height: 20px; }
.hamburger-btn:hover { background: var(--color-primary-highlight); color: var(--color-primary); }

/* ── TOP MENU ── */
.topbar-menu { display: flex; align-items: center; gap: var(--space-1); flex: 1; min-width: 0; }
.mobile-anchors { display: none; }
/* Шапка выдвижной панели и подложка существуют только в мобильном меню */
.mobile-menu-head { display: none; }
.menu-overlay { display: none; }

.menu-wrap { position: relative; }
.menu-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  border-radius: var(--radius);
}
.menu-trigger svg, .menu-trigger i { width: 14px; height: 14px; transition: transform var(--transition); }
.menu-trigger:hover,
.menu-trigger.is-selected,
.menu-wrap.is-open .menu-trigger { background: var(--color-primary-highlight); color: var(--color-primary); }
.menu-wrap.is-open .menu-trigger svg { transform: rotate(180deg); }

.mega-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 300px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  z-index: 300;
  padding: var(--space-3) 0;
  display: flex; flex-direction: row; align-items: flex-start;
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), visibility 0s 160ms;
}
.menu-wrap.is-open .mega-dropdown {
  visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0);
  transition: opacity var(--transition), transform var(--transition), visibility 0s 0s;
}
/* Список не влезает справа — прижимается к правому краю кнопки (site.js) */
.mega-dropdown.is-right { left: auto; right: 0; }
/* Столбцы: группы между разделителями разложены шаблоном, без прокрутки */
.mega-col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.mega-dropdown[data-cols="2"] { min-width: 600px; }
.mega-dropdown[data-cols="3"] { min-width: 880px; }
.mega-col + .mega-col { border-left: 1px solid var(--color-divider); }
.mega-group-title { font-size: var(--text-xs); font-weight: 700; color: var(--color-text); padding: var(--space-2) var(--space-4) 4px; }
.mega-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-4) - 3px);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  border-left: 3px solid transparent; /* полоса текущего пункта, как .nav-item.active в кабинете */
}
.mega-item svg, .mega-item i { width: 16px; height: 16px; flex-shrink: 0; }
.mega-item:hover, .mega-item.is-active { background: var(--color-primary-highlight); color: var(--color-primary); }
.mega-item.is-active { font-weight: 600; border-left-color: var(--color-primary); }
/* Третий уровень: подпункт под своим пунктом, без иконки, с отступом на её ширину */
.mega-subitem {
  display: block;
  padding: 6px var(--space-4) 6px calc(var(--space-4) + 25px);
  font-size: var(--text-xs); color: var(--color-text-faint);
  border-left: 3px solid transparent;
}
.mega-subitem:hover, .mega-subitem.is-active { background: var(--color-primary-highlight); color: var(--color-primary); }
.mega-subitem.is-active { font-weight: 600; border-left-color: var(--color-primary); }
.mega-divider { height: 1px; background: var(--color-divider); margin: var(--space-2) 0; }

.topbar-actions { display: flex; align-items: center; gap: var(--space-3); justify-content: flex-end; flex-shrink: 0; }

/* Телефон в шапке; номер внутри .tel-roistat подменяется колл-трекингом Roistat */
.topbar-phone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-3);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
  white-space: nowrap;
}
.topbar-phone svg, .topbar-phone i { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
.topbar-phone:hover { background: var(--color-primary-highlight); color: var(--color-primary); }

/* ── SIDEBAR: якоря страницы ── */
.sidebar {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  width: var(--sidebar-w-collapsed);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: 150;
  transition: width var(--transition), box-shadow var(--transition);
}
/* Раскрытие только кнопкой со стрелкой внизу (html[data-sidebar]); по наведению не раскрывается */
html[data-sidebar="expanded"] .sidebar { width: var(--sidebar-w-expanded); }

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  border-left: 3px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.nav-item svg, .nav-item i { width: 20px; height: 20px; flex-shrink: 0; }
.nav-text { display: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

html[data-sidebar="expanded"] .nav-item { justify-content: flex-start; padding-left: 12px; }
html[data-sidebar="expanded"] .nav-text { display: inline; }

.nav-item:hover, .nav-item.active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}
.nav-item.active { font-weight: 600; }

.sidebar-footer {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
  flex-shrink: 0;
}
.sidebar-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 40px;
  color: var(--color-text-faint);
}
.sidebar-toggle svg, .sidebar-toggle i { width: 18px; height: 18px; transition: transform var(--transition); }
.sidebar-toggle:hover { background: var(--color-primary-highlight); color: var(--color-primary); }
html[data-sidebar="expanded"] .sidebar-toggle svg { transform: rotate(180deg); }

/* ── SEARCH MODAL ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,15,25,.6);
  z-index: 400;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh var(--space-4) 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms ease, visibility 0s 200ms;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 200ms ease, visibility 0s 0s; }
.search-modal {
  width: 100%; max-width: 640px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-12px);
  transition: transform 200ms ease;
}
.modal-overlay.is-open .search-modal { transform: translateY(0); }
.search-modal-input {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.search-modal-input > svg, .search-modal-input > i { width: 20px; height: 20px; color: var(--color-text-faint); flex-shrink: 0; }
.search-modal-input input {
  flex: 1; min-width: 0; border: none; outline: none;
  font-size: var(--text-lg); font-family: var(--font-body);
  color: var(--color-text); background: none;
}
.search-modal-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); flex-shrink: 0; }
.search-modal-close svg, .search-modal-close i { width: 18px; height: 18px; }
.search-modal-close:hover { color: var(--color-primary); }
.search-modal-hint { padding: var(--space-4) var(--space-5); font-size: var(--text-xs); color: var(--color-text-faint); }

/* ── PAGE CONTENT ── */
.page-content { flex: 1; width: 100%; display: flex; flex-direction: column; min-width: 0; }
.page-content h2[id], .page-content h3[id] { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
/* Контент внутренних страниц на всю ширину области; ограничение ширины текста — задача
   контентной сетки (этап 4), а не обёртки */
.page-body { padding: var(--space-6) var(--space-8) var(--space-10); width: 100%; }
.page-head { margin-bottom: var(--space-6); }
.page-head h1 { margin: var(--space-2) 0 0; }

/* Специфичность с .page-content, иначе общие правила контентных ol / li сдвигают крошки */
.page-content .breadcrumbs-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--text-xs); line-height: 1.4; color: var(--color-text-faint);
}
.page-content .breadcrumbs-item { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.page-content .breadcrumbs-item + .breadcrumbs-item::before { content: '/'; color: var(--color-text-faint); }
.page-content .breadcrumbs-item a { color: var(--color-text-muted); }
.page-content .breadcrumbs-item a:hover { color: var(--color-primary); }
.page-content .breadcrumbs-current { color: var(--color-text-faint); }

/* ── FOOTER ── */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  font-size: var(--text-sm);
  margin-top: auto;
}
.site-footer a { color: var(--color-footer-text); }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
  padding: var(--space-10) var(--space-8);
}
.footer-grid + .footer-grid { border-top: 1px solid var(--color-footer-divider); padding-top: var(--space-8); }
.footer-col p { margin-bottom: var(--space-3); }
.footer-col hr { border: 0; border-top: 1px solid var(--color-footer-divider); margin: var(--space-3) 0; }
.footer-col .h4, .footer-heading {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: .04em;
  color: #fff;
  margin-bottom: var(--space-3);
}
.footer-col address { font-style: normal; }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social img { opacity: .85; }
.footer-social a:hover img { opacity: 1; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid var(--color-footer-divider);
  color: var(--color-footer-muted);
  font-size: var(--text-xs);
}
.footer-bottom p { margin: 0; }
.footer-logos { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.footer-logo { display: inline-block; max-height: 70px; width: auto; }
.footer-note { width: 100%; color: var(--color-footer-muted); font-size: var(--text-xs); }

/* ── BITRIX EDIT PANEL ── */
#bx-panel { z-index: 9999 !important; }

/* ── RESPONSIVE MOBILE — единый брейкпоинт 900px ── */
/* ── Шапка на узких экранах (1.2.0) ── */
@media (min-width: 901px) {
  .site-header { overflow-x: clip; }
  .mega-dropdown { max-width: calc(100vw - 16px); }
}
@media (max-width: 1280px) {
  .topbar-phone {
    width: 36px; height: 36px; padding: 0; justify-content: center;
    border: 1px solid var(--color-border); color: var(--color-text-muted);
  }
  .topbar-phone > span { display: none; }  /* номер: .tel-roistat / .tel-roistat-spb */
  .topbar-actions .user-chip-name, .topbar-actions .user-chip-chevron { display: none; }
}
@media (max-width: 1100px) {
  .topbar { padding: 0 var(--space-4); }
  .menu-trigger { padding: var(--space-2) var(--space-3); }
  .topbar-actions { gap: var(--space-2); }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .menu-trigger svg, .menu-trigger i { display: none; }
  .menu-trigger { padding: var(--space-2); }
  .topbar-actions .login-chip-label { display: none; }
}

@media (max-width: 900px) {
  :root {
    --topbar-h: 64px;
    --drawer-w: min(280px, 86vw);   /* ширина выдвижного меню, та же у sidebar кабинета */
  }

  .app-shell { display: flex; flex-direction: column; }
  .sidebar { display: none; }
  .main-area { flex: 1; }

  .site-header { position: sticky; }
  .hamburger-btn { display: flex; margin-left: var(--space-2); }
  /* Логотип в мобильной шапке: 40px высотой (114px шириной), защитная область 12px сверху
     и снизу внутри 64px шапки и 16px справа; слева от него кнопка меню */
  .site-logo { padding: 0 var(--space-4) 0 var(--space-2); border-right: none; }
  .logo-img { width: auto; height: 40px; }
  .topbar { padding: 0 var(--space-3) 0 0; justify-content: flex-end; }

  /* Мобильное меню — выдвижная панель слева с подложкой, как sidebar кабинета
     (realtrac_partner: .sidebar.open + .sidebar-overlay.open). Подложка и панель лежат внутри
     .site-header (sticky, z-index 200 — свой контекст наложения): панель z 260 выше подложки
     z 250, подложка выше остального содержимого шапки и всей страницы. Подложку нельзя выносить
     на уровень body — там она ляжет поверх всей шапки вместе с панелью. Прокрутка страницы на
     время открытия блокируется классом html.rt-menu-open (site.js). */
  .menu-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 250;
    opacity: 0; pointer-events: none;
    transition: opacity 240ms ease;
  }
  .menu-overlay.is-open { opacity: 1; pointer-events: auto; }
  html.rt-menu-open { overflow: hidden; }

  .topbar-menu {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--drawer-w);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 var(--space-4);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 240ms ease, visibility 0s 240ms;
    z-index: 260;
  }
  .topbar-menu.is-open { transform: translateX(0); visibility: visible; transition: transform 240ms ease, visibility 0s 0s; }

  /* Шапка панели — как .sidebar-logo кабинета: 80px, логотип 143×50 в натуральную величину,
     защитная область 20px слева; справа кнопка закрытия без рамки */
  .mobile-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    height: 80px;
    padding: 0 var(--space-3) 0 var(--space-5);
    border-bottom: 1px solid var(--color-divider);
    flex-shrink: 0;
    margin-bottom: var(--space-2);
  }
  .mobile-menu-head .logo-img { width: 143px; height: 50px; }
  .mobile-menu-close { border: none; }
  .menu-wrap { width: 100%; }
  /* Пункты первого уровня — как .nav-item кабинета: вес 500, приглушённый цвет */
  .menu-trigger { width: 100%; justify-content: space-between; padding: var(--space-3) var(--space-5); font-weight: 500; color: var(--color-text-muted); }
  .mega-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--color-divider);
    min-width: 0;
    flex-direction: column;
    visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    transition: none;
    display: none;
  }
  .mega-dropdown.is-right { left: auto; right: auto; }
  .mega-dropdown[data-cols="2"], .mega-dropdown[data-cols="3"] { min-width: 0; }
  .mega-col + .mega-col { border-left: none; border-top: 1px solid var(--color-divider); }
  .menu-wrap.is-open .mega-dropdown { display: flex; }

  .mobile-anchors { display: block; border-top: 1px solid var(--color-divider); padding-top: var(--space-2); }
  .mobile-anchors .nav-label {
    display: block; padding: var(--space-2) var(--space-5);
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-text-faint);
  }
  .mobile-anchors .nav-item { justify-content: flex-start; padding: 0 var(--space-5); min-height: 40px; font-size: var(--text-sm); }
  .mobile-anchors .nav-text { display: inline; }

  .topbar-actions { gap: var(--space-2); }

  .page-body { padding: var(--space-4) var(--space-4) var(--space-8); }
  .hero { padding: var(--space-8) var(--space-4); }
  .section { padding: var(--space-8) var(--space-4); }
  .footer-grid { padding: var(--space-8) var(--space-4); gap: var(--space-6); }
  .footer-bottom { padding: var(--space-5) var(--space-4); }
}

@media (max-width: 480px) {
  .site-logo { padding-right: var(--space-2); }
  .logo-img { height: 34px; }
  .topbar { padding-right: var(--space-2); }
  .topbar-actions { gap: var(--space-1); }
  .topbar-actions .icon-btn, .topbar-phone { width: 34px; height: 34px; }
}
@media (max-width: 340px) {
  #themeToggle { display: none; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .topbar-menu, .menu-overlay { transition: none; }
}