/* ============================================================
   Alaya — shared site header / top bar
   Linked by BOTH index.html and the-menu.html with identical
   markup, so the bar is truly universal and can never drift.
   Self-contained (literal colours) so it works on the menu page
   too (which doesn't load style.css). All rules scoped under
   .site-header to avoid clashing with the menu's React styles.
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:35;
  background:#f7efe0;
  border-bottom:1px solid rgba(166,135,80,.25);
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  line-height:1;        /* pin so bar height is identical on every page */
}
.site-header .header-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:1.1rem 2rem;
}
.site-header .brand{display:flex;align-items:center;text-decoration:none}
.site-header .brand img{height:34px;width:auto;display:block}

.site-header .main-nav{display:flex;gap:2.4rem}
.site-header .nav-link{
  position:relative;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:#8a6f3f;text-decoration:none;padding-bottom:.55rem;
  transition:color .3s ease;
}
.site-header .nav-link:hover{color:#3f372b}
/* diamond divider — fades in on hover, solid on the active page */
.site-header .nav-link::after{
  content:"";
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  width:60px;height:9px;
  background:url("../svg/divider.svg") center/contain no-repeat;
  opacity:0;transition:opacity .3s ease;
}
.site-header .nav-link:hover::after{opacity:.55}
.site-header .nav-link.is-active::after{opacity:1}
/* "Reservations" lives in the nav only for the mobile menu; on desktop the CTA button covers it */
.site-header .nav-resv{display:none}

.site-header .header-right{display:flex;align-items:center;gap:1.4rem}
.site-header .lang-switch{display:inline-flex;align-items:center;gap:.45rem}
.site-header .lang-switch a,
.site-header .lang-switch .lang-current,
.site-header .lang-switch button{
  background:none;border:0;cursor:pointer;font-family:inherit;text-decoration:none;
  font-size:.72rem;letter-spacing:.14em;color:#b3a07c;padding:2px 1px;
  transition:color .25s ease;
}
.site-header .lang-switch .lang-current,
.site-header .lang-switch button.is-active{color:#8a6f3f;font-weight:500;cursor:default}
.site-header .lang-switch a:hover{color:#3f372b}
.site-header .lang-switch .sep{color:rgba(166,135,80,.5);font-size:.7rem}

.site-header .header-cta{
  font-family:inherit;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.7em 1.6em;background:#a68750;color:#fff;text-decoration:none;
  border:1px solid #a68750;border-radius:2px;white-space:nowrap;
  transition:background .3s ease,border-color .3s ease;
}
.site-header .header-cta:hover{background:#8a6f3f;border-color:#8a6f3f}

.site-header .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;padding:0;background:none;border:0;cursor:pointer}
.site-header .nav-toggle span{display:block;width:100%;height:2px;border-radius:2px;background:#8a6f3f}

@media (max-width:860px){
  .site-header .main-nav,.site-header .header-cta{display:none}
  .site-header .nav-toggle{display:flex}
  .site-header .header-inner{padding:1rem 1.3rem;gap:1.1rem}
  .site-header .brand{margin-right:auto}   /* keep logo left; group lang + burger on the right */
  .site-header .main-nav.open{
    display:flex;flex-direction:column;gap:1.4rem;
    position:absolute;top:100%;left:0;right:0;
    background:#f7efe0;padding:1.6rem 2rem 2rem;
    border-bottom:1px solid rgba(166,135,80,.3);
  }
  .site-header .main-nav.open .nav-link{padding-bottom:.3rem}
  .site-header .main-nav.open .nav-link::after{display:none}
  /* Reservations shows as a gold CTA button inside the mobile menu */
  .site-header .main-nav.open .nav-resv{
    display:inline-block;align-self:flex-start;margin-top:.5rem;
    padding:.85em 2em;border-radius:2px;
    background:#a68750;color:#fff;
    letter-spacing:.2em;
  }
  .site-header .main-nav.open .nav-resv:hover{background:#8a6f3f;color:#fff}
}

/* ===== Announcement bar (slim gold strip above the header) ===== */
.alaya-topbar{
  background:#a68750;color:#fff;text-align:center;
  padding:9px 18px;font-size:.8rem;letter-spacing:.04em;line-height:1.35;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.alaya-topbar__link{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:10px;max-width:100%}
.alaya-topbar__link:hover{opacity:.88}

/* Live-music equalizer — four bars dancing either side of the text.
   scaleY (not height) so it animates off the layout thread. */
.alaya-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px;flex:none}
.alaya-eq i{
  width:2px;height:100%;border-radius:1px;background:#fff;opacity:.92;
  transform:scaleY(.3);transform-origin:50% 100%;
  animation:alaya-eq-bounce 1.1s ease-in-out infinite;
}
.alaya-eq i:nth-child(2){animation-duration:.9s;animation-delay:.25s}
.alaya-eq i:nth-child(3){animation-duration:1.3s;animation-delay:.45s}
.alaya-eq i:nth-child(4){animation-duration:1s;animation-delay:.1s}
/* Mirror the delays on the right-hand one so they don't move in lockstep */
.alaya-topbar__text ~ .alaya-eq i{animation-delay:.55s}
.alaya-topbar__text ~ .alaya-eq i:nth-child(2){animation-delay:.05s}
.alaya-topbar__text ~ .alaya-eq i:nth-child(3){animation-delay:.8s}
.alaya-topbar__text ~ .alaya-eq i:nth-child(4){animation-delay:.3s}
@keyframes alaya-eq-bounce{
  0%,100%{transform:scaleY(.25)}
  50%{transform:scaleY(1)}
}
/* Reduced motion: freeze into a static soundwave instead of animating */
@media (prefers-reduced-motion:reduce){
  .alaya-eq i{animation:none}
  .alaya-eq i:nth-child(1){transform:scaleY(.4)}
  .alaya-eq i:nth-child(2){transform:scaleY(.9)}
  .alaya-eq i:nth-child(3){transform:scaleY(.55)}
  .alaya-eq i:nth-child(4){transform:scaleY(.75)}
}
@media (max-width:600px){ .alaya-topbar{font-size:.72rem;padding:8px 12px} .alaya-topbar__link{gap:8px} .alaya-eq{height:10px} }