/*
    The site header, shared by every page.

    Lives in wwwroot rather than in each page's inline <style> because it is the one piece
    of chrome that must look identical everywhere — four inline copies is how the nav drifted
    into four different link lists in the first place. Loaded from 'self', so the CSP needs
    no change.

    Colors come from the --navy / --blue / --gray / --teal / --light-border custom properties
    that every page already defines with identical values. This file deliberately defines none
    of them: a page that forgot to would look wrong here, which is a louder failure than
    silently disagreeing with itself.
*/

nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 5vw;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--light-border);
}

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em;
  color: var(--navy); text-decoration: none;
  flex-shrink: 0;
}
/*
  The mark carries its own dial, so it sits on the page rather than on a tile. The tower it
  replaced was a teal glyph that needed a navy plate to read; the T-clock's T is a hole, and
  a navy plate behind a navy dial fills that hole in and turns the mark into a plain circle.
  Do not reinstate a background here.
*/
.nav-brand-mark {
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.nav-brand-mark svg { width: 100%; height: 100%; display: block; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 500;
  color: var(--gray); text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a.is-current { color: var(--navy); font-weight: 600; }

.nav-cta {
  background: var(--blue); color: #fff !important;
  padding: 8px 20px; border-radius: 6px;
  font-weight: 600 !important; font-size: .875rem;
  transition: background .15s, transform .1s;
}
.nav-cta:hover { background: #0a5fd8; transform: translateY(-1px); }

/* Keyboard users need to see where they are. The nav is the first thing tabbed into on
   every page, so a missing focus ring here is the most visible accessibility bug there is. */
.nav-brand:focus-visible,
.nav-links a:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Menu button: hidden until the links collapse ───────────────────────────── */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--navy);
}
.nav-toggle:hover { background: var(--off-white); }
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ── Mobile ─────────────────────────────────────────────────────────────────────
   The links used to be `display: none` below 768px, which is not a mobile nav — it is no
   nav. Every internal page became unreachable from every other one on a phone, which is
   most of the traffic a /learn page gets. They now collapse into a panel behind a button. */
@media (max-width: 768px) {
  nav { padding: 0 20px; }

  .nav-toggle { display: inline-flex; }

  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 18px;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--light-border);
    box-shadow: 0 12px 24px -18px rgba(15, 26, 43, .5);
  }

  /* [hidden] alone loses to `display: flex` above, so the closed state is stated here
     rather than relying on the attribute's default styling. */
  .nav-links[hidden] { display: none; }

  .nav-links a {
    padding: 13px 2px;
    font-size: 1rem;
    border-bottom: 1px solid var(--light-border);
  }
  .nav-links a:last-child { border-bottom: none; }

  /* The call to action stops being a pill in a row and becomes a full-width button, which
     is the shape a thumb expects at the bottom of a menu. */
  .nav-cta {
    margin-top: 14px;
    padding: 13px 20px;
    text-align: center;
    border-radius: 8px;
  }
  .nav-cta:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta { transition: none; }
  .nav-cta:hover { transform: none; }
}