/* "Choose a path" row in the website header menu (public/js/site-paths.js). Same look as the app's
   row in app/paths.css (.path-menu-*), which website pages don't load. */
.site-nav-drawer .path-menu-btn { --band-on: #0d0716; }
.site-nav-drawer .path-menu-btn[data-path="self"] { --band-grad: linear-gradient(120deg, #9CC4FF, #5B8DEF); --band-aura: rgba(91, 141, 239, 0.32); --band-accent: #9CC4FF; }
.site-nav-drawer .path-menu-btn[data-path="career"] { --band-grad: linear-gradient(120deg, #7FE3B0, #2FBF84); --band-aura: rgba(47, 191, 132, 0.28); --band-accent: #7FE3B0; }
.site-nav-drawer .path-menu-btn[data-path="love"] { --band-grad: linear-gradient(120deg, #FFA9C0, #F0648E); --band-aura: rgba(240, 100, 142, 0.3); --band-accent: #FFA9C0; }
.site-nav-drawer .path-menu-paths { margin: 4px 0 14px; }
.site-nav-drawer .path-menu-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--m6); }
.site-nav-drawer .path-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.site-nav-drawer .path-menu-btn {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 4px;
  background-image: var(--band-grad); border: 0; border-radius: 999px; box-shadow: 0 4px 14px var(--band-aura);
  color: var(--band-on); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.site-nav-drawer .path-menu-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--band-aura); }
.site-nav-drawer .path-menu-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.site-nav-drawer .path-menu-btn.is-on { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--band-accent), 0 6px 18px var(--band-aura); }
@media (prefers-reduced-motion: reduce) { .site-nav-drawer .path-menu-btn { transition: none; } }