/* 🌈 КОРНЕВЫЕ ПЕРЕМЕННЫЕ ДЛЯ ЦВЕТОВ И СТИЛЕЙ */
:root {
  --header-bg: #3e2723;          /* 🎨 Основной цвет фона шапки */
  --header-text: #ffffff;        /* ✏️ Цвет текста в шапке */
  --header-hover: #5d4037;       /* ⚡ Цвет элементов при наведении */
  --submenu-bg: #2e1d19;         /* 🗂️ Фон выпадающих подменю */
  --search-bg: #ffffff;          /* 🔍 Фон поля поиска */
  --search-text: #000000;        /* ✒️ Цвет текста в поле поиска */
  --search-btn: #4e342e;         /* 🔘 Цвет кнопки поиска */
  --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ⏱️ Плавные переходы */
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* 👥 Тень элементов */
  --border-radius: 8px;          /* 🔲 Скругление углов */
}

/* 🚀 ОСНОВНАЯ ШАПКА САЙТА (FIXED POSITION) */
.main-header {
  background: #795548; /* ⚠️ Используется конкретный цвет вместо переменной */
  color: var(--header-text);
  position: fixed;     /* 🔒 Фиксированное позиционирование */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;       /* 📌 Высокий z-index для поверх других элементов */
  box-shadow: var(--shadow);
  transition: var(--transition);
  padding: 0;
}

/* 📦 ВНУТРЕННИЙ КОНТЕЙНЕР ШАПКИ */
.header-inner {
  max-width: 1400px;   /* 🔒 Максимальная ширина контента */
  margin: 0 auto;      /* ↔️ Центрирование по горизонтали */
  padding: .8rem 2rem; /* 📏 Внутренние отступы */
  display: flex;       /* 🔳 Flex-контейнер */
  align-items: center; /* ↔️ Выравнивание элементов по вертикали */
  justify-content: space-between; /* ↔️ Распределение пространства */
  position: relative;
}

/* 🧭 ГЛАВНОЕ МЕНЮ НАВИГАЦИИ */
.scat-main-menu {
  display: flex;
  justify-content: flex-start; /* ← Выравнивание слева */
  list-style: none;            /* 🚫 Убираем маркеры списка */
  margin: 0;
  padding: 0;
  gap: 1.2rem;                 /* ↔️ Расстояние между пунктами меню */
  flex-wrap: wrap;             /* 🔄 Перенос на новую строку при нехватке места */
}

/* 🖥️ АДАПТИВ: МЕНЮ НА ПЛАНШЕТАХ */
@media (max-width:1024px) {
  .scat-main-menu {
    margin-left: 0; /* ← Сброс левого отступа */
  }
}

/* 📌 ЭЛЕМЕНТЫ МЕНЮ */
.scat-main-menu li {
  position: relative; /* 📍 Для позиционирования подменю */
}

/* 🔗 ССЫЛКИ В МЕНЮ */
.scat-main-menu li a {
  color: var(--header-text);
  text-decoration: none;     /* 🚫 Убираем подчеркивание */
  font-weight: 500;          /* 🔤 Жирность шрифта */
  padding: .6rem 1rem;       /* 📏 Внутренние отступы */
  display: inline-block;     /* 🔳 Блочно-строчное отображение */
  transition: var(--transition); /* ⏱️ Плавные переходы */
  border-radius: var(--border-radius); /* 🔲 Скругленные углы */
  font-size: 1rem;
}

/* ⚡ ЭФФЕКТЫ ПРИ НАВЕДЕНИИ НА ССЫЛКИ */
.scat-main-menu li a:focus,
.scat-main-menu li a:hover {
  background: var(--header-hover); /* 🎨 Изменение фона */
  transform: translateY(-2px);     /* ⬆️ Сдвиг вверх */
}

