/* Header Styles */

/* Reset animation elements on page load */
.site-header {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Header */
.site-header {
  position: fixed; 
  top: 0; 
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,54,120,.12);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  transition: all 0.3s ease;
  visibility: visible;
}

.header-inner { 
  display: flex; 
  align-items: center; 
  gap: 20px; 
  padding: 20px 0; 
}

.logo { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  color: #003678; 
  text-decoration: none; 
  font-weight: 700; 
  letter-spacing: .3px; 
}

.logo img { 
  filter: drop-shadow(0 4px 12px rgba(79,124,255,.4)); 
  max-width: 130px;
  height: auto;
  display: block;
}

.main-nav { 
  margin-left: auto; 
}

.nav-toggle { 
  display: none; 
}

.nav-list { 
  display: flex; 
  list-style: none; 
  gap: 18px; 
  padding: 0; 
  margin: 0; 
}

.nav-list a { 
  color: #003678; 
  text-decoration: none; 
  padding: 8px 10px; 
  border-radius: 8px; 
}

.nav-list a:hover { 
  color: #003678; 
  background: rgba(0,54,120,.08); 
}

/* Header logo initially hidden */
.site-header .logo {
  opacity: 0;
}

/* Show logo on tours page */
.tours-page .site-header .logo {
  opacity: 1;
}

/* Show logo on tour page */
.tour-page .site-header .logo {
  opacity: 1;
}

.site-header .logo.fade-in {
  animation: headerLogoFadeIn 0.5s ease-out forwards;
}

@keyframes headerLogoFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Travel Header Styles */
.travel-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  z-index: 1000 !important;
}

/* Hide logo in header when transparent */
.travel-header .logo {
  display: none !important;
}

.travel-header .header-inner {
  padding: 20px 0;
  padding-left: 30px;
  position: relative;
}

.travel-header .logo {
  display: block;
}

.travel-header .nav-list a {
  color: white;
}

.travel-header .nav-list a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile Header Styles */

/* Планшеты и iPad - гамбургер меню */
@media (max-width: 1024px) {
  .nav-toggle { 
    display: inline-flex !important; 
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(0,54,120,.08) !important; 
    border: 1px solid rgba(0,54,120,.18) !important; 
    padding: 8px !important; 
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    gap: 4px !important;
  }
  
  .hamburger-line {
    width: 20px !important;
    height: 2px !important;
    background: #003678 !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
    transform-origin: center !important;
  }
  
  .nav-toggle:hover .hamburger-line {
    background: #002a5c !important;
  }
  
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }
  
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0 !important;
  }
  
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }
  
  .nav-list { 
    display: none !important; 
    position: absolute !important; 
    right: 4% !important; 
    top: 60px !important; 
    flex-direction: column !important; 
    background: #ffffff !important; 
    border: 1px solid rgba(0,54,120,.18) !important; 
    border-radius: 16px !important; 
    padding: 15px !important; 
    box-shadow: var(--shadow) !important;
    min-width: 200px !important;
  }
  
  .nav-list.show { 
    display: flex !important; 
  }
  
  .nav-list a {
    display: block !important;
    text-align: center !important;
    padding: 12px 15px !important;
    margin: 2px 0 !important;
    border-radius: 10px !important;
    transition: background-color 0.3s ease !important;
  }
  
  .nav-list a:hover {
    background: rgba(0,54,120,.05) !important;
  }
}

/* Мобильные устройства */
@media (max-width: 640px) {
  /* Мобильное меню - гамбургер */
  .nav-toggle { 
    display: inline-flex !important; 
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(0,54,120,.08) !important; 
    border: 1px solid rgba(0,54,120,.18) !important; 
    padding: 8px !important; 
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    gap: 4px !important;
  }
  
  .hamburger-line {
    width: 20px !important;
    height: 2px !important;
    background: #003678 !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
    transform-origin: center !important;
  }
  
  .nav-toggle:hover .hamburger-line {
    background: #002a5c !important;
  }
  
  /* Анимация гамбургера при открытии - идеально симметричный крестик */
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }
  
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0 !important;
  }
  
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }
  
  .nav-list { 
    display: none !important; 
    position: absolute !important; 
    right: 4% !important; 
    top: 60px !important; 
    flex-direction: column !important; 
    background: #ffffff !important; 
    border: 1px solid rgba(0,54,120,.18) !important; 
    border-radius: 16px !important; 
    padding: 15px !important; 
    box-shadow: var(--shadow) !important;
    min-width: 200px !important;
  }
  
  .nav-list.show { 
    display: flex !important; 
  }
  
  .nav-list a {
    padding: 12px 15px !important;
    margin: 2px 0 !important;
    border-radius: 10px !important;
    transition: background-color 0.3s ease !important;
  }
  
  .nav-list a:hover {
    background: rgba(0,54,120,.05) !important;
  }
}

/* Mobile Header for Tour Page - same as index.html */
@media (max-width: 1024px) {
  .tour-page .travel-header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0,54,120,.12) !important;
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
  }
  
  .tour-page .travel-header .nav-toggle { 
    display: inline-flex !important; 
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(0,54,120,.08) !important; 
    border: 1px solid rgba(0,54,120,.18) !important; 
    padding: 8px !important; 
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    gap: 4px !important;
  }
  
  .tour-page .travel-header .hamburger-line {
    width: 20px !important;
    height: 2px !important;
    background: #003678 !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
  }
  
  .tour-page .travel-header .nav-list { 
    display: none !important; 
    position: absolute !important; 
    right: 4% !important; 
    top: 60px !important; 
    flex-direction: column !important; 
    background: #ffffff !important; 
    border: 1px solid rgba(0,54,120,.18) !important; 
    border-radius: 16px !important; 
    padding: 15px !important; 
    box-shadow: var(--shadow) !important;
    min-width: 200px !important;
  }
  
  .tour-page .travel-header .nav-list.show {
    display: flex !important;
  }
  
  .tour-page .travel-header .nav-list a {
    color: #003678 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    text-align: center !important;
  }
  
  .tour-page .travel-header .nav-list a:hover {
    background: rgba(0,54,120,.08) !important;
  }
  
  .tour-page .travel-header .logo {
    display: block !important;
  }
}