/* ==========================================================================
   The Reading Room — Site navigation
   Janet Travell Foundation · Reading Room

   Wordmark + four primary links on parchment, with a gold rule above and a
   walnut hairline below. Built only from tokens.css (section 9: Navigation).

   Needs: tokens.css and the Google Fonts <link> block from its header.
   No JavaScript: four short links fit at every width, so nothing collapses.
   If the list ever grows past five, add a menu button then.

   Markup (the wordmark is the Home link):

   <a class="skip-link" href="#main">Skip to main content</a>
   <header class="site-nav">
     <div class="site-nav__inner">
       <a class="site-nav__brand" href="/">
         <span class="site-nav__org">Janet Travell Foundation</span>
         <span class="site-nav__sep" aria-hidden="true">·</span>
         <span class="site-nav__room">Reading Room</span>
       </a>
       <nav class="site-nav__menu" aria-label="Primary">
         <ul class="site-nav__list">
           <li><a class="site-nav__link" href="/library/" aria-current="page">Library</a></li>
           ...
   ========================================================================== */

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-text-inverse);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transform: translateY(-200%);   /* parked off-screen until focused */
}

.skip-link:focus-visible {
  transform: none;
  outline: var(--border-width-thick) solid transparent; /* visible in forced-colors mode */
  box-shadow: var(--focus-ring);
}

/* ---------- Bar ---------- */
.site-nav {
  background: var(--color-nav-bg);
  border-top: var(--border-accent);
  border-bottom: var(--border-hairline);
  color: var(--color-nav-link);
}

.site-nav__inner {
  display: flex;
  flex-direction: column;      /* narrow: wordmark above links */
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Wordmark ---------- */
.site-nav__brand {
  display: flex;
  flex-direction: column;      /* narrow: two lines, no separator */
  align-self: flex-start;
  padding: var(--space-4) 0 var(--space-2);
  color: var(--color-wordmark);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}

.site-nav__org  { font-weight: var(--weight-bold); }
.site-nav__room { font-weight: var(--weight-regular); }
.site-nav__sep  { display: none; color: var(--color-wordmark-sep); font-weight: var(--weight-bold); }

.site-nav__brand:hover {
  color: var(--color-wordmark-hover);
  text-decoration-line: underline;
  text-decoration-color: var(--color-nav-underline);
  text-decoration-thickness: var(--border-width-thick);
  text-underline-offset: 0.3em;
}

/* ---------- Links ---------- */
.site-nav__menu {
  /* pull the first link's text flush with the wordmark's left edge */
  margin: 0 calc(-1 * var(--space-2));
}

.site-nav__list {
  display: flex;
  justify-content: space-between;   /* phones: spread across the row */
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--nav-target);
  padding: 0 var(--space-2);
  color: var(--color-nav-link);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  text-decoration-thickness: var(--border-width-thick);
  text-underline-offset: 0.5em;
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-standard);
}

.site-nav__link:hover {
  color: var(--color-nav-link-hover);
  text-decoration-line: underline;
  text-decoration-color: var(--color-nav-underline);
}

/* Current page: crimson, semibold AND underlined, so it never relies on colour alone */
.site-nav__link[aria-current="page"] {
  color: var(--color-nav-link-current);
  font-weight: var(--weight-semibold);
  text-decoration-line: underline;
  text-decoration-color: var(--color-nav-underline-current);
}

/* ---------- Keyboard focus ---------- */
.site-nav__brand:focus-visible,
.site-nav__link:focus-visible {
  outline: var(--border-width-thick) solid transparent; /* visible in forced-colors mode */
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* ---------- Tablet: wordmark on one line, links left-aligned beneath ---------- */
@media (min-width: 30rem) {
  .site-nav__brand {
    flex-direction: row;
    align-items: baseline;
    gap: 0 0.5em;
  }

  .site-nav__sep { display: inline; }

  .site-nav__list {
    justify-content: flex-start;
    gap: var(--space-2);
  }
}

/* ---------- Desktop: one row, wordmark left, links right ---------- */
@media (min-width: 52rem) {
  .site-nav__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-nav__brand {
    padding: var(--space-6) 0;
    font-size: var(--text-md);
  }

  .site-nav__menu {
    /* last link's text flush with the container's right edge */
    margin: 0 calc(-1 * var(--space-3)) 0 0;
  }

  .site-nav__list { gap: var(--space-2); }

  .site-nav__link {
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wider);
  }
}

/* ---------- Windows High Contrast / forced colors ---------- */
@media (forced-colors: active) {
  .site-nav__link[aria-current="page"],
  .site-nav__link:hover,
  .site-nav__brand:hover {
    text-decoration-color: currentColor;
  }
}