/* ==========================================================================
   Экосистема 99Percentile – шапка

   Источник: Figma нода 32163:400 (инстанс на странице – 32702:4981).
   Все значения сняты через get_design_context, а не подобраны на глаз.

   ЗАМЕРЫ ИЗ МАКЕТА (для сверки):
     полоса         1838×76, фон #F2F2F8, радиус 999px
     отступ сверху  24px от края страницы
     логотип        64×64, left 12, top 6   → по вертикали центр: (76−64)/2 = 6 ✓
     навигация      начинается на left 111, блок 1221×43
     пункт меню     Inter Medium 16px / 1.2 / tracking −0.8px (= −0.05em)
     активный пункт #2597FF + подчёркивание
     кнопки         блок на left 1367, top 9.5 → центр: (76−57)/2 = 9.5 ✓
                    высота 57, padding 8/20, радиус 999, gap 4
                    текст Inter Semi Bold 18px / 1.2 / −0.9px (= −0.05em)

   ВНИМАНИЕ, расхождение с дизайн-системой:
   в шапке навигация 16px, а кнопки 18px. Переменные Figma при этом
   объявляют nav = 18px и button = 20px. То есть шапка НЕ следует системным
   стилям. Здесь воспроизведены фактические значения ноды, потому что
   верстается то, что нарисовано. Расхождение вынесено в отчёт.
   ========================================================================== */

.site-header {
  /* Поверх хиро с отрицательным margin (AP и др.): без z-index эллипсы
     секции, идущей ниже в DOM, рисуются поверх полосы шапки. */
  position: relative;
  z-index: var(--z-header);
  padding-top: 24px;

  /* Размеры одного ряда – ступень 0 (макет, 1920). Ступени 1–5 ниже
     переопределяют эти переменные через data-fit (см. блок АДАПТИВ). */
  --hdr-logo:   64px;
  --hdr-nav-mx: 35px;   /* поля навигации слева/справа */
  --hdr-nav-px: 12px;   /* горизонтальный padding пункта */
  --hdr-nav-fs: 16px;
  --hdr-chev:   18px;   /* стрелка выпадающего меню */
  --hdr-btn-fs: 18px;
  --hdr-btn-px: var(--space-20);
  --hdr-btn-h:  var(--btn-height);
}

.site-header__bar {
  display: flex;
  align-items: center;

  /* gap: 0 намеренно. С gap: 8px навигация уезжала на 119px вместо 111 –
     промежуток флекса складывался с margin-left навигации. Проверено
     замером getBoundingClientRect. */
  gap: 0;

  /* В макете полоса 1838 при контейнере 1840 – на 1px уже с каждой стороны.
     Воспроизводим буквально, чтобы сверка сходилась. */
  max-width: var(--header-width);
  margin-inline: auto;
  min-height: var(--header-height);
  padding-inline: 12px;

  background: var(--color-bg-soft);
  border-radius: var(--radius-pill);
}

/* --- Логотип -------------------------------------------------------------- */

.site-header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.site-header__logo img,
.site-header__logo .custom-logo {
  width: var(--hdr-logo);
  height: var(--hdr-logo);
  object-fit: contain;
}

/* Фолбэк, пока логотип не загружен в настройки темы.
   В макете логотип растровый и весит 1.09 МБ – до подключения нужен SVG,
   см. _figma/05-assets/ASSETS.md. */
.site-header__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  line-height: 1.1;
  white-space: nowrap;
}

/* --- Навигация ------------------------------------------------------------ */

.site-header__nav {
  flex: 1 1 auto;
  /* В макете навигация начинается на 111px: логотип занимает 12…76,
     значит от него до первого пункта 35px. */
  margin-left: var(--hdr-nav-mx);
  /* И заканчивается на 1332 при кнопках на 1367 – те же 35px справа. */
  margin-right: var(--hdr-nav-mx);
}

