/* ============================================================================
   QUICK NAV + FILTER + BACK-TO-TOP — shared premium dark/gold UX helpers.
   Lightweight, no libraries. quicknav.js measures the sticky site header and
   sets --cg-nav-h / --cg-jumpnav-h so the sticky Jump-To / filter bar sits
   right below the header and anchored sections clear BOTH bars when jumped to.
   Adds NO content and changes nothing else on the page.
   ============================================================================ */
:root{
  --qn-gold:#FACC15;
  --qn-line:rgba(250,204,21,0.18);
  --qn-line-strong:rgba(250,204,21,0.42);
  --cg-nav-h:72px;       /* set by quicknav.js */
  --cg-jumpnav-h:0px;    /* set by quicknav.js */
}

/* ---- Sticky Jump-To bar + Projects filter bar (shared shell) ---- */
.cg-jumpnav,
.cg-filterbar{
  position:-webkit-sticky; position:sticky; top:var(--cg-nav-h,72px); z-index:30;
  background:rgba(10,10,12,0.88);
  -webkit-backdrop-filter:saturate(150%) blur(12px); backdrop-filter:saturate(150%) blur(12px);
  border-top:1px solid var(--qn-line);
  border-bottom:1px solid var(--qn-line);
}
.cg-jumpnav .qn-inner,
.cg-filterbar .qn-inner{
  max-width:1180px; margin:0 auto; padding:11px 20px;
  display:flex; align-items:center; gap:14px;
}
.cg-jumpnav .qn-label,
.cg-filterbar .qn-label{
  flex:0 0 auto;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--qn-gold);
}
.cg-jumpnav ul,
.cg-filterbar .qn-pills{
  list-style:none; margin:0; padding:2px 0;
  display:flex; gap:8px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.cg-jumpnav ul::-webkit-scrollbar,
.cg-filterbar .qn-pills::-webkit-scrollbar{ display:none; }
.cg-jumpnav a,
.cg-filterbar button{
  display:inline-block; white-space:nowrap; cursor:pointer;
  padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--qn-line);
  color:rgba(255,255,255,0.86);
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
  text-decoration:none; line-height:1.1;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.cg-jumpnav a:hover,.cg-jumpnav a:focus-visible,
.cg-filterbar button:hover,.cg-filterbar button:focus-visible{
  background:var(--qn-gold); color:#0B0B0C; border-color:var(--qn-gold);
  transform:translateY(-1px); outline:none;
}
.cg-filterbar button.is-active{
  background:var(--qn-gold); color:#0B0B0C; border-color:var(--qn-gold);
}

/* keep anchored targets clear of BOTH sticky bars (inert unless scrolled-to) */
[id]{ scroll-margin-top: calc(var(--cg-nav-h,72px) + var(--cg-jumpnav-h,0px) + 16px); }

/* ---- Projects card filtering ---- */
.cg-card.is-hidden{ display:none !important; }

/* ---- Back to top (injected by quicknav.js) ---- */
.cg-backtotop{
  position:fixed; left:18px; bottom:22px; z-index:60;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,12,0.72);
  border:1px solid var(--qn-line-strong);
  color:var(--qn-gold); cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s,transform .25s,visibility .25s,background .18s,border-color .18s;
}
.cg-backtotop.show{ opacity:1; visibility:visible; transform:translateY(0); }
.cg-backtotop:hover{ background:var(--qn-gold); color:#0B0B0C; border-color:var(--qn-gold); }
.cg-backtotop svg{ width:20px; height:20px; }

@media (max-width:760px){
  .cg-jumpnav .qn-inner,
  .cg-filterbar .qn-inner{ padding:9px 12px; gap:0; }
  .cg-jumpnav .qn-label,
  .cg-filterbar .qn-label{ display:none; } /* pills are self-explanatory; saves width */
  .cg-jumpnav a,
  .cg-filterbar button{ padding:8px 14px; font-size:13px; }
  .cg-backtotop{ left:14px; bottom:78px; width:42px; height:42px; } /* clear sticky mobile CTA bar */
}