/* =============================================================================
   Navigation bar — docs/components/nav-bar.md, docs/design-system/motion.md
   § Sticky navbar / § Burger morph.

   EdTech contrast rule (contracts.md §1): the hover pill is the light EdTech
   accent, so its text is --color-primary-darkest, NEVER white.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Bar
   --------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: var(--z-nav);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-primary-light);
  padding-block: var(--space-4);
  transition: padding var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

/* Scrolled past 10px — js/main.js toggles this class (motion.md § Sticky navbar) */
.nav--scrolled {
  padding-block: var(--space-2);
  box-shadow: var(--shadow-nav-scrolled);
}

.nav__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  /* The bar is --nav-height tall at rest; the 2 × 16px band lives on .nav so
     the scrolled state can shrink it to 2 × 8px. */
  min-height: calc(var(--nav-height) - var(--space-8));
}

/* ---------------------------------------------------------------------------
   Logo — docs/components/logo.md, 150px desktop / 120px mobile
   --------------------------------------------------------------------------- */
.nav__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.nav__logo-img {
  width: 150px;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Desktop menu
   --------------------------------------------------------------------------- */
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* typographyNav — Raleway SemiBold 16px, letter-spacing 2%.
   The pill padding is reserved in the default state so hover shifts nothing. */
.nav__link {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 140%;
  letter-spacing: 0.02em;
  color: var(--color-black);
  background-color: transparent;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--border-radius-sm);
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.nav__link:hover,
.nav__link:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-primary-darkest);
}

.nav__link:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-primary));
  outline-offset: 2px;
}

/* Current page — no pill, heavier weight, division colour */
.nav__link--active {
  font-weight: 800;
  /* The division *accent* is 1.89:1 on white and fails AA; --color-division-active
     is the per-division value that passes (EdTech #268279, 4.61:1). See CR-003. */
  color: var(--color-division-active);
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Burger — three 24 × 2px bars, morphs to an X at aria-expanded="true".
   The 4px gap puts the outer bars exactly 6px from the middle one.
   --------------------------------------------------------------------------- */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  flex: none;
  padding: var(--space-2);
  color: var(--color-primary);
  background: none;
  border: none;
  transition: color var(--duration-base) var(--ease-standard);
}

.nav__toggle:hover {
  color: var(--color-accent-cyan-dark);
}

.nav__toggle span {
  display: block;
  width: var(--space-6);
  height: 2px;
  background-color: currentColor;
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard),
              width var(--duration-base) var(--ease-standard);
}

.nav__toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav__toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   Mobile drawer — opens and closes instantly (motion.md "Deliberately Static").
   Only the burger icon animates.
   --------------------------------------------------------------------------- */
.nav__mobile,
.nav__mobile--open {
  display: none;
}

.nav__mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-primary-light);
  box-shadow: var(--shadow-nav-scrolled);
  padding: var(--space-4) var(--content-padding) var(--space-6);
}

.nav__mobile-links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__mobile-link {
  display: flex;
  align-items: center;
  min-height: var(--space-14);
  font-weight: 600;
  font-size: 1rem;
  line-height: 140%;
  letter-spacing: 0.02em;
  color: var(--color-black);
  background-color: transparent;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--border-radius-sm);
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.nav__mobile-link:hover,
.nav__mobile-link:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-primary-darkest);
}

.nav__mobile-links > li {
  border-bottom: 1px solid var(--color-primary-light);
}

.nav__mobile-links > li:last-child {
  border-bottom: none;
}

/* ---------------------------------------------------------------------------
   Responsive — desktop-first, 1200 / 900 / 600 only.
   Below 900 the links collapse into the burger and the CTA stays in the bar;
   below 600 the CTA moves into the drawer. CSS only, no window.innerWidth.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .nav__mobile--open {
    display: block;
  }

  /* "Contact Us" is still the bar CTA on tablet, so hide the drawer copy of it */
  .nav__mobile-links > li:last-child {
    display: none;
  }

  .nav__mobile-links > li:nth-last-child(2) {
    border-bottom: none;
  }
}

@media (max-width: 600px) {
  .nav__logo-img {
    width: 120px;
  }

  /* The CTA moves into the drawer */
  .nav__menu {
    display: none;
  }

  .nav__mobile-links > li:last-child {
    display: block;
  }

  .nav__mobile-links > li:nth-last-child(2) {
    border-bottom: 1px solid var(--color-primary-light);
  }
}