/* Верхнее меню (Меню / Материалы / Услуги) — открытие по клику (класс .open) */
.nav { display: flex; align-items: center; gap: 16px; font-weight: 400; }
.nav ul { list-style: none; margin: 0; padding: 0; }

.nav__top { display: flex; gap: 22px; align-items: center; flex-wrap: nowrap; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  padding: 6px 0; margin: 0; color: #444; text-decoration: none;
  background: none; border: 0; font: inherit; font-size: 15px; font-weight: 400;
  cursor: pointer; white-space: nowrap; line-height: 1.2;
}
/* перебиваем утёкшие правила .header_links a (жирность/отступы старой портянки) */
.nav a.nav__link, .nav a.nav__link:hover { margin: 0; font-weight: 400; }
.nav__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .6; }
.nav__arrow { margin-left: auto; padding-left: 16px; color: #b8b8b8; font-style: normal; }

/* выпадающие списки */
.nav__drop, .nav__fly {
  position: absolute; min-width: 220px; background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.14); border: 1px solid #eee; border-radius: 12px;
  padding: 0; display: none;
  max-height: min(70vh, 440px); overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}
/* контейнеры с вложенными flyout не обрезаем — иначе вложенное подменю обрежется */
.nav__drop:has(.nav__fly), .nav__fly:has(.nav__fly) { max-height: none; overflow: visible; }
/* тонкий скроллбар у длинных списков */
.nav__drop::-webkit-scrollbar, .nav__fly::-webkit-scrollbar { width: 8px; }
.nav__drop::-webkit-scrollbar-thumb, .nav__fly::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 8px; }
.nav__drop { top: calc(100% + 6px); left: 0; z-index: 70; }
.nav__fly  { top: -1px; left: calc(100% + 4px); z-index: 80; }   /* вниз, потом вправо */

/* пункты внутри выпадашек: заливка во всю ширину, без скругления (углы даёт контейнер) */
.nav__drop .nav__link, .nav__fly .nav__link {
  width: 100%; padding: 11px 18px; border-radius: 0; font-weight: 400; color: #1a1a1a;
}
.nav__drop > .nav__item:first-child > .nav__link,
.nav__fly  > .nav__item:first-child > .nav__link { border-radius: 12px 12px 0 0; }
.nav__drop > .nav__item:last-child > .nav__link,
.nav__fly  > .nav__item:last-child > .nav__link { border-radius: 0 0 12px 12px; }
.nav__drop > .nav__item:only-child > .nav__link,
.nav__fly  > .nav__item:only-child > .nav__link { border-radius: 12px; }

