/* Боковое меню и бургер (разметка — base.html, поведение — nav.js).
   Цвета — только переменные из app.css: их меняет фирменный стиль.
   С JS (класс nav-js на <html> ставит строка в base.html до отрисовки): группы раскрываются шевроном,
   бургер прячет меню на компьютере (nav-collapsed) и открывает его поверх страницы на телефоне.
   Без JS: на компьютере меню раскрыто целиком, на телефоне открывается кнопкой «Меню» (чекбокс #nav-toggle). */

/* ---------- Кнопки в шапке ---------- */

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; cursor: pointer; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.nav-toggle:focus-visible + .topbar .nav-button { outline: 2px solid var(--accent); }

.burger {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -.25rem -.25rem -.25rem -.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-js .burger { display: inline-flex; }
@media (hover: hover) {
  .burger:hover { background: var(--bg); }
}
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.burger svg { width: 22px; height: 22px; }

/* ---------- Колонка меню ---------- */

/* Белая колонка меню — на всю высоту страницы, даже когда само меню (sticky) короче контента. */
.layout:not(.layout-plain) {
  background: linear-gradient(to right, var(--surface) calc(var(--sidebar) - 1px),
                              var(--line) calc(var(--sidebar) - 1px) var(--sidebar), transparent var(--sidebar));
}
.sidebar {
  position: sticky;
  top: 52px;
  flex: 0 0 var(--sidebar);
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem .75rem;
  background: var(--surface);
  border-right: 1px solid var(--line);
  align-self: stretch;
}
.nav-backdrop { display: none; }

.nav-section + .nav-section { margin-top: 1rem; }
.nav-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 .5rem .25rem; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }

/* Строка пункта: ссылка на страницу + шеврон, если есть подпункты. */
.nav-row { display: flex; align-items: flex-start; gap: .125rem; }
.nav-link {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: .4rem .5rem;
  border-radius: 6px;
  color: var(--text);
  line-height: 1.3;
  text-decoration: none;
}
.nav-link:hover { background: var(--bg); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-link.inside { color: var(--accent); font-weight: 600; }  /* раздел, внутри которого текущая страница */
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.nav-chevron {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.nav-js .nav-chevron { display: inline-flex; }
@media (hover: hover) {
  .nav-chevron:hover { background: var(--bg); color: var(--text); }
}
.nav-chevron:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-chevron svg { width: 16px; height: 16px; transition: transform .15s ease; }
.nav-chevron[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Подпункты: ступенька с тонкой линией слева. */
.sidebar .nav-sub { margin: .1rem 0 .3rem .7rem; padding-left: .4rem; border-left: 1px solid var(--line); }
.nav-sub .nav-link { padding: .3rem .5rem; font-size: .92rem; }
.nav-sub .nav-chevron { width: 26px; height: 26px; }
/* Без JS шевронов нет — все подпункты видны сразу. */
html:not(.nav-js) .nav-sub[hidden] { display: block; }

@media (prefers-reduced-motion: reduce) {
  .nav-chevron svg { transition: none; }
}

/* ---------- Компьютер: бургер сворачивает меню, контент — на всю ширину ---------- */

@media (min-width: 801px) {
  .nav-collapsed .sidebar { display: none; }
  .nav-collapsed .layout:not(.layout-plain) { background: none; }
}

/* ---------- Телефон: меню выезжает слева поверх страницы ---------- */

@media (max-width: 800px) {
  .nav-button { display: inline-block; }
  .nav-js .nav-button { display: none; }
  .layout:not(.layout-plain) { background: none; }
  .sidebar {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    z-index: 9;
    width: min(320px, 88vw);
    max-height: none;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 25%, transparent);
  }
  .nav-toggle:checked ~ .layout .sidebar { display: block; }
  .nav-backdrop {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    background: color-mix(in srgb, var(--text) 40%, transparent);
    cursor: pointer;
  }
  .nav-toggle:checked ~ .layout .nav-backdrop { display: block; }
  html:has(.nav-toggle:checked) { overflow: hidden; }  /* страница под открытым меню не прокручивается */
  .nav-link { padding: .55rem .6rem; }
  .nav-sub .nav-link { padding: .45rem .6rem; }
  .nav-chevron, .nav-sub .nav-chevron { width: 40px; height: 40px; margin-top: 0; }
}

@media (max-width: 480px) {
  .nav-button { padding: .35rem .6rem; }
}

@media print {
  .burger, .nav-button, .sidebar, .nav-backdrop { display: none !important; }
  .layout:not(.layout-plain) { background: none; }
}