/* ========== Neon Navbar + Futuristic Buttons (for anchors) ========== */

:root{
  --nav-h: 76px;
  --neon: var(--cine-primary, #00e5ff);
  --neon-2: #9e30a9;         /* magenta accent for dual-glow */
  --nav-bg: rgba(13,13,13,.92);
  --ink: #e8eef7;
}

body { padding-top: var(--nav-h); }     /* offset fixed header */

/* nav_neon.css */
.neon-navbar,
.neon-navbar .neon-btn .txt {
  font-family: var(--nav-font);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ----- Navbar shell (fixed) ----- */
.neon-navbar{
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h);
  background: var(--nav-bg);
  display: grid;
  grid-template-columns: 220px 1fr auto; /* left (logo) | center (nav) | right (user) */
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  z-index: 1000;
  box-shadow: 0 0 20px color-mix(in srgb, var(--neon) 20%, transparent);
  border-bottom: 1px solid rgba(0,246,255,.15);
}

/* animated diagonal hatch */
.neon-navbar::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--neon) 6%, transparent),
    color-mix(in srgb, var(--neon) 6%, transparent) 10px,
    transparent 10px, transparent 20px
  );
  animation: neon-bg 10s linear infinite;
  pointer-events:none;
  opacity:.2;
}

@keyframes neon-bg { from{background-position:0 0;} to{background-position:1000px 0;} }

/* Logo */
.logo { font-family:"Orbitron", system-ui, sans-serif; font-weight:900; letter-spacing:.06em; }
.logo-link{
  display:inline-block; padding:8px 10px; border-radius:10px;
  color: var(--neon); text-decoration:none; font-size: 20px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--neon) 50%, transparent);
}

/* Center the primary nav block within the middle grid column */
.primary{
  display:flex;
  justify-content:center;   /* <— this centers the UL perfectly */
}

/* Primary nav list */
.primary ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:10px;
}

/* Fallback style if you use plain <a> instead of .neon-btn */
.primary a:not(.neon-btn){
  position:relative;
  display:inline-block;
  padding:10px 12px;
  color: var(--neon);
  font-family:"Orbitron", system-ui, sans-serif;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none;
}
.primary li{ position:relative; }
.primary li:hover::before{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--neon) 70%, transparent), transparent);
}

/* Mobile toggle (hamburger) */
.menu-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:0; background:transparent; cursor:pointer; z-index:1001;
}
.menu-toggle span{
  width:28px; height:3px; background: var(--neon);
  display:block; margin:3px 0; transition:.4s;
}
.menu-toggle.open span:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px); }

/* Right side userbox tweaks */
.userbox--neon{ display:flex; align-items:center; gap:10px; }
.userbox--neon .avatar{ border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,.4); }
.userbox--neon .name a{ color: var(--ink); text-decoration:none; }
.neon-auth{ color: var(--neon); text-decoration:none; }

/* ----- Futuristic “neon button” adapted for <a> ----- */

.neon-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;

  /* polygon cut */
  -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
          clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
}

.neon-btn--nav{
  width: auto; height: 46px; padding: 0 .9rem;
  min-width: 168px;                /* grows with text, keeps a base width */
  font-family:"Orbitron", system-ui, sans-serif;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}

.neon-btn--pill{ height: 44px; padding: 0 14px; }

/* inner panel */
.neon-btn .span{
  position:absolute; inset:1px;
  display:flex;
  background:#212121;
  z-index:1;
  -webkit-clip-path: inherit; clip-path: inherit;
}

/* label */
.neon-btn .txt{
  position:relative; z-index:2;
  font-size:.85rem; color: aliceblue;
  text-shadow: 0 0 1px color-mix(in srgb, var(--neon) 65%, #fff);
  display:flex; align-items:center; gap:.4rem;
  white-space: nowrap;             /* keep "Notifications 123" on one line */
}

/* twin rotating halos */
.neon-btn::before,
.neon-btn::after{
  content:""; position:absolute; height:260px; aspect-ratio:1.5/1;
  pointer-events:none;
  filter: blur(.2px);
}
.neon-btn::before{
  box-shadow:-17px -19px 20px var(--neon-2);
  background-image: conic-gradient(var(--neon-2), transparent, transparent, transparent, transparent, transparent, transparent, var(--neon-2));
  animation: rotate 4s linear infinite -2s;
}
.neon-btn::after{
  box-shadow:-17px -19px 10px var(--neon);
  background-image: conic-gradient(var(--neon), transparent, transparent, transparent, transparent, transparent, transparent, transparent, var(--neon));
  animation: rotate 4s linear infinite;
}
@keyframes rotate{ to{ transform: rotate(360deg); } }

/* Badge (notifications) */
.badge{
  display:inline-grid; place-items:center;
  min-width: 1.7em; height: 1.7em; padding: 0 .5em;   /* scales with text */
  border-radius: 999px;
  font-size: 0.78rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  color:#00141f; background: color-mix(in srgb, var(--neon) 75%, #7bd0ff);
  box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 35%, transparent);
  margin-left: .4rem;
}

