/* ===== SHIMMER GOLD KEYFRAME ===== */
@keyframes shimmer-gold {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ===== TOP NAVIGATION BAR ===== */
#bg-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  /* Metallic shimmer gold gradient — matches the logo's warm gold tones */
  background: linear-gradient(
    105deg,
    #7a5c1e 0%,
    #c9a84c 20%,
    #f0d080 35%,
    #e8c84a 45%,
    #d4af37 50%,
    #e8c84a 55%,
    #f0d080 65%,
    #c9a84c 80%,
    #7a5c1e 100%
  );
  background-size: 200% auto;
  animation: shimmer-gold 4s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 6vw, 80px);
  padding: 10px 16px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

/* ===== NAV BUTTONS ===== */
#bg-navbar a.bg-nav-btn {
  display: inline-block;
  color: #4a1f7a;
  font-family: inherit;
  font-size: clamp(0.55rem, 1.9vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: clamp(5px, 1.5vw, 9px) clamp(10px, 3vw, 22px);
  border: 2px solid #5a2a8a;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  /* Slight text shadow for depth against the shimmer */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25);
}

#bg-navbar a.bg-nav-btn:hover {
  background-color: rgba(90, 42, 138, 0.85);
  color: #f0d080;
  border-color: #f0d080;
  text-shadow: none;
}

/* ===== PUSH PAGE CONTENT DOWN ===== */
body {
  padding-top: 52px;
}