/* header */

.header {
  width: 100%;
  background: var(--color-yellow);
  z-index: var(--z-index-3);
}

@media (max-width: 768px) {
  .header {
    display: none;
  }
}

.header__container {
  display: flex;
  justify-content: space-between;
  padding-top: 67px;
  padding-bottom: 31px;
}

.header-logo-text span {
  font-weight: 600;
  font-size: 22px;
  line-height: 120%;
  text-transform: uppercase;
}

.header-logo-text-1 {
  color: #3d3535;
}

.header-logo-text-2 {
  color: #776c69;
}

.header__menu {
  display: flex;
  gap: 48px;
  align-items: center;

  font-weight: 400;
  font-size: 20px;
  color: #2b2a29;
  text-decoration: none;
}

.header__menu > li {
  position: relative;
}

.header__menu-link {
  display: flex;
  gap: 48px;
}

.header__menu-link img {
  width: 20px;
  height: 20px;
}

/* --- СТИЛИ ВЫПАДАЮЩЕГО МЕНЮ (Задел под WordPress .sub-menu) --- */

.header__menu .sub-menu {
  position: absolute;
  top: 45px;
  left: 70%;
  min-width: 220px;
  background-color: #ffffff;
  padding: 12px 0;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* Состояние скрыто по умолчанию */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
  z-index: 100;
}

/* Ссылки внутри выпадающего списка */
.header__menu .sub-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 400;
  color: #2b2a29;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Делаем ссылку flex-контейнером, чтобы текст и стрелочка стояли на одной линии */
.header__menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: 13px;
}

/* Свойства для самой иконки */
.header__menu .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 13px; /* Ширина иконки */
  height: 8px; /* Высота иконки */

  /* Подключение SVG (через url или base64) */
  background-image: url('../../icons/arrow-header.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Плавный поворот стрелочки, если захочешь анимировать при наведении */
  transition: transform 0.3s ease;
}

/* Опционально: поворачиваем стрелочку вверх при наведении на пункт меню */
.header__menu .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

/* Эффект наведения на пункт в выпадающем меню */
.header__menu .sub-menu a:hover {
  color: #776c69;
  background-color: var(--color-yellow);
}

/* Появление меню при наведении мыши на родительский li */
.header__menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Невидимая прослойка, чтобы меню не закрывалось, если вести мышку медленно */
.header__menu .sub-menu::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 15px;
}

/* --- ОСТАЛЬНЫЕ ВАШИ СТИЛИ ХЕДЕРА --- */

.header__contact {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header__icons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header__icons a {
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  text-align: right;
  color: #3d3535;
}

.header__socials-btn {
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  text-align: right;
  color: var(--white);

  padding: 14px 28px;
  border-radius: 4px;
  background: #3d3535;
}

/* ====Бургер==== */

/* ==========================================
   СТИЛИЗАЦИЯ МОБИЛЬНОГО МЕНЮ (ПОПАПА)
   ========================================== */

/* 1. Основной контейнер попапа */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999; /* Поверх всех элементов на сайте */
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  display: block !important; /* Перебиваем возможные скрытия темы */
}

/* 2. Темная вуаль на фоне */
.mobile-menu__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(43, 42, 41, 0.6); /* Полупрозрачный фирменный цвет */
  backdrop-filter: blur(3px); /* Легкое размытие заднего фона */
  transition: opacity 0.3s ease;
}

/* 3. Выезжающая панель с контентом */
.mobile-menu__body {
  position: absolute;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85%; 
  height: 100%;
  background-color: var(--color-yellow); 
  padding: 50px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* 4. Кнопка закрытия (крестик) */
.mobile-menu__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 40px;
  line-height: 1;
  color: #2b2a29;
  cursor: pointer;
  padding: 5px;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.mobile-menu__close:hover {
  color: #87b2a3; /* Подсвечиваем зеленым при наведении/нажатии */
  transform: rotate(90deg); /* Эффектный поворот крестика */
}

/* 5. Навигация по сайту */
.mobile-menu__nav {
  margin-top: 40px;
}

.mobile-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Расстояние между пунктами меню */
}

.mobile-menu__list li {
  margin: 0;
  padding: 0;
}

.mobile-menu__list li a {
  display: inline-block;
  font-size: 22px; /* Крупный, легко нажимаемый пальцем шрифт */
  font-weight: 700;
  color: #2b2a29;
  text-decoration: none;
  line-height: 130%;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

/* Анимация при наведении на пункт меню */
.mobile-menu__list li a:hover,
.mobile-menu__list li a:active {
  color: #87b2a3;
  transform: translateX(5px); /* Легкий сдвиг вправо для интерактивности */
}

/* 6. Блок контактов в самом низу меню */
.mobile-menu__contacts {
  border-top: 1px solid #e3eadd; /* Аккуратная разделительная линия */
  padding-top: 30px;
  margin-top: auto;
}

.mobile-menu__icons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.mobile-menu__icons a img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* --- СТИЛИЗАЦИЯ ПОДМЕНЮ (ВСЕГДА ОТКРЫТО) --- */

/* Находим дефолтный класс WordPress для пунктов с подменю */
.mobile-menu__list .menu-item-has-children {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Сам список подменю — теперь он открыт по умолчанию */
.mobile-menu__list .sub-menu {
  list-style: none;
  padding: 0 0 0 20px; /* Сдвигаем вправо для визуальной иерархии */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 2px solid #e3eadd; /* Тонкая вертикальная линия для наглядности связи */
}

/* Ссылки в подменю делаем чуть меньше и тоньше основного меню */
.mobile-menu__list .sub-menu li a {
  font-size: 18px;
  font-weight: 400;
  color: #4a4a4a;
}

/* Анимация при наведении на ссылку в подменю */
.mobile-menu__list .sub-menu li a:hover,
.mobile-menu__list .sub-menu li a:active {
  color: #87b2a3;
}

/* ==========================================
   СОСТОЯНИЕ "ОТКРЫТО" (ТРИГГЕРЫ ИЗ JS)
   ========================================== */
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
}

.mobile-menu.is-open .mobile-menu__body {
  right: 0; /* Плавно выезжает на экран */
}

/* ==========================================
   1. ПРАВИЛО ДЛЯ ПК (Экран шире 768px)
   Полностью выключаем мобильный попап и кнопку, 
   чтобы они случайно не открывались на десктопе.
   ========================================== */
@media (min-width: 769px) {
  .mobile-menu {
    display: none !important;
  }

  /* Скрываем кнопку вызова бургера на ПК, какой бы класс на ней ни висел */
  .js-open-burger {
    display: none !important;
  }
}

/* ==========================================
   2. ПРАВИЛО ДЛЯ МОБИЛОК (768px и меньше)
   Включаем отображение попапа при активации.
   ========================================== */
@media (max-width: 768px) {
  /* Показываем саму кнопку бургера */
  .js-open-burger {
    display: flex !important; /* или block, в зависимости от твоей верстки кнопки */
  }

  /* Сбрасываем возможные display: none из старых стилей темы */
  .mobile-menu {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 99999 !important; /* Поднимаем выше всех элементов на мобилке */

    /* Возвращаем наше управление видимостью */
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  /* Когда вешаем класс открытия */
  .mobile-menu.is-open {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mobile-menu.is-open .mobile-menu__body {
    right: 0 !important; /* Панель выезжает */
  }
}