/* ============================================================
   SHOW HAMBURGER ONLY ON MOBILE
============================================================ */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex !important;
  }
}

/* ============================================================
   FIX HEADER STACKING CONTEXT
============================================================ */
header {
  position: relative !important; 
  z-index: 10 !important;
}

/* ============================================================
   FULLSCREEN MOBILE MENU OVERLAY
============================================================ */
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  background: #050816 !important;  /* fully opaque */
  backdrop-filter: blur(18px);

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.35s ease;

  z-index: 999999999 !important;
}

/* OPEN STATE */
.mobile-menu.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Disable scrolling */
body.menu-open {
  overflow: hidden !important;
  height: 100vh !important;
}

/* ============================================================
   HIDE DESKTOP CTA ONLY ON MOBILE
============================================================ */
@media (max-width: 1024px) {
  .nav-cta,
  .nav-cta * {
    display: none !important;
  }
}

/* ============================================================
   CLOSE BUTTON
============================================================ */
.menu-close {
  position: absolute !important;
  top: 24px !important;
  right: 26px !important;
  font-size: 2.2rem !important;
  color: white !important;
  cursor: pointer !important;
  z-index: 1000000000 !important;
}

/* ============================================================
   REMOVE DESKTOP NAV STYLE INHERITANCE
============================================================ */
.mobile-menu nav {
  all: unset !important;
}

/* Center menu list */
.mobile-menu .mobile-nav-links {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  gap: 20px !important;
  padding: 0 32px !important;
}

/* ============================================================
   MENU LINKS
============================================================ */
.mobile-menu .mobile-nav-links a {
  display: block !important;
  width: 100% !important;
  text-align: center !important;

  font-family: "Playfair Display", serif !important;
  font-size: 1.55rem !important;

  padding: 14px 0 !important;
  text-decoration: none !important;

  color: white !important;
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
  transition: 0.25s ease !important;
}

.mobile-menu .mobile-nav-links a:hover {
  color: #f0b76b !important;
}

/* ============================================================
   GHOST CTA BUTTON (BOTTOM OF MENU)
============================================================ */
.menu-cta-ghost {
  padding: 10px 26px !important;

  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 50px !important;

  color: var(--text-muted) !important;
  font-size: 1rem !important;
  text-align: center !important;

  display: inline-block !important;
  margin-top: 6px !important;  /* Balanced with gap */
  transition: 0.25s ease !important;
}

.menu-cta-ghost:hover {
  color: #fff !important;
  border-color: #f0b76b !important;
}

/* ============================================================
   HIDE ENTIRE MOBILE MENU ON DESKTOP
============================================================ */
@media (min-width: 769px) {
  .mobile-menu,
  .nav-toggle {
    display: none !important;
  }
}


/* Ensure container is horizontal inside the vertical link stack */
.mobile-menu .mobile-auth-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
  width: 100%;
  box-sizing: border-box;
  padding: 0 32px; /* match .mobile-nav-links padding */
}

/* Make these anchors behave like buttons and NOT be full-width links */
.mobile-menu .mobile-auth-buttons .mobile-btn {
  display: inline-flex !important;   /* prevents width:100% from ancestor rule */
  align-items: center;
  justify-content: center;
  width: auto !important;            /* override global width:100% */
  min-width: 120px;                  /* prevents very narrow buttons */
  padding: 10px 18px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Remove the mobile-nav-links a styles that would otherwise affect these */
.mobile-menu .mobile-auth-buttons .mobile-btn {
  border-bottom: none !important;
  color: inherit !important;
}

/* Styles for each button (customize colors) */
.mobile-menu .mobile-auth-buttons .register-btn {
  background: #f0b76b !important;
  color: #000 !important;
  border: 0 !important;
}

.mobile-menu .mobile-auth-buttons .login-btn {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
}

/* If viewport is narrow and buttons don't fit, allow wrap */
@media (max-width: 360px) {
  .mobile-menu .mobile-auth-buttons {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .mobile-menu .mobile-auth-buttons .mobile-btn {
    flex: 1 1 auto;
    min-width: calc((100% - 8px) / 2);
  }
}