/**
 * =============================================================================
 * HEADER COMPONENT STYLES
 * =============================================================================
 * 
 * Стили для компонента хедера сайта.
 * Включает адаптивный дизайн, анимации и состояния.
 * 
 * Особенности:
 * - Фиксированное позиционирование
 * - Адаптивные размеры логотипа
 * - Анимации при скролле
 * - Мобильное меню
 * - Состояния для разных страниц
 * 
 * @author: Carpathians Team
 * @version: 1.0.0
 * @updated: 2024
 */

/* ===== HEADER BASE STYLES ===== */
/* Базовые стили хедера */
.header {
  position: fixed;                    /* Фиксированное позиционирование */
  height: 105px;                      /* Высота хедера */
  top: 0;                            /* Позиционирование сверху */
  left: 0;                           /* Позиционирование слева */
  right: 0;                          /* Позиционирование справа */
  z-index: var(--z-fixed);           /* Слой для фиксированных элементов */
  display: flex;                     /* Flexbox для выравнивания */
  justify-content: center;           /* Центрирование содержимого */
  background: transparent;           /* Прозрачный фон */
  transition: all var(--transition-normal); /* Плавные переходы */
  backdrop-filter: blur(0px);        /* Без размытия фона */
}

/* Home page NOT scrolled - green background */
.header:has(.header__container.home) {
  background: var(--color-primary);
  transition: all var(--transition-normal);
}

.header:has(.header__container.home) .header__logo-img {
  fill: var(--color-svg-white);
  color: var(--color-svg-white);
}

.header:has(.header__container.home) .header__nav-link {
  color: var(--color-white);
}

.header:has(.header__container.home) .header__cta {
  color: var(--color-white);
  border-color: var(--color-white);
}

.header:has(.header__container.home) .header__cta-icon {
  stroke: #FFFFFF;
}

/* When scrolled - remove green, add white */
.header.header--scrolled {
  background: var(--color-white) !important;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  border-radius: 0 !important;
}

.header.header--scrolled .header__logo-img {
  fill: var(--color-svg-green) !important;
  color: var(--color-svg-green) !important;
  height: 55px;
}

.header.header--scrolled .header__nav-link {
  color: var(--color-gray-700) !important;
}

.header.header--scrolled .header__cta {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* For non-home pages - header is always white with green logo */
.header--always-green {
  background: var(--color-white);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.header--always-green .header__logo-img {
  fill: var(--color-svg-green);
  color: var(--color-svg-green);
  height: 55px;
}

.header--always-green .header__nav-link {
  color: var(--color-gray-700);
}

.header__container {
  max-width: var(--container-max-width);
  width: 100%;
 
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: opacity var(--transition-fast);
}

.header__logo:hover {
  opacity: 0.8;
}

.header__logo-img {
  height: 55px;
  width: auto;
  transition: height var(--transition-normal), fill var(--transition-normal), color var(--transition-normal);
  fill: var(--color-svg-white);
  color: var(--color-svg-white);
}

/* For non-home pages - logo is always small */
.header--always-green .header__logo-img {
  height: 55px;
}

.header__nav {

  display: block;
    margin-left: auto;
}


@media (max-width: 1000px) {
  .header__nav {
    display: none;
  }
  .header__mobile-menu {
    display: flex !important;
  }
  .header__cta {
    display: none !important;
  }
  .header__container {
    justify-content: space-between;
    flex-direction: row-reverse;
  }
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 64px;
  margin-right: 64px;
}

.header__nav-link {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-white);
  transition: color var(--transition-fast);
  position: relative;
}

.header--always-green .header__nav-link {
  color: var(--color-gray-900);
}

.header__nav-link:hover {
  color: var(--color-primary);
}

.header.header--scrolled .header__nav-link:hover,
.header--always-green .header__nav-link:hover {
  color: var(--color-primary);
}

.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-fast);
}

.header.header--scrolled .header__nav-link::after,
.header--always-green .header__nav-link::after {
  background: var(--color-primary);
}

.header__nav-link:hover::after {
  width: 100%;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 18px 38px;
  background: transparent;
  color: var(--color-white);
  line-height: 1;
  border-radius: 35px;
  font-size: 18px;
  font-weight: 700;
  transition: all var(--transition-fast);
  border: 2px solid var(--color-white);
}

.header__cta-icon {
  width: 20px;
  height: 20px;
  stroke: #FFFFFF;
  transition: stroke var(--transition-fast);
}

/* After scroll or alternative/always-green mode - green icon */
.header.header--scrolled .header__cta-icon,
.header.header--alternative-mode .header__cta-icon,
.header--always-green .header__cta-icon {
  stroke: #46A351 !important;
}

