/* static/css/landing/navbar.css
   Shared top navigation for every public page. Layered on top of Bootstrap's
   navbar (which still drives the mobile collapse), restyled to the Cognitivus
   palette used across the home, results and test-detail pages:
   #274285 primary, #1b2740 ink, Inter. Scoped under `.site-nav` so it never
   touches the app/user chrome. */

.site-nav {
  --nav-ink:     #1b2740;
  --nav-muted:   #42506e;
  --nav-primary: #274285;
  --nav-primary-2:#2f4c97;
  --nav-line:    #e4e9f4;
  background: #fff;
  border-bottom: 1px solid var(--nav-line);
  padding: 0;
  font-family: "Inter", system-ui, sans-serif;
}
.site-nav .container { display: flex; align-items: center; }
.site-nav-inner { width: 100%; display: flex; align-items: center; gap: 20px; min-height: 72px; }

/* Brand */
.site-brand { display: inline-flex; align-items: center; padding: 0; margin: 0; }
.site-brand .navbar-logo { height: 30px; width: auto; display: block; }

/* Mobile toggle */
.site-nav-toggle {
  margin-left: auto; border: 1px solid var(--nav-line); background: #fff;
  width: 42px; height: 42px; border-radius: 10px; display: none;
  align-items: center; justify-content: center; color: var(--nav-ink); font-size: 18px;
  cursor: pointer;
}
.site-nav-toggle:focus-visible { outline: 3px solid #bed2ff; outline-offset: 2px; }

/* Collapse wrapper: desktop = one flex row (below); on mobile Bootstrap keeps
   it display:none until the toggle adds .show, so we DON'T force display here. */
@media (min-width: 992px) {
  .site-nav .site-nav-collapse { display: flex; align-items: center; flex: 1; gap: 20px; }
}

/* Link cluster (centred on desktop) */
.site-nav-links {
  list-style: none; display: flex; align-items: center; gap: 30px;
  margin: 0 auto; padding: 0;
}
.site-nav-links .nav-link {
  padding: 0; font-size: 15px; font-weight: 500; color: var(--nav-muted);
  text-decoration: none; position: relative; transition: color .18s ease;
}
.site-nav-links .nav-link:hover { color: var(--nav-primary); }
.site-nav-links .nav-link.active { color: var(--nav-ink); font-weight: 600; }
.site-nav-links .nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -26px; height: 2px;
  background: var(--nav-primary); border-radius: 2px;
}

/* Right-hand actions */
.site-nav-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.nav-signin {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px;
  border: 1px solid #cdd9ef; border-radius: 10px; background: #fff;
  color: var(--nav-primary); font-weight: 700; font-size: 14.5px; text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.nav-signin:hover { border-color: var(--nav-primary); background: #f7faff; color: var(--nav-primary); }

.nav-start {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 22px;
  border: 0; border-radius: 10px; background: var(--nav-primary); color: #fff;
  font-weight: 700; font-size: 14.5px; text-decoration: none;
  box-shadow: 0 8px 20px rgba(39,66,133,.22); transition: background .18s ease, transform .18s ease;
}
.nav-start:hover { background: var(--nav-primary-2); color: #fff; transform: translateY(-1px); }

/* Authenticated user dropdown (kept from the old menu, restyled) */
.site-nav .user-menu .nav-link {
  display: inline-flex; align-items: center; gap: 8px; color: var(--nav-ink);
  font-weight: 600; font-size: 14.5px;
}
.site-nav .user-menu .user-avatar { width: 28px; height: 28px; border-radius: 50%; }
.site-nav .user-menu .chevron-icon { font-size: 11px; color: #8593b0; }
.site-nav .dropdown-menu { border: 1px solid var(--nav-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(39,66,133,.12); padding: 6px; }
.site-nav .dropdown-item { border-radius: 8px; font-size: 14px; padding: 8px 12px; }

/* Language toggle */
.nav-lang { position: relative; }
.nav-lang-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 10px;
  border: 0; background: transparent; color: var(--nav-ink); font-weight: 600;
  font-size: 14px; cursor: pointer; font-family: inherit;
}
.nav-lang-btn .caret { font-size: 10px; color: #8593b0; transition: transform .18s ease; }
.nav-lang-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px;
  background: #fff; border: 1px solid var(--nav-line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(39,66,133,.14); padding: 6px; margin: 0;
  list-style: none; display: none; z-index: 60;
}
.nav-lang-menu.open { display: block; }
.nav-lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--nav-ink); text-decoration: none;
}
.nav-lang-menu a:hover { background: #f4f7fc; }
.nav-lang-menu a.is-current { color: var(--nav-primary); font-weight: 700; }
.nav-lang-menu .lang-code { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #9aa6bf; }

/* ── Mobile ── */
@media (max-width: 991px) {
  .site-nav-toggle { display: inline-flex; }
  .site-nav .site-nav-collapse { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 0 18px; }
  .site-nav-links { flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; width: 100%; }
  .site-nav-links .nav-link { display: block; width: 100%; padding: 12px 4px; font-size: 16px; }
  .site-nav-links .nav-link.active::after { display: none; }
  .site-nav-actions { flex-direction: column; align-items: stretch; gap: 10px; margin: 8px 0 0; width: 100%; }
  .nav-signin, .nav-start { justify-content: center; height: 48px; }
  .nav-lang { align-self: flex-start; }
  .nav-lang-menu { left: 0; right: auto; }
  .site-nav .user-menu { width: 100%; }
}