/* TASK-1024 — the header submenu, variant A «Колонки» chosen by the owner 20.10 (INBOX #215; mock-up and spec
   docs/os/work/TASK-1018/preview.html, spec.md as refined after the choice, 5c8a62ff2). Each header item is a
   disclosure button (a link to its section page until submenu.js runs); its panel follows it in the DOM and spans the
   page under the sticky header (≥ 860 px): headed columns of links (up to four), a line, the section page. The side
   padding of the panel is the header's own rule, so its text starts at the logo's left edge. Only the item holding
   the current page is underlined; an open item is purple with a turned chevron. Below 860 px the same panel opens
   as an accordion inside «Menu», which then scrolls inside itself. Markup: tools/build_new.py nav_html; behaviour:
   submenu.js. Owner's tokens; #25213318 (shadow) and #fcfbfe (accordion) are the mock-up's. After header.css. */
.site-nav { gap: 22px; }
.nav-item { display: flex; align-items: stretch; }
.site-header .nav-top { gap: 5px; cursor: pointer; }
.nav-chev { width: 12px; height: 12px; flex: 0 0 auto; transition: transform 150ms; }
/* no script: the item is a plain link, nothing opens. TASK-1211: only without scripting — with it the arrow is drawn
   from the first paint, so the menu no longer widens by 5 arrows (85 px) when submenu.js (deferred) turns the links
   into buttons and every item jumped left on a computer */
@media (scripting: none) { a.nav-top .nav-chev { display: none; } }
.nav-top[aria-expanded=true] { color: var(--purple); }
.nav-top[aria-expanded=true] .nav-chev { transform: rotate(180deg); }
.nav-top.is-current { color: var(--purple); font-weight: 800; }
.nav-top.is-current::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--purple); }
.nav-panel { position: absolute; z-index: 1; top: 100%; left: 0; right: 0; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-menu); }
.nav-pin { padding: 22px max(26px, calc((100% - var(--page-width)) / 2)) 10px; }
.nav-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 34px; }
.nav-gh { margin: 0 0 6px; font-size: 12px; font-weight: 800; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav-col ul { list-style: none; margin: 0; padding: 0; }
.nav-sub { display: flex; align-items: center; min-height: 40px; padding: 4px 10px; margin: 0 -10px; border-radius: 8px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .nav-sub:hover { background: var(--purple-soft); color: var(--purple); } }
.nav-sub[aria-current=page], .nav-all[aria-current=page] { color: var(--purple); font-weight: 800; }
.nav-foot { margin: 10px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.nav-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--purple); font-size: 15px; font-weight: 800; text-decoration: none; }
.nav-all svg { width: 12px; height: 12px; flex: 0 0 auto; }
.nav-all:hover { text-decoration: underline; }
.nav-sub:focus-visible, .nav-all:focus-visible { outline-offset: -3px; box-shadow: none; }
@media (max-width: 859px) {
  /* the header is sticky: with a section open the menu is taller than the screen, so it scrolls inside itself */
  .nav-open .site-nav { max-height: calc(100vh - var(--hdr-row) - 1px); max-height: calc(100dvh - var(--hdr-row) - 1px); overflow-y: auto; overscroll-behavior: contain; flex-wrap: nowrap; justify-content: flex-start; }
  .nav-open .nav-item { flex-direction: column; flex-shrink: 0; }
  .nav-open .nav-top { justify-content: space-between; width: 100%; text-align: left; }
  .nav-open .nav-chev { width: 14px; height: 14px; }
  .nav-open .nav-top[aria-expanded=true] { font-weight: 800; }
  .nav-open .nav-top.is-current::after { top: 12px; bottom: 12px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .nav-panel { position: static; max-height: none; overflow: visible; box-shadow: none; background: var(--panel); border-top: 1px solid var(--line); }
  .nav-pin { padding: 2px 16px 10px 28px; }
  .nav-cols { display: block; }
  .nav-gh { margin: 12px 0 2px; }
  .nav-sub { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-chev { transition: none; }
  .nav-top[aria-expanded=true] .nav-chev { transform: none; }
}
@media print {
  .nav-panel, .nav-chev { display: none !important; }
}