/* ---------- ACTIVE vs INACTIVE (Option 1 vs Option 2) ----------
   Use aria-current="page" on the <a> to switch to Option 1 (active)  */

/* Option 1 (active / checked state from the original) */
.neon-btn[aria-current="page"] .span{
  inset:2px;
  background-color:#4090b5;
  background:
    repeating-linear-gradient(to bottom, transparent 0%, #4090b5 1px, #4090b5 3px, #4090b5 5px, #4090b5 4px, transparent .5%),
    repeating-linear-gradient(to left, hsl(295 60% 12%) 100%, hsl(295 60% 12%) 100%);
  box-shadow: inset 0 40px 20px hsl(296 59% 10%);
}
.neon-btn[aria-current="page"] .txt{
  color:#fff;
  text-shadow:
    2px 4px 1px #9e30a9,
    2px 2px 1px #4090b5,
    0 0 20px rgba(255,255,255,.62);
  animation: colorchange .3s ease;
}
.neon-btn[aria-current="page"]::before,
.neon-btn[aria-current="page"]::after{ animation-duration: .6s; }

/* Option 2 (inactive / default) – darker panel with subtle glow */
.neon-btn:not([aria-current="page"]) .span{
  background:#161616;
}
.neon-btn:not([aria-current="page"]) .txt{
  color: #cfe4ff;
  text-shadow: 0 0 2px color-mix(in srgb, var(--neon) 60%, #fff);
}

/* Hover lift */
.neon-btn:hover{ transform: translateY(-1px); }

/* ---- Active label pulse (from the button code) ---- */
@keyframes colorchange {
  0%   { text-shadow: 0 0 0 #9e30a9, 0 0 0 #4090b5, 0 0 0 rgba(255,255,255,.62); }
  50%  { text-shadow: -6px 5px 1px #9e30a9, 5px 11px 1px #4090b5, 0 0 20px rgba(255,255,255,.62); }
  100% { text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255,255,255,.62); }
}

/* ----- Responsive nav behavior ----- */
@media (max-width: 1100px){
  .neon-navbar{ grid-template-columns: 180px 1fr auto; }
  .neon-btn--nav{ width: auto; min-width: 150px; }   /* don't clip labels */
}

@media (max-width: 900px){
  .neon-navbar{
    grid-template-columns: 1fr auto auto;  /* logo | burger | user */
    padding: 0 10px;
  }
  .menu-toggle{ display:flex; }
  .primary{ justify-content: flex-end; }   /* UL slides in, toggle sits at right */
  .primary ul{
    position: fixed;
    top: var(--nav-h);
    left: -100%;
    width: 100vw; height: calc(100vh - var(--nav-h));
    background: rgba(13,13,13,.96);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 14px; transition: left .25s ease;
    z-index: 1000;
  }
  .primary ul.active{ left: 0; }
  .neon-btn--nav{ width: 70vw; max-width: 360px; height: 56px; }
}

.primary li .neon-btn--nav{
  flex: 0 0 auto;           /* don't let flexbox squeeze it smaller than its text */
}

/* Spacer used to offset fixed navbar on all viewports (in case CSS arrives late) */
.nav-spacer{ height: var(--nav-h); }

/* Clickable brand logo */
.logo-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;              /* overrides any pill padding */
  background:none;        /* removes the old brand pill bg */ 
  border:0;
  text-decoration:none;
}
.logo-img{
  display:block;
  height:42px;            /* tune this if you want it larger/smaller */
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

/* If you kept the old .brand styles, neutralize them when a logo is used */
.brand, .brand.brand--logo{
  background:none; border:0; padding:0; color:inherit;
}