/* ── Шапка, бургер и открытое меню ───────────────────────────────────
   Одна шапка на главной и внутренних страницах (решение Александра, макет 25-шапка.js):
   белая, нижняя линия. 1440: слева тема и имя, по оси ряд разделов, справа связь
   и «Обратный звонок». Уже 1200 разделы уходят в бургер: тема, имя, значки, бургер
   (высота 72 на планшете и 64 на телефоне). Список разделов — inc/stranicy-shapka.php. */

.ds-header{position:sticky;top:0;z-index:20;padding:0 var(--ds-gutter);
  background:var(--ds-bg);border-bottom:1px solid var(--ds-line)}
.ds-header__row{max-width:var(--ds-container-w);margin:0 auto;height:80px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px}

.ds-header__left{display:flex;align-items:center;gap:16px;min-width:0}
.ds-header__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ds-ink);text-decoration:none;font:600 22px/1.2 var(--ds-font-display)}
.ds-header__name:hover{color:var(--ds-blue-dark)}

/* ряд разделов: по содержимому, одинаковый просвет, строго по оси страницы */
.ds-header__nav{display:flex;align-items:center;gap:4px}
.ds-header__item{position:relative;display:flex;padding:6px 14px;border-radius:100px;
  color:var(--ds-ink);text-decoration:none;font:600 20px/1.25 var(--ds-font-display);
  transition:color .25s ease,background-color .25s ease}
