/* Additions to the old TopNav.css, on the home page and every site page (tools/site/topnav.py). */

/* Account links (Log in / Create account, or Admin / My courses) look exactly like the other menu items
   (TopNav.css .top-nav-links a), on every page whatever other CSS the page loads (site.css, page CSS). */
.top-nav-links .bl-nav { display: inline-flex; align-items: center; gap: 1.5rem; margin: 0; }
.top-nav-links .bl-nav > a { font-family: inherit; font-size: .95rem; font-weight: 500; line-height: normal; color: #475569;
  padding: .5rem 1rem; border: 0; border-radius: 6px; background: none; text-decoration: none; cursor: pointer; }
.top-nav-links .bl-nav > a:hover { color: #667eea; background: rgba(102, 126, 234, .08); }
.top-nav-links .bl-nav > a.bl-nav-cta { background: #667eea; color: #fff; font-weight: 600; }
.top-nav-links .bl-nav > a.bl-nav-cta:hover { background: #5568d3; color: #fff; }
.top-nav-links .bl-nav button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }

/* "Company" (outline, to www) and "My Account ▾" (filled) buttons on the right (owner's design, 3 Nov 2026) */
.top-nav-links > a.bl-company { color: #667eea; border: 1.5px solid #667eea; font-weight: 600; padding: calc(.5rem - 1.5px) calc(1rem - 1.5px); }
.top-nav-links > a.bl-company:hover { background: rgba(102, 126, 234, .08); color: #5568d3; }
.top-nav-links .bl-nav .bl-account-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .95rem; font-weight: 600;
  line-height: normal; color: #fff; background: #667eea; padding: .5rem 1rem; border-radius: 6px; }
.top-nav-links .bl-nav .bl-account-btn:hover, .top-nav-links .bl-account.open .bl-account-btn { background: #5568d3; color: #fff; }
.top-nav-links .bl-account-head { display: none; }

@media (max-width: 1024px) and (min-width: 769px) {
  .top-nav-links .bl-nav .bl-account-btn, .top-nav-links > a.bl-company { font-size: .9rem; }
  .top-nav-links .bl-nav { gap: 1rem; }
  .top-nav-links .bl-nav > a { font-size: .9rem; }
}

@media (max-width: 768px) {
  /* phone menu panel: account links are rows like Home, Courses, …; Create account is a button below them */
  .top-nav-links .bl-nav { flex-direction: column; align-items: stretch; width: 100%; padding: 0; gap: 0; }
  .top-nav-links .bl-nav > a { width: 100%; padding: 1.25rem 2rem; text-align: left; font-size: 1.05rem; font-weight: 500;
    color: #334155; border-bottom: 1px solid #f1f5f9; border-radius: 0; }
  .top-nav-links .bl-nav > a:hover { padding-left: 2.25rem; }
  .top-nav-links .bl-nav > a.bl-nav-cta { width: auto; margin: 1.25rem 2rem 0; padding: .75rem 1rem; text-align: center;
    color: #fff; font-weight: 600; border: 0; border-radius: 6px; }
  .top-nav-links .bl-nav > a.bl-nav-cta:hover { padding-left: 1rem; }
  /* My Account: no button in the panel, its items listed under a small heading; Company last, as an outline button */
  .top-nav-links .bl-nav .bl-account-btn { display: none; }
  .top-nav-links .bl-account-head { display: block; padding: 1.25rem 2rem .5rem; font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
  .top-nav-links > a.bl-company { order: 1; width: auto; align-self: stretch; margin: 1.25rem 2rem 0; padding: .7rem 1rem;
    text-align: center; border: 1.5px solid #667eea; border-radius: 6px; color: #667eea; font-weight: 600; }
  .top-nav-links > a.bl-company:hover { padding-left: 1rem; }
  /* The old menu darkened the page with a layer inside the panel, which also greyed the panel itself.
     The backdrop is now a shadow around the panel, so the panel stays white. */
  .top-nav-links.mobile-open::before { display: none; }
  .top-nav-links.mobile-open { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); }
}