/* ============================================================================
   Unified learner header menu (.bnav)
   ----------------------------------------------------------------------------
   One self-contained stylesheet so the top menu renders IDENTICALLY on every
   page — index.html, _LearnLayout and _CoachLayout — regardless of whatever
   other CSS framework that page loads. Fixed colours/sizes (no theme tokens)
   guarantee pixel-for-pixel consistency. The matching markup lives in
   Pages/Shared/_LearnNavMenu.cshtml (Razor) and inline in index.html.
   ========================================================================== */
.bnav {
  list-style: none; margin: 0; padding: 0;
  display: none; align-items: center; gap: .35rem;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (min-width: 1280px) { .bnav.bnav-desktop { display: flex; } }

.bnav > li { position: relative; }

/* Pill-style nav items (Prism look) */
.bnav a,
.bnav .bnav-trigger {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .95rem; font-weight: 500; line-height: 1; letter-spacing: 0;
  color: #4b5563; text-decoration: none; cursor: pointer;
  padding: .55rem 1rem; border-radius: 9999px; background: transparent; border: 0;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.bnav a:hover,
.bnav .bnav-trigger:hover { color: #7c3aed; background: rgba(124,58,237,.08); }

/* Active item — elevated white pill (the current page) */
.bnav a.bnav-active,
.bnav .bnav-trigger.bnav-active {
  background: #ffffff; color: #111827; font-weight: 600;
  box-shadow: 0 6px 18px -6px rgba(31,27,58,.22);
}
.bnav a.bnav-active:hover,
.bnav .bnav-trigger.bnav-active:hover { background: #ffffff; color: #111827; }

/* Invisible "bridge" over the gap between the trigger and the menu, so moving
   the cursor down into the dropdown never loses :hover (no flicker/disappear).
   It's a child of the <li>, so hovering it keeps .bnav-drop:hover active. */
.bnav-drop::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .85rem;
  z-index: 59;
}

/* dropdown panel */
.bnav-menu {
  position: absolute; top: 100%; left: 0; margin-top: .5rem; min-width: 210px;
  background: #ffffff; border: 1px solid rgba(124,58,237,.14); border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(31,27,58,.22); padding: .35rem; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  /* small delay before hiding so a quick cursor wobble doesn't close it */
  transition-delay: .14s;
  max-height: 74vh; overflow: auto;
}
.bnav-drop:hover > .bnav-menu,
.bnav-drop:focus-within > .bnav-menu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition-delay: 0s;  /* open immediately */
}
.bnav-menu a {
  display: block; padding: .5rem .8rem; border-radius: 9px;
  font-size: .875rem; font-weight: 500; color: #1f2937;
}
.bnav-menu a:hover { background: #f3f0ff; color: #7c3aed; }