/* ============================================================================
   ШАПКА САЙТА — единственное место, где описан её вид.

   Зачем файл (Vadim, 06.09.2026): «на /otzyvy шапка другая, нужно на всех
   страницах шапки привести к стандарту, плюс при переключении со страницы на
   страницу шапка прыгает и логотип везде разного размера».

   До этого дня шапок было шесть: `.nav` (45 страниц, main.css), `.site-header`
   с подписью «Альба Авис / Стоматология» и без телефона (услуги и отзывы),
   `.dr-header` со ссылкой «Все врачи» (14 страниц врачей), `.pv-header`
   (политика), совсем без шапки (404) и вариант акций без раскрывающегося
   списка. Высота логотипа была 40 / 54 / 72 / 88px, высота шапки на телефоне —
   68 / 77 / 91 / 158px. Отсюда и прыжок при переходе между страницами.

   Теперь: разметку кладёт `reviews-scraper/site_nav.py::build_header()`, вид
   описан здесь, и файл подключён на КАЖДОЙ странице, включая те, что не знают
   про main.css (услуги, отзывы, политика, 404, страницы врачей). §🔁 v3.15.

   Высота шапки НЕ меняется при прокрутке — меняется только фон. Раньше логотип
   на широком экране ужимался с 88px до 60px, и содержимое страницы дёргалось.

   Переменные подхватывает меню телефона (`assets/js/nav-mobile.js`) и сторож
   `backend/tests/test_nav_height.py`: он меряет шапку в браузере и сверяет с
   формулой ниже.
   ============================================================================ */

:root{
  --nav-pad: 16px;                   /* отступ сверху и снизу */
  --nav-logo-h: 52px;                /* высота логотипа */
  --nav-ctl-h: 42px;                 /* самая высокая кнопка строки */
  --nav-h: calc(var(--nav-pad) * 2 + max(var(--nav-logo-h), var(--nav-ctl-h)) + 1px);
  /* Воздух между шапкой и первым блоком страницы. Одно число на весь сайт:
     до 08.09.2026 каждая страница держала своё — 16px на главной, 24px на
     услугах, отзывах и политике, — и первый блок везде выглядел по-разному и
     прижатым к шапке (замечание MARKETING-2042 п. 12). Меняете здесь —
     меняется на всех страницах сразу (§🔁). */
  --first-block-air: 40px;
  /* Цвета шапки — свои, не общие переменные страницы. Причина: у страниц
     разные наборы переменных. `--divider` на главной rgba(244,241,234,.08), у
     врачей rgba(196,191,175,.08), а на услугах и отзывах его нет вовсе — и
     линия под шапкой получалась то бледнее, то вдвое заметнее. Проверено
     обходом всех 63 страниц 07.09.2026. */
  --nav-bg: rgba(11,11,10,.97);
  --nav-border: rgba(244,241,234,.10);
  /* Шрифт шапки тоже свой: на 16 страницах (политика, 404, все страницы
     врачей) текст страницы набран Inter, на остальных — системным, и меню
     выглядело по-разному, а кнопка «Записаться» разъезжалась на 2px. */
  --nav-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
}

/* Страницы, у которых первый экран НЕ оставляет места под шапку (услуги,
   отзывы, политика, 404, страницы врачей): раньше у них шапка была «липкая» и
   место занимала сама. Теперь шапка везде «прибитая», и место резервирует
   страница. На остальных страницах отступ уже вписан в первый экран.

   Резервируем ЗАМЕРЕННОЕ число, а не формулу. Формула `--nav-h` знает про
   отступы и логотип, но не знает двух вещей, которые делает режим для
   слабовидящих: крупный шрифт растит кнопку «Записаться» (шапка 85 → 112px на
   компьютере, 67 → 77 на телефоне), а `body.a11y-mode .nav{position:relative}`
   вынимает шапку из «прибитого» состояния — и место она занимает уже сама.
   В первом случае резерва не хватало бы, во втором он был лишним: над шапкой
   висела пустая полоса 85px на компьютере и 67px на телефоне (замер
   07.09.2026 на всех 19 страницах с этим классом).

   Замер кладёт `assets/js/nav-mobile.js` — там же, где меряется шапка для
   выпадающего меню, второй копии измерителя нет (§🔁 v3.15). Запасное
   `var(--nav-h)` — на случай, если скрипт не отработал; формула верна ровно
   в этом случае, потому что без скриптов режим для слабовидящих не
   включается и шапка всегда прибитая. */
body.nav-offset{ padding-top: var(--nav-h-real, var(--nav-h)); }