.ds-header__item:hover{color:var(--ds-blue-dark)}
.ds-header__item:hover .ds-letter i{transform:translateY(-50%)}
/* текущий раздел: голубая капсула, синий текст (≥4,5:1 на плитке) и точка снизу */
.ds-header__item[aria-current="page"]{background:var(--ds-tile);color:var(--ds-blue-dark)}
.ds-header__item[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-8px;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.ds-header__item:focus-visible{outline:2px solid var(--ds-blue);outline-offset:2px}

.ds-header__right{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.ds-header__call{flex:none}

/* бургер: три линии без рамки */
.ds-burger{display:none;width:40px;height:40px;padding:0;border:0;border-radius:12px;
  background:none;cursor:pointer;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.ds-burger:focus-visible{outline:2px solid var(--ds-blue);outline-offset:2px}
.ds-burger__line{width:20px;height:2px;border-radius:2px;background:var(--ds-ink)}

/* ── уже 1200: разделы и звонок уходят в бургер ─────────────────── */
@media (max-width:1199px){
  .ds-header__row{height:72px;display:flex;justify-content:space-between;column-gap:12px}
  .ds-header__left{flex:0 1 auto}
  .ds-header__nav,.ds-header__call{display:none}
  .ds-header__right{flex:none}
  .ds-burger{display:flex}
  /* Подсказки под значками на узких экранах не нужны (нет наведения), а их невидимый
     текст у правого края раздвигал страницу вширь. */
  .ds-header .ds-iconbtn[data-tip]::before,
  .ds-header .ds-iconbtn[data-tip]::after{display:none}
}
@media (max-width:809px){
  .ds-header{padding:0 12px}
  .ds-header__row{height:64px;column-gap:8px}
  .ds-header__left{gap:8px}
  .ds-header__name{font-size:19px}
  .ds-header__right{gap:4px}
  .ds-header .ds-iconbtn{width:40px;height:40px}
  .ds-theme{width:52px;height:28px}
}
/* узкие телефоны: всё то же, но плотнее, чтобы строка не росла вширь */
@media (max-width:389px){
  .ds-header__left{gap:6px}
  .ds-header__name{font-size:17px}
  .ds-header__right{gap:2px}
  .ds-header .ds-iconbtn{width:36px;height:36px}
  .ds-burger{width:36px;height:36px}
}
@media (max-width:359px){
  .ds-header{padding:0 8px}
  .ds-header__name{font-size:15px}
  .ds-theme{width:40px}
  .ds-theme[aria-pressed="true"] .ds-theme__knob{transform:translateX(18px)}
  .ds-header .ds-iconbtn{width:32px;height:32px;border-radius:10px}
  .ds-burger{width:32px;height:32px}
}

/* ── открытое меню ──────────────────────────────────────────────────
   Панель на <dialog>: Esc, затемнение, ловушка фокуса и возврат фокуса на бургер
   даёт сам браузер. 1199 и ниже: панель 360 справа поверх затемнения; на 390 —
   на весь экран. */
.ds-menu{width:360px;max-width:100vw;max-height:none;height:100%;
  margin:0 0 0 auto;padding:0;border:0;background:var(--ds-bg-card);color:var(--ds-ink);
  box-shadow:-30px 0 60px -40px rgba(9,42,71,.6)}
.ds-menu:not([open]){display:none}
.ds-menu[open]{display:flex;flex-direction:column;
  animation:ds-меню-въезд .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes ds-меню-въезд{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.ds-menu::backdrop{background:rgba(10,24,40,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@media (prefers-reduced-motion:reduce){.ds-menu[open]{animation:none}}
@media (max-width:480px){.ds-menu{width:100vw}}

.ds-menu__top{display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 12px 0 20px;border-bottom:1px solid var(--ds-line);flex:none}
.ds-menu__top .ds-header__name{font-size:22px}
.ds-menu__close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;
  border-radius:12px;background:none;color:var(--ds-ink);cursor:pointer}
.ds-menu__close:focus-visible{outline:2px solid var(--ds-blue);outline-offset:2px}

.ds-menu__nav{display:flex;flex-direction:column;padding:8px 20px 0;flex:1 1 auto;overflow-y:auto}
.ds-menu__item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 12px;border-bottom:1px solid var(--ds-line);
  color:var(--ds-ink);text-decoration:none;font:600 22px/1.3 var(--ds-font-display);
  transition:background-color .2s ease,color .2s ease}
.ds-menu__item:hover{color:var(--ds-blue-dark)}
.ds-menu__item:focus-visible{outline:2px solid var(--ds-blue);outline-offset:-2px}
.ds-menu__chevron{flex:none;color:var(--ds-gray-soft)}
/* текущий раздел: голубая заливка и точка */
.ds-menu__item--current{background:var(--ds-tile);color:var(--ds-blue-dark);
  border-radius:100px;border-bottom-color:transparent}
.ds-menu__dot{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}

.ds-menu__foot{display:flex;align-items:center;gap:12px;flex:none;
  padding:20px 20px 32px;border-top:1px solid var(--ds-line)}
.ds-menu__kanaly{display:flex;align-items:center;gap:4px;flex:none}
.ds-menu__foot .ds-btn{flex:1 1 auto;min-width:0;justify-content:center;gap:8px;padding:12px 14px;font-size:14px}
@media (max-width:389px){
  .ds-menu__foot{padding:20px 12px 32px;gap:8px}
  .ds-menu__kanaly{gap:4px}
  .ds-menu__nav{padding-left:12px;padding-right:12px}
}

/* ── подвал: разделы и 390 на всю ширину ───────────────────────────── */
.ds-footer__nav a{display:flex;color:var(--ds-ink);text-decoration:none;
  font:500 15px/1.4 var(--ds-font-text);padding:3px 0;transition:color .25s ease}
.ds-footer__nav .ds-letter + .ds-letter{margin-left:.03em}
@media (max-width:809px){
  /* В эталоне подвал на всю ширину: без внутренней рамки и боковых полей полосы. */
  .ds-footer.ds-strip{padding-left:0;padding-right:0}
  .ds-footer > .ds-container::before,
  .ds-footer > .ds-container::after{display:none}
  .ds-footer__row{padding-left:20px;padding-right:20px}
  .ds-footer__nav{gap:8px 16px}
  .ds-footer__nav a{font-size:17px}
  .ds-footer__legal{padding-left:20px;padding-right:20px}
}
.ds-footer__who .ds-header__name{overflow:visible;font-size:22px}
/* Рамка подвала продолжает рамку страницы. На главной у секций поле полосы 20px
   (.ds-strip), на внутренних страницах контейнер идёт от края окна: там у подвала
   поля нет, иначе его линии встают рядом с линиями страницы. */
.ds-vnutri .ds-footer.ds-strip{padding-left:0;padding-right:0}