/* Noctra — Bootstrap navbar overrides */
#nav{transition:all .35s ease;background:rgba(8,8,12,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);position:fixed;top:0;left:0;right:0;z-index:1030;border-bottom:1px solid rgba(255,255,255,.04)}
#nav.transparent-at-top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
#nav.scrolled{background:rgba(8,8,12,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom-color:rgba(255,255,255,.04)}
#nav .navbar-brand{
  font-weight:800;font-size:13px;letter-spacing:8px;text-transform:uppercase;
  display:inline-block;
  background:linear-gradient(90deg,#ffffff 0%,#c4b5fd 30%,#8b5cf6 50%,#c4b5fd 70%,#ffffff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent !important;-webkit-text-fill-color:transparent;
  animation:brandShimmer 7s linear infinite;
  filter:drop-shadow(0 0 12px rgba(139,92,246,.30));
  transition:filter .35s ease,transform .35s ease;
}
#nav .navbar-brand:hover{
  filter:drop-shadow(0 0 20px rgba(139,92,246,.65));
  transform:translateY(-1px) scale(1.05);
}
@keyframes brandShimmer{0%{background-position:0% 50%}100%{background-position:220% 50%}}
#nav .nav-link{color:rgba(212,212,216,.45);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:6px 12px}
#nav .nav-link:hover{color:#fff}
#nav .btn{padding:8px 18px;font-size:12px;font-weight:600;letter-spacing:.5px;border-radius:8px}
#nav .btn-outline-light{--bs-btn-color:rgba(212,212,216,.65);--bs-btn-border-color:rgba(255,255,255,.08);--bs-btn-hover-bg:rgba(255,255,255,.06);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:rgba(255,255,255,.15)}
#nav .btn-discord{border-color:rgba(255,255,255,.08);color:rgba(212,212,216,.65)}
#nav .btn-discord:hover{color:#fff;border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.06)}

/* ── Mobile: menu hambúrguer ──────────────────────────────────────────────── */
/* Ao abrir o menu, a navbar sempre ganha fundo escuro sólido — mesmo no topo
   (quando está transparent-at-top) — para os links ficarem legíveis. */
@media (max-width: 991.98px) {
  #nav.transparent-at-top { background: transparent; }
  #nav .navbar-collapse {
    background: rgba(8,8,12,.97);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    margin-top: 10px;
    padding: 12px 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.55);
  }
  /* Quando o menu está aberto (ou animando), forçar fundo na navbar inteira.
     A classe é adicionada via JS (app.js) — :has() é fallback para browsers
     que suportam. */
  #nav.navbar-collapse-show,
  #nav:has(.navbar-collapse.show),
  #nav:has(.navbar-collapse.collapsing) {
    background: rgba(8,8,12,.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom-color: rgba(255,255,255,.04);
  }
  #nav .nav-link {
    color: rgba(226,226,230,.8);
    padding: 10px 12px;
    border-radius: 8px;
  }
  #nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
  #nav .nav-actions,
  #nav .d-flex.gap-2.align-items-center {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  #nav .btn { width: 100%; margin-top: 6px; }
}