/* активный пункт: жёлтый фон, ЧЁРНЫЙ текст, без жирности */
/* .open — раскрытый путь остаётся подсвеченным даже без курсора */
.nav .nav__drop .nav__item:hover > .nav__link,
.nav .nav__fly  .nav__item:hover > .nav__link,
.nav .nav__drop .nav__item.open > .nav__link,
.nav .nav__fly  .nav__item.open > .nav__link { background: #ffc93e; color: #000; font-weight: 400; }
.nav .nav__drop .nav__item:hover > .nav__link .nav__arrow,
.nav .nav__fly  .nav__item:hover > .nav__link .nav__arrow,
.nav .nav__drop .nav__item.open > .nav__link .nav__arrow,
.nav .nav__fly  .nav__item.open > .nav__link .nav__arrow { color: #000; }

/* показ по клику */
.nav__item.open > .nav__drop,
.nav__item.open > .nav__fly { display: block; }

/* убираем «плавание» шапки/поиска при ресайзе — блок должен вставать сразу.
   Слайд off-canvas панели (≤900) задаётся отдельно ниже через transform. */
.header_links { transition: none; }
.header_links .search, .header_links .search * { transition: none; }

/* поиск — как в исходной вёрстке: инпут по своей высоте, кнопка ровно по нему */
.header_links .search { display: inline-block; position: relative; }
.header_links .search input { box-sizing: border-box; height: 30px; vertical-align: top; }
.header_links .search_btn { box-sizing: border-box; top: 0; right: 0; height: 100%; width: 30px; background-size: 16px 16px; }

@media (max-width: 900px) {
  .nav { display: block; }
  .nav__top { flex-direction: column; align-items: stretch; gap: 0; }
  /* вложенные уровни: без белых плашек, видна иерархия через отступ и линию слева */
  .nav .nav__drop, .nav .nav__fly {
    position: static; box-shadow: none; border: 0; border-left: 2px solid rgba(0,0,0,.12);
    border-radius: 0; background: transparent; min-width: 0; padding: 0 0 0 14px;
    margin: 6px 0 8px 8px;
    max-height: none; overflow: visible;
  }
  .nav__item { text-align: left; }
  .nav__link { width: 100%; padding: 9px 6px; white-space: normal; }
  .nav__drop .nav__link, .nav__fly .nav__link { border-radius: 0 !important; color: #1a1a1a; }
  .nav__arrow { margin-left: auto; color: #000; opacity: 1; }
}

/* ── Планшет + мобилка: единый брейкпоинт бургер-меню (≤900) ──
   Раньше style.min.css включал бургер/off-canvas только на ≤767, а nav (выше)
   переходит в стопку на ≤900 — в зазоре 768–900 меню разворачивалось сплошным
   столбцом поверх контента и ломало вёрстку. Приводим бургер, off-canvas и
   статичную шапку к тому же ≤900. */
@media (max-width: 900px) {
  /* шапка не фиксированная — не перекрывает контент и не даёт горизонтальный сдвиг */
  .menu { position: static; -webkit-transform: none; transform: none; margin-top: 52px; padding: 12px 16px; }
  .main_page { margin-top: 20px; }

  /* верхняя жёлтая полоса-бургер (кнопка открытия/закрытия) */
  .menu .burger { display: block; position: fixed; left: 0; top: 0; width: 100%;
    padding: 12px 16px; background: #ffc93e; z-index: 60; box-sizing: border-box; cursor: pointer; }
  .menu .burger i { display: block; width: 26px; height: 20px;
    background: url(../images/icons/burger.png) center center / contain no-repeat; }

  /* открытое меню: бургер → крестик */
  .menu:has(.header_links_js.-active) .burger i { background-image: none; position: relative; height: 24px; }
  .menu:has(.header_links_js.-active) .burger i::before,
  .menu:has(.header_links_js.-active) .burger i::after {
    content: ""; position: absolute; top: 50%; left: 1px; width: 24px; height: 2px;
    background: #000; transform-origin: center; }
  .menu:has(.header_links_js.-active) .burger i::before { transform: rotate(45deg); }
  .menu:has(.header_links_js.-active) .burger i::after  { transform: rotate(-45deg); }

  /* off-canvas панель со списком: выезжает слева, скроллится по вертикали */
  .menu .header_links {
    position: fixed; top: 0; left: 0; width: 100%;
    height: 100vh; height: 100dvh; margin: 0;
    padding: 68px 20px 48px; box-sizing: border-box;
    background: #ffc93e; color: #000;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    -webkit-transform: translateX(-105%); transform: translateX(-105%);
    transition: transform .35s ease; z-index: 55;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .menu .header_links.-active { left: 0; -webkit-transform: none; transform: none; }
  .menu .header_links .search { display: block; margin-top: 20px; align-self: stretch; max-width: 340px; }
  .menu .header_links .search input { width: 100%; box-sizing: border-box; }

  /* пункты верхнего уровня (Меню / Материалы / Услуги) крупнее */
  .header_links .nav__toggle { font-size: 19px; padding-top: 12px; padding-bottom: 12px; }

  /* пока меню открыто — фон не прокручивается */
  html.menu-open, html.menu-open body { overflow: hidden; }
  html.menu-open .cookie-note { display: none; }
}

/* ── Промежуточный десктоп 901–1199: шапка в два ряда ──
   Ряд 1: лого слева / калькулятор по центру / иконки справа.
   Ряд 2: меню слева / телефон справа (напротив меню). */
@media (min-width: 901px) and (max-width: 1199px) {
  .menu {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo calc   options"
      "nav  search phone";
    align-items: center;
    row-gap: 14px; column-gap: 16px;
  }
  .menu .header_logo  { grid-area: logo; justify-self: start; width: auto; }
  .menu_calc          { grid-area: calc; justify-self: center; }
  .menu_options       { grid-area: options; justify-self: end; width: auto; }
  /* header_links «прозрачный»: nav и поиск встают отдельными ячейками ряда 2 */
  .menu .header_links { display: contents; }
  .menu .header_links .nav    { grid-area: nav; justify-self: start; margin-top: 0; }
  .menu .header_links .search { grid-area: search; justify-self: center; margin: 0 16px; }
  .menu .phones       { grid-area: phone; justify-self: end; text-align: right; align-items: flex-end; order: 0; }
}