/* ═══════════════════════════════════════
   HEADERS — Site header / navbar + section headers
   ═══════════════════════════════════════ */

/* ── SITE HEADER (Fixed) ─────── */
#site-header,
.site-header,
header.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--y-z-sticky);
}

.navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: var(--y-shadow-s);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--y-space-xs) 0;
}

.navbar-logo-link {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
}

.navbar-logo {
  height: 40px;
  width: auto;
}

.navbar-logo-fallback {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--y-color-primary), var(--y-color-accent));
  border-radius: var(--y-radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--y-color-white);
  font-size: var(--y-font-l);
}

.logo-text span:first-child {
  color: var(--y-color-primary);
  font-size: var(--y-font-xl);
  font-weight: var(--y-weight-bold);
}

.logo-text span:last-child {
  color: var(--y-color-accent);
  font-size: var(--y-font-xl);
  font-weight: var(--y-weight-bold);
}

/* ── NAV LINKS ────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--y-space-xs);
}

.nav-links a {
  padding: var(--y-space-s) var(--y-space-l);
  border-radius: var(--y-radius-m);
  transition: all var(--y-transition-fast);
}

.nav-links a:hover {
  background: var(--y-color-bg-subtle);
  color: var(--y-color-primary);
}

.nav-links a.active {
  background: var(--y-color-primary);
  color: var(--y-color-white);
}

/* ── NAV ACTIONS ──────────── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--y-space-m);
}

.nav-phone {
  display: flex;
  align-items: center;
  gap: var(--y-space-xs);
  color: var(--y-color-primary);
  font-size: var(--y-font-s);
}

.nav-account {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  padding: var(--y-space-s) var(--y-space-m);
  border-radius: var(--y-radius-m);
  transition: all var(--y-transition-fast);
}

.nav-account:hover {
  background: var(--y-color-bg-subtle);
  color: var(--y-color-primary);
}

.nav-avatar-initial {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--y-color-primary), var(--y-color-accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--y-color-white);
  font-size: var(--y-font-xs);
  font-weight: var(--y-weight-bold);
}

.nav-fav {
  position: relative;
  padding: var(--y-space-s);
  border-radius: var(--y-radius-m);
  transition: all var(--y-transition-fast);
}

.nav-fav:hover {
  background: var(--y-color-bg-subtle);
  color: var(--y-color-primary);
}

.fav-badge {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 16px;
  height: 16px;
  background: var(--y-color-danger);
  color: var(--y-color-white);
  font-size: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── MOBILE NAV ───────────── */
.mobile-toggle {
  display: none;
  align-items: center;
  gap: var(--y-space-s);
}

.mobile-menu {
  display: none;
  padding-bottom: var(--y-space-l);
  border-top: 1px solid var(--y-color-border);
}

.mobile-menu a {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  padding: var(--y-space-s) var(--y-space-l);
  border-radius: var(--y-radius-m);
  transition: all var(--y-transition-fast);
  text-decoration: none;
  color: inherit;
}

.mobile-menu a:hover {
  background: var(--y-color-bg-subtle);
}

.mobile-menu a.active {
  background: var(--y-color-primary);
  color: var(--y-color-white);
}

.mobile-menu.open {
  display: flex;
  flex-direction: column;
  gap: var(--y-space-xs);
  padding-top: var(--y-space-m);
  width: 100%;
}

#mobileNavAccount {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--y-space-s);
}

/* ── SECTION HEADERS ──────── */
.section-badge {
  display: inline-block;
  padding: var(--y-space-xs) var(--y-space-l);
  border-radius: var(--y-radius-full);
  font-size: var(--y-font-s);
}

.badge-gold {
  background: rgba(139, 105, 20, 0.1);
  color: var(--y-color-primary);
}

.badge-burgundy {
  background: rgba(107, 29, 58, 0.1);
  color: var(--y-color-accent);
}

