/* Navigation Styles */

/* Top nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding: 20px 18px;
  transition: all 0.3s ease;
}

.nav__panel{
  max-width: 1120px;
  margin: 0 auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 12px 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Scrolled state */
.nav.scrolled .nav__panel{
  background: rgba(10,10,10,.9);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Navigation alignment is now always space-between */
.nav__in{
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  width: 100%;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

/* Center navigation when in hero area */
.nav.in-hero .nav__in{
  justify-content: center;
}

.nav.in-hero .brand{
  display: none;
}

.nav.in-hero .menu{
  margin-left: 0;
}

/* Black navigation links in hero (main page) - desktop only */
@media (min-width: 881px) {
  .nav.in-hero .menu a{
    color: #000000;
    opacity: 0.8;
  }

  .nav.in-hero .menu a:hover{
    color: #E91E63;
    opacity: 1;
  }
}

/* Black logo in hero for mobile devices (main page only) */
@media (max-width: 880px) {
  .nav.in-hero:not(.nav--tour-page) .brand__logo {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
  }
  
  .nav.in-hero:not(.nav--tour-page) .brand__logo:hover {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
  }
}

/* White navigation links for tour pages */
.nav--tour-page.in-hero .menu a{
  color: #ffffff;
  opacity: 0.9;
}

.nav--tour-page.in-hero .menu a:hover{
  color: #E91E63;
  opacity: 1;
}
.brand__logo{
  height:34px;
  width:auto;
  max-width:200px;
  filter: brightness(0) invert(1) brightness(1.2);
  transition: var(--transition);
}

.brand__logo:hover{
  filter: brightness(0) invert(1) brightness(1.4);
}
.brand__name{font-family:"Unbounded",sans-serif;font-size:18px;color:var(--ink-2);letter-spacing:.2px}
.brand__name b{color:var(--accent)}

.menu{
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s ease;
}


.menu a{
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  opacity: 0.9;
  transition: all 0.2s ease;
  font-family: "Nunito", sans-serif;
}

.menu a:hover{
  color: var(--accent);
  opacity: 1;
}

/* Burger (mobile) - Enhanced Design */
.nav__toggle{display:none}
.burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  cursor:pointer;
  transition:all .3s ease;
  position:relative;
  z-index:100;
}
.burger:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.3);
  transform:scale(1.05);
}
.burger__lines{
  position:relative;
  width:18px;
  height:2px;
  background:#ffffff;
  border-radius:2px;
  transition:all .3s ease;
}
.burger__lines::before,
.burger__lines::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#ffffff;
  border-radius:2px;
  transition:all .3s ease;
}
.burger__lines::before{top:-5px}
.burger__lines::after{top:5px}

/* White burger lines in hero */
.nav.in-hero .burger{
  border-color:rgba(255,255,255,0.3);
  background:rgba(0,0,0,0.2);
}

.nav.in-hero .burger:hover{
  background:rgba(0,0,0,0.3);
  border-color:rgba(255,255,255,0.5);
}

/* Burger animation when checked */
#nav-toggle:checked + .burger{
  background:rgba(233,30,99,0.1);
  border-color:var(--accent);
  transform:scale(1.05);
}
#nav-toggle:checked + .burger .burger__lines{
  transform:rotate(45deg);
  background:var(--accent);
}
#nav-toggle:checked + .burger .burger__lines::before{
  top:0;
  transform:rotate(90deg);
  background:var(--accent);
}
#nav-toggle:checked + .burger .burger__lines::after{
  opacity:0;
}

/* Mobile menu behavior */
@media (max-width:880px){
  .nav{
    padding: 15px 18px;
  }
  
  .nav:not(.scrolled) .nav__in{
    justify-content: space-between;
  }
  
  /* Убираем центрирование логотипа в герое на мобильных */
  .nav.in-hero .nav__in{
    justify-content: space-between;
  }
  
  .nav.in-hero .brand{
    display: flex;
  }
  
  .nav__panel{
    padding: 10px 16px;
    border-radius: 16px;
  }
  
  .burger{display:inline-flex;margin-left:auto}
  
  /* Hide desktop menu on mobile - Enhanced Design */
  .menu{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    z-index:60;
    width:280px;
    max-width:calc(100vw - 36px);
    display:none;
    flex-direction:column;
    gap:4px;
    padding:16px;
    background:rgba(0,0,0,0.95);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
    backdrop-filter:blur(20px);
    transform-origin:top right;
    transform:translateY(-8px) scale(0.95);
    opacity:0;
    visibility:hidden;
    transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Dark menu for mobile (both main and tour pages) */
  .nav.in-hero .menu{
    background:rgba(0,0,0,0.95);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
  }
  
  .nav.in-hero .menu a{
    color:#ffffff;
    opacity:0.9;
  }
  
  .nav.in-hero .menu a:hover{
    background:rgba(233,30,99,0.1);
    color:#E91E63;
    opacity:1;
  }
  
  #nav-toggle:checked + .burger + .menu{
    display:flex;
    transform:translateY(0) scale(1);
    opacity:1;
    visibility:visible;
  }
  
  .menu a{
    display:block;
    padding:14px 16px;
    border-radius:12px;
    font-size:15px;
    font-weight:500;
    color:#ffffff;
    opacity:0.9;
    transition:all .2s ease;
    position:relative;
    font-family:"Nunito",sans-serif;
    letter-spacing:-0.01em;
  }
  
  .menu a:hover{
    background:rgba(255,255,255,0.08);
    color:var(--accent);
    opacity:1;
    transform:translateX(4px);
  }
  
  .menu a:active{
    transform:translateX(2px) scale(0.98);
  }
  
  /* Анимация появления пунктов меню */
  .menu-item-animate{
    animation:menuItemSlideIn 0.3s ease forwards;
  }
  
  @keyframes menuItemSlideIn{
    from{
      opacity:0;
      transform:translateX(20px);
    }
    to{
      opacity:1;
      transform:translateX(0);
    }
  }
  
  .menu .btn{width:100%;justify-content:center}
  body.menu-open{overflow:hidden}
}

/* Ensure primary button inside the menu stays white */
.menu .btn--primary{color:#fff}
/* Make outline buttons visible on dark mobile menu */
.menu .btn--line{color:#fff;border-color:rgba(255,255,255,.2)}

@media (max-width: 480px){
  .nav{
    padding: 10px 15px;
  }
  
  .nav__panel{
    padding: 8px 12px;
    border-radius: 12px;
  }
  
  .nav:not(.scrolled) .nav__in{
    justify-content: space-between;
  }
  
  /* На маленьких экранах показываем логотип и бургер */
  .nav.in-hero .nav__in{
    justify-content: space-between;
  }
  
  .nav.in-hero .brand{
    display: flex;
  }
  
  .brand__logo{
    height: 28px;
  }
  
  /* Enhanced mobile menu for small screens */
  .burger{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  
  .menu{
    width:260px;
    max-width:calc(100vw - 30px);
    padding:12px;
    border-radius:14px;
  }
  
  .menu a{
    padding:12px 14px;
    font-size:14px;
  }
}