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

.navbar-secondary{
  /* Spacing */
  --nav2-padding-block: .75rem;
  /* Background & glows */
  --nav2-glow1: rgba(250,204,21,.10);
  --nav2-glow2: rgba(217,119,6,.08);
  --nav2-glow3: rgba(250,204,21,.08);
  --nav2-bg-top: rgba(3,6,15,.92);
  --nav2-bg-mid: rgba(6,10,20,.78);
  --nav2-bg-btm: rgba(8,12,22,.66);
  --nav2-blur: 18px;
  --nav2-saturate: 160%;
  /* Border + diamond */
  --nav2-border-edge-alpha: .55;
  --nav2-border-center-color: var(--gold-500);
  --nav2-diamond-color-start: var(--gold-400);
  --nav2-diamond-color-end: var(--gold-600);
  --nav2-diamond-glow: rgba(250,204,21,.25);

  width:100%;
  position:sticky;top:var(--nav-primary-height);z-index:999;
  padding-block:var(--nav2-padding-block);
  background:
    radial-gradient(520px 140px at 50% -32px, var(--nav2-glow1), transparent 65%),
    radial-gradient(320px 110px at 15% 0, var(--nav2-glow2), transparent 70%),
    radial-gradient(320px 110px at 85% 0, var(--nav2-glow3), transparent 70%),
    linear-gradient(to bottom, var(--nav2-bg-top) 0%, var(--nav2-bg-mid) 60%, var(--nav2-bg-btm) 100%);
  backdrop-filter:blur(var(--nav2-blur)) saturate(var(--nav2-saturate));
  -webkit-backdrop-filter:blur(var(--nav2-blur)) saturate(var(--nav2-saturate));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 16px rgba(0,0,0,.4);
}
.navbar-secondary a:not(.gradient-text-blue){color:#fff}
.navbar-secondary a:not(.gradient-text-blue):hover{color:#fff;opacity:.9}

.navbar-secondary::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--nav2-border-center-color), transparent calc(100% - var(--nav2-border-edge-alpha)*100%)) 18%,
    var(--nav2-border-center-color) 50%,
    color-mix(in oklab, var(--nav2-border-center-color), transparent calc(100% - var(--nav2-border-edge-alpha)*100%)) 82%,
    transparent 100%);
  opacity:.65;pointer-events:none;z-index:1
}
.navbar-secondary::before{
  content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg, var(--nav2-diamond-color-start), var(--nav2-diamond-color-end));
  border-radius:2px;box-shadow:0 0 6px var(--nav2-diamond-glow);pointer-events:none;z-index:2
}