/* ===== Гостевая шапка сайта =====
 * Единственный источник стилей шапки. Раньше этот же 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}

.mnav-in{
  max-width:var(--nav-max,1180px);margin:0 auto;
  padding:10px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.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;
}
.mnav-brand img{height:23px;width:auto;display:block}
.mnav-links{display:flex;gap:30px;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:#41624f}

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:#9BC8B2}

/* Разделы уезжают в бургер-панель: её собирает app-shell.js, стили в app-shell.css */
@media(max-width:760px){
  .mnav-links{display:none}
  html{--nav-h:46px}
  .mnav-in{padding:9px 16px}
}
@media(max-width:440px){
  .mnav-in{padding:8px 14px;gap:10px}
  .mnav-brand{flex:0 1 auto;min-width:0;display:flex}
  .mnav-brand img{max-height:22px;height:auto;width:auto;max-width:100%}
  .mnav-cta{gap:12px;flex:0 0 auto}
  .mnav-start{font-size:13.5px;padding:9px 15px}
}

/* Кнопка темы в шапке: её видит гость, у которого сайдбара с переключателем нет. */
.mnav-theme{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:transparent;color:#5b5345;cursor:pointer;transition:background .16s ease,color .16s ease}
.mnav-theme svg{display:block;width:19px;height:19px}
.mnav-theme:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
html[data-theme="dark"] .mnav-theme{color:#C6C0B4}
html[data-theme="dark"] .mnav-theme:hover{background:rgba(255,255,255,.08);color:#E8EFEA}