/* ===================== ХЕДЕР ===================== */
.site-header {
  background: var(--color-bg);
  padding: 0;
  position: relative;
  z-index: 200; /* выше hero */
}

.container.header-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 80px;
  flex-wrap: nowrap;
  overflow: visible; /* чтобы выпадашки не обрезались */
}

/* логотип */
.site-branding .site-title,
.site-branding img {
  font-size: 24px;
  color: var(--color-text);
  text-decoration: none;
}

/* панель действий справа (языки + бургер) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* ===================== ГЛАВНОЕ НАВИГАЦИОННОЕ МЕНЮ ===================== */
.main-navigation-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
  flex-grow: 1;
  max-width: 100%;
  overflow: hidden;
}

.main-navigation-scroll {
  overflow-x: auto;
  white-space: nowrap;
  flex-grow: 1;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
.main-navigation-scroll::-webkit-scrollbar { display: none; } /* WebKit */

.scroll-container {
  display: inline-flex;
  gap: 20px;
  min-width: max-content;
  position: relative;
  z-index: 1;
}

.scroll-container .main-menu {
  display: inline-flex;
  gap: 20px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
}
.scroll-container .main-menu li { display: inline-block; }

.scroll-container .main-menu li a {
  display: inline-block;
  white-space: nowrap;
  padding: 8px 14px;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--transition-fast);
}
.scroll-container .main-menu li a:hover {
  background: var(--color-accent);
  color: #000;
}

.scroll-btn {
  background: transparent;
  opacity: .7;
  border: 0;
  padding: 0;
  color: var(--color-accent);
  font-size: 18px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: color var(--transition-fast);
}
.scroll-btn:hover { color: #fff; }

.main-navigation-wrapper::before,
.main-navigation-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transition: opacity .3s ease;
}
.main-navigation-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}
.main-navigation-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

/* отключаем горизонтальное меню на <=768px */
@media (max-width: 768px){
  .main-navigation-wrapper{ display: none; }
}


/* ===================== БУРГЕР / МОБИЛЬНОЕ МЕНЮ ===================== */
.burger-toggle{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  width:36px;
  height:28px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--color-border,#333);
  border-radius:8px;
  cursor:pointer;
  z-index:1002;
}
.burger-toggle span{ display:block; width:18px; height:2px; background:var(--color-text,#fff); transition:.2s; }
.burger-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger-toggle.open span:nth-child(2){ opacity:0; }
.burger-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (min-width:1024px){ .burger-toggle{ display:none; } }

.mobile-menu{
  position:fixed;
  top:0;
  right:-100%;
  width:82vw;
  max-width:380px;
  height:100vh;
  background:var(--color-bg,#000);
  border-left:1px solid var(--color-border,#333);
  transition:right .25s ease;
  z-index:1001;
  padding:16px 12px 24px;
  overflow:auto;
}
.mobile-menu.open{ right:0; }

.close-menu{
  position:absolute;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--color-border,#333);
  border-radius:8px;
  background:transparent;
  color:var(--color-text,#fff);
  font-size:22px;
  line-height:1;
  z-index:1003;
  pointer-events:auto;
  cursor:pointer;
}
.close-menu:hover{ background:rgba(255,255,255,.08); }

.menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; }
.menu-overlay:not(.active){ display:none; }
.no-scroll{ overflow:hidden; }