/* ── PAGE HERO ────────────── */
.page-hero {
  position: relative;
  padding: var(--y-space-6xl) 0;
  height: 55vh;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero-dark {
  background: linear-gradient(to left, var(--y-color-dark), var(--y-color-dark-3));
  color: var(--y-color-white);
}

/* ═══════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════ */

@media (max-width: 1200px) {
  .nav-links {
    gap: 0;
  }

  .nav-links a {
    padding: var(--y-space-s) var(--y-space-m);
    font-size: var(--y-font-s);
  }
}

@media (max-width: 992px) {
  .nav-phone {
    display: none;
  }
}

@media (max-width: 768px) {

  .nav-links,
  .nav-actions {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .page-hero {
    height: 40vh;
    padding: var(--y-space-5xl) 0;
  }
}

@media (max-width: 480px) {
  .navbar .container {
    padding: var(--y-space-xs);
  }

  .navbar-logo {
    height: 32px;
  }

  .logo-icon {
    width: 32px;
    height: 32px;
    font-size: var(--y-font-m);
  }

  .logo-text span:first-child,
  .logo-text span:last-child {
    font-size: var(--y-font-m);
  }

  .page-hero {
    padding: var(--y-space-xl) 0;
    height: 30vh;
  }
}

/* ═══ WordPress navbar (React / Figma parity) ═══ */
.navbar.eventhall-wp-navbar .container.navbar-inner,
.navbar.eventhall-wp-navbar .navbar-inner.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--y-space-m);
  min-height: var(--y-header-height, 64px);
  flex-wrap: nowrap;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--y-space-s);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.navbar-brand .navbar-logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--y-radius-m);
}

.logo-text-eventhall {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em;
  line-height: 1.2;
}

.logo-text-primary {
  color: var(--y-color-primary);
  font-size: var(--y-font-xl);
  font-weight: var(--y-weight-bold);
}

.logo-text-accent {
  color: var(--y-color-accent);
  font-size: var(--y-font-xl);
  font-weight: var(--y-weight-bold);
}

.navbar-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--y-space-xs);
  min-width: 0;
}

.navbar-links a {
  padding: var(--y-space-s) var(--y-space-l);
  border-radius: var(--y-radius-m);
  transition: all var(--y-transition-fast);
  text-decoration: none;
  color: var(--y-color-text, #1a2332);
  white-space: nowrap;
  font-size: var(--y-font-s);
}

.navbar-links a:hover {
  background: var(--y-color-bg-subtle);
  color: var(--y-color-primary);
}

.navbar-links a.active {
  background: var(--y-color-primary);
  color: var(--y-color-white);
}

.navbar-actions-desktop {
  display: flex;
  align-items: center;
  gap: var(--y-space-m);
  flex-shrink: 0;
}

.nav-account {
  display: inline-flex;
  align-items: center;
  gap: var(--y-space-s);
  padding: var(--y-space-s) var(--y-space-m);
  border-radius: var(--y-radius-m);
  text-decoration: none;
  color: var(--y-color-text, #1a2332);
  transition: all var(--y-transition-fast);
}

.nav-account:hover {
  background: var(--y-color-bg-subtle);
  color: var(--y-color-primary);
}

.nav-account.active,
.nav-account.is-logged-in.active {
  background: var(--y-color-primary);
  color: var(--y-color-white);
}

.nav-account-label {
  font-size: var(--y-font-s);
  font-weight: var(--y-weight-semibold);
}

@media (max-width: 1023px) {
  .nav-account .nav-account-label {
    display: none;
  }
}

.navbar-mobile-quick {
  display: none;
  align-items: center;
  gap: var(--y-space-xs);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .navbar-links,
  .navbar-actions-desktop {
    display: none !important;
  }

  .navbar-mobile-quick {
    display: flex !important;
  }

  .mobile-menu.open {
    display: flex;
  }
}

/* Desktop: hide old lone toggle if any */
.navbar.eventhall-wp-navbar > .container > .mobile-toggle {
  display: none !important;
}