/* ─────────────────────────────────────────────────────────────
   Шапка: верхняя полоса (64px) + меню (85px). Лежит поверх героя.
   ───────────────────────────────────────────────────────────── */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}

/* ── Липкая шапка ────────────────────────────────────────────
   При прокрутке полоса меню возвращается сверху. Верхнюю полоску
   с часами и телефонами при этом убираем: она нужна при первом
   взгляде на страницу, а не всё время — иначе шапка съедает
   149 точек высоты на каждом экране.

   Шапка и так вне потока (absolute над героем), поэтому переход
   к fixed ничего не сдвигает: содержимое не прыгает. */
.site-header.is-stuck {
  position: fixed;
  top: 0;
  animation: header-drop 0.28s ease-out;
}
.site-header.is-stuck .topbar { display: none; }
.site-header.is-stuck .navbar {
  box-shadow: 0 6px 24px rgba(var(--ink-rgb), 0.16);
}

@keyframes header-drop {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.is-stuck { animation: none; }
}

/* ── Верхняя полоса ─────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--brand);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.topbar__left {
  display: flex;
  align-items: center;
  gap: 40px;
}
.topbar__hours {
  margin-left: 8px;
  white-space: nowrap;   /* по просьбе: одной строкой, без переноса */
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 27px;
  font-weight: 700;
  color: var(--white);
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 27px;
  font-weight: 700;
  color: var(--white);
  transition: opacity 0.2s;
}
.topbar__link:hover { opacity: 0.8; }
.topbar__link svg { width: 17px; height: 17px; flex: none; }

.topbar__right {
  display: flex;
  align-items: center;
  gap: 22px;   /* одинаковый зазор слева и справа от разделителя */
}

/* Переключатель языка: белая пилюля, активный — бирюзовый */
.lang {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--white);
  border-radius: var(--radius-pill);
}
.lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 32px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  color: var(--brand-deep);
  border-radius: var(--radius-pill);
  transition: background 0.2s, color 0.2s;
}
.lang__item.is-soon { color: rgba(31, 80, 80, 0.42); cursor: default; }
.lang__item.is-active {
  background: var(--brand-deep);
  color: var(--white);
}

.topbar__divider {
  width: 2px;
  height: 30px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 1px;
}

.topbar__search {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 27px;
  font-weight: 700;
  color: var(--white);
}


/* ── Полоса меню ────────────────────────────────────────────── */
.navbar {
  height: var(--navbar-h);
  background: var(--brand);
}
.navbar__inner {
  display: flex;
  align-items: center;
  height: 100%;
}
.logo {
  margin-right: auto;
  display: block;
  /* Логотипу нельзя сжиматься: строка гибкая, и на ноутбуках с окном
     1200–1299 меню выдавливало его вдвое — 119×26 вместо 204×45.
     Место под меню в этом диапазоне освобождаем ниже, полями пунктов. */
  flex: none;
}
.logo img { width: 204px; height: 45px; object-fit: contain; }

.nav { display: flex; align-items: center; align-self: stretch; }
.nav__link {
  display: inline-flex;
  align-items: center;
  height: 37px;
  padding: 0 30px;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 27px;
  font-weight: 900;
  color: var(--white);
  white-space: nowrap;
  transition: opacity 0.2s;
}

/* Поля пунктов поджимаем только там, где меню упирается в логотип:
   на 1366 и шире места хватает и так. */
@media (min-width: 1200px) and (max-width: 1365px) {
  .nav__link { padding: 0 18px; }
}
/* При наведении на меню подсвечен только нужный пункт:
   он остаётся белым, остальные становятся полупрозрачными */
.nav:hover .nav__link { opacity: 0.55; }
.nav:hover .nav__link:hover,
.nav .nav__link:focus-visible { opacity: 1; }

/* Обводка фокуса в токенах бирюзовая — на бирюзовой шапке её не видно */
.site-header :focus-visible { outline-color: var(--white); }

