/* =========================================================
   OZEON — HEADER
   ========================================================= */

/* ===== ОСНОВНЫЕ НАСТРОЙКИ HEADER ===== */

.site-header {
  width: 100%;                                      /* Ширина Header */
  max-width: 1440px;                                /* Максимальная ширина Header */
  height: 60px;                                    /* Высота Header */
  padding: 5px 20px 5px 40px;                      /* Внутренний отступ */
  margin: 0 auto 0 auto;                         /* Отступ сверху */
  box-sizing: border-box;                           /* Чтобы отступы не увеличивали общую высоту */
  display: flex;                                    /* Элементы в одну строку */
  align-items: center;                              /* Выравнивание по вертикали */
  border: 0 solid #000000;                        /* Тонкая рамка: задавайте HEX-цвет и прозрачность */
  border-radius: 5px;                              /* Скругление углов */
  box-shadow: 0 4px 20px #00000000;                 /* Тень панели */
  position: relative;                               /* Основа для будущих элементов */
  overflow: hidden;                                 /* Скрываем выходящие элементы */
  background-color: #00000000;                      /* Цвет фона и прозрачность */
  backdrop-filter: blur(0px);                       /* Размытие фона */
  -webkit-backdrop-filter: blur(0px);               /* Размытие для Safari */
  background-image: linear-gradient(to top, #00000000, #00000000); /* Картинка с градиентом */
  background-size: cover;                           /* Заполняем весь Header */
  background-position: center center;               /* Центрируем картинку */
  background-repeat: no-repeat;                     /* Без повторения */

}

/* ===== НАСТРОЙКИ ЛОГОТИПА HEADER ===== */

.header-logo {
  width: 200px;                              /* Ширина логотипа */
  height: 50px;                              /* Высота логотипа */
  margin: 0;                                 /* Отступы: сверху, справа, снизу, слева */
  object-fit: contain;                       /* Сохраняем пропорции изображения */
  object-position: center center;            /* Положение изображения внутри области */
  flex-shrink: 0;                            /* Запрещаем сжатие */
  filter: drop-shadow(0 2px 4px #00000080);  /* Тень логотипа */
}

/* ===== НАСТРОЙКИ КНОПОК НАВИГАЦИИ HEADER ===== */

.header-nav {
  font-family: Arial, sans-serif;                   /* Шрифт текста */
  font-size: 20px;                                  /* Размер текста */
  font-weight: 700;                                 /* Толщина текста */
  color: #ffffff;                                   /* Цвет текста */
  letter-spacing: 0;                               /* Расстояние между буквами */
  font-style: normal;                              /* Стиль текста */
  line-height: 1;                                 /* Высота строки текста */
  text-shadow: 0 0 0px #05fce480;                  /* Бирюзовое свечение текста */
  opacity: 1;                                      /* Прозрачность текста */
  margin: 0px 0px 0px 200px;                         /* Отступы: сверху, справа, снизу, слева */
  gap: 25px;                                        /* Расстояние между кнопками */
  display: flex;                                    /* Расположение ссылок в ряд */
  align-items: center;                              /* Выравнивание ссылок по вертикали */
}

/* ===== НАВЕДЕНИЕ НА КНОПКИ НАВИГАЦИИ HEADER ===== */

.header-link:hover {
  color: #05fce4;                                   /* Цвет текста при наведении */
}
/* ===== АКТИВНАЯ КНОПКА НАВИГАЦИИ HEADER ===== */

.header-link.active {
  color: #05fce4;                                   /* Цвет активной ссылки */
}

/* ===== ЛИНИЯ ПОД АКТИВНОЙ КНОПКОЙ HEADER ===== */

.header-link.active::after {
  content: '';                                      /* Создаёт линию */
  display: block;                                   /* Отображает линию */
  width: var(--header-line-width, 90%);             /* Ширина линии */
  align-self: center;                               /* Выравнивание линии по центру */
  height: 2px;                                      /* Толщина линии */
  margin: 3px auto 0 auto;                           /* Отступы: сверху, справа, снизу, слева */
  background: #05fce4;                              /* Цвет линии */
  border-radius: 1px;                               /* Скругление углов линии */
}

/* ===== НАСТРОЙКИ КНОПОК HEADER ===== */

.header-action {
  font-weight: 700;                                 /* Толщина текста */
  font-size: 20px;                                  /* Размер символа и текста */
  width: auto;                                      /* Ширина кнопки */
  height: auto;                                     /* Высота кнопки */
  background: none;                                 /* Прозрачный фон */
  border: none;                                     /* Убираем рамку */
  border-radius: 5px;                               /* Скругление углов кнопки */
  color: #ffffff;                                   /* Цвет иконки */
  box-shadow: 0 4px 10px #00000000;                 /* Тень кнопки */
  opacity: 1;                                        /* Прозрачность кнопки */
}

/* ===== НАСТРОЙКИ КОНТЕЙНЕРА КНОПОК HEADER ===== */

.header-actions {
  display: flex;                                    /* Расположение кнопок в ряд */
  align-items: center;                              /* Выравнивание по вертикали */
  gap: 15px;                                        /* Расстояние между кнопками */
  margin: 0 0 0 auto;                               /* Отступы: сверху, справа, снизу, слева */
}