/* grouped top menu (drop-downs) - loaded after theme.css; markup in inc/bootstrap.php page_head() */
.top nav { gap: 2px; }
.nav-g { position: relative; }
.nav-gb { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: #cfc4f3;
  font: 500 15px Prompt, sans-serif; cursor: pointer; white-space: nowrap; position: relative; }
.nav-gb svg { width: 18px; height: 18px; color: #b49cff; flex: none; }
.nav-gb svg:last-child { width: 15px; height: 15px; margin-left: -2px; transition: transform .15s; }
.nav-gb:hover, .nav-g:focus-within .nav-gb { color: #fff; background: rgba(255, 255, 255, .06); }
.nav-g.on .nav-gb { color: #fff; }
.nav-g.on .nav-gb svg:first-child { color: var(--gold); }
.nav-g.on .nav-gb::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.nav-dd { position: absolute; left: 0; top: 100%; min-width: 220px; padding: 8px; margin-top: 4px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(18, 11, 40, .97); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); display: none; z-index: 30; }
.nav-dd::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* keeps hover alive across the gap */
.nav-g:hover .nav-dd, .nav-g:focus-within .nav-dd { display: grid; gap: 2px; }
.nav-g:hover .nav-gb svg:last-child, .nav-g:focus-within .nav-gb svg:last-child { transform: rotate(180deg); }
.top nav .nav-dd a { display: flex; padding: 10px 12px; border-radius: 9px; font-size: 14.5px; white-space: nowrap; }
.top nav .nav-dd a.on { background: rgba(139, 92, 246, .2); }
.top nav .nav-dd a.on::after { display: none; }

@media (max-width: 1280px) { .nav-gb svg:first-child { display: none; } .nav-gb { padding: 8px 9px; font-size: 14px; } }
@media (max-width: 1060px) { .nav-gb { padding: 8px 7px; font-size: 13.5px; } }

/* phone menu: groups become headings with their pages listed under them */
@media (max-width: 860px) {
  .nav-g { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; }
  .nav-gb { padding: 6px 12px; font-size: 12.5px; letter-spacing: .06em; color: var(--muted); cursor: default; pointer-events: none; }
  .nav-gb svg { display: none; }
  .nav-g.on .nav-gb::after { display: none; }
  .nav-dd, .nav-g:hover .nav-dd, .nav-g:focus-within .nav-dd { position: static; display: grid; gap: 0; min-width: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
  .nav-dd::before { display: none; }
  .top nav .nav-dd a { padding: 9px 12px; }
}