/* ===== Гостевая шапка сайта =====
 * Единственный источник стилей шапки. Раньше этот же CSS лежал копией внутри
 * <style> в каждой из 206 страниц: копии разъезжались (разные шрифты логотипа,
 * разный gap, разный состав меню), и правка не доходила до всех страниц.
 * Разметка живёт в gen/header.html и раскатывается gen/apply-header.js.
 *
 * У залогиненного шапки нет: там сайдбар из app-shell.js, .mnav скрыт.
 */
/* Шапка липкая: на телефоне она уезжала вверх вместе с контентом, и с середины
   длинной страницы человек оставался без навигации. Фон непрозрачный, иначе текст
   просвечивает сквозь неё при прокрутке. */
/* Высота шапки: панель мобильного меню встаёт ровно под ней. Объявляем на html —
   панель лежит в body, вне .mnav, и переменную с самой шапки не увидела бы. */
html{--nav-h:58px}
.mnav{
  position:sticky;top:0;z-index:130;
  border-bottom:1px solid transparent;
  /* Вверху страницы шапка прозрачная и сливается с фоном: заливка «своим» цветом
     давала жёлтую полосу там, где фон страницы светлее (лендинги курсов).
     Подложка с размытием появляется только когда под шапкой уже едет контент. */
  background:transparent;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
/* Подложка появляется, когда под шапкой уже едет контент.
   Заливка бралась из --bg, то есть из кремового фона публичных страниц, и на
   лендингах курсов с бело-сиреневым фоном шапка загоралась жёлтой полосой.
   Теперь это стекло: почти прозрачный белый слой плюс размытие с подсветкой
   насыщенности, поэтому подложка принимает цвет того, что под ней проезжает. */
.mnav.mnav-stuck{
  background:rgba(255,255,255,.38);
  backdrop-filter:saturate(1.7) blur(22px);
  -webkit-backdrop-filter:saturate(1.7) blur(22px);
  border-bottom-color:rgba(255,255,255,.45);
  box-shadow:0 10px 32px -20px rgba(36,35,31,.32)}
html[data-theme="dark"] .mnav.mnav-stuck{
  background:rgba(16,21,28,.46);
  border-bottom-color:rgba(233,240,245,.10);
  box-shadow:0 10px 32px -20px rgba(0,0,0,.5)}
/* Safari до 16 не умеет backdrop-filter на sticky-элементе с прозрачным фоном:
   без запаса текст меню читался бы поверх контента. */
@supports not (backdrop-filter:blur(1px)){
  .mnav.mnav-stuck{background:color-mix(in srgb,var(--bg,var(--cream)) 88%,transparent)}
}
body.has-side .mnav{display:none}

/* Ряд шапки повторяет главную (index.html, .heritage-header .nav): содержимое
   не шире 1180 при полях по 32 с каждой стороны, высота ряда 82, вертикальные
   поля 18. До 10.08.2026 здесь было 10/24 и ряд в 61 пиксель — шапка внутренних
   страниц выглядела заметно ниже и уже главной. */
.mnav-in{
  width:min(calc(100% - 64px),var(--nav-max,1180px));margin:0 auto;
  padding:18px 0;min-height:82px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.mnav-brand{
  display:flex;align-items:center;min-height:44px;
  font-family:'Merriweather',Georgia,serif;font-style:italic;font-weight:300;
  font-size:26px;color:var(--accent,var(--accent));text-decoration:none;line-height:1;
}
/* Высота логотипа 26px — ровно как на главной (.heritage-header .brand-logo).
   Было 23: шапка внутренних страниц выглядела мельче главной, и разница
   бросалась в глаза при переходе с неё на любой раздел. */
.mnav-brand img{height:26px;width:auto;display:block}
.mnav-links{display:flex;gap:22px;font-size:15px;font-weight:500}
.mnav-links a{color:#5b5345;text-decoration:none;transition:color .16s ease}
.mnav-links a:hover{color:var(--accent)}
.mnav-cta{display:flex;align-items:center;gap:18px}
.mnav-login{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:15px;color:#5b5345;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .16s ease}
.mnav-login:hover{color:var(--accent)}
.mnav-start{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  background:var(--accent);color:#fff;font-weight:600;font-size:14.5px;
  padding:10px 20px;border-radius:var(--radius-pill);text-decoration:none;white-space:nowrap;
  transition:background .16s ease;
}
.mnav-start:hover{background:#125A91}

html[data-theme="dark"] .mnav-links a,
html[data-theme="dark"] .mnav-login{color:#C6C0B4}
html[data-theme="dark"] .mnav-links a:hover,
html[data-theme="dark"] .mnav-login:hover{color:#77B9EC}

/* Две ступени сужения — те же пороги и та же логика, что на главной
   (index.html: @media 980px и 700px). До 10.08.2026 здесь была одна ступень на
   760px: между 700 и 980 главная уже показывала кнопку меню, а внутренние ещё
   держали полный ряд ссылок, и шапка на планшете выглядела по-разному в
   зависимости от страницы.

   Первая ступень: разделы уезжают в панель меню (её собирает mobile-menu.js,
   стили в app-shell.css), «Войти» и «Начать бесплатно» пока остаются. */
/* Порог поднят с 980 до 1080 (20.08.2026). На 1024 разделы ещё показывались,
   и ряду не хватало ширины: кнопка «Начать бесплатно» вылезала за экран, а
   документ становился шире окна на 28 точек. Замер: логотип 136, разделы 532,
   переключатель темы 21, действия 232, плюс отступы. */
@media(max-width:1080px){
  .mnav-links{display:none}
  .mnav-in{min-height:78px}
  html{--nav-h:79px}
  /* Со скрытыми разделами space-between уводил логотип на середину ряда, тогда
     как на главной он стоит вплотную к кнопке меню. Прижимаем начало ряда
     влево, а блок действий — вправо своим авто-отступом. */
  .mnav-in{justify-content:flex-start}
  .mnav-cta{margin-left:auto}
  /* «Войти» уходит вместе с разделами: на главной оно скрыто с этой же ступени,
     а в панели меню ссылка есть. */
  .mnav-login{display:none}
}
/* Вторая ступень — телефон. */
@media(max-width:700px){
  /* 83 — фактическая высота ряда: 18 + 46 (кнопка меню) + 18 и пиксель нижней
     линии. Панель меню встаёт ровно под шапку по этой переменной. */
  html{--nav-h:83px}
  .mnav-in{gap:12px}
  /* Кнопка меню справа: большой палец дотягивается до правого края, а левый
     верхний угол на телефоне самый недоступный. Разметку не трогаем —
     mobile-menu.js вставляет кнопку первой, и в потоке документа она такой
     и остаётся: порядок обхода с клавиатуры и чтения с экрана не меняется. */
  .mnav-burger{order:9}
  /* Логотип слева, всё остальное группой справа. Без flex-start прежний
     space-between растащил бы кнопку темы на середину шапки. */
  .mnav-in{justify-content:flex-start}
  .mnav-brand{margin-right:auto}
  /* «Войти» и «Начать бесплатно» уходят из шапки, как на главной: оба действия
     стоят внизу панели меню (mobile-menu.js строит подвал панели из этих же
     ссылок), поэтому точка входа в регистрацию не теряется. В шапке они съедали
     149 пикселей из 375 и разводили логотип с кнопкой меню по-разному на
     главной и на внутренних. */
  .mnav-cta{display:none}
  /* Отступ справа нужен, только когда за кнопкой темы идёт блок с действиями.
     Он скрыт — иначе кнопка отъезжала бы от меню на 10 пикселей. */
  .helpy-nav-theme{margin-right:0}
}