/* ============================================================
   Навигация: шапка, мега-меню, мобильный dialog, крошки, backlink.
   Спека REDESIGN-SPEC-2026-10-30 §7. Подключён после styles.css,
   токены только оттуда. Без новых цветов, теней и радиусов.
   ============================================================ */

.ig { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- шапка ---------- */

.topnav { position: static; align-items: center; }
.topnav > a,
.topnav__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.topnav > a:hover,
.topnav__btn:hover,
.topnav > a[aria-current="page"],
.topnav__btn[aria-current="page"] { border-bottom-color: var(--red); }
.topnav__btn[aria-expanded="true"] { border-bottom-color: var(--ink); }
.ig--chev { transition: transform 150ms ease-out; }
.topnav__btn[aria-expanded="true"] .ig--chev,
.mnav__group[open] > summary .ig--chev { transform: rotate(180deg); }

.top__phone-ico,
.top__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.top__cta-short { display: none; }

/* ---------- мега-меню (disclosure) ---------- */

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: min(520px, calc(100vh - 78px));
  overflow-y: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease-out, visibility 0s linear 150ms;
}
.mega.is-open { opacity: 1; visibility: visible; transition: opacity 150ms ease-out; }
/* styles.css .topnav a задаёт ссылкам панели шрифт и рамку шапки — сбрасываем */
.mega a { padding: 0; border-bottom: 0; font-weight: 600; }
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 28px;
  padding: 18px 0 10px;
}
.mega__cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mega__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 26px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}
.mega__title:hover span { text-decoration: underline; }
.mega__sub a {
  display: block;
  padding: 1px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega__sub a:hover { text-decoration: underline; }
.mega__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; }
.mega__meta a { letter-spacing: 0.02em; }
.mega__all,
.mega__podbor { color: var(--muted); text-decoration: none; }
.mega__podbor { color: var(--red-text); }
.mega__all:hover,
.mega__podbor:hover { text-decoration: underline; }
.mega__foot {
  display: flex;
  gap: 28px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
}
.mega__foot a { text-decoration: none; }
.mega__foot a:hover { text-decoration: underline; }
.mega__foot a + a { color: var(--red-text); }

/* ---------- мобильный dialog ---------- */

.mnav {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  flex-direction: column;
  overflow: hidden;
}
.mnav[open] { display: flex; }
.mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 var(--shell);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mnav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.mnav__body { flex: 1; overflow-y: auto; padding: 8px var(--shell) 16px; }
.mnav__label { padding: 14px 0 6px; color: var(--muted); text-transform: uppercase; }
.mnav__group { border-bottom: 1px solid var(--line); }
.mnav__group > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  list-style: none;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.mnav__group > summary::-webkit-details-marker { display: none; }
.mnav__gtitle { flex: 1; min-width: 0; }
.mnav__n { color: var(--muted); }
.mnav__sub { padding: 0 0 10px 36px; }
.mnav__sub a,
.mnav__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.mnav__sub a { font-size: 15px; font-weight: 600; }
.mnav__sub li:first-child a { font-weight: 800; color: var(--red-text); }
.mnav__links { margin-top: 18px; }
.mnav__links a {
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 800;
}
.mnav__links a[aria-current="page"] { border-bottom: 2px solid var(--red); }
.mnav__foot {
  display: grid;
  gap: 12px;
  padding: 14px var(--shell) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.mnav__phone {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-align: center;
}
body.is-mnav-open { overflow: hidden; }

/* ---------- крошки и backlink (7.3) ---------- */

.crumbs { font-size: 12.5px; }
.crumbs ol { gap: 6px 0; }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--line-strong); }
.crumbs__dots { display: none; }
.crumbs__dots + li::before { content: none; }
.crumbs a { min-height: 24px; }
.backlink { display: none; }

/* ---------- адаптив ---------- */

@media (max-width: 1080px) {
  .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .topnav, .top__phone { display: none; }
  .top__phone-ico { display: inline-flex; margin-left: auto; }
  .top__burger { display: inline-flex; }
  .top .top__cta { margin-left: 0; }
  .top__row { gap: 8px; }
}

@media (max-width: 760px) {
  .crumbs__dots { display: list-item; }
  .crumbs__dots + li::before { content: '/'; }
  .crumbs__far { display: none; }
  .backlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -8px 0 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  .backlink:hover { text-decoration: underline; }
}

@media (max-width: 400px) {
  .top__cta-full { display: none; }
  .top__cta-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .mega, .mega.is-open { transition: none; }
  .ig--chev { transition: none; }
}