/* ============================================================
   HOLIDAYTIME — Header / Navigation
   ============================================================ */

/* ── Topbar (language + currency strip) ─────────────────────── */
.topbar{
  height:36px;
  background:var(--blue-950);
  display:flex;
  align-items:center;
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  font-size:.8rem;
  color:rgba(255,255,255,.65);
}
.topbar__left{display:flex;align-items:center;gap:1.25rem}
.topbar__left a{display:flex;align-items:center;gap:.25rem;transition:color var(--dur-fast)}
.topbar__left a:hover{color:var(--white)}
.topbar__right{display:flex;align-items:center;gap:1rem}
.topbar__right a{transition:color var(--dur-fast)}
.topbar__right a:hover{color:var(--white)}
.topbar__sep{width:1px;height:12px;background:rgba(255,255,255,.2)}

/* Language switcher */
.lang-switch{display:flex;align-items:center;gap:.25rem;position:relative}
.lang-switch select{
  appearance:none;background:transparent;border:none;color:rgba(255,255,255,.65);
  font-size:.8rem;font-family:var(--font-body);cursor:pointer;padding-right:14px;
}
.lang-switch select:focus{outline:none;color:var(--white)}

/* ── Main header ────────────────────────────────────────────── */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--header-h);
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  transition:box-shadow var(--dur-normal) var(--ease-out),
             background var(--dur-normal);
}
.header.scrolled{
  box-shadow:0 2px 20px rgba(0,0,0,.1);
}
.header.transparent{
  background:transparent;
  border-bottom-color:transparent;
}
.header.transparent .nav__logo-text{color:var(--white)}
.header.transparent .nav__link{color:rgba(255,255,255,.85)}
.header.transparent .nav__link:hover{color:var(--white)}
.header.transparent .nav__actions .btn-outline{color:var(--white);border-color:rgba(255,255,255,.4)}
.header.transparent .nav__actions .btn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}

.nav{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

/* Logo */
.nav__logo{display:flex;align-items:center;gap:.625rem;flex-shrink:0}
.nav__logo-mark{
  width:38px;height:38px;
  background:var(--blue-600);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.nav__logo-mark svg{width:22px;height:22px;fill:var(--white)}
.nav__logo-text{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  color:var(--blue-900);
  letter-spacing:-.01em;
}
.nav__logo-text span{color:var(--orange-500)}

/* Main nav links */
.nav__links{
  display:flex;
  align-items:center;
  gap:.25rem;
  flex:1;
  justify-content:center;
}
.nav__link{
  display:flex;align-items:center;gap:.25rem;
  padding:.5rem .75rem;
  border-radius:var(--radius-md);
  font-size:.9rem;
  font-weight:500;
  color:var(--gray-700);
  transition:color var(--dur-fast),background var(--dur-fast);
  white-space:nowrap;
}
.nav__link:hover{color:var(--blue-600);background:var(--blue-50)}
.nav__link.active{color:var(--blue-600);background:var(--blue-50)}
.nav__link svg{width:14px;height:14px;flex-shrink:0;transition:transform var(--dur-fast)}

/* Dropdown */
.nav__item{position:relative}
.nav__item:hover .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav__item:hover .nav__link svg{transform:rotate(180deg)}
.nav__dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--white);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  border:1px solid var(--gray-200);
  min-width:220px;
  padding:.5rem;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur-normal) var(--ease-out),transform var(--dur-normal) var(--ease-out),visibility var(--dur-normal);
  z-index:100;
}
.nav__dropdown::before{
  content:'';
  position:absolute;
  top:-6px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;
  border-bottom-color:var(--white);
  border-top:none;
}
.nav__dropdown-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.625rem .875rem;
  border-radius:var(--radius-lg);
  font-size:.875rem;
  color:var(--gray-700);
  transition:background var(--dur-fast),color var(--dur-fast);
}
.nav__dropdown-item:hover{background:var(--blue-50);color:var(--blue-700)}
.nav__dropdown-item .icon{
  width:32px;height:32px;
  background:var(--blue-100);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.nav__dropdown-item .icon svg{width:16px;height:16px;color:var(--blue-600)}
.nav__dropdown-item strong{display:block;font-weight:500;color:var(--gray-900);font-size:.875rem}
.nav__dropdown-item span{font-size:.75rem;color:var(--gray-500);display:block}

/* Actions */
.nav__actions{display:flex;align-items:center;gap:.625rem;flex-shrink:0}

/* Mobile hamburger */
.nav__hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;height:40px;
  border-radius:var(--radius-md);
  padding:0 10px;
  transition:background var(--dur-fast);
}
.nav__hamburger:hover{background:var(--gray-100)}
.nav__hamburger span{
  display:block;height:2px;background:var(--gray-700);
  border-radius:2px;transition:all var(--dur-normal) var(--ease-out);
}
.nav__hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav__hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.nav__drawer{
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
}
.nav__drawer-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  transition:opacity var(--dur-normal);
  backdrop-filter:blur(2px);
}
.nav__drawer-panel{
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(340px,90vw);
  background:var(--white);
  transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-out);
  overflow-y:auto;
  display:flex;flex-direction:column;
}
.nav__drawer.open{pointer-events:all}
.nav__drawer.open .nav__drawer-overlay{opacity:1}
.nav__drawer.open .nav__drawer-panel{transform:none}

.nav__drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--gray-200);
}
.nav__drawer-close{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast)}
.nav__drawer-close:hover{background:var(--gray-100)}
.nav__drawer-close svg{width:20px;height:20px;color:var(--gray-600)}
.nav__drawer-body{padding:1rem 1.5rem;flex:1}
.nav__drawer-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:.875rem 0;
  border-bottom:1px solid var(--gray-100);
  font-size:1rem;
  font-weight:500;
  color:var(--gray-800);
}
.nav__drawer-link:last-child{border-bottom:none}
.nav__drawer-actions{padding:1.5rem;border-top:1px solid var(--gray-200);display:flex;flex-direction:column;gap:.75rem}

@media(max-width:1024px){
  .nav__links{display:none}
  .nav__hamburger{display:flex}
  .nav__actions .btn-outline{display:none}
}
@media(max-width:768px){
  .topbar{display:none}
}