/*
 * Section menu below the lockup.
 *
 * Built on <details>/<summary>, so it opens, closes and takes keyboard focus with
 * no JavaScript at all. nav.js only adds the niceties: closing one panel when
 * another opens, and closing on Escape or an outside click.
 *
 * Wide screens get a dropdown. Narrow screens get a true accordion, with the panel
 * in normal flow rather than floating over the page, because a 240px panel
 * positioned over a 360px viewport is unusable.
 */

.s2-nav {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.s2-menu { position: relative; }

/* a.s2-home rather than .s2-home: the site sets `a { color: gold }`, and while a
   two-class selector already beats a bare type selector, matching the element too
   keeps this from being one refactor away from a gold link in a grey bar. */
.s2-menu > summary,
.s2-nav a.s2-home {
  list-style: none;
  cursor: pointer;
  display: block;
  text-decoration: none;
  /* The current-page marker is positioned against the item rather than laid out
     inside it, so relative here and the extra 7px of bottom padding is the strip it
     sits in. Reserved on every item, current or not: the marker used to be a block
     with a margin, which made the current item 7px taller than its siblings, and in
     a wrapping flexbox that makes its whole line taller. Moving between the two rows
     therefore pushed the lower row down and pulled it back up again. */
  position: relative;
  padding: 9px 14px 16px;
  border: 1px solid transparent;
  font-family: var(--s2-font-display);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--s2-tracking-mega);
  color: var(--s2-text-secondary);
  transition: color 0.18s ease, border-color 0.18s ease;
}

/* Both are needed: WebKit uses its own pseudo-element, everything else uses the marker. */
.s2-menu > summary::-webkit-details-marker { display: none; }
.s2-menu > summary::marker { content: ""; }

.s2-menu > summary:hover,
.s2-nav a.s2-home:hover,
.s2-menu[open] > summary {
  color: var(--s2-glow-gold);
  border-color: var(--s2-divider);
}

/* Marks the section holding the page you are on, so the menu says where you are
   without needing to be opened.
   Home is an <a>, not a <details> with a <summary>, so the section selector could
   never match it however the page was marked and the homepage was the one page with
   no marker at all. Keyed off aria-current rather than a class: the attribute is
   already in the markup for screen readers, so the visible marker and the announced
   one cannot drift apart. */
.s2-menu.is-current > summary,
.s2-nav a.s2-home[aria-current="page"] { color: var(--s2-text-pure); }
.s2-menu.is-current > summary::after,
.s2-nav a.s2-home[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  background: var(--s2-glow-gold);
}

.s2-menu-panel {
  position: absolute;
  top: 100%;
  /* No gap between summary and panel. A few pixels of dead space is enough to
     register as a mouse-leave and close the panel the visitor is reaching for. */
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  text-align: left;
  background: var(--s2-bg-chassis);
  border: 1px solid var(--s2-divider);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.s2-menu-panel a {
  padding: 9px 12px;
  font-family: var(--s2-font-body);
  font-size: 14.5px;
  line-height: 1.4;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.s2-menu-panel a:hover {
  color: var(--s2-glow-gold);
  background: rgba(255, 215, 0, 0.07);
}

.s2-menu-panel a[aria-current="page"] {
  color: var(--s2-glow-gold);
  box-shadow: inset 2px 0 0 var(--s2-glow-gold);
}

/* A section with nothing in it says so rather than offering an empty panel or,
   worse, a link that goes nowhere. */
.s2-menu.is-empty > summary { opacity: 0.5; }
.s2-menu-note {
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--s2-text-secondary);
}

@media (max-width: 720px) {
  .s2-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .s2-menu { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .s2-menu > summary,
  .s2-nav a.s2-home { text-align: left; padding: 13px 4px 20px; }
  .s2-nav a.s2-home { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  /* Left-aligned under the label rather than centred in a full-width row. The
     centring is a transform now, so it has to be undone rather than overridden. */
  .s2-menu.is-current > summary::after,
  .s2-nav a.s2-home[aria-current="page"]::after { left: 4px; transform: none; }
  .s2-menu-panel {
    position: static;
    transform: none;
    min-width: 0;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s2-menu > summary,
  .s2-nav a.s2-home,
  .s2-menu-panel a { transition: none; }
}