/*
 * The site nav, on the homepage and every generated page; the markup comes
 * from `siteNavHtml` in `lib/siteLinks.ts`. One stylesheet for both: the
 * landing imports it with the rest of the theme, and `tools/seo-pages.mjs`
 * copies it beside `seo.css`. Its colours read the paper stock's tokens and
 * fall back to the generated pages' fixed palette, so on the homepage the
 * menus follow the stock, dark included, and elsewhere they match the page.
 *
 * Quiet by default: muted labels, no rule under the bar, nothing pinned. A
 * menu opens on hover or when focus enters it, in CSS alone, so it works
 * without script and from the keyboard: tab onto Tools and its links are
 * the next stops. It rises a few pixels as it appears, which is the
 * settling motion the rest of the interface uses, and leaves a moment late
 * so a pointer crossing the gap does not drop it.
 *
 * The bar fills the row it is given, so Download, an outlined button, can
 * sit at its far end. Below 1020px there is no hover to rely on: the words
 * go, and a Menu button opens every section as one list, a `details`
 * element, so that too works without script.
 */
.mp-nav {
  --mp-nav-ink: var(--mp-ink, #201d19);
  /* Lifted toward the body ink, as text on the canvas is elsewhere: the
   * canvas is darker than the paper the muted value was chosen against. */
  --mp-nav-muted: color-mix(in srgb, var(--mp-ink-muted, #6d675f) 80%, var(--mp-ink, #201d19));
  --mp-nav-rule: var(--mp-rule, #e2dbcf);
  --mp-nav-sheet: var(--mp-sheet, #fbfaf6);
  --mp-nav-accent: var(--mp-link, #9a4529);
  --mp-nav-ease: var(--mp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  --mp-nav-tint: color-mix(in srgb, var(--mp-nav-ink) 6%, transparent);
  /* A layer of its own, or the page that follows paints over an open menu. */
  position: relative;
  z-index: 40;
  flex: 1;
  min-width: 0;
  font-family: var(--mp-font-sans, system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.mp-nav-list {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.mp-nav-item > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  color: var(--mp-nav-muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms var(--mp-nav-ease), background-color 150ms var(--mp-nav-ease);
}

.mp-nav-has-menu > a {
  padding-right: 1.6rem;
}

/* Download: apart at the far end, outlined and never filled. */
.mp-nav-item-button {
  margin-left: auto;
}

.mp-nav-item-button > a {
  border: 1px solid color-mix(in srgb, var(--mp-nav-ink) 28%, transparent);
  color: var(--mp-nav-ink);
}

.mp-nav-item-button > a:hover,
.mp-nav-item-button:hover > a,
.mp-nav-item-button:focus-within > a {
  border-color: var(--mp-nav-ink);
}

.mp-nav-item-button > .mp-nav-chevron {
  color: var(--mp-nav-ink);
}

.mp-nav-item > a:hover,
.mp-nav-has-menu:hover > a,
.mp-nav-has-menu:focus-within > a {
  color: var(--mp-nav-ink);
  background: var(--mp-nav-tint);
}

.mp-nav-item > a[aria-current] {
  color: var(--mp-nav-accent);
}

.mp-nav-chevron {
  position: absolute;
  right: 0.5rem;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--mp-nav-muted);
  pointer-events: none;
  transition: transform 240ms var(--mp-nav-ease);
}

.mp-nav-has-menu:hover > .mp-nav-chevron,
.mp-nav-has-menu:focus-within > .mp-nav-chevron {
  transform: rotate(180deg);
}

.mp-nav-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 40;
  width: 19.5rem;
  margin-top: 0.5rem;
  padding: 0.45rem;
  border: 1px solid var(--mp-nav-rule);
  border-radius: 14px;
  background: var(--mp-nav-sheet);
  box-shadow:
    0 1px 2px rgb(40 32 20 / 0.06),
    0 22px 50px -14px rgb(40 32 20 / 0.24);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition:
    opacity 150ms var(--mp-nav-ease) 90ms,
    transform 240ms var(--mp-nav-ease) 90ms,
    visibility 0s linear 240ms;
}

/* The gap between the label and its menu still counts as the menu. */
.mp-nav-panel::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 0.6rem;
}

.mp-nav-has-menu:hover > .mp-nav-panel,
.mp-nav-has-menu:focus-within > .mp-nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity 150ms var(--mp-nav-ease),
    transform 240ms var(--mp-nav-ease),
    visibility 0s;
}

/* The last menu opens leftward, so it never runs off the edge of the window. */
.mp-nav-item:last-child > .mp-nav-panel {
  right: -0.25rem;
  left: auto;
  transform: translate(0, 6px);
}

.mp-nav-item:last-child:hover > .mp-nav-panel,
.mp-nav-item:last-child:focus-within > .mp-nav-panel {
  transform: none;
}

.mp-nav-panel-wide {
  width: 33rem;
}

.mp-nav-panel-wide .mp-nav-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem;
}

.mp-nav-panel-wide .mp-nav-group {
  display: flex;
  flex-direction: column;
}

.mp-nav-group-label {
  margin: 0.45rem 0.65rem 0.2rem;
  color: var(--mp-nav-muted);
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-nav-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-nav-group li {
  margin: 0;
}

.mp-nav-group li > a {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
  color: var(--mp-nav-ink);
  text-decoration: none;
  transition: background-color 150ms var(--mp-nav-ease);
}

.mp-nav-group li > a:hover,
.mp-nav-group li > a:focus-visible,
.mp-nav-group li > a[aria-current] {
  background: var(--mp-nav-tint);
}

.mp-nav-link-label {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color 150ms var(--mp-nav-ease);
}

.mp-nav-group li > a:hover .mp-nav-link-label,
.mp-nav-group li > a[aria-current] .mp-nav-link-label {
  color: var(--mp-nav-accent);
}

/* A link with a drawn icon: the icon in a small tile, the label and note beside it. */
.mp-nav-group li > a.mp-nav-link-iconed {
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}

.mp-nav-link-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--mp-nav-rule);
  border-radius: 8px;
  color: var(--mp-nav-ink);
  transition: color 150ms var(--mp-nav-ease), border-color 150ms var(--mp-nav-ease);
}

.mp-nav-link-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.mp-nav-group li > a:hover .mp-nav-link-icon,
.mp-nav-group li > a[aria-current] .mp-nav-link-icon {
  border-color: currentColor;
  color: var(--mp-nav-accent);
}

.mp-nav-link-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.mp-nav-link-note {
  color: var(--mp-nav-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.mp-nav-all {
  display: block;
  margin: auto 0.2rem 0;
  padding: 0.65rem 0.45rem 0.3rem;
  border-top: 1px solid var(--mp-nav-rule);
  color: var(--mp-nav-accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.mp-nav-all:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mp-nav a:focus-visible,
.mp-nav summary:focus-visible {
  outline: 2px solid var(--mp-nav-accent);
  outline-offset: 2px;
}

/* The phone menu: a button, and every section as one list under it. */
.mp-nav-menu {
  display: none;
  position: relative;
  margin-left: auto;
}

.mp-nav-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--mp-nav-ink) 28%, transparent);
  border-radius: 999px;
  color: var(--mp-nav-ink);
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.mp-nav-menu summary::-webkit-details-marker {
  display: none;
}

.mp-nav-menu-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.mp-nav-menu-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 0.25rem;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem);
  padding: 0.6rem;
  overflow-y: auto;
  border: 1px solid var(--mp-nav-rule);
  border-radius: 14px;
  background: var(--mp-nav-sheet);
  box-shadow:
    0 1px 2px rgb(40 32 20 / 0.06),
    0 22px 50px -14px rgb(40 32 20 / 0.24);
}

.mp-nav-menu-section + .mp-nav-menu-section {
  padding-top: 0.35rem;
  border-top: 1px solid var(--mp-nav-rule);
}

.mp-nav-menu-heading {
  display: block;
  padding: 0.5rem 0.65rem 0.2rem;
  color: var(--mp-nav-ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.mp-nav-menu .mp-nav-group li > a {
  min-height: 2.5rem;
  justify-content: center;
  padding: 0.4rem 0.65rem;
}

.mp-nav-menu .mp-nav-all {
  margin: 0.15rem 0.2rem 0.35rem;
  padding: 0.5rem 0.45rem;
  border-top: 0;
}

@media (max-width: 1020px) {
  .mp-nav {
    display: flex;
    justify-content: flex-end;
  }

  .mp-nav-list {
    display: none;
  }

  .mp-nav-menu {
    display: block;
  }
}

/* On the narrowest phones the button is its icon, still named for a screen reader. */
@media (max-width: 26rem) {
  .mp-nav-menu summary {
    padding-inline: 0.7rem;
  }

  .mp-nav-menu summary span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-nav *,
  .mp-nav *::before {
    transition: none !important;
  }

  .mp-nav-panel {
    transform: translate(-50%, 0);
  }

  .mp-nav-item:last-child > .mp-nav-panel {
    transform: none;
  }
}

@media print {
  .mp-nav {
    display: none;
  }
}