/* The top bar and its two roll-down menus.

   No JavaScript. A menu opens on :hover for a mouse and on :focus-within for
   a keyboard, so tabbing to "Study tools" opens it the same way pointing at
   it does. A script would have to load and run before the bar worked, and the
   bar is the first thing on the page. */

/* A `hidden` attribute means hidden, whatever else the element's class says.
   Without this, `<form class="inline-form" hidden>` still shows, because
   .inline-form sets display:flex and that beats the browser's own
   [hidden] { display: none } on specificity. The New topic form was open on
   every page load because of it. */
[hidden] { display: none !important; }

.site-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  min-height: 52px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  font-size: 0.94rem;
  /* Above the page, so an open menu is never covered by what is under it. */
  position: relative;
  z-index: 50;
}

.site-bar .brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-bar a { color: var(--ink); text-decoration: none; }
.site-bar a:hover { color: var(--accent); }

/* ------------------------------------------------------------- the menus ---*/

.site-nav {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 1;
}

.nav-item { position: relative; display: flex; align-items: center; }

.nav-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 5px;
  font-weight: 600;
  white-space: nowrap;
}

.nav-item:hover > .nav-top,
.nav-item:focus-within > .nav-top {
  background: var(--paper-deeper);
}

.caret { font-size: 0.7em; color: var(--ink-mute); }

.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 7px;
  box-shadow: var(--shadow);

  /* Hidden with opacity and visibility rather than display:none, so the
     menu can fade and so a screen reader is not told the items vanish and
     reappear. pointer-events keeps a closed menu from swallowing clicks on
     whatever is underneath it. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 90ms ease, transform 90ms ease, visibility 0s linear 90ms;
}

.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

/* A gap between the bar and the menu would close the menu as the pointer
   crossed it. This pad bridges it without moving the menu. */
.nav-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.nav-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px;
  border-radius: 5px;
  line-height: 1.3;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: var(--paper-deeper);
  color: var(--ink);
  outline: none;
}

.menu-name { font-weight: 550; }

.menu-note {
  color: var(--ink-mute);
  font-size: 0.82rem;
  white-space: nowrap;
}

.menu-empty {
  display: block;
  padding: 8px 10px;
  color: var(--ink-mute);
  font-style: italic;
  font-size: 0.88rem;
}

.menu-rule {
  height: 1px;
  margin: 6px 4px;
  background: var(--rule-soft);
}

/* ----------------------------------------------------------- the account ---*/

.site-account {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  white-space: nowrap;
}

.site-account .who {
  color: var(--ink-mute);
  font-weight: 550;
}

.admin-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }

/* How many people are waiting for approval, on the Admin link itself. There
   is no email when somebody signs up, so this is the only place the site can
   tell you somebody is waiting. */
.pending-badge {
  display: inline-block;
  min-width: 1.35em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 720px) {
  .site-bar {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 8px 16px;
  }
  .site-nav { order: 3; flex-basis: 100%; }
  .site-account { gap: 12px; font-size: 0.88rem; }
  .site-account .who { display: none; }
  .nav-menu { min-width: 200px; }
}