/* ==========================================================================
   Шапка: логотип, меню, выпадающий список, бургер
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

/* Класс ставит скрипт, когда страница ушла вниз. */
.site-header.is-scrolled {
  border-bottom-color: var(--c-border);
  box-shadow: 0 2px 20px rgba(19, 44, 79, .08);
}

.site-header__inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* ── Логотип ─────────────────────────────────────────────────────────────── */

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.site-logo__mark {
  height: 56px;
  width: auto;
}

.site-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.site-logo__name {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.5px;
  color: var(--c-navy);
}

.site-logo__tagline {
  font-family: var(--f-body);
  font-size: var(--fs-micro);
  letter-spacing: .5px;
  color: var(--c-text-muted);
  margin-top: 3px;
}

/* ── Меню ────────────────────────────────────────────────────────────────── */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* Своя шапка есть только у меню-панели на телефоне. */
.site-nav__top { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.site-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--f-head);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;   /* «Service Area» не должен ломаться пополам */
  color: var(--c-navy);
  transition: color var(--t-base);
}

/* Открыта страница услуги — подсвечен и сам пункт «Services»: иначе в строке
   меню ничто не показывает, в каком разделе ты находишься. */
.site-nav__link.is-current,.nav-group.is-current-parent > .nav-parent {
  color: var(--c-accent);
}
@media (hover: hover) {
.site-nav__link:hover {
  color: var(--c-accent);
}
}

.nav-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .55;
  transition: transform var(--t-base), opacity var(--t-base);
}@media (hover: hover) {
.site-nav__item:hover .nav-caret { opacity: 1; }
}

/* ── Выпадающий список (десктоп) ─────────────────────────────────────────── */

.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 268px;
  padding: var(--sp-2);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-menu);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: var(--z-dropdown);
}

/* Раскрытие по наведению — только на десктопе, и правила заперты в своей
   ширине. Пока они действовали везде, тап на телефоне оставлял на пункте
   :focus-within, и список услуг, уже помеченный как раскрытый, уезжал
   выпадающим смещением translateX(-50%) за левый край экрана. */
@media (min-width: 769px) {

  /* Мостик под пунктом, чтобы курсор не терял меню в зазоре. */
  .nav-group::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
  }.nav-group:focus-within .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
@media (hover: hover) {
.nav-group:hover .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}
}

.site-nav__sublink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-family: var(--f-head);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}.site-nav__sublink.is-current {
  background: var(--c-bg-light);
  color: var(--c-accent);
}
@media (hover: hover) {
.site-nav__sublink:hover {
  background: var(--c-bg-light);
  color: var(--c-accent);
}
}

/* Иконка ведёт взгляд, но не спорит с названием. */
.site-nav__icon {
  flex-shrink: 0;
  opacity: .45;
  transition: opacity var(--t-fast);
}.site-nav__sublink.is-current .site-nav__icon {
  opacity: 1;
}
@media (hover: hover) {
.site-nav__sublink:hover .site-nav__icon {
  opacity: 1;
}
}

/* ── Телефон и кнопка записи ─────────────────────────────────────────────── */

/* Телефон — не кнопка, а сам номер со значком: на сайте ремонтников это
   главное действие, и выглядеть оно должно как телефон, а не как реклама. */
.site-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.2px;
  white-space: nowrap;
  color: var(--c-navy);
  transition: color var(--t-base);
}

.site-nav__phone .icon { color: var(--c-accent); }@media (hover: hover) {
.site-nav__phone:hover { color: var(--c-accent); }
}

/* Запись в верхней строке больше не стоит. Пунктов стало семь, и «Book Online»
   седьмым ломался на две строки, а строка меню не помещалась в экран.
   Убрали именно его, потому что запись и так есть на каждой странице:
   плавающая кнопка внизу справа, кнопка первого экрана и баннер в конце.
   В мобильной панели он остаётся — там места хватает, и это удобный выход. */
@media (min-width: 1025px) {
  .site-nav__item:has(.site-nav__book) { display: none; }}

/* ── Бургер ──────────────────────────────────────────────────────────────── */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;      /* палец попадает без прицеливания */
  height: 44px;
  padding: 10px;
}

/* Полоски больше не складываются в крестик: открытое меню занимает весь
   экран и закрывается своим крестиком, а бургер под ним не виден — вся
   эта анимация крутилась впустую. */
.burger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c-navy);
  border-radius: 2px;
}

/* ── Мобильная версия ────────────────────────────────────────────────────── */

/* Между 1025 и 1200 строка помещается только на тесных промежутках. */
@media (max-width: 1200px) {
  .site-nav__list { gap: var(--sp-4); }
  .site-nav { gap: var(--sp-4); }}

/* Порог бургера — 1024, а не 768: пунктов стало семь, и на 1000 px строка
   меню уже вылезала за край экрана. Значение продублировано в main.js
   (isMobile) — меняешь здесь, меняй и там. */