/*
   Пункты распределяются по всему пролёту навигации (111…1332 в макете),
   а не жмутся влево.

   Почему не координаты из макета. Там пункты расставлены руками двумя
   разными компонентами: «О нас», «Родителям», «Преподавателям» – простой
   текст без padding, остальные пять – кнопки с padding 12. Промежутки
   между ними неровные: местами 12.75px, местами 2–3px. Скопировать эти
   числа в меню WordPress нельзя – раскладка сломается, как только клиент
   переименует пункт или добавит новый.

   Поэтому воспроизведён пролёт и ритм: первый пункт на 111, последний
   упирается в 1332, padding у всех одинаковый. Промежуточные позиции
   отличаются от макета – расхождение зафиксировано в отчёте.
*/
.site-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
}

.site-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 12px var(--hdr-nav-px);

  font-size: var(--hdr-nav-fs);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  white-space: nowrap;

  transition: color var(--dur-fast) var(--ease-out);
}

/* Активный пункт. В макете «О нас» синий и подчёркнутый – это состояние
   текущей страницы, а не hover. */
.site-menu > li.current-menu-item > a,
.site-menu > li.current-menu-ancestor > a,
.site-menu > li.current_page_item > a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* [ВЫВЕДЕН] hover в макете не нарисован ни у одного пункта.
   Взято минимальное решение – перекрас в брендовый синий без подчёркивания,
   чтобы не путать с активным пунктом. Согласовать с дизайнером. */
.site-menu > li > a:hover {
  color: var(--color-link);
}

/* --- Стрелка выпадающего меню --------------------------------------------- */
/*
   Иконка из макета: нода «Icon» 18×18, path M4.5 6.75L9 11.25L13.5 6.75.
   Через mask – цвет следует за currentColor.
   Видна только у пунктов с детьми (menu-item-has-children).
*/
.site-menu > li.menu-item-has-children > a::after {
  content: '';
  width: var(--hdr-chev);
  height: var(--hdr-chev);
  flex: 0 0 auto;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  transition: transform var(--dur-fast) var(--ease-out);
}

/*
   Открытое состояние – Component 13 / Frame 1171275458 (32501:3176):
   белая карточка radius 12, padding 12, gap 24 между заголовком и списком;
   стрелка перевёрнута вверх; пункты Regular 18 / gap 8.
*/
.site-menu > li { position: relative; }

.site-header,
.site-header__bar,
.site-header__nav,
.site-menu {
  overflow: visible;
}

.site-menu > li.menu-item-has-children:hover,
.site-menu > li.menu-item-has-children:focus-within {
  z-index: calc(var(--z-header) + 1);
}

.site-menu > li.menu-item-has-children:hover > a::after,
.site-menu > li.menu-item-has-children:focus-within > a::after {
  transform: scaleY(-1);
}

.site-menu .sub-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: calc(var(--z-header) + 1);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);

  box-sizing: border-box;
  min-width: 100%;
  width: max-content;
  margin: 0;
  /* Родитель в потоке: pad 12 + строка кегль×1.2 + pad 12, ниже зазор до
     списка. В макете зазор 24, но живьём между пунктом и первой ссылкой
     получалось ~36px (сверху ещё нижний padding самого пункта) – заказчик
     2026-08-22: «слишком большой отступ». Оставлено 8.
     Кегль – переменная ступени, чтобы карточка сходилась на любой ступени. */
  padding: calc(12px + var(--hdr-nav-fs) * 1.2 + 12px + 8px) var(--space-12) var(--space-12);

  list-style: none;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.site-menu > li.menu-item-has-children:hover > .sub-menu,
.site-menu > li.menu-item-has-children:focus-within > .sub-menu {
  display: flex;
}

/* Родитель поверх белой карточки – тот же padding 12, что в макете. */
.site-menu > li.menu-item-has-children:hover > a,
.site-menu > li.menu-item-has-children:focus-within > a {
  position: relative;
  z-index: calc(var(--z-header) + 2);
  color: var(--color-text);
}

.site-menu .sub-menu a {
  display: block;
  padding: 0;
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.03em; /* text_18_reg −3 % */
  color: var(--color-text);
  white-space: nowrap;
}

.site-menu .sub-menu a:hover {
  color: var(--color-link);
}

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

.site-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