/* Переход по ссылке-якорю (#book, #team, #implantaciya и прочие) не должен
   заезжать под шапку: она прибита к верху, браузер же подводит цель ровно к
   верхнему краю окна — и заголовок раздела оказывался закрыт целиком.
   Замер 07.09.2026: цель вставала на 0, а низ шапки — на 85, то есть скрыто
   было ровно на высоту шапки. Правило для всего, к чему можно перейти по
   якорю: браузер сам оставит место сверху.

   Число здесь другое, чем в резерве выше: важна не высота шапки, а всё, что
   закрывает верх окна при прокрутке. В режиме для слабовидящих шапка едет
   вместе со страницей, зато к верху липнет панель настроек — на компьютере
   она 128px, и прежних 85px не хватало: заголовок раздела оказывался под
   панелью. `--nav-top-cover` считает и то, и другое. */
[id]{ scroll-margin-top: calc(var(--nav-top-cover, var(--nav-h)) + 16px); }

.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: var(--nav-pad) 0;
  background: rgba(11,11,10,0);
  backdrop-filter: blur(0);
  border-bottom: 1px solid transparent;
  font-family: var(--nav-font);
  transition: background .15s cubic-bezier(.4,0,.2,1),
              backdrop-filter .15s cubic-bezier(.4,0,.2,1),
              border-color .15s cubic-bezier(.4,0,.2,1),
              transform .35s cubic-bezier(.4,0,.2,1);
}
/* Класс ставит assets/js/nav-scroll.js: на страницах без большого первого
   экрана — сразу, на главной — после прокрутки. Меняется ТОЛЬКО фон. */
.nav.scrolled{
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--nav-border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .nav.scrolled{ background: rgba(11,11,10,.99); }
}

/* Логотип прижат к левому краю экрана, а не к колонке содержимого. */
.nav .wrap{ max-width: none; margin: 0; padding-left: 12px; padding-right: 24px; }
.nav-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* Логотип не ужимается: во флекс-строке ужимается кнопка «Записаться», у неё
   есть запас в отступах, а пропорции картинки неприкосновенны. */