/* …но не на всём: внутри шапки есть и белые поверхности — выпадающие панели
   «О нас» и «Услуги», пилюля переключателя языка и, на телефоне, весь
   выдвижной ящик меню. На них белая обводка сливается с фоном полностью,
   и человек, который ходит по сайту с клавиатуры, не видит, где стоит.
   Возвращаем туда обычную бирюзовую. Активный язык остаётся исключением:
   он сам лежит на тёмно-бирюзовой пилюле. */
.mega :focus-visible,
.lang__item:focus-visible { outline-color: var(--brand); }
.lang__item.is-active:focus-visible { outline-color: var(--white); }

/* Шапка и подвал ящика — только на мобильном */
.nav__head,
.nav__foot,
.nav__scrim,
.nav__toggle { display: none; }

/* ── Мегаменю «Услуги» ──────────────────────────────────────
   Панель висит под всей полосой меню, поэтому пункт растянут
   на высоту навбара: тогда top:100% попадает ровно под шапку.  */
.nav__item {
  position: relative;   /* панель мегаменю висит под самим пунктом */
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Пока курсор внутри панели, сам пункт не должен гаснуть */
.nav__item--mega:hover > .nav__link,
.nav__item--mega:focus-within > .nav__link { opacity: 1; }


.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 40;
  /* Колонки должны вмещать самую длинную подпись («Диагностическое
     направление» — 265px), иначе она переносится и панель едет по высоте. */
  width: 660px;
  max-width: calc(100vw - 40px);
  padding: 26px 30px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 16px 50px rgba(var(--ink-rgb), 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.26s ease,
              transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0.26s;
}
.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Шесть пунктов в две колонки — шаг строки 49px, как на текущем сайте */
.mega__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 22px;
}
.mega__link {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 27px;
  font-weight: 500;
  color: var(--ink);
  /* Раньше стояло nowrap, и слишком длинная подпись вылезала за панель.
     Теперь она переносится: переименование направления вёрстку не сломает. */
  transition: color 0.25s;
}
.mega__link svg { margin-top: 6px; }
.mega__link svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.mega__link:hover { color: var(--brand); }

/* «О нас» — простой список в одну колонку, как на текущем сайте */
.mega--list { width: 286px; padding: 20px 26px; }
.mega--list .mega__list { grid-template-columns: 1fr; row-gap: 16px; }

.head-contacts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  white-space: nowrap;   /* ширина по содержимому — блок вписан в контент, ничего не торчит */
}
.head-contacts a,
.head-contacts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--white);
}
.head-contacts svg { width: 15px; height: 15px; flex: none; }

/* Бургер — только на планшете/мобиле */
.burger { display: none; }