/* Базовый .btn задаёт min-height 48 и padding 0 24 – в шапке другие цифры. */
.btn--header {
  min-height: var(--hdr-btn-h);
  padding: var(--space-8) var(--hdr-btn-px);

  font-size: var(--hdr-btn-fs);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.btn--ghost {
  background: transparent;
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
}

/* [ВЫВЕДЕН] hover кнопок в макете не нарисован. */
.btn--ghost:hover {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

/* ==========================================================================
   АДАПТИВ – заглушка, а не решение

   Мобильной версии шапки в макете НЕТ: единственная мобильная нода
   (32705:7077, 393×669) содержит только хиро главной, без меню.

   Правила ниже не дают шапке разъехаться на узком экране, но это НЕ
   вёрстка по макету: как должно вести себя меню из 8 пунктов с пятью
   выпадающими списками на 393px – дизайнером не решено.
   Бургер, оффканвас и порядок пунктов надо согласовать.
   ========================================================================== */

/* ==========================================================================
   ОДИН РЯД: ПОДГОНКА ПОД СОДЕРЖИМОЕ (data-fit), 2026-08-17

   Раньше ступени сжатия висели на медиазапросах с порогами, посчитанными
   под пункты меню из макета (998px). Клиент переименовал пункты («Летние
   академические программы», «Полезные ресурсы» – 1331px), и кнопки стали
   вылезать за полосу даже на 1920. Медиазапрос не знает, что написано в
   меню, поэтому теперь ступень выбирает скрипт (assets/js/header-fit.js,
   подключён inline в header.php – до первой отрисовки; повтор – на resize
   и после загрузки шрифтов): перебирает data-fit="0…5" и берёт первую,
   на которой кнопки помещаются в полосу; если не помещается ни одна –
   data-fit="burger".

   Ступени те же, что были в медиазапросах (0–4), плюс запасная 5 для
   особо длинных меню. Ниже 1330px – всегда бургер (правило заказчика,
   2026-08-06: контент шапки не переносится на второй ряд); этот порог
   продублирован медиазапросом ниже, чтобы мобильная шапка не зависела
   от JS.
   ========================================================================== */

.site-header[data-fit="1"] {
  /* Первый шаг – ужать поля навигации. */
  --hdr-nav-mx: var(--space-16);
  --hdr-nav-px: 8px;
}

.site-header[data-fit="2"] {
  /* Кегль навигации 15, кнопок 16. */
  --hdr-nav-mx: var(--space-12);
  --hdr-nav-px: 6px;
  --hdr-nav-fs: 15px;
  --hdr-chev:   16px;
  --hdr-btn-fs: 16px;
  --hdr-btn-px: var(--space-16);
}

.site-header[data-fit="3"] {
  /* Кегль 14/15, логотип 56. */
  --hdr-logo:   56px;
  --hdr-nav-mx: var(--space-12);
  --hdr-nav-px: 5px;
  --hdr-nav-fs: 14px;
  --hdr-chev:   16px;
  --hdr-btn-fs: 15px;
  --hdr-btn-px: 14px;
}

.site-header[data-fit="4"] {
  /* Кегль 13/14, логотип 48 – предел, на котором строка остаётся
     читаемой при пунктах из макета. */
  --hdr-logo:   48px;
  --hdr-nav-mx: var(--space-8);
  --hdr-nav-px: 4px;
  --hdr-nav-fs: 13px;
  --hdr-chev:   14px;
  --hdr-btn-fs: 14px;
  --hdr-btn-px: var(--space-12);
  --hdr-btn-h:  48px;
}

.site-header[data-fit="5"] {
  /* Запасная ступень для меню длиннее макетного: кегль 12/13, логотип 44.
     С пунктами из макета сюда не доходит. */
  --hdr-logo:   44px;
  --hdr-nav-mx: 6px;
  --hdr-nav-px: 3px;
  --hdr-nav-fs: 12px;
  --hdr-chev:   12px;
  --hdr-btn-fs: 13px;
  --hdr-btn-px: 10px;
  --hdr-btn-h:  44px;
}


/* ==========================================================================
   МОБИЛЬНОЕ МЕНЮ – ПАНЕЛЬ СПРАВА (переделано 2026-08-22)

   Что было не так. Пункты раскрывались прямо в полосе шапки: восемь пунктов
   с пятью развёрнутыми подсписками растягивали шапку на два-три экрана,
   страница под ней прыгала, а сама шапка уезжала вверх вместе с контентом –
   до меню приходилось скроллить обратно наверх.

   Что стало (требование заказчика 2026-08-22):
   • меню выезжает панелью справа налево поверх страницы, под ним – шторка;
   • шапка на телефоне липкая: прячется при прокрутке ВНИЗ и возвращается
     при прокрутке ВВЕРХ.

   Механика:
   • assets/js/nav.js ставит на <html> класс p99-js (скрипт жив) и
     p99-burger (мобильный режим шапки: data-fit="burger" или окно ≤1330).
     Он же собирает панель: оборачивает меню и кнопки в
     .site-header__drawer, добавляет шапку панели с крестиком, шторку
     .site-header__scrim и кнопки-стрелки у пунктов с подменю.
   • Открыто/закрыто – класс p99-nav-open на <html> (чекбокс
     #p99-nav-toggle остаётся хранилищем состояния для label-переключателя).
   • Прокрутка вниз → .site-header.is-hidden, вверх → класс снимается,
     отлип от верха → .is-stuck (компактные поля и нейтральная подложка
     вместо цвета хиро).

   ВАЖНО: пока панель открыта, на .site-header запрещён transform –
   transform у предка превращает position: fixed панели в absolute.
   Об этом правило html.p99-nav-open .site-header ниже.

   Без JS (класс p99-js не появился) работает прежний аккордеон внутри
   полосы – блок «СТРАХОВКА БЕЗ JS» в самом низу файла.
   ========================================================================== */

/* Обёртка панели на десктопе не должна влиять на раскладку полосы:
   display: contents убирает её бокс, меню и кнопки остаются флекс-детьми
   .site-header__bar ровно как раньше. */
.site-header__drawer { display: contents; }

/* Элементы, которых нет в десктопной шапке. */
.site-header__burger,
.site-header__scrim,
.site-header__drawer-head,
.site-menu__sub { display: none; }

/* --- Размеры шапки в мобильном режиме ------------------------------------ */
/* Ступень 4 (логотип 48, кнопки 14px/48): логотип 64 + поля 8+8 = 80 > 76,
   и шапка стала бы выше расчётного --header-h. */
html.p99-burger .site-header,
.site-header[data-fit="burger"] {
  --hdr-logo:   48px;
  --hdr-chev:   14px;
  --hdr-btn-fs: 14px;
  --hdr-btn-px: var(--space-12);
  --hdr-btn-h:  48px;
}

/* --- Полоса шапки в мобильном режиме ------------------------------------- */
html.p99-burger .site-header__bar {
  flex-wrap: nowrap;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
}

/* --- Бургер --------------------------------------------------------------- */
/* Стили один раз; показ переключают условия ниже. */
.site-header__burger {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
  width: 44px;               /* тач-мишень 44×44 */
  height: 44px;
  padding: 10px;
  cursor: pointer;
}

.site-header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

html.p99-burger .site-header__burger,
.site-header[data-fit="burger"] .site-header__burger { display: flex; }

/* Крестик из тех же полосок. */
html.p99-nav-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.p99-nav-open .site-header__burger span:nth-child(2) { opacity: 0; }
html.p99-nav-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Чекбокс остаётся в разметке как хранилище состояния, но не должен
   влиять на поток: убираем визуально, оставляем доступным с клавиатуры
   (скрипт снимает у него атрибут hidden). */
.site-header__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- Липкая шапка и прятки при прокрутке --------------------------------- */
/*
   Класс продублирован (.site-header.site-header) намеренно. На страницах с
   цветным хиро полоса красится правилом вида
   .site-header:has(+ .site-main .prog-hero) { position: relative } –
   у него специфичность (0,3,0), оно лежит в page-*.css, то есть ПОСЛЕ этого
   файла, и обычное html.p99-burger .site-header (0,2,1) проигрывало:
   шапка на SAT, «Клубах» и «Сопровождении» оставалась relative и уезжала
   вверх вместе со страницей. Дубль класса даёт (0,3,1).
*/
html.p99-burger .site-header.site-header {
  position: sticky;
  top: 0;
  transition: transform var(--dur-base) var(--ease-out),
              padding-top var(--dur-fast) linear,
              background-color var(--dur-fast) linear;
}

/* Ушла вверх целиком: 130% с запасом на тень и верхнее поле. */
html.p99-burger .site-header.is-hidden { transform: translateY(-130%); }

/* Отлипла от верха: поля компактнее, подложка нейтральная – на страницах с
   цветным хиро шапка красится в цвет хиро (page-*.css, селектор
   .site-header:has(+ .site-main …)), и в прокрутке этот цвет висел бы
   полосой над белым контентом. */
html.p99-burger .site-header.is-stuck {
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: var(--color-bg);
  box-shadow: 0 6px 24px rgba(20, 24, 40, .10);
}

/* Пока панель открыта – никаких трансформаций у шапки: transform у предка
   ломает position: fixed внутри неё. */
html.p99-nav-open .site-header {
  transform: none !important;
  transition: none !important;
}

/* Якорные ссылки не должны уезжать под липкую шапку. */
html.p99-burger { scroll-padding-top: 96px; }

/*
   Обрезка по горизонтали на КОРНЕ, а не только на body (base.css).
   Закрытая панель стоит за правым краем (translateX(100%)), и body её не
   режет: position: fixed не подчиняется overflow предка. В мобильной
   эмуляции Chromium из-за этого сжимал вертикальный диапазон прокрутки –
   страница переставала доскролливаться до конца ровно на ширину панели
   (проверено: до подвала не хватало 733px). Клип на html лечит.
*/
html.p99-burger { overflow-x: clip; }

/* --- Панель --------------------------------------------------------------- */
html.p99-burger .site-header__drawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-header) + 60);

  width: min(86vw, 340px);
  max-width: 100%;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));

  background: var(--color-bg);
  box-shadow: -18px 0 44px rgba(16, 20, 40, .18);

  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* Закрыта – за правым краем. Открывается справа налево. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-base) cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear var(--dur-base);
}

