/* ==========================================================================
   Шапка сайта (.header). Рядом с include/header.php — под перенос в Битрикс.
   Mobile-first: база 375, затем min-width 1024 / 1440 / 1920.
   ========================================================================== */

.header {
  position: relative;
  z-index: var(--z-header);
  background-color: var(--color-grey);
}

/* Overlay-вариант: прозрачная шапка поверх hero */
.header--overlay {
  background-color: transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}

/* --- Логотип --------------------------------------------------------------*/
.header__logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.header__logo-img {
  width: auto;
  height: 30px;
}

.header__logo-img--light { display: none; }

.header--overlay .header__logo-img--dark { display: none; }
.header--overlay .header__logo-img--light { display: block; }

/* --- Кнопка-переключатель меню (сетка) ------------------------------------*/
.header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  border-radius: var(--radius-control);
  color: var(--color-black);
  transition: background-color var(--transition);
}

.header--overlay .header__toggle {
  background-color: var(--color-white-bg-opacity);
  color: var(--color-white);
}

.header__toggle-icon { width: 24px; height: 24px; }

.header__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

/* --- CTA-кнопка (Онлайн-подбор) в шапке ------------------------------------
   На мобильных скрыта, появляется с 1024. Стилизуется здесь, чтобы шапка
   была самодостаточной при переносе в Битрикс. */
.header__cta {
  display: none;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 24px;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--color-white);
  white-space: nowrap;
  background-color: var(--color-orange);
  border-radius: var(--radius-control);
  transition: background-color var(--transition);
}

.header__cta:hover { background-color: var(--accent-hover); }

/* --- Навигация как выезжающая панель (drawer) на мобильных/планшете --------*/
.header__nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(340px, 85vw);
  padding: 72px 20px 24px;
  overflow-y: auto;
  background-color: var(--color-white);
  transform: translateX(100%);
  transition: transform var(--transition);
}

.header__nav.is-open { transform: translateX(0); }

.header__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-black);
}

.header__close-icon { width: 20px; height: 20px; }

.header__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  font-size: var(--fs-s);
  color: var(--color-black);
  border-radius: var(--radius-control);
  transition: background-color var(--transition), color var(--transition);
}

.header__link:hover { background-color: var(--color-light-grey); }

.header__link--catalog { font-weight: 700; }

.header__link-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}

/* CTA внутри drawer */
.header__nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 8px;
  padding-inline: 24px;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-orange);
  border-radius: var(--radius-control);
  transition: background-color var(--transition);
}

.header__nav-cta:hover { background-color: var(--accent-hover); }

/* --- Затемнение под drawer ------------------------------------------------*/
.header__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-header);
  visibility: hidden;
  opacity: 0;
  background-color: rgba(15, 15, 15, 0.5);
  transition: opacity var(--transition), visibility var(--transition);
}

.header__backdrop.is-open {
  visibility: visible;
  opacity: 1;
}

/* ==========================================================================
   Планшет ≥1024: появляется CTA-кнопка в шапке (меню всё ещё в drawer)
   ========================================================================== */
@media (min-width: 1024px) {
  .header__cta { display: inline-flex; }
  .header__nav-cta { display: none; }
}

/* ==========================================================================
   Десктоп ≥1440: меню в строку, кнопка-сетка и drawer скрыты
   ========================================================================== */
@media (min-width: 1440px) {
  .header__logo-img { height: 40px; }

  .header__toggle,
  .header__close,
  .header__backdrop { display: none; }

  .header__nav {
    position: static;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: auto;
    padding: 0;
    overflow: visible;
    background: none;
    transform: none;
  }

  .header__menu {
    flex-direction: row;
    gap: 4px;
  }

  .header__link {
    min-height: 44px;
    padding: 0 20px;
    font-size: var(--fs-xs);
    background-color: var(--color-white);
  }

  .header__link:hover { background-color: var(--color-light-grey); }

  .header--overlay .header__link {
    color: var(--color-white);
    background-color: var(--color-white-bg-opacity);
  }

  .header--overlay .header__link:hover {
    background-color: rgba(254, 254, 254, 0.35);
  }
}

/* ==========================================================================
   Десктоп ≥1920: увеличенные размеры (пилюли 56, логотип 56, текст 20)
   ========================================================================== */
@media (min-width: 1920px) {
  .header__logo-img { height: 56px; }

  .header__link {
    min-height: 56px;
    font-size: var(--fs-xs); /* на 1920 XS = 20px */
  }

  .header__cta { height: 56px; font-size: var(--fs-xs); }

  .header__link-icon { width: 18px; height: 18px; }
}