/* 🗂️ ВЫПАДАЮЩЕЕ ПОДМЕНЮ */
.submenu {
  opacity: 0;                  /* 👻 Полностью прозрачное */
  visibility: hidden;           /* 👻 Скрыто из потока */
  position: absolute;           /* 📍 Абсолютное позиционирование */
  top: calc(100% + .1rem);      /* ⬇️ Расположение под родительским элементом */
  left: 0;
  background: var(--submenu-bg);
  border-radius: var(--border-radius);
  padding: .8rem 0;             /* 📏 Внутренние отступы */
  z-index: 999;                 /* 📌 Высокий z-index */
  min-width: 16rem;             /* 🔒 Минимальная ширина */
  max-height: 70vh;             /* 🔒 Максимальная высота */
  overflow-y: auto;             /* ↕️ Вертикальный скролл при необходимости */
  box-shadow: var(--shadow);
  transform: translateY(.5rem); /* ⬇️ Начальное смещение */
  transition: opacity .3s, transform .3s, visibility .3s; /* ⏱️ Плавные переходы */
}

/* 👆 ОТОБРАЖЕНИЕ ПОДМЕНЮ ПРИ НАВЕДЕНИИ */
.has-submenu:focus-within .submenu,
.has-submenu:hover .submenu {
  opacity: 1;                /* 👀 Полная видимость */
  visibility: visible;       /* 👀 Отображение в потоке */
  transform: translateY(0);  /* 🎯 Возврат в исходную позицию */
}

/* 🔗 ССЫЛКИ В ПОДМЕНЮ */
.submenu li a {
  padding: .7rem 1.5rem;     /* 📏 Увеличенные отступы */
  white-space: nowrap;       /* 🔤 Запрет переноса текста */
  display: block;            /* 🔳 Блочное отображение */
  width: 100%;               /* ↔️ На всю ширину */
}

/* ⚡ ЭФФЕКТ ПРИ НАВЕДЕНИИ НА ССЫЛКИ ПОДМЕНЮ */
.submenu li a:hover {
  background: rgba(255,255,255,.1); /* 🎨 Слегка светлый фон */
}

/* 🎮 ПАНЕЛЬ УПРАВЛЕНИЯ (КОНТРОЛЫ) */
.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;                  /* ↔️ Расстояние между элементами */
  z-index: 1002;              /* 📌 Высокий z-index */
  margin-left: auto;          /* ← Автоматический левый отступ */
}






/* 👆 АКТИВНОЕ СОСТОЯНИЕ ПОИСКОВОГО ОКНА */
.search-box-fixed.active {
  opacity: 1;                /* 👀 Полная видимость */
  visibility: visible;       /* 👀 Отображение */
  pointer-events: auto;      /* 🖱️ Реагирование на события мыши */
}

/* 📋 ФОРМА ПОИСКА */
.search-form {
  display: flex;
  align-items: stretch;      /* ↔️ Растягивание элементов по высоте */
  width: 100%;               /* ↔️ На всю ширину */
}

/* ⌨️ ПОЛЕ ВВОДА ПОИСКА */
.search-form input {
  flex: 1;                   /* ↔️ Занимает всё доступное пространство */
  padding: .8rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;    /* 🖌️ Серая рамка */
  border-right: none;        /* 🚫 Убираем правую границу */
  border-radius: var(--border-radius) 0 0 var(--border-radius); /* 🔲 Скругление слева */
  box-sizing: border-box;    /* 📏 Корректный расчет размеров */
}

/* 🔦 ФОКУС НА ПОЛЕ ВВОДА */
.search-form input:focus {
  border-color: var(--header-bg); /* 🎨 Изменение цвета рамки */
  outline: 0;                 /* 🚫 Убираем стандартный outline */
}


