/* ===== Guest header =====
 * The markup lives in gen/header.html, roll it out with `node gen/apply-header.js`.
 * These rules used to sit inside every page: 206 copies that had already drifted
 * apart (brand size 18px on most pages, 26px on ten tests).
 */
/* Замерено на живой странице 09.08.2026: реальная высота .mnav — 66px на
   десктопе и 61px при ≤1000px. Переменная занижала её на 8 и 15px, из-за чего
   панель мобильного меню и её подложка (app-shell.css:296,349) уезжали под
   шапку, а липкий прогресс тестов прилипал за ней. Главная задаёт --nav-h
   замером в скрипте, её эти значения не касаются. */
html{--nav-h:66px}
.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}
/* Scrolled state. app-shell.js has been toggling .mnav-stuck all along, but no rule
   ever matched it, so the header stayed flat over the content it passed. Glass, not
   a solid fill: a filled bar took its own colour and lit up as a yellow strip over
   the course landings. Here the backdrop picks up whatever scrolls beneath it. */
/* На рекламной посадочной шапка не липкая: страница короткая, экран один,
   и закреплённая полоса только отъедает высоту у чата. */
html.chat-landing-page .mnav{position:static}

/* html.chat-landing-page — рекламная посадочная. Там шапка нужна закреплённой
   с самого верха: страница открывается заголовком кампании на кремовом фоне, и
   прозрачная шапка на нём висела без опоры. Стиль тот же, что при прокрутке. */
.mnav.mnav-stuck,
html.chat-landing-page .mnav{
  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,
html[data-theme="dark"].chat-landing-page .mnav{
  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 before 16 drops backdrop-filter on a sticky element with a see-through
   background — without this fallback the menu text would read over the content. */
@supports not (backdrop-filter:blur(1px)){
  .mnav.mnav-stuck,
  html.chat-landing-page .mnav{background:color-mix(in srgb,var(--bg,var(--cream)) 88%,transparent)}
}
body.has-side .mnav{display:none}
.mnav-in{max-width: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:500;font-size:18px;color:var(--accent);text-decoration:none;line-height:1}
/* Логотип картинкой. Раньше в шапке стоял текст «CBT without a Therapist»: на
   телефоне он занимал 167px из 375 и упирался в иконку темы, из-за чего
   название приходилось обрезать.
   17.08.2026 знак заменён на трёхстрочный («CBT / without / a therapist»), и
   высоты с RU разошлись: у RU логотип однострочный и живёт на 23px, здесь три
   строки — на 23px они сливаются в полосу. 46px это предел, при котором шапка
   ещё не растёт: на 58px она распирается с 83 до 95px. */
.mnav-brand img{height:46px;width:auto;display:block}
.mnav-links{display:flex;gap:30px;font-size:15px;font-weight:500}
.mnav-links a{color:#5b5345;text-decoration:none}
.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}
.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}
.mnav-start:hover{background:#2F5877}
html[data-theme="dark"] .mnav-brand{color:var(--dark-accent,#61ADE5)}
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}
/* Full navigation needs more than a phone breakpoint: between 761 and 960px it
   squeezed the brand and theme control, then pushed the account actions beyond
   the viewport. Tablets use the compact header and the same accessible menu. */
@media(max-width:1000px){.mnav-links{display:none}html{--nav-h:61px}.mnav-in{padding:9px 16px;justify-content:flex-start}
/* Keep the menu button on the right and the brand on the left, matching the
   public header on bezterapevta.ru. */
.mnav-burger{order:9}.mnav-brand{margin-right:auto}
/* Логотип в компактной шапке. Прежние 20px были рассчитаны на однострочный
   знак; трёхстрочный на такой высоте нечитаем. 40px помещается в шапку 61px с
   её отступами по 9px. flex:0 0 auto — чтобы он не сжимался первым, когда
   справа не хватает места: так уже случалось, логотип ужимался до полоски. */
.mnav-brand{flex:0 0 auto;min-width:0;display:flex}
.mnav-brand img{height:40px;width:auto;max-width:none}
/* Бургер как на главной bezterapevta.ru: круг с мягкой заливкой вместо
   скруглённого квадрата с обводкой. Размер 46px повторяет RU. */
.mnav-burger{width:46px;height:46px;border-radius:50%;border:0;
  background:var(--blue-soft,#E9F0F5)}
html[data-theme="dark"] .mnav-burger{background:rgba(233,240,245,.10)}
/* iOS Safari drops a sticky header out of the viewport when the menu locks
   body scrolling. Keep the header as the fixed top row of the open drawer. */
html.menu-open .mnav,body.menu-open .mnav{position:fixed;top:0;left:0;right:0;width:100%}
}/* On narrow screens, Log in stays in the slide-out menu so the brand does not
   collapse into an unreadable fragment. */
@media(max-width:440px){.mnav-in{padding:8px 12px;gap:8px}.mnav-brand{flex:0 1 auto;min-width:0;display:flex;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mnav-brand img{max-height:38px;height:auto;width:auto;max-width:100%}.mnav-cta{gap:8px;flex:0 0 auto}.mnav-login{display:none}.mnav-start{font-size:13.5px;padding:9px 14px}}

/* Start free на очень узких экранах. Замерено 10.08.2026: названию нужно
   167px в одну строку, плюс иконка темы 25, Start free 90, бургер 44,
   зазоры и поля — итого 374px. На 375px это впритык и название начинает
   поджиматься, на 320px переносится на две строки и обрезается.
   Решение владельца: в таком случае убираем Start free — регистрация
   остаётся главным действием внутри панели меню, одним касанием.
   Порог 400px: выше него места хватает с запасом.
   Правило живёт здесь, а не в app-shell.css: nav.css подключается последним,
   и .mnav-cta{display:flex} отсюда иначе перебивает скрытие. */
@media(max-width:400px){ .mnav-cta{display:none} }