.brand{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-logo{
  height: var(--nav-logo-h);
  width: auto; display: block;
  object-fit: contain; object-position: left center;
  transition: opacity .15s cubic-bezier(.4,0,.2,1);
}
.brand-logo:hover{ opacity: .85; }
/* Логотип в подвале. Высота 44px, а не прежние 72: вектор вытянутее старой
   картинки (4.9:1 против 3:1), и при 72px строка занимала 354px — шире, чем
   колонка подвала в 300px. Картинка ужималась и рисовалась на 57px вместо 72
   (найдено обходом страниц 07.09.2026, §👁 v3.16). 44px × 4.9 = 216px —
   ровно столько же места, сколько занимал прежний логотип. */
.footer-brand .brand-logo{ height: 44px; }

.nav-links{ display: flex; gap: 20px; font-size: 14px; line-height: 1.5;
  color: var(--fg-muted, #8b8878); }
.nav-links a{ position: relative; padding: 6px 0; color: inherit; text-decoration: none; }
.nav-links a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent, #7ea593);
  transition: right .15s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover{ color: var(--fg-strong, #f4f1ea); }
.nav-links a:hover::after{ right: 0; }
.nav-links a.active{ color: var(--fg-strong, #f4f1ea); }

/* Раскрывающийся список направлений под пунктом «Услуги». */
.nav-dropdown{ position: relative; }
.nav-dropdown__trigger{
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 0; color: var(--fg-muted, #8b8878);
  font-family: inherit; font-size: inherit; background: transparent; border: 0;
}
.nav-dropdown__trigger:hover{ color: var(--fg-strong, #f4f1ea); }
.nav-dropdown__trigger::after{ content: "▾"; font-size: 10px; opacity: .6; transition: transform .15s; }
.nav-dropdown.is-open .nav-dropdown__trigger::after{ transform: rotate(180deg); }
.nav-dropdown__menu{
  position: absolute; top: calc(100% + 12px); left: -20px;
  min-width: 280px; padding: 12px;
  background: rgba(11,11,10,.98); backdrop-filter: blur(20px);
  border: 1px solid var(--divider-strong, rgba(197,190,174,.22)); border-radius: 14px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  display: none; z-index: 100;
}
.nav-dropdown.is-open .nav-dropdown__menu{ display: block; }
.nav-dropdown:hover .nav-dropdown__menu{ display: block; }
.nav-dropdown__menu a{
  display: block; padding: 10px 14px; font-size: 14px;
  color: var(--fg, #d5d1c6); border-radius: 8px; text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-dropdown__menu a::after{ display: none; }
.nav-dropdown__menu a:hover{ background: rgba(126,165,147,.08); color: var(--accent-strong, #a6c7b4); }
.nav-dropdown__menu a small{ display: block; font-size: 11px; color: var(--fg-muted, #8b8878); margin-top: 2px; }
.nav-dropdown__menu-hint{
  padding: 8px 14px 6px; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-dim, #6d6a5e);
}
.nav-dropdown__menu-all{
  margin-top: 8px; border-top: 1px solid var(--divider, rgba(197,190,174,.14)); padding-top: 12px;
}
.nav-dropdown__menu-all a{
  color: var(--accent-strong, #a6c7b4); padding: 0; font-size: 11px; letter-spacing: .1em;
}

.nav-cta{ display: flex; align-items: center; gap: 16px; }
.nav-phone{
  font-size: 14px; color: var(--fg-strong, #f4f1ea); letter-spacing: .01em;
  display: flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
}
.nav-phone::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #7ea593); box-shadow: 0 0 12px var(--accent, #7ea593);
  animation: nav-phone-pulse 2.4s ease-in-out infinite;
}
@keyframes nav-phone-pulse{
  0%,100%{ opacity: .5; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.3); }
}

/* Кнопка записи. Свой класс, а не общий `.btn`: `.btn` описан в main.css,
   который подключают не все страницы (§🔁 — копии `.btn` в четырёх файлах
   как раз и разошлись: на /services кнопка была шире, чем на /otzyvy). */
.nav-book{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 100px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  /* Межстрочный интервал задан явно: он наследовался от текста страницы, а тот
     разный (1.6 / 1.7 / 1.75), и кнопка выходила высотой 45.7 / 46.4 / 47.8px —
     то есть шапка на разных страницах всё-таки чуть отличалась. */
  line-height: 1.5;
  white-space: nowrap; text-decoration: none;
  background: var(--accent, #7ea593); color: #0b0b0a;
  transition: transform .15s cubic-bezier(.4,0,.2,1), background .15s cubic-bezier(.4,0,.2,1);
}
.nav-book:hover{ background: var(--accent-strong, #a6c7b4); transform: translateY(-1px); }

/* Строка шапки не переносится и не ужимается: логотип неприкосновенен, а
   пунктов меню восемь. Её наименьшая ширина — 1211px, поэтому на окне уже
   1200px правый край кнопки «Записаться» уезжал за экран и молча обрезался
   (`overflow-x: hidden` у страницы): на 1024px — планшет боком, ноутбук,
   ненадутое окно — телефон был обрезан пополам, а кнопки записи не было
   видно вовсе. Замер 07.09.2026 на 961 / 1024 / 1100px. Поэтому пункты меню
   и телефон уходят в кнопку с полосками уже с 1200px, а не с 960px. */
@media (max-width: 1200px){
  :root{ --nav-pad: 14px; }
  .nav-links{ display: none; }   /* открывает кнопка с полосками, nav-mobile.css */
  .nav-phone{ display: none; }
}
@media (max-width: 760px){
  :root{
    --nav-pad: 12px;
    /* На телефоне воздуха меньше: экран короткий, первый экран дороже. */
    --first-block-air: 28px;
    /* Высота логотипа на телефоне: 360px → 24px, 390px → 26, 430px → 29.
       Числа маленькие, потому что логотип — вытянутая строка «ALBA AVIS +
       СТОМАТОЛОГИЧЕСКАЯ КЛИНИКА» с пропорцией 4.9:1 (без полей, в отличие от
       прежней картинки 3:1). При высоте 39px он занял бы 192px ширины и
       вытолкнул кнопку меню за край экрана — поймано сторожем
       deploy/scripts/nav_mobile_check.js на 360/375/390/430px. */
    --nav-logo-h: clamp(20px, 6.6vw, 30px);
  }
  .nav .wrap{ padding-left: 12px; padding-right: 12px; }
  .nav-inner{ gap: 10px; }
  .nav-cta{ gap: 8px; }
  .nav-book{ padding: 10px clamp(12px, 3.6vw, 18px); font-size: 13px; }
}
/* Самые узкие экраны (320-360px): в строке помещаются логотип, глаз,
   «Записаться» и полоски меню — всё вместе 317px при ширине экрана 320.
   Ужимаем промежутки и кнопку, иначе полоски меню уезжают за край. */
@media (max-width: 400px){
  .nav .wrap{ padding-left: 8px; padding-right: 8px; }
  .nav-inner{ gap: 6px; }
  .nav-cta{ gap: 6px; }
  .nav-book{ padding: 9px 12px; font-size: 12px; }
}