html.p99-nav-open .site-header__drawer {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-base) cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear 0s;
}

/* Шторка. */
html.p99-burger .site-header__scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 50);
  background: rgba(24, 27, 40, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
  cursor: pointer;
}

html.p99-nav-open .site-header__scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear 0s;
}

/* Шапка панели: подпись и крестик. */
html.p99-burger .site-header__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex: 0 0 auto;
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.site-header__drawer-title {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-header__close {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 50%;
  color: var(--color-text);
}

.site-header__close::before,
.site-header__close::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 21px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* После тапа WebKit оставляет на кнопке синее кольцо фокуса. Клавиатурный
   фокус при этом видеть надо – убираем только у указательных устройств. */
.site-header__close:focus:not(:focus-visible),
.site-menu__sub:focus:not(:focus-visible) { outline: none; }

.site-header__close::before { transform: rotate(45deg); }
.site-header__close::after  { transform: rotate(-45deg); }
.site-header__close:hover   { background: var(--color-bg-soft); }

/* --- Меню внутри панели --------------------------------------------------- */
html.p99-burger .site-header__nav {
  flex: 0 0 auto;
  margin: 0;
}

html.p99-burger .site-menu {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
}

html.p99-burger .site-menu > li {
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

html.p99-burger .site-menu > li:last-child { border-bottom: 0; }

html.p99-burger .site-menu > li > a {
  display: flex;
  width: 100%;
  padding: 13px 44px 13px 0;
  font-size: 17px;
  line-height: 1.3;
  white-space: normal;
}

/* Стрелку у пунктов с детьми рисует кнопка-раскрывашка, а не псевдоэлемент
   ссылки: тап по ссылке должен вести на страницу раздела, а не раскрывать
   список. */
html.p99-burger .site-menu > li.menu-item-has-children > a::after { display: none; }

html.p99-burger .site-menu__sub {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  right: -10px;
  z-index: 2;
  width: 44px;
  height: 50px;
  color: var(--color-text-muted);
}

/* Десктопная карточка выпадашки поднимала ссылку родителя над остальными
   (z-index у :hover / :focus-within). В панели из-за этого ссылка ложилась
   поверх кнопки-стрелки и перехватывала тап. */
html.p99-burger .site-menu > li.menu-item-has-children:hover > a,
html.p99-burger .site-menu > li.menu-item-has-children:focus-within > a {
  position: static;
  z-index: auto;
}

.site-menu__sub::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

html.p99-burger .site-menu > li.is-open > .site-menu__sub { color: var(--color-link); }
html.p99-burger .site-menu > li.is-open > .site-menu__sub::before {
  margin-top: 2px;
  transform: rotate(-135deg);
}

/* Подсписки в потоке, свёрнуты до тапа по стрелке. */
html.p99-burger .site-menu .sub-menu,
html.p99-burger .site-menu > li.menu-item-has-children:hover > .sub-menu,
html.p99-burger .site-menu > li.menu-item-has-children:focus-within > .sub-menu {
  position: static;
  display: block;
  width: 100%;
  min-width: 0;
  max-height: 0;
  padding: 0 0 0 14px;
  background: none;
  border-radius: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-out);
}

/* Открытый список. Три селектора одной высоты специфичности с базовым
   правилом выше: на телефоне hover «залипает» после тапа, и правило
   :hover иначе перебивало бы раскрытие. */
html.p99-burger .site-menu > li.menu-item-has-children.is-open > .sub-menu,
html.p99-burger .site-menu > li.menu-item-has-children.is-open:hover > .sub-menu,
html.p99-burger .site-menu > li.menu-item-has-children.is-open:focus-within > .sub-menu { max-height: 720px; }

html.p99-burger .site-menu .sub-menu a {
  padding: 9px 0;
  font-size: 15px;
  line-height: 1.3;
  white-space: normal;
  color: var(--color-text-muted);
}

html.p99-burger .site-menu .sub-menu li:last-child a { padding-bottom: 14px; }

/* Кнопки – внизу панели, во всю ширину. */
html.p99-burger .site-header__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
  width: 100%;
  margin: auto 0 0;
  padding-top: var(--space-20);
}

