/* ============================================================================
   APEC — SHARED SITE NAVIGATION  ·  paired with js/site-nav.js
   ----------------------------------------------------------------------------
   Wide screen : a row of tabs, with the page's own contextual label to its
                 left (both sit in the .head-right cluster at the header edge).
   <= 1024px   : the tabs fold into a hamburger drop-panel; the label steps
                 aside so the header stays one clean line.

   Colours are driven by each page's own tokens, so the nav is cream-on-dark
   everywhere except Gallery, whose header is cream — it adds the --onlight
   variant to flip the ink. Keep the 1024px breakpoint in step with the
   matchMedia() query in js/site-nav.js.
   ========================================================================== */

/* Some pages reveal a "Home" link inside .head-side when opened on their own.
   The nav now carries its own Home tab, so that link is redundant. */
.head-home { display: none !important; }

/* The right-hand cluster: the page label and the nav, grouped so they sit
   together at the header's trailing edge. (Home has no label — its header
   holds the nav directly, and this rule simply never applies.) */
.head-right {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  min-width: 0;
}

/* ---- The nav shell + its palette ------------------------------------------ */
.site-nav {
  --nav-fg:         var(--cream-dim);
  --nav-fg-hover:   var(--cream);
  --nav-fg-current: var(--gold-hi);
  --nav-underline:  var(--gold-dim);
  --nav-burger:     var(--cream);
  --nav-panel-bg:   rgba(10, 11, 13, 0.94);
  --nav-panel-line: var(--line-soft, rgba(237, 231, 216, 0.09));

  display: flex;
  align-items: center;
  pointer-events: auto;   /* Documents' header sets pointer-events:none */
}

/* Gallery's header is cream — flip to dark ink. */
.site-nav--onlight {
  --nav-fg:         var(--txt-soft, #55503f);
  --nav-fg-hover:   var(--txt, #201d16);
  --nav-fg-current: var(--brass-deep, #8a692c);
  --nav-underline:  var(--brass, #a37e33);
  --nav-burger:     var(--txt, #201d16);
  --nav-panel-bg:   rgba(246, 240, 225, 0.96);
  --nav-panel-line: var(--line-ink, rgba(32, 29, 22, 0.16));
}

/* ---- The tabs (the wide-screen row) --------------------------------------- */
.site-nav__tabs {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__item { margin: 0; }
.site-nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--nav-fg);
  padding-bottom: 3px;
  transition: color 0.25s;
}
.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--nav-fg-hover); }
.site-nav__link[aria-current="page"] { color: var(--nav-fg-current); }
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0.2em; bottom: 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.site-nav__link[aria-current="page"]::after { border-bottom-color: var(--nav-underline); }

/* ---- The hamburger (hidden until the row folds) --------------------------- */
.site-nav__burger {
  display: none;                 /* shown <= 1024px */
  position: relative;
  z-index: 2;
  width: 42px; height: 42px;
  margin: 0; padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s, border-color 0.25s;
}
.site-nav__burger:hover { border-color: var(--nav-panel-line); }
.site-nav__bars,
.site-nav__bars::before,
.site-nav__bars::after {
  content: "";
  display: block;
  width: 20px; height: 1.5px;
  border-radius: 2px;
  background: var(--nav-burger);
  transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.site-nav__bars { position: relative; }
.site-nav__bars::before { position: absolute; left: 0; top: -6px; }
.site-nav__bars::after  { position: absolute; left: 0; top:  6px; }
/* ...morph to an X when open */
.site-nav.is-open .site-nav__bars { background: transparent; }
.site-nav.is-open .site-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .site-nav__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---- Between: keep the tabs inline, but retire the page's own label -------
   Six tabs plus a wide contextual label (e.g. Documents' "The Archive · Est.
   1985", ~244px) only fit together on a roomy desktop. Below that the label
   steps aside so the tabs never crowd the brand; the tabs stay a full row
   until they too run out of room (the hamburger block below). The label
   returns only once the header is wide enough to give the brand real breathing
   room beside it (~1320px, sized to the widest label). */
@media (max-width: 1319px) {
  .head-side { display: none; }
}

/* ---- Narrow: fold the tabs to a hamburger + drop panel --------------------
   Brand + six tabs need ~1000px; below that they fold away. */
@media (max-width: 1000px) {
  .site-nav__burger { display: inline-flex; }

  /* Positioned against the fixed .site-head (the nav itself stays static),
     so the panel always drops from the header's bottom edge — whatever that
     header's height happens to be. */
  .site-nav__tabs {
    position: absolute;
    top: 100%;
    right: 0;
    width: min(20rem, 82vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0;
    padding: 0.4rem 0;
    background: var(--nav-panel-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--nav-panel-line);
    border-top: none;
    border-bottom-left-radius: 14px;
    box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.75);
    transform: translateX(104%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.15, 1),
                opacity 0.26s ease,
                visibility 0s linear 0.34s;
    z-index: 1;
  }
  .site-nav.is-open .site-nav__tabs {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.26s ease,
                visibility 0s;
  }

  .site-nav__link {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    padding: 0.9rem clamp(1.1rem, 4vw, 1.5rem);
  }
  .site-nav__link::after { display: none; }
  .site-nav__item + .site-nav__item .site-nav__link {
    border-top: 1px solid var(--nav-panel-line);
  }
  .site-nav__link[aria-current="page"] {
    background: color-mix(in srgb, var(--nav-fg-current) 12%, transparent);
  }
}

/* Respect reduced-motion: no slide, just a fade. */
@media (prefers-reduced-motion: reduce) {
  .site-nav__tabs,
  .site-nav.is-open .site-nav__tabs { transition: opacity 0.2s ease, visibility 0s; }
  .site-nav.is-open .site-nav__tabs { transform: none; }
  @media (max-width: 1000px) {
    .site-nav__tabs { transform: none; }
  }
}