/* Backwater Static's navigation, in one place.
 *
 * Before this, 2 of 30 pages had any nav and none linked back to
 * 20 Below - you could go deeper into the site but never out of it.
 *
 * Same structure and behaviour as the 20 Below bar (it wraps rather
 * than overflowing, and the dropdowns hold open long enough to use),
 * but in this setting's own palette: swamp-black ground, brass links,
 * static pink for the accent.
 *
 * The colours are declared here rather than read from each page's
 * :root, because several pages do not define one - the evidence
 * handouts are styled as typewritten props with their own palette and
 * their own typefaces entirely. The nav has to look the same on all of
 * them.
 */

.site-nav {
  --nav-bg: rgba(14, 21, 18, 0.94);
  --nav-panel: #16211f;
  --nav-line: #223333;
  --nav-ink: #e4ece9;
  --nav-ink-dim: #8ea3a0;
  --nav-brass: #c39a5a;
  --nav-static: #ef5c93;
  --nav-dread: #9c4436;
  --nav-display: "Fraunces", Georgia, "Times New Roman", serif;
  --nav-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Six menus with long labels do not fit one line on a narrow window;
     wrapping beats running off the right edge. */
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.4rem;
  background: var(--nav-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--nav-line);
  font-family: var(--nav-body);
}

.site-nav .brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--nav-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--nav-ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav .brand span {
  font-family: var(--nav-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-static);
}
/* The wordmark's flicker, carried over from the nav this replaces.
   Its own keyframes rather than the pages' `flicker`: only 16 of the 31
   pages define that one, so borrowing it would leave the wordmark dead
   on the other half. */
.site-nav .brand span {
  text-shadow: 0 0 10px rgba(239, 92, 147, 0.4);
  animation: nav-flicker 6s infinite steps(1, end);
}
@keyframes nav-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.35; }
  94% { opacity: 1; }
  95% { opacity: 0.5; }
  96% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .brand span { animation: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Tighter between rows than between items, so a wrapped second line
     reads as part of the same bar. */
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  /* basis 0, not auto: at auto the list's content width is its basis,
     which drops the whole list below the brand before it ever wraps. */
  flex: 1 1 0;
  justify-content: flex-end;
  min-width: 0;
}
.nav-links > li { position: relative; }

.nav-links a {
  color: var(--nav-ink);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}
.nav-links > li > a:hover { color: var(--nav-brass); }

/* GM material is labelled confidential on the hub. It stays in the nav -
   it is already publicly linked - but it is marked, so nobody opens it
   by accident while sitting with players. */
.nav-links .gm-pill {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05em 0.4em;
  border: 1px solid var(--nav-dread);
  border-radius: 3px;
  color: var(--nav-dread);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.has-dropdown > a::after {
  content: " \25BE";
  font-size: 0.7em;
  color: var(--nav-ink-dim);
}
/* Extends the item's box down to meet the panel, so the pointer never
   crosses bare nav on its way there. Negative margin keeps the bar's
   own layout unchanged. */
.has-dropdown {
  padding-bottom: 0.7rem;
  margin-bottom: -0.7rem;
}

.dropdown {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--nav-panel);
  border: 1px solid var(--nav-line);
  border-radius: 8px;
  padding: 0.4rem;
  margin: 0.5rem 0 0;
  list-style: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  z-index: 30;
}
/* The panel carries its own transparent lip upward, so the two boxes
   overlap with no seam. A few pixels of bare nav between them is enough
   to drop the pointer and make the menu feel like it is fighting you. */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.85rem;
  height: 0.85rem;
}
/* .open is set by site-nav.js, which holds the menu briefly after the
   pointer leaves. :hover and :focus-within stay too, so the menus still
   work with JavaScript off - just without the grace period. */
.has-dropdown.open .dropdown,
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
}

.dropdown li { padding: 0; border: none; }
.dropdown a {
  display: block;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 5px;
  color: var(--nav-ink);
  white-space: normal;
}
.dropdown a:hover {
  background: rgba(195, 154, 90, 0.14);
  color: var(--nav-brass);
}

/* The way home. Set apart from the setting's own pages. */
.nav-links .home-link {
  padding-left: 1.25rem;
  border-left: 1px solid var(--nav-line);
  color: var(--nav-ink-dim);
}
.nav-links .home-link:hover { color: var(--nav-static); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--nav-line);
  border-radius: 6px;
  color: var(--nav-ink);
  font-size: 1.1rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-links { gap: 0.5rem 1rem; }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    flex-direction: column;
    /* The bar wraps; this panel must not. It is a column with a bounded
       height, so wrapping would spill the tail of the menu into a second
       column off the right edge instead of scrolling. */
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 0 1 auto;
    gap: 0;
    background: var(--nav-panel);
    border-bottom: 1px solid var(--nav-line);
    padding: 0.5rem 1.4rem 1rem;
  }
  .nav-links.open { display: flex; }
  .nav-links > li {
    width: 100%;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--nav-line);
  }
  .nav-links > li:last-child { border-bottom: none; }
  .has-dropdown { padding-bottom: 0; margin-bottom: 0; }
  .has-dropdown > a::after { display: none; }
  .dropdown::before { content: none; }
  .dropdown {
    /* Always shown here - the mobile panel is an expanded list, not a
       hover menu, so the desktop hidden state has to be undone. */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    margin: 0.5rem 0 0;
    padding: 0 0 0 1rem;
    min-width: 0;
  }
  .dropdown a { padding: 0.4rem 0; color: var(--nav-ink-dim); }
  .nav-links .home-link { padding-left: 0; border-left: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dropdown { transition: visibility 0s linear 0.12s; transform: none; }
  .has-dropdown.open .dropdown,
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { transition: visibility 0s; }
}