html.p99-burger .btn--header {
  width: 100%;
  justify-content: center;
  min-height: 52px;
  font-size: 16px;
}

/* ==========================================================================
   СТРАХОВКА БЕЗ JS

   Если nav.js не загрузился, панели нет: работает прежний аккордеон внутри
   полосы. Порог ≤1330 – правило заказчика 2026-08-06 (второго ряда у шапки
   нет).
   ========================================================================== */

@media (max-width: 1330px) {

  html:not(.p99-js) .site-header {
    --hdr-logo:   48px;
    --hdr-chev:   14px;
    --hdr-btn-fs: 14px;
    --hdr-btn-px: var(--space-12);
    --hdr-btn-h:  48px;
  }

  html:not(.p99-js) .site-header__bar {
    flex-wrap: wrap;
    row-gap: 0;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
  }

  html:not(.p99-js) .site-header__burger { display: flex; }

  html:not(.p99-js) .site-header__toggle:checked ~ .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html:not(.p99-js) .site-header__toggle:checked ~ .site-header__burger span:nth-child(2) { opacity: 0; }
  html:not(.p99-js) .site-header__toggle:checked ~ .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  html:not(.p99-js) .site-header__nav,
  html:not(.p99-js) .site-header__actions {
    display: none;
    flex-basis: 100%;
  }

  html:not(.p99-js) .site-header__toggle:checked ~ .site-header__nav {
    display: block;
    order: 3;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
  }

  html:not(.p99-js) .site-header__toggle:checked ~ .site-header__actions {
    display: flex;
    order: 4;
    flex-direction: column;
    gap: var(--space-8);
    margin: 12px 0 4px;
  }

  html:not(.p99-js) .site-menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  html:not(.p99-js) .site-menu > li > a {
    width: 100%;
    padding: 12px 4px;
    font-size: var(--fs-nav);
  }

  html:not(.p99-js) .site-menu .sub-menu {
    position: static;
    display: flex;
    width: 100%;
    padding: 0 0 8px 16px;
    background: none;
    border-radius: 0;
  }

  html:not(.p99-js) .btn--header { width: 100%; }
}