/* 🌙 КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ (FLOATING) */
.theme-toggle-floating {
  position: fixed;
  top: 4.6rem;               /* ⬇️ Отступ от верхнего края */
  right: 1.4rem;             /* ← Отступ от правого края */
  z-index: 1005;             /* 📌 Высокий z-index */
  background: rgba(255,255,255,.08); /* 🎨 Полупрозрачный фон */
  border: none;
  color: var(--header-text);
  cursor: pointer;
  font-size: 1.5rem;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;       /* ↔️ Центрирование по вертикали */
  justify-content: center;   /* ↔️ Центрирование по горизонтали */
  border-radius: 50%;        /* 🔴 Круглая форма */
  box-shadow: var(--shadow);
  transition: var(--transition); /* ⏱️ Плавные переходы */
  backdrop-filter: blur(4px); /* 🌫️ Размытие фона */
}

/* ⚡ ЭФФЕКТ ПРИ НАВЕДЕНИИ НА КНОПКУ ТЕМЫ */
.theme-toggle-floating:hover {
  background: rgba(255,255,255,.2); /* 🎨 Более светлый фон */
  transform: scale(1.1);            /* 🔍 Увеличение размера */
}

/* 📱 АДАПТИВ ДЛЯ ПЛАНШЕТОВ И МОБИЛЬНЫХ */
@media (max-width:1024px) {
  .header-inner {
    padding: .8rem 1.5rem;   /* 📏 Уменьшенные отступы */
    flex-wrap: wrap;          /* 🔄 Перенос элементов */
  }
  
  /* 🍔 ГАМБУРГЕР МЕНЮ */
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;           /* ↕️ На всю высоту экрана */
    background: var(--header-bg);
    z-index: 1001;
    flex-direction: column;  /* ↕️ Вертикальное расположение */
    padding: 6.5rem 1.5rem 2rem; /* 📏 Отступы */
    transform: translateY(-100%); /* ⬆️ Начальное положение за экраном */
    transition: var(--transition); /* ⏱️ Плавное появление */
    overflow-y: auto;        /* ↕️ Вертикальный скролл */
    justify-content: flex-start; /* ⬆️ Выравнивание в начале */
  }
  
  /* 👆 АКТИВНОЕ СОСТОЯНИЕ МЕНЮ */
  .main-nav.active {
    transform: translateY(0); /* 🎯 Возврат в видимую позицию */
  }
  
  /* 🧭 МЕНЮ В АДАПТИВЕ */
  .scat-main-menu {
    flex-direction: column;  /* ↕️ Вертикальное расположение */
    gap: .5rem;              /* ↔️ Уменьшенное расстояние */
    width: 100%;             /* ↔️ На всю ширину */
  }
  
  /* 🔗 ССЫЛКИ В МЕНЮ (АДАПТИВ) */
  .scat-main-menu li a {
    padding: 1.2rem 1.5rem;   /* 📏 Увеличенные отступы */
    font-size: 1.2rem;        /* 🔤 Увеличенный размер текста */
    background: rgba(255,255,255,.05); /* 🎨 Слегка светлый фон */
    margin-bottom: .5rem;      /* ⬇️ Отступ снизу */
  }
  
  /* 🗂️ ПОДМЕНЮ В АДАПТИВЕ */
  .submenu {
    position: static;         /* 📍 Стандартное позиционирование */
    opacity: 1;               /* 👀 Видимое */
    visibility: visible;      /* 👀 Отображаемое */
    transform: none;          /* 🎯 Без трансформаций */
    box-shadow: none;         /* 🚫 Без тени */
    padding: 0;               /* 🚫 Без отступов */
    min-width: auto;          /* ↔️ Автоматическая ширина */
    background: 0 0;          /* 🚫 Прозрачный фон */
    max-height: 50vh;         /* 🔒 Максимальная высота */
    margin-top: .5rem;        /* ⬆️ Отступ сверху */
  }
  
  /* 🍔 КНОПКА ГАМБУРГЕРА (ВИДИМА) */
  .menu-toggle-btn {
    display: flex;
    position: fixed;          /* 📍 Фиксированное позиционирование */
                  /* ⬇️ Отступ сверху */
    right: 1rem;              /* ← Отступ справа */
    order: 3;                 /* 🔢 Порядок в контейнере */
  }
  
  /* 🎮 ПАНЕЛЬ УПРАВЛЕНИЯ (АДАПТИВ) */
  .header-controls {
    order: 1;                 /* 🔢 Порядок в контейнере */
    margin-left: 0;           /* ← Сброс левого отступа */
  }
  
  /* 🔍 ПОИСКОВОЕ ОКНО (АДАПТИВ) */
  .search-box-fixed {
    top: 5rem;                /* ⬇️ Отступ сверху */
    left: 5%;                 /* ← Отступ слева */
    right: 5%;                /* → Отступ справа */
    width: 75%;               /* ↔️ Ширина */
    transform: none;          /* 🎯 Без трансформаций */
  }
}