/* ── Плавающие кнопки связи справа ──────────────────────────── */
.floaters {
  position: fixed;
  right: 22px;
  bottom: 50px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.floaters a {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  background: var(--brand);
  color: var(--white);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(13, 35, 45, 0.18);
  transition: transform 0.2s, background 0.2s;
}
.floaters a:hover { transform: translateY(-2px); background: var(--brand-deep); }
.floaters svg { width: 24px; height: 24px; }

/* ─────────────────────────────────────────────────────────────
   Планшет и телефон: верхняя полоса и меню скрыты, вместо меню — бургер
   (как на текущем сайте: шапка 74px, логотип слева)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* На телефоне шапка в потоке, поэтому липкость даётся самой вёрсткой,
     без скрипта. Слой ниже шторки меню (90) и её затемнения (80). */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .topbar { display: none; }

  /* На мобильном шапка тёмная, а не бирюзовая — как на текущем сайте */
  .navbar { height: 74px; background: var(--ink); }
  .navbar__inner { justify-content: space-between; }
  .logo { margin-right: 0; }
  .logo img { width: 180px; height: 40px; }

  .head-contacts { display: none; }

  .burger {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-right: -8px;   /* зона нажатия шире, а выглядит на месте */
    color: var(--white);
  }
  .burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  }

  /* ── Выдвижной ящик меню ──────────────────────────────────
     Едет справа, поверх страницы. Пункты крупные, до любого
     дотягиваешься большим пальцем, ничего не перекрывает. */
  /* Ящик меню белый — обводка фокуса здесь только бирюзовая */
  .nav :focus-visible,
  .nav__close:focus-visible,
  .nav__toggle:focus-visible { outline-color: var(--brand); }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(360px, 86vw);
    padding: 0;
    background: var(--white);
    box-shadow: -20px 0 60px rgba(var(--ink-rgb), 0.22);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 0.32s;
  }
  .nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
  }

  /* Затемнение страницы под ящиком */
  .nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(13, 20, 28, 0.5);
    opacity: 0;
    transition: opacity 0.32s ease;
  }
  .nav__scrim[hidden] { display: none; }
  .nav__scrim.is-open { opacity: 1; }

  /* Шапка ящика */
  .nav__head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
  }
  .nav__head-title {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--brand);
  }
  .nav__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    color: var(--ink);
    border-radius: 50%;
    transition: background 0.2s;
  }
  .nav__close svg { width: 14px; height: 14px; }
  .nav__close:hover { background: var(--line); }

  /* Пункты: крупная зона нажатия, разделители */
  .nav .nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 56px;
    padding: 14px 20px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    opacity: 1;
  }
  .nav:hover .nav__link { opacity: 1; }
  .nav .nav__link:active { background: var(--bg-soft); }

  /* Открытая сейчас страница подсвечена — понятно, где находишься */
  .nav .nav__link.is-current,
  .nav .mega__link.is-current {
    color: var(--brand);
    background: var(--badge-bg);
    box-shadow: inset 3px 0 0 var(--brand);
  }

  .nav__item {
    position: static;
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
  }

  /* Раздел с подпунктами: слева ссылка на сам раздел,
     справа отдельная кнопка «показать вложенные» */
  .nav__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
  }
  .nav__row .nav__link {
    flex: 1 1 auto;
    padding-right: 12px;
    border-bottom: 0;
  }
  .nav__toggle {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    color: var(--muted);
    border-left: 1px solid var(--line);
  }
  .nav__toggle:active { background: var(--bg-soft); }
  .nav__toggle svg {
    width: 13px;
    height: 13px;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .nav__item.is-expanded .nav__toggle svg { transform: rotate(180deg); }
  .nav__item.is-expanded .nav__row .nav__link { color: var(--brand); }

  /* Подпункты раскрываются вниз */
  .mega,
  .mega--list {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    background: var(--bg-soft);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
  }
  .nav__item.is-expanded .mega { display: block; }

  /* Гасим десктопные правила наведения и фокуса.
     Они специфичнее общих мобильных (три класса против одного), поэтому
     побеждали внутри этого же медиазапроса. После первого нажатия фокус
     остаётся на кнопке раскрытия, срабатывало :focus-within, и панель
     получала десктопный сдвиг translate(-50%) — то есть уезжала влево
     на половину своей ширины и вылезала за край ящика. */
  .nav__item--mega:hover .mega,
  .nav__item--mega:focus-within .mega {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .mega__list,
  .mega--list .mega__list {
    display: block;
    grid-template-columns: none;
  }
  .mega__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 12px 20px 12px 32px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    color: var(--ink);
    white-space: normal;
    border-bottom: 1px solid var(--line);
  }
  .mega__link:active { background: var(--badge-bg); }
  .mega__link svg { width: 15px; height: 15px; color: var(--brand); }

  /* Подвал ящика: телефоны и запись */
  .nav__foot {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding: 20px;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
  }
  .nav__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ink);
  }
  .nav__phone svg { width: 16px; height: 16px; color: var(--brand); }

  .nav__cta,
  .nav__wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 13px 20px;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    color: var(--white);
    background: var(--brand);
    border-radius: var(--radius-pill);
  }
  .nav__cta svg,
  .nav__wa svg { width: 17px; height: 17px; }
  .nav__wa { color: var(--brand-deep); background: var(--badge-bg); }

  .floaters { right: 12px; bottom: 16px; gap: 12px; }
  .floaters a { width: 46px; height: 46px; }
  .floaters svg { width: 20px; height: 20px; }
}