/* =================================================
   DESKTOP HEADER — стабильно от 1200 до 940px
   Логика:
   - >= 1180px: полная версия (кнопки с текстом)
   - 940–1179px: у правых кнопок только иконки
   - < 940px: desktop скрывается (дальше будет mobile header)
   ================================================= */

/* ====== WRAPPER ====== */
.site-header{
  max-width: 1200px;
  margin: 20px auto;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, #ffffff, #f2f7ff);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);

  /* ФИЛЬТРЫ ДЛЯ SVG-ИКОНОК В <img>
     Иконки в исходниках должны быть однотонные (желательно чёрные). */
  --ico-ink-filter: invert(13%) sepia(71%) saturate(1107%) hue-rotate(185deg) brightness(88%) contrast(106%); /* ≈ #002C5F */
  --ico-blue-filter: invert(31%) sepia(95%) saturate(2866%) hue-rotate(201deg) brightness(101%) contrast(106%); /* ≈ #006CFF */
}

.site-header__inner{
  display: grid;
  grid-template-columns: auto 1fr auto; /* LOGO | NAV | ACTIONS */
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* ====== LOGO ====== */
.site-header .logo{
  display:inline-flex;
  align-items:center;
  flex: 0 0 auto;
}
.site-header .logo img{
  height: 46px;
  width: auto !important;
  display:block;
  object-fit: contain;
}

/* ====== NAV ====== */
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  min-width: 0;
}

/* ЕДИНЫЙ кликабельный элемент (и для a, и для button) */
.nav-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  height: 44px;
  padding: 0 10px;
  border-radius: 14px;

  font-weight: 700;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);

  text-decoration:none;
  background: transparent;
  border: 0;
  cursor: pointer;

  transition: background .2s ease, color .2s ease;

  white-space: nowrap;
  box-sizing: border-box;
}

.nav-link:hover,
.nav-link:focus-visible{
  background: rgba(0,108,255,.10);
  color: var(--blue);
}

/* Иконки в верхнем меню */
.nav-icon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display:block;

  /* по умолчанию = #002C5F */
  filter: var(--ico-ink-filter);
  transition: filter .2s ease;
}

/* При hover/focus — иконка становится синей (вместе с текстом) */
.nav-link:hover .nav-icon,
.nav-link:focus-visible .nav-icon{
  filter: var(--ico-blue-filter);
}

.nav-text{
  line-height: 1;
}

/* ====== DROPDOWN ====== */
.nav-item{
  position: relative;
  display:flex;
  align-items:center;
}

/* стрелка */
.nav-arrow{
  width: 8px;
  height: 8px;
  flex: 0 0 8px;

  border-right: 1.6px solid var(--blue);
  border-bottom: 1.6px solid var(--blue);

  transform: rotate(45deg);
  transition: transform .2s ease;

  margin-left: 2px;
}

/* dropdown panel */
.dropdown{
  position:absolute;
  top: calc(100% - 6px); /* ключевой фикс */
  left: 0;

  min-width: 240px;
  padding: 10px;

  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.08);

  display:none;
  z-index: 100;
}

/* Hover-bridge: “мостик”, чтобы курсор мог перейти без закрытия */
.dropdown::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}

/* Открытие dropdown: hover + клавиатура */
.nav-item--dropdown:hover .dropdown,
.nav-item--dropdown:focus-within .dropdown{
  display:block;
}

/* Подсветка кнопки остаётся, пока dropdown открыт */
.nav-item--dropdown:hover > .nav-link,
.nav-item--dropdown:focus-within > .nav-link{
  background: rgba(0,108,255,.10);
  color: var(--blue);
}

/* Иконка у кнопки dropdown тоже синеет, когда dropdown открыт */
.nav-item--dropdown:hover > .nav-link .nav-icon,
.nav-item--dropdown:focus-within > .nav-link .nav-icon{
  filter: var(--ico-blue-filter);
}

/* Поворот стрелки при открытии */
.nav-item--dropdown:hover .nav-arrow,
.nav-item--dropdown:focus-within .nav-arrow{
  transform: rotate(-135deg);
}

/* Пункты dropdown */
.dropdown a{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 10px;

  text-decoration:none;
  color: var(--ink);
  font-weight: 600;

  transition: background .2s ease, color .2s ease;
}

.dropdown a:hover,
.dropdown a:focus-visible{
  background: rgba(0,108,255,.10);
  color: var(--blue);
}

/* Иконки внутри dropdown */
.drop-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display:block;

  filter: var(--ico-ink-filter);
  transition: filter .2s ease;
}

.dropdown a:hover .drop-icon,
.dropdown a:focus-visible .drop-icon{
  filter: var(--ico-blue-filter);
}

/* ====== ACTIONS ====== */
.actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex: 0 0 auto;
}

.actions .header-btn{
  height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  white-space: nowrap;
  gap: 10px;
}

/* НЕ ТРОГАЕМ цвета/иконки кнопок Подключиться/ЛК:
   (оставляем как у тебя было в components.css / кнопках) */
.header-btn__icon{
  width: 18px;
  height: 18px;
  display:block;
  flex: 0 0 18px;
}

/* =================================================
   УПЛОТНЕНИЕ (1180+ оставляем как есть)
   ================================================= */

/* 940–1179px: у правых кнопок только иконки */
@media (max-width: 1179px){
  .actions .header-btn{
    font-size: 0;       /* прячем текст */
    gap: 0;
    padding: 10px 12px;
  }
}

/* ниже 940 — уже мобильная шапка (desktop скрываем) */
@media (max-width: 940px){
  .site-header{ display:none; }
}

/* Иконки в кнопках наследуют цвет текста */
.actions .header-btn .header-btn__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}

.header-btn__icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill: currentColor;
}

.actions .header-btn__icon{
  filter: var(--ico-blue-filter); /* по умолчанию */
  transition: filter .2s ease;
}

/* Для синей кнопки — иконка должна быть белой */
.btn--primary .header-btn__icon{
  filter: invert(1);
}

/* Для outline кнопки — синяя */
.btn--outline .header-btn__icon{
  filter: var(--ico-blue-filter);
}

/* При hover у outline кнопки — иконка становится белой */
.btn--outline:hover .header-btn__icon{
  filter: invert(1);
}