/* chrome.css - шапка, меню, шторка на телефоне, хлебные крошки, подвал.
   Шапка и шторка читают один реестр навигации: второго списка ссылок в проекте нет. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--role-header-bg);
  border-bottom: var(--border-w) solid var(--role-border);
}

/* У предка липкой шапки не должно быть transform, filter, backdrop-filter или
   will-change: любое из них создаёт новый содержащий блок, и шапка уезжает при
   прокрутке, хотя в стилях всё выглядит правильно. */

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 60px;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

/* ЛОГОТИП. Ширина задана в пикселях, а высота считается из viewBox: так шапка не
   меняет высоту, пока грузится шрифт, и не прыгает на первой отрисовке. */
.brandmark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: auto;
  min-height: 44px;
  text-decoration: none;
}
.brandmark .art--logo {
  display: block;
  width: 118px;
  height: auto;
}
.brandmark:hover .art--logo { opacity: 0.86; }

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА. Стоит в шапке на всех шириных, включая телефон: язык это
   не настройка второго ряда, за ним лезут сразу. */
.lang-switch {
  display: flex;
  flex: 0 0 auto;
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--role-surface);
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 var(--sp-1);
  color: var(--role-text);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.lang-switch__item + .lang-switch__item { border-left: 2px solid var(--role-surface-2); }
.lang-switch__item:hover { background: var(--role-surface-2); color: var(--role-text); }
.lang-switch__item[aria-current="true"] {
  background: var(--role-mark);
  color: var(--role-mark-text);
}

.nav-desktop { display: none; }

.site-header__cta { display: none; white-space: nowrap; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0;
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__box { display: block; width: 22px; }
.nav-toggle__box span {
  display: block;
  height: 3px;
  margin: 4px 0;
  background: var(--role-text);
  border-radius: 2px;
}

/* Закрытая шторка убирается через hidden, то есть display:none.
   Спрятанная через visibility или transform панель продолжает занимать место за
   экраном и даёт горизонтальную прокрутку, невидимую ни глазу, ни скриншоту. */
.nav-backdrop[hidden], .nav-drawer[hidden] { display: none; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--role-backdrop);
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  width: min(320px, 88vw);
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--role-surface);
  border-left: var(--border-w) solid var(--role-border);
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.nav-drawer__title { font-weight: 900; font-size: var(--fs-lg); }
.nav-drawer__close {
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  background: var(--role-surface-2);
  color: var(--role-text);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-drawer__nav { display: flex; flex-direction: column; margin-bottom: var(--sp-4); }
.nav-drawer__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--sp-2) 0;
  color: var(--role-text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--role-surface-2);
}
.nav-drawer__link:hover { color: var(--role-link-hover); }
.nav-drawer__link[aria-current="page"] { color: var(--role-link); text-decoration: underline; }

.nav-drawer__lang { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.nav-drawer__lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  color: var(--role-text);
  font-weight: 800;
  text-decoration: none;
}
.nav-drawer__lang a[aria-current="true"] { background: var(--role-mark); color: var(--role-mark-text); }

body.is-locked { overflow: hidden; }

/* ХЛЕБНЫЕ КРОШКИ. Списком, а не строкой ссылок: схема BreadcrumbList обещает
   поисковику пункты, и они обязаны быть на странице видимыми. */
.crumbs { padding: var(--sp-4) 0 0; }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--role-text-muted);
}
.crumbs__item { margin: 0; }
.crumbs__item + .crumbs__item::before { content: "/"; margin-right: var(--sp-2); }

/* ПОДВАЛ */
.site-footer {
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0 calc(var(--sp-6) + env(safe-area-inset-bottom));
  background: var(--role-footer-bg);
  color: var(--role-footer-text);
  border-top: var(--border-w) solid var(--role-border);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.site-footer__col { display: flex; flex-direction: column; }
.site-footer__head {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--role-footer-muted);
}
.site-footer__col a {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--role-footer-text);
  font-weight: 600;
  text-decoration: none;
}
.site-footer__col a:hover { color: var(--role-mark); text-decoration: underline; }

.site-footer__note,
.site-footer__legal {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--role-footer-muted);
}
.site-footer__legal { margin-bottom: 0; }

@media (min-width: 480px) {
  .site-header__bar { gap: var(--sp-3); }
  .brandmark .art--logo { width: 152px; }
  .lang-switch__item { min-width: 44px; min-height: 42px; font-size: var(--fs-sm); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .site-header__cta { display: inline-flex; }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .brandmark { font-size: var(--fs-lg); }
}

@media (min-width: 1280px) {
  .nav-toggle { display: none; }
  .nav-desktop {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-3);
    margin-left: auto;
    margin-right: var(--sp-3);
  }
  .nav-desktop a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--role-header-text);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-decoration: none;
  }
  .nav-desktop a { white-space: nowrap; }
  .nav-desktop a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
  .nav-desktop a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }
}

/* ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ. Цель касания 44px, знак меняется по нажатому состоянию. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.theme-toggle__glyph {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--role-mark);
  border: 3px solid var(--role-text);
}
.theme-toggle[aria-pressed="true"] .theme-toggle__glyph {
  background: var(--role-surface);
  box-shadow: inset -6px -2px 0 var(--role-text);
}