/* Header - HotellPL */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in hsl, var(--color-cream) 92%, white 8%);
  border-bottom: 1px solid var(--color-cream-dark);
  backdrop-filter: saturate(120%) blur(6px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}
.brand-link {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-charcoal);
}
.brand-link:hover { color: var(--color-emerald); }

/* Nav base */
.site-nav { display: block; }
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-link {
  display: inline-block;
  padding: var(--space-2) var(--space-1);
  color: var(--color-charcoal);
}
.nav-link:hover { color: var(--color-emerald); }
.nav-cta { margin-left: var(--space-4); }

/* Mobile toggle */
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-charcoal);
}
.menu-toggle:focus-visible { outline: 2px solid var(--color-emerald); outline-offset: 2px; }
.menu-icon {
  position: relative;
  width: 22px; height: 2px; background: var(--color-charcoal);
}
.menu-icon::before, .menu-icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--color-charcoal);
}
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

/* Overlay for mobile menu */
.nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity var(--transition-slow) var(--transition-timing);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }

/* Mobile / small screens */
@media (max-width: 992px) {
  .menu-toggle { display: inline-flex; }
  /* Progressive enhancement: collapse only when JS is enabled */
  .js .site-nav {
    position: fixed; right: 0; top: 0; bottom: 0; width: min(84vw, 380px);
    background: var(--color-background);
    box-shadow: var(--shadow-2xl);
    transform: translateX(100%);
    transition: transform var(--transition-slower) var(--transition-timing-luxury);
    padding: var(--space-12) var(--space-8);
    z-index: var(--z-fixed);
  }
  .js .site-nav.is-open { transform: translateX(0);         height: 450px;}
  .js .nav-list { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .js .nav-cta { margin-left: 0; width: 100%; }
  .js .nav-cta .btn { width: 100%; justify-content: center; }
}