/* 🖼️ КОНТЕЙНЕР ДЛЯ ЛОГОТИПА */
.floating-logo-wrap {
  flex: 0 0 auto;             /* ↔️ Без растягивания */
  margin-right: 30px;         /* → Отступ справа */
  margin-left: 10px;          /* ← Отступ слева */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ← Выравнивание в начале */
}

/* 🔗 ССЫЛКА ЛОГОТИПА */
.floating-logo-link {
  display: inline-block;
  line-height: 1;             /* ↔️ Высота строки */
}

/* 🖼️ ИЗОБРАЖЕНИЕ ЛОГОТИПА */
.floating-logo-img {
  height: 42px;               /* ↕️ Фиксированная высота */
  max-height: 100%;           /* 🔒 Максимальная высота */
  width: auto;                /* ↔️ Автоматическая ширина */
  display: block;             /* 🔳 Блочное отображение */
  transition: transform .2s;  /* ⏱️ Плавное трансформирование */
}

/* ⚡ ЭФФЕКТ ПРИ НАВЕДЕНИИ НА ЛОГОТИП */
.floating-logo-img:hover {
  transform: scale(1.05);     /* 🔍 Увеличение размера */
}


  
  .floating-logo-wrap {
    margin-right: auto;       /* → Автоматический правый отступ */
    margin-left: 10px;        /* ← Отступ слева */
    padding: 5px 0;           /* 📏 Внутренние отступы */
  }
  
  .floating-logo-img {
    height: 40px;             /* ↕️ Уменьшенная высота */
  }

/* ⬆️ КНОПКА "НАВЕРХ" */
#scrollTopBtn {
  position: fixed;            /* 📍 Фиксированное позиционирование */
  bottom: 30px;               /* ⬆️ Отступ снизу */
  right: 20px;                /* ← Отступ справа */
  z-index: 999;               /* 📌 Высокий z-index */
  background-color: #ffca28;  /* 🎨 Желтый фон */
  color: #3e2723;             /* ✏️ Темно-коричневый текст */
  border: none;               /* 🚫 Без рамки */
  padding: 12px 16px;         /* 📏 Внутренние отступы */
  border-radius: 50px;        /* 🔲 Округлая форма */
  font-size: 18px;            /* 🔤 Размер текста */
  font-weight: 700;           /* 🔤 Жирный шрифт */
  box-shadow: 0 4px 12px rgba(0,0,0,.3); /* 👥 Тень */
  cursor: pointer;            /* 👆 Указатель при наведении */
  display: none;              /* 👻 Скрыта по умолчанию */
  transition: opacity .3s;    /* ⏱️ Плавное изменение прозрачности */
}

/* ⚡ ЭФФЕКТ ПРИ НАВЕДЕНИИ НА КНОПКУ "НАВЕРХ" */
#scrollTopBtn:hover {
  background-color: #f4b400;  /* 🎨 Более темный желтый */
}
/* ============= 🌈 БЕЗОПАСНЫЕ ВИЗУАЛЬНЫЕ УЛУЧШЕНИЯ ============= */
/* 🎨 Основная шапка - добавлен легкий градиент без изменения структуры */
.main-header {
  background: 
    linear-gradient(
      135deg, 
      var(--header-bg) 0%, 
      #2e1d19 100%
    );
}

