.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  padding: 30px 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: transparent; /* sits transparently over whatever's behind it */
  z-index: 1000;
}

.logo img {
  height: 80px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
    .logo img {
        height: 50px;
    }
}

.logo a {
  display: block;
  line-height: 0; /* removes the small inline-image gap under the link */
}

/* --- nav / actions wrapper (links + hamburger) --- */
.navs {
  display: flex;
  align-items: center;
  gap: clamp(15px, 2vw, 40px);
}

.nav-buttons {
  display: none; /* mobile-first: hidden by default, restored at desktop below */
  align-items: center;
  gap: clamp(15px, 2vw, 40px);
  transition: opacity 0.3s ease;
}

/* Navigation buttons — unchanged from your version */
.nav-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--white-soft);
  font-size: 16px;
  cursor: pointer;
  padding: 8px 0;
  transition: color 0.3s ease;
  font-weight: 700;
}

.nav-btn:hover,
.nav-btn.active {
  color: var(--gold);
}

.nav-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.nav-btn:hover::after,
.nav-btn.active::after {
  width: 100%;
}

.login-btn {
  padding: 10px 18px;
  border: 1px solid var(--gold);
  border-radius: 20px;
  background: transparent;
  color: var(--white);
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 700;
}

.login-btn:hover {
  color: var(--black);
  background: var(--gold);
}

/* --- Hamburger --- */
.menu-icon {
  display: flex; /* mobile-first: always available by default */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  color: var(--white);
  cursor: pointer;
  user-select: none;

  background-color: var(--black-card-rgb);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;

  position: relative;
  z-index: 2; /* stays above the overlay panel below */
}

/* --------------------------------------------------------------------------
   MENU PANEL — the ONE implementation of the open state. Full-screen
   overlay, links along the right edge, opened by adding .open (via
   toggleDropdown() in sbf-navbar.js).
   -------------------------------------------------------------------------- */
.dropdown-menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  padding-right: 48px;

  background: var(--black-card-rgb);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
}

.dropdown-menu a {
  color: var(--white);
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  text-align: right;
  transition: color 0.3s ease;
}

.dropdown-menu a:hover {
  color: var(--gold) !important;
}

/* --------------------------------------------------------------------------
   SCROLLED / COMPACT STATE
   At any width, once scrolled past the threshold (see sbf-navbar.js),
   the inline nav links fade out. Logo and hamburger stay visible.
   -------------------------------------------------------------------------- */
.navbar.scrolled .nav-buttons {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   WIDE DESKTOP (>=1024px), NOT scrolled
   Restores the inline nav links + GET TICKETS button alongside the
   hamburger, which now stays visible at every width and scroll state —
   it's always there as a constant way to open the full menu overlay.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .navbar:not(.scrolled) .nav-buttons {
    display: flex;
  }
}