/* Navbar Primary Component (customizable via CSS variables) */

/* Defaults */
.navbar{
  /* Size */
  --nav1-height: var(--nav-primary-height, 72px);
  /* Background & glows */
  --nav1-glow1: rgba(96,165,250,.14);
  --nav1-glow2: rgba(37,99,235,.10);
  --nav1-glow3: rgba(96,165,250,.10);
  --nav1-bg-top: rgba(7,11,20,.82);
  --nav1-bg-mid: rgba(10,16,28,.64);
  --nav1-bg-btm: rgba(10,16,28,.52);
  --nav1-blur: 16px;
  --nav1-saturate: 150%;
  /* Border rule */
  --nav1-border-edge-alpha: .45;
  --nav1-border-center-color: var(--blue-400);

  position:sticky;top:0;z-index:1000;
  width:100%;
  height:var(--nav1-height);
  border-radius:0;
  background:
    radial-gradient(600px 160px at 50% -40px, var(--nav1-glow1), transparent 65%),
    radial-gradient(380px 120px at 12% 0, var(--nav1-glow2), transparent 70%),
    radial-gradient(380px 120px at 88% 0, var(--nav1-glow3), transparent 70%),
    linear-gradient(to bottom, var(--nav1-bg-top) 0%, var(--nav1-bg-mid) 60%, var(--nav1-bg-btm) 100%);
  backdrop-filter:blur(var(--nav1-blur)) saturate(var(--nav1-saturate));
  -webkit-backdrop-filter:blur(var(--nav1-blur)) saturate(var(--nav1-saturate));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 16px rgba(0,0,0,.35);
}
.navbar > .container{display:flex;align-items:center;height:100%;position:relative;z-index:1}
.navbar nav.cluster{width:100%;justify-content:space-between}
.navbar a:not(.gradient-text-blue){color:#fff}
.navbar a:not(.gradient-text-blue):hover{color:#fff;opacity:.9}

.navbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--nav1-border-center-color), transparent calc(100% - var(--nav1-border-edge-alpha)*100%)) 18%,
    var(--nav1-border-center-color) 50%,
    color-mix(in oklab, var(--nav1-border-center-color), transparent calc(100% - var(--nav1-border-edge-alpha)*100%)) 82%,
    transparent 100%);
  opacity:.6;pointer-events:none;z-index:1
}
.navbar::before{content:none}

@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .navbar{background:linear-gradient(to bottom, rgba(7,11,20,.95), rgba(10,16,28,.75))}
}

/* Online Tag - badge design matching Live/Weekend badges */
.online-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.15rem .5rem;
  border-radius:999px;
  background:rgba(34,197,94,.18);
  color:#d4ffe8;
  border:1px solid rgba(34,197,94,.35);
  font-size:.7rem;
  font-weight:600;
}

.online-indicator{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 6px rgba(34,197,94,.6);
  animation:pulse-indicator 2s ease-in-out infinite;
}

@keyframes pulse-indicator{
  0%, 100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.7;
    transform:scale(1.15);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .online-indicator{
    animation:none;
  }
}