/* Main nav. From 768px: About, Press, Get in touch, inline in the header.
   Below 768px with JS: a fullscreen menu opened by the burger (menu.js) with
   two screens in one cell, crossfaded: the links + contact, and PROJECTS (the
   Present/Past lists). Without JS the links stay inline in the header and the
   menu-only parts are hidden. Source order is the mobile order. */
.site-nav {
  user-select: none;
}

.site-nav-links {
  display: flex;
  gap: 68px;
  text-transform: uppercase;
  margin-right: 68px;
}

/* Menu only */
.site-nav-projects-item,
.site-nav-projects,
.site-nav-contact {
  display: none;
}

@media (width < 768px) {
  /* The page stays put under the open menu. Its scroll position is kept, so
     the row view's snapping carries on from the same project once closed. */
  html:has(.site-nav.is-open) {
    overflow: hidden;
  }

  .js .site-nav {
    position: fixed;
    inset: 0;
    /* Above the page and the view toggle; the logo and burger sit above it
       (site-logo.css, menu-toggle.css) */
    z-index: 1;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    padding-block-start: var(--header-height);
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition),
      visibility var(--transition);

    &.is-open {
      opacity: 1;
      visibility: visible;
    }
  }

  /* visibility keeps the hidden screen out of the tab order. Never "visible"
     on a screen: it would show through the closed menu. */
  .js :is(.site-nav-main, .site-nav-projects) {
    grid-area: 1 / 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--spacing-3) var(--spacing-5);
    transition:
      opacity var(--transition),
      visibility var(--transition);
  }

  .js .site-nav-main {
    display: flex;
    flex-direction: column;
  }

  .js .site-nav-projects {
    display: block;
    padding-block-start: var(--spacing-7);
    line-height: 1;
    opacity: 0;
    visibility: hidden;
  }

  .js .site-nav.is-showing-projects {
    .site-nav-main {
      opacity: 0;
      visibility: hidden;
    }

    .site-nav-projects {
      opacity: 1;
      visibility: inherit;
    }
  }

  .js .site-nav-links {
    /* At the bottom. An auto margin, unlike justify-content, still lets a
       short screen scroll up to the first link. */
    margin-block-start: auto;
    flex-direction: column;
    gap: 0;
    font-size: var(--font-size-xl);
    line-height: 1;
  }

  .js .site-nav-projects-item {
    display: block;
  }

  .js .site-nav-projects-item button {
    text-transform: inherit;
  }

  /* Label | value rows, as in the footer's contact group */
  .js .site-nav-contact {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--spacing-4);
    margin-block-start: var(--spacing-6);
    overflow-wrap: anywhere;
  }

  .site-nav-projects-heading {
    font: inherit;
    text-transform: uppercase;
  }

  .site-nav-projects ul {
    color: var(--color-muted);
  }

  /* Once the PROJECTS screen has faded in (menu.js adds .is-flashing), the
     names light up in a cascade, like the desktop hover (project-filter.css).
     Each one: 150ms in, 75ms white, 150ms out. The next one starts
     --flash-stagger later; --i is the name's position, set by menu.js. */
  .site-nav-projects {
    --flash-duration: 375ms;
    --flash-stagger: 100ms;
  }

  .site-nav-projects.is-flashing a {
    animation: project-name-flash var(--flash-duration) ease-in-out calc(var(--i) * var(--flash-stagger));
  }
}

@keyframes project-name-flash {
  40%,
  60% {
    color: var(--color-fg);
  }
}

@media (min-width: 768px) {
  .site-nav-get-in-touch {
    order: 1;
  }
}