/* ====== TOPBAR ====== */
.kl-topbar {
  border-bottom: 1px solid #f1f5f9;
  color: #64748b;
  font-size: 14px;
  background: #fff;
}
.kl-topbar .inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 10px 0;
  flex-wrap: wrap;
}
.kl-topbar .sep { width: 1px; height: 18px; background: #e2e8f0; }
.kl-topbar a { color: inherit; text-decoration: none; }
.kl-topbar a:hover { text-decoration: underline; }
.kl-icon { vertical-align: -3px; margin-right: 6px; }

/* ====== HEADER (desktop base) ====== */
.site-header { position: sticky; top: 0; z-index: 50; background: #f7f7f2; border-bottom: 1px solid #f1f5f0; }
.site-header .container { display: flex; align-items: center; gap: 16px; padding: 12px 0; }

.site-logo img { height: 70px; width: auto; display: block; }

/* desktop nav as pills */
.kl-nav { flex: 1 1 auto; }
.kl-nav .menu {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.kl-nav .menu > li > a {
  display: inline-block; text-decoration: none; text-transform: uppercase;
  font-weight: 700; letter-spacing: .02em; color: #374151;
  padding: 10px 18px; border: 1.5px solid #84cc16; border-radius: 999px; background: transparent;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.kl-nav .menu > li > a:hover { background: #f7fbef; color: #111827; }
.kl-nav .menu > li.current-menu-item > a,
.kl-nav .menu > li.current_page_item > a { box-shadow: 0 0 0 2px #eaffc7 inset; }
/* last item as filled CTA */
.kl-nav .menu > li:last-child > a { background: #84cc16; color: #0b1c00; border-color: #84cc16; }
.kl-nav .menu > li:last-child > a:hover { filter: brightness(.97); }

/* search (desktop) */
.kl-search .search-form {
  display: flex; align-items: center; gap: 8px;
  background: #f5f6f3; border: 1px solid #eef2f7; border-radius: 999px; padding: 6px 10px;
}
.kl-search .search-field { border: 0; background: transparent; outline: none; padding: 10px 8px; min-width: 200px; }
.kl-search .search-submit { border: 0; background: transparent; cursor: pointer; padding: 8px 10px; }

/* ====== BURGER ====== */
.nav-toggle {
  /* по умолчанию скрыт на десктопе */
  display: none;
  border: 0 !important;
  background: transparent !important; /* жёсткий сброс зелёных фонов */
  box-shadow: none !important;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: #6b7280; /* серый */
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before { position: absolute; top: -7px; left: 0; }
.nav-toggle__bar::after  { position: absolute; top:  7px; left: 0; }
/* анимация в крест */
.nav-toggle.is-active .nav-toggle__bar { transform: rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bar::before { top: 0; transform: rotate(-90deg); }
.nav-toggle.is-active .nav-toggle__bar::after  { top: 0; opacity: 0; }

/* ====== RESPONSIVE (tablet/mobile) ====== */
@media (max-width: 1080px) {
  .kl-nav .menu { gap: 12px; }
  .kl-nav .menu > li > a { padding: 9px 14px; font-size: 13px; }
  .kl-search .search-field { min-width: 160px; }
}

@media (max-width: 860px) {
  /* скрываем топбар, десктоп-меню и поиск */
  .kl-topbar { display: none; }
  .kl-search { display: none; }

  /* выстраиваем: логотип по центру, под ним бургер, ниже — выпадающее меню */
  .site-header .container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0;
  }

  /* бургер по центру */
  .nav-toggle {
    display: block;
    margin: 0 auto;   /* центрирование */
  }

  /* делаем меню сворачиваемым (по умолчанию закрыто) */
  .kl-nav {
    order: 4;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    border-top: 0;
  }
  .kl-nav.is-open {
    max-height: 420px; /* хватит для 6–8 пунктов; можно увеличить */
  }

  /* вертикальный список, центрирование, без разделителей */
  .kl-nav .menu {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 0 12px;
  }
  .kl-nav .menu > li > a {
    display: block;
    text-align: center;
    padding: 12px 4px;
    border: 0;                /* без рамок */
    background: transparent;  /* без заливок */
  }
  .kl-nav .menu > li:last-child > a {
    background: transparent;  /* CTA не заполняем на мобиле */
    color: #374151;
  }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .kl-nav { transition: none !important; }
}