.header__cta:hover {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.header__cta:hover .header__cta-icon {
  stroke: #46A351;
}

/* When header has white background (scrolled or non-home pages) */
.header--always-green .header__cta {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.header.header--scrolled .header__cta:hover {
  background: transparent;
  border-color: var(--color-primary-dark);
}

.header.header--scrolled .header__cta:hover .header__cta-icon {
  stroke: #46A351;
}

/* .header--always-green .header__cta:hover {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
} */

.header--always-green .header__cta:hover .header__cta-icon {
  color: var(--color-svg-white) !important;
}

.header__mobile-menu {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-width: unset;
  border-radius: 66px;
  background: var(--color-white);
  transition: all var(--transition-fast);
}

/* Padding and min-width only on home page (when not always-green) */
.header:not(.header--always-green) .header__mobile-menu {
  padding: 19px 30px;
  min-width: 104px;
}

@media (max-width: 480px) {
  .header:not(.header--always-green) .header__mobile-menu {
    padding: 15px 24px;
    min-width: 70px;
  }

  .header__mobile-menu {
    border-radius: 45px;
  }
  .header {
    height: 78px;
  }
}

/* Remove padding and min-width when scrolled or alternative mode on home page */
.header.header--scrolled:not(.header--always-green) .header__mobile-menu,
.header.header--alternative-mode:not(.header--always-green) .header__mobile-menu {
  padding: 0;
  min-width: unset;
}

.header.header--scrolled .header__mobile-menu,
.header.header--alternative-mode .header__mobile-menu,
.header--always-green .header__mobile-menu {
  color: var(--color-gray-700) !important;
  border-color: var(--color-gray-300) !important;
  background: var(--color-white) !important;
}

/* Home page: when header is NOT scrolled and NOT always-green, make mobile icon white */
.header:has(.header__container.home):not(.header--scrolled):not(.header--always-green) .header__mobile-menu {
  color: var(--color-primary);
}

.header__mobile-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__mobile-menu span {
  display: none;
}

@media (max-width: 1752px) {
  .header {
    max-width: unset !important;
    width: 100% !important;
  }
  .header__container {
    width: 100% !important;
    max-width: unset !important;
    padding: 0 15px;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .header__logo-img {
    height: 55px;
  }
  .header__cta {
    display: none;
  }
  
  .header.header--scrolled .header__logo-img {
    height: 41px;
  }
  
  .header--always-green .header__logo-img {
    height: 41px;
  }
  
}



@media (max-width: 1023px) {
  .header__nav-list {
    margin-right: 40px !important;
  }
}


/* Mobile styles for CTA button */
@media (max-width: 768px) {
  .header__cta-icon {
    width: 16px;
    height: 16px;
  }
}

/* ===== SIDEBAR OPEN STATES ===== */
/* Стили для хедера когда sidebar открыт */
body.sidebar-open .header .header__logo-img {
  fill: var(--color-svg-green);
  color: var(--color-svg-green);
}

body.sidebar-open .header .header__mobile-menu {
  color: var(--color-svg-green) !important;
  border-color: var(--color-svg-green) !important;
}

body.sidebar-open .header .header__mobile-icon {
  color: var(--color-svg-green) !important;
  width: 32px !important;
  height: 32px !important;
}

body.sidebar-open .header .header__mobile-icon svg {
  width: 32px !important;
  height: 32px !important;
}

body.sidebar-open .header .header__mobile-menu {
  padding: 0 !important;
  min-width: unset !important;
}

/* Removed empty hover ruleset to satisfy linter */

/* ===== ALTERNATIVE MODE: ALWAYS WHITE ===== */
/* Альтернативний режим - завжди білий фон і зелений логотип */
.header.header--alternative-mode {
  background: var(--color-white) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 0 !important;
}

.header.header--alternative-mode .header__logo-img {
  fill: var(--color-svg-green) !important;
  color: var(--color-svg-green) !important;
  height: 55px;
}

.header.header--alternative-mode .header__nav-link {
  color: var(--color-gray-700) !important;
}

.header.header--alternative-mode .header__cta {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ===== HEADER MODE TOGGLE (CHECKBOX) ===== */
.header__mode-toggle {
  position: fixed;
  top: 120px;
  right: 20px;
  z-index: 9999;
  background: var(--color-white);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.header__mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.header__mode-toggle input[type="checkbox"] {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.header__mode-toggle input[type="checkbox"]:checked {
  background: var(--color-primary);
}

.header__mode-toggle input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.header__mode-toggle-label {
  position: absolute;
  right: 60px;
  background: var(--color-gray-900);
  color: var(--color-white);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.header__mode-toggle:hover .header__mode-toggle-label {
  opacity: 1;
}