/**
 * The site header — one stylesheet, every page.
 *
 * The header used to be inlined per page, which is why it was on four of them and
 * looked slightly different on each. It lives here now so a reader arriving on the
 * sign-in form, the free module or their own account page gets the same masthead
 * and the same way out of it. The markup that goes with it is in every page's HTML
 * (static, so the nav works with JS off) and the behaviour is in /site-header.js.
 *
 * Every colour reads a palette variable with a literal fallback: the marketing
 * pages define the full palette, the utility pages define only part of it, and the
 * header has to look the same on both.
 *
 * Two knobs a page may set on :root so the header lines up with its own content
 * column rather than forcing one width on the whole site:
 *   --nav-width  the header's max inner width   (default 980px)
 *   --nav-pad-x  its horizontal padding         (default 64px)
 */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 27, 42, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule, #243448);
}
.nav-inner {
  max-width: var(--nav-width, 980px);
  margin: 0 auto;
  padding: 18px var(--nav-pad-x, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrapping is always allowed: a page can narrow the header with --nav-width,
     and the failure that matters is a row of links running off the side. */
  flex-wrap: wrap;
  gap: 14px 30px;
}
.nav-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--gold, #c9a84c);
  letter-spacing: 0.03em;
  text-decoration: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.btc-b-icon {
  height: 0.95em;
  width: 0.679em;
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
  transform: rotate(14deg);
  transform-origin: center;
}
.nav-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 14px 30px; }
.nav-links a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted, #8a8278);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--gold-bright, #e2c97e); }
.nav-cta {
  display: inline-block;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--gold, #c9a84c);
  color: var(--gold, #c9a84c) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.nav-cta:hover { background: var(--gold, #c9a84c); color: var(--navy, #0d1b2a) !important; }

/* dropdown */
.nav-drop { position: relative; }
.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted, #8a8278);
  transition: color 0.2s;
}
.nav-drop-toggle:hover,
.nav-drop.open > .nav-drop-toggle { color: var(--gold-bright, #e2c97e); }
.nav-drop-caret {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.nav-drop.open .nav-drop-caret { transform: translateY(1px) rotate(-135deg); }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  min-width: 244px;
  background: var(--navy-mid, #13263d);
  border: 1px solid var(--rule, #243448);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 60;
}
/* The Courses menu carries sixteen entries — it scrolls rather than running off
   the bottom of the screen. */
.nav-drop-menu-tall { max-height: min(72vh, 540px); overflow-y: auto; overscroll-behavior: contain; }
.nav-drop-menu::before {
  /* hover bridge across the gap under the toggle */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-links .nav-drop-menu a {
  display: block;
  padding: 11px 20px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--cream-dim, #d8cfb8);
  white-space: nowrap;
}
.nav-links .nav-drop-menu a:hover { background: var(--gold-ghost, #1e1608); color: var(--gold-bright, #e2c97e); }
.nav-drop-menu a .nav-drop-note {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--text-dim, #5a5448);
  text-transform: none;
}
.nav-drop-menu a:hover .nav-drop-note { color: var(--text-muted, #8a8278); }
.nav-drop-group {
  display: block;
  padding: 13px 20px 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim, #8a6e2a);
  white-space: nowrap;
}
.nav-drop-group + a { border-top: 1px solid var(--rule, #243448); }
.nav-drop-empty {
  display: block;
  padding: 14px 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--text-dim, #5a5448);
  white-space: nowrap;
}

/* An anchor jumped to from the address bar, or from a link on the page, would
   otherwise land underneath the header. /site-header.js measures the real height
   into --site-header-h; the fallback is what one unwrapped row measures. */
html { scroll-padding-top: calc(var(--site-header-h, 76px) + 14px); }

/* The header carries two menus, four links and a button. It wraps to two rows
   well before a phone, because the alternative at tablet width is a row that
   runs off the side. */
@media (max-width: 1000px) {
  .nav-inner { gap: 14px 0; }
  .nav-links { flex: 1 0 100%; justify-content: center; gap: 14px 20px; }
  .nav-drop-menu { left: 0; transform: translateX(0) translateY(-6px); }
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu,
  .nav-drop.open .nav-drop-menu { transform: translateX(0) translateY(0); }
  .nav-drop:last-of-type .nav-drop-menu { left: auto; right: 0; }
}
@media (max-width: 420px) {
  .nav-inner { padding-left: 20px; padding-right: 20px; }
  .nav-drop-toggle { font-size: 9px; letter-spacing: 0.1em; }
  .nav-drop-menu { min-width: 210px; }
}