/* Remove dashed focus outline just for leaderboard page */
.leaderboards-page .ratings-list-row:focus {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
/*
  overrides.css
  Final consolidated overrides for navbar/dropdowns:
  - Ensures dropdown triggers (dropbtn) match anchor glow exactly
  - Prevents clipping of glows
  - Positions dropdown-content reliably under the trigger
  - Loads last so it wins over other stylesheet rules
  - Adds persistent neon glow to specific top-level items (Explore, Community, Shop, Settings)
  - Keeps the default pill background OFF for persistent glow (only text/icon halo),
    but preserves the original pill appearance on true hover/focus/open.
*/

/* Narrow scope: allow shadows to render outside the nav only where needed */
nav,
nav .nav-links {
  overflow: visible !important;
}

/* Ensure dropdown container & trigger have stable stacking context */
nav .nav-links .dropdown {
  position: relative;
}
nav .nav-links .dropbtn {
  position: relative;
  z-index: 150;
  background: transparent;
  color: var(--color-accent);
  transition: all 0.3s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

/* Icon baseline inside triggers */
nav .nav-links .dropbtn i,
nav .nav-links > a > i,
nav .nav-links > a > svg,
nav .nav-links .dropbtn svg {
  color: #ffb6c1;
  transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Dropdown content: place beneath trigger with stable z-order */
nav .nav-links .dropdown .dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 160px;
  background-color: #0b0b0b;
  border-radius: 8px;
  padding: 0;
  z-index: 140;
  box-shadow: 0 10px 34px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  -webkit-transform: translateZ(0); /* create stacking context to avoid painting glitches */
          transform: translateZ(0);
}

/* Keep last dropdown aligned as before */
.nav-links .dropdown:last-of-type .dropdown-content {
  right: 0;
  left: auto;
  transform: translateX(-14px);
}

/* Show menu on hover or keyboard focus-within (accessible) */
nav .nav-links .dropdown:hover .dropdown-content,
nav .nav-links .dropdown:focus-within .dropdown-content {
  display: block;
}

/* Shared hover/focus/open visuals — mirror anchor glow so dropbtn matches exactly */
nav a:hover,
nav a:focus,
nav .nav-links .dropdown:hover > .dropbtn,
nav .nav-links .dropdown:focus-within > .dropbtn,
nav .nav-links .dropbtn:hover,
nav .nav-links .dropbtn:focus,
nav .nav-links .dropbtn[aria-expanded="true"] {
  background-color: rgba(255,20,147,0.2) !important;
  color: #fff !important;

  /* Neon halo + subtle depth to match anchors */
  box-shadow:
    0 0 12px rgba(255,105,180,0.7) !important,
    0 6px 18px rgba(255,20,147,0.10) !important;

  text-shadow: 0 0 10px var(--color-accent) !important;
  -webkit-filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;
          filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;

  outline: none !important;
}

/* Ensure icons inside triggers glow the same way on hover/focus */
nav a:hover i,
nav a:focus i,
nav .nav-links .dropdown:hover > .dropbtn i,
nav .nav-links .dropdown:focus-within > .dropbtn i,
nav .nav-links .dropbtn:hover i,
nav .nav-links .dropbtn:focus i,
nav a:hover > svg,
nav a:focus > svg,
nav .nav-links .dropdown:hover > .dropbtn > svg,
nav .nav-links .dropdown:focus-within > .dropbtn > svg,
nav .nav-links .dropbtn:hover > svg,
nav .nav-links .dropbtn:focus > svg {
  color: #fff !important;
  text-shadow: 0 0 10px var(--color-accent) !important;
  -webkit-filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;
          filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;
}

/* ---------- NEW: persistent glow for specific top-level items ---------- */

/*
  Two ways are provided:
  1) Automatic: anchor href contains the keyword (common when links are /explore, /community, etc.)
  2) Manual: add class="glow" to any top-level anchor or dropbtn you want glowing.

  Default behavior: persistent glow = text/icon halo only (no pill background).
  On real hover/focus the original pill background and stronger box-shadow reappear (keeps interactivity).
*/

/* 1) Auto-match common slugs in hrefs (non-invasive) */
nav .nav-links > a[href*="explore"],
nav .nav-links > a[href*="community"],
nav .nav-links > a[href*="shop"],
nav .nav-links > a[href*="settings"],
nav .nav-links > .dropdown > .dropbtn[href*="explore"],
nav .nav-links > .dropdown > .dropbtn[href*="community"],
nav .nav-links > .dropdown > .dropbtn[href*="shop"],
nav .nav-links > .dropdown > .dropbtn[href*="settings"] {
  color: var(--color-accent) !important;
  text-shadow: 0 0 10px var(--color-accent) !important;
  -webkit-filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;
          filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;

  /* prevent pill background from appearing for the persistent state */
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Manual class — add class="glow" to anchors or dropbtns (recommended if hrefs aren't predictable) */
nav .nav-links > a.glow,
nav .nav-links > .dropdown > .dropbtn.glow {
  color: var(--color-accent) !important;
  text-shadow: 0 0 10px var(--color-accent) !important;
  -webkit-filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;
          filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;

  /* remove pill background for persistent glow state */
  background: transparent !important;
  box-shadow: none !important;
}

/* Make sure icons inside the forced-glow items also pick up the subtle halo */
nav .nav-links > a.glow > i,
nav .nav-links > a.glow > svg,
nav .nav-links > .dropdown > .dropbtn.glow > i,
nav .nav-links > .dropdown > .dropbtn.glow > svg {
  color: #fff !important;
  text-shadow: 0 0 10px var(--color-accent) !important;
  -webkit-filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;
          filter: drop-shadow(0 0 12px rgba(255,105,180,0.65)) !important;
  box-shadow: none !important;
}

/* ---------- end persistent glow rules ---------- */

/* Neon underline: same gradient & timing as anchors */
nav a::after,
nav .nav-links .dropbtn::after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg,#ff69b4,#ff00ff);
  transition: width 0.28s ease-in-out;
  margin-top: 3px;
  border-radius: 10px;
}

/* Expand underline on hover/focus or when dropdown is open/hovered */
nav a:hover::after,
nav a:focus::after,
nav .nav-links .dropbtn:hover::after,
nav .nav-links .dropbtn:focus::after,
nav .nav-links .dropdown:hover > .dropbtn::after,
nav .nav-links .dropdown:focus-within > .dropbtn::after,
nav .nav-links .dropdown.open > .dropbtn::after,
nav .nav-links .dropbtn[aria-expanded="true"]::after {
  width: 100% !important;
}

/* Strong, high-specificity final override (pixel-close match for anchors)
   Paste this at the end so it wins even if other CSS is specific. */
nav .nav-links .dropbtn,
nav .nav-links .dropdown > .dropbtn {
  /* Keep baseline consistent */
  transition: all 0.3s ease-in-out !important;
  background: transparent !important;
  color: var(--color-accent) !important;
  position: relative !important;
  z-index: 300 !important;
}


/* Ensure underline displays correctly for dropbtns */
nav .nav-links .dropbtn::after,
nav .nav-links .dropdown:hover > .dropbtn::after,
nav .nav-links .dropdown.open > .dropbtn::after {
  content: '';
  display: block;
  height: 2px;
  width: 100% !important;
  background: linear-gradient(90deg,#ff69b4,#ff00ff) !important;
  margin-top: 3px;
  border-radius: 10px;
  transition: width 0.28s ease-in-out !important;
}

/* Dropdown content menu items fallback styling */
nav .nav-links .dropdown .dropdown-content a {
  color: lightpink;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}
nav .nav-links .dropdown .dropdown-content a:hover {
  background-color: rgba(139, 0, 255, 0.12);
}

/* Small-screen adjustments */
@media (max-width: 540px) {
  nav .nav-links .dropbtn { z-index: 160 !important; }
  nav .nav-links .dropdown .dropdown-content { z-index: 150 !important; top: calc(100% + 6px); }
}