/* User menu in the header when logged in (pages.js nav()): user icon -> email, Account, Log out.
   Loaded on the home page, every site page and every lesson page. */
.bl-user { position: relative; display: inline-flex; }
.bl-nav .bl-user .bl-user-btn { display: inline-flex; align-items: center; gap: 2px; padding: .3rem .5rem; border-radius: 999px;
  border: 1px solid #d1d5db; background: #f5f7ff; color: #4f5bd5; cursor: pointer; }
.bl-nav .bl-user-btn:hover, .bl-user.open .bl-user-btn { border-color: #667eea; color: #667eea; }
.bl-user-caret { font-size: .7rem; }
.bl-user-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; max-width: 300px; z-index: 1000;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); padding: .4rem 0; text-align: left; }
.bl-user.open .bl-user-menu { display: block; }
.bl-user-email { padding: .55rem 1rem .6rem; font-size: .85rem; color: #6b7280; border-bottom: 1px solid #f1f5f9; margin-bottom: .3rem;
  overflow-wrap: anywhere; }
.bl-nav .bl-user-menu a, .bl-nav .bl-user-menu button { display: block; width: 100%; padding: .5rem 1rem; text-align: left;
  color: #374151; font-size: .95rem; background: none; border: 0; }
.bl-nav .bl-user-menu a:hover, .bl-nav .bl-user-menu button:hover { background: #f5f7ff; color: #667eea; }

/* Phone menu panel of the home/site pages: no dropdown inside the panel, the items are listed directly */
@media (max-width: 768px) {
  .top-nav-links .bl-user { display: block; width: 100%; }
  .top-nav-links .bl-user-btn { display: none !important; }
  .top-nav-links .bl-user-menu { display: block; position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0;
    min-width: 0; max-width: none; background: none; }
  .top-nav-links .bl-user-email { padding: 1rem 2rem; border: 0; border-bottom: 1px solid #f1f5f9; margin: 0; font-size: .9rem; }
  .top-nav-links .bl-user-email::before { content: "Signed in as "; }
  /* same rows as Home, Courses, … in the panel (TopNav.css) */
  .top-nav-links .bl-user-menu a, .top-nav-links .bl-user-menu button { padding: 1.25rem 2rem; font-size: 1.05rem; font-weight: 500;
    color: #334155; border-bottom: 1px solid #f1f5f9; }
}