/* 🔥 Пункты меню с анимацией подчеркивания (без изменения layout) */
.scat-main-menu li a {
  position: relative;
  transition: all 0.3s ease;
}

.scat-main-menu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #ffca28;
  transition: width 0.3s ease;
}

.scat-main-menu li a:hover::after {
  width: 70%;
}

/* 🌟 Подменю с легкой анимацией появления */
.submenu {
  transition: 
    opacity 0.3s ease, 
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.has-submenu:hover .submenu {
  transform: translateY(0) !important;
}



@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 202, 40, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(255, 202, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 202, 40, 0); }
}

/* ✨ Поле поиска с анимацией фокуса */
.search-form input:focus {
  box-shadow: 0 0 0 3px rgba(255, 202, 40, 0.3);
}

/* 🌈 Логотип с эффектом легкого поднятия */
.floating-logo-img {
  transition: transform 0.5s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.floating-logo-img:hover {
  transform: translateY(-3px);
}

/* 🚀 Кнопка "Наверх" с анимацией плавания */
#scrollTopBtn {
  animation: float 3s ease-in-out infinite;
  background: linear-gradient(135deg, #ffca28, #ff9800);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

#scrollTopBtn:hover {
  animation: none;
  transform: translateY(-2px);
}

/* 🌙 Переключатель темы с эффектом свечения */
.theme-toggle-floating {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-toggle-floating:hover {
  box-shadow: 0 0 15px rgba(255, 202, 40, 0.5);
}

/* ============= 📱 АДАПТИВНЫЕ УЛУЧШЕНИЯ ============= */
@media (max-width:1024px) {
  /* ✨ Эффект появления для пунктов мобильного меню */
  .scat-main-menu li a {
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: translateX(-20px);
    opacity: 0;
  }
  
  .main-nav.active .scat-main-menu li a {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* Задержка для анимации пунктов */
  .scat-main-menu li:nth-child(1) a { transition-delay: 0.1s; }
  .scat-main-menu li:nth-child(2) a { transition-delay: 0.2s; }
  .scat-main-menu li:nth-child(3) a { transition-delay: 0.3s; }
  .scat-main-menu li:nth-child(4) a { transition-delay: 0.4s; }
  .scat-main-menu li:nth-child(5) a { transition-delay: 0.5s; }
}

/* АНИМАЦИЯ БУРГЕР КНОПКИ */
.menu-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 17px;
  font-weight: 300;
  background: transparent;
  color: var(--accent, #ffb400);
  border: 1px solid var(--accent, #ffb400);
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-toggle-btn:hover {
  background-color: var(--accent, #ffb400);
  color: #1c1b1a;
  box-shadow: 0 0 6px var(--accent, #ffb400);
  transform: scale(1.03);
}

.menu-toggle-btn:active {
  transform: scale(0.97);
}
@media (min-width: 1025px) {
  .menu-toggle-btn {
    display: none !important;
  }
}

@keyframes vibroPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@media (max-width: 1024px) {
  .menu-toggle-btn {
    animation: vibroPulse 1.8s ease-in-out infinite;
  }
}
/* 🔍 Кнопка поиска */
.search-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--accent, #ffb400);
  border: 1px solid var(--accent, #ffb400);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  position: absolute;
  right: 130px; /* 👈 подвинь при необходимости */
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

/* 📱 На планшетах — убираем текст, оставляем только иконку */
@media (max-width: 860px) {
  .search-btn-label {
    display: none;
  }

  .search-toggle-btn {
    padding: 6px 10px;
    font-size: 16px;
    right: 125px;
  }
}

/* 📱 На мобильных — компактнее */
@media (max-width: 540px) {
  .search-toggle-btn {
    right: 125px;
    padding: 5px 8px;
    font-size: 15px;
  }
}