/*
 * "AI" dropdown in the header: Claude, ChatGPT, Claude Code.
 * Shared by index.html, spotlight/index.html and every generated page, so the
 * menu looks the same everywhere. Built on <details>, so it opens without
 * JavaScript; assets/nav-menu.js only adds close-on-outside-click and Escape.
 */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  color: #F7F3FF; opacity: .84; white-space: nowrap; transition: opacity .18s ease;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover, .nav-menu[open] > summary, .nav-menu.is-current > summary { opacity: 1; }
.nav-menu > summary svg { width: 12px; height: 12px; transition: transform .18s ease; }
.nav-menu[open] > summary svg { transform: rotate(180deg); }
.nav-menu > summary:focus-visible { outline: 2px solid #A78BFA; outline-offset: 4px; border-radius: 4px; }

.nav-menu-panel {
  position: absolute; top: calc(100% + 18px); left: -14px; z-index: 90; min-width: 290px;
  display: grid; gap: 2px; padding: 8px;
  background: #140C24; border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  box-shadow: 0 24px 50px rgba(6,2,16,.5);
}
.nav-menu-panel a {
  display: block; padding: 10px 12px; border-radius: 10px; opacity: 1 !important;
  color: #F7F3FF !important; text-decoration: none; white-space: normal;
}
.nav-menu-panel a:hover, .nav-menu-panel a:focus-visible { background: rgba(255,255,255,.07); }
.nav-menu-panel a[aria-current="page"] { background: rgba(139,92,246,.18); }
.nav-menu-panel b { display: block; font-size: 14px; font-weight: 700; }
.nav-menu-panel span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: rgba(240,233,255,.62); }

/* Inside the mobile drawer the panel becomes an indented list. The drawer only
   exists while .nav-open is set, which only happens below each page's
   breakpoint, so this needs no width query of its own. */
.nav.nav-open .nav-menu > summary {
  display: flex; justify-content: space-between; padding: 15px 2px; font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.nav.nav-open .nav-menu-panel {
  position: static; min-width: 0; padding: 6px 0 10px 10px;
  background: transparent; border: 0; box-shadow: none;
}
.nav.nav-open .nav-menu-panel b { font-size: 15px; }

/* Templates menu: two columns once it lists more than five formats, and an
   "All templates" link along the bottom. */
.nav-menu-panel.is-wide { grid-template-columns: 1fr 1fr; min-width: 560px; }
.nav-menu-panel .nav-menu-all { grid-column: 1 / -1; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 10px 10px; font-size: 13.5px; font-weight: 700; color: #CDB6FF !important; }
.nav.nav-open .nav-menu-panel.is-wide { grid-template-columns: 1fr; min-width: 0; }