@media (max-width: 1024px) {
  .burger { display: flex; }

  /* Меню на телефоне живёт в нише под страницей (05-drawer.css): скрипт
     переносит его туда с этой ширины и возвращает в шапку на десктопной.
     Показом занимается сама ниша, поэтому здесь меню просто колонка —
     ни fixed, ни своего фона, ни своей прокрутки: прокручивается панель.

     Показываем его ТОЛЬКО когда оно уже внутри ниши. В разметке, которую
     отдаёт сервер, меню лежит в шапке, и пока скрипт не успел его
     перенести, оно секунду висело развёрнутой колонкой поверх страницы —
     на перезагрузке это било в глаза, а с Turbo мелькало бы на каждом
     переходе. Правило по месту, а не по классу: класс пришлось бы снимать
     и вешать, и любая осечка скрипта оставила бы меню невидимым насовсем. */
  .site-header__inner .site-nav { display: none; }

  .drawer__panel .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  /* Своей шапки у панели больше нет. Логотип в ней дублировал логотип
     сайта, а тот и так виден на уехавшей странице слева; крестик не нужен,
     потому что закрывают меню тем же жестом, каким открыли, или тапом по
     странице. Осталась одна строка отступа сверху. */
  .site-nav__top {
    display: block;
    padding-top: var(--sp-4);
  }

  .site-nav__logo { display: none; }

  /* Кнопка выхода остаётся в разметке ради клавиатуры: панель объявлена
     модальным диалогом, и уйти из неё табом должно быть чем. Пальцу она
     не показывается — всплывает только по :focus-visible. */
  .site-nav__close {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .site-nav__close:focus-visible {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 var(--gutter) var(--sp-2) auto;
    overflow: visible;
    clip-path: none;
    border-radius: var(--r-sm);
    color: var(--c-navy);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--gutter) 0;
  }

  .site-nav__item {
    display: block;
    border-bottom: 1px solid var(--c-border);
  }

  .site-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 17px 0;
    font-size: var(--fs-base);
  }

  /* Стрелка не едет плавно: на телефоне список раскрывается сразу под
     пальцем, и доводка добавляла только ощущение задержки. */
  .nav-caret {
    transform: rotate(45deg);
    margin-right: 6px;
    transition: none;
  }

  .nav-group.is-expanded .nav-caret { transform: rotate(-135deg); }

  /* На телефоне это аккордеон: раскрывается кликом, а не наведением. */
  .site-nav__submenu {
    position: static;
    transform: none;
    display: none;
    min-width: 0;
    margin-bottom: var(--sp-3);
    padding: var(--sp-1) 0 0;
    background: var(--c-bg-light);
    border: 0;
    border-radius: var(--r-sm);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .nav-group.is-expanded .site-nav__submenu { display: block; }

  .site-nav__submenu li:last-child .site-nav__sublink { margin-bottom: var(--sp-1); }

  .site-nav__sublink {
    padding: 12px 14px;
    white-space: normal;
    transition: none;
  }

  .site-nav__icon { opacity: .6; }

  /* ── Где я сейчас ──────────────────────────────────────────────────────
     Раньше текущая страница отличалась только оттенком синего, а у подпункта
     подсветка была задана фоном `--c-bg-light` — тем же цветом, каким залит
     сам список услуг. То есть её просто не было видно. */

  /* Пункт верхнего уровня: цвет плюс полоса у самого края панели. */
  .site-nav__link.is-current,
  .nav-group.is-current-parent > .nav-parent {
    color: var(--c-accent);
  }

  .site-nav__link.is-current::before,
  .nav-group.is-current-parent > .nav-parent::before {
    content: "";
    position: absolute;
    left: calc(var(--gutter) * -1);
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    border-radius: 0 3px 3px 0;
    background: var(--c-accent);
  }

  /* Открытая услуга в списке: белая плашка с полосой слева. Белая — потому
     что список под ней светло-серый, и любой оттенок серого на нём пропадёт. */
  .site-nav__sublink.is-current {
    background: var(--c-white);
    box-shadow: inset 3px 0 0 var(--c-accent);
    font-weight: 700;
  }

  /* Запись и звонок — два действия внизу списка, а не пункты среди прочих.
     Ссылкой с кремовым подчёркиванием запись читалась как опечатка. */
  .site-nav__item:has(.site-nav__book) {
    border-bottom: 0;
    margin-top: var(--sp-5);
  }

  .site-nav__book {
    justify-content: center;
    padding: 16px 18px;
    border-radius: var(--r-sm);
    background: var(--c-navy);
    color: var(--c-white);
    letter-spacing: 1px;
    text-decoration: none;
  }

  .site-nav__book.is-current { color: var(--c-white); }

  /* В раскрытом меню телефон возвращается — там он не теснит логотип. */
  .site-nav__phone {
    display: flex;
    justify-content: center;
    margin: var(--sp-3) var(--gutter) 0;
    padding: 15px 18px;
    border: 2px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: 17px;
  }}