/* Dropdown groups in the page nav (<details> menus; nav-menu.js closes them).
   Kept out of styles.css because netlify.toml caches CSS as immutable for a
   year: pages link this file with a ?v= query, so bump it after edits. */
.page-nav { position: relative; z-index: 50; }
.page-nav-group { position: relative; }
/* Several pages style every details/summary as a fold (white box, arrow);
   these selectors are stronger so the nav menus keep the nav-link look. */
.page-nav details.page-nav-menu {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.page-nav .page-nav-menu > summary {
  display: block;
  padding: 12px 4px;
  font-size: 13px;
  font-weight: 500;
  color: #888;
  background: none;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.page-nav .page-nav-menu > summary:hover { color: #ccc; }
.page-nav .page-nav-menu > summary.active { color: var(--bg); border-bottom-color: var(--sage); }
.page-nav .page-nav-menu > summary::before { content: none; }
.page-nav-menu > summary::-webkit-details-marker { display: none; }
.page-nav-menu > summary::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  vertical-align: 2px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
}
.page-nav-menu[open] > summary { color: #ccc; }
.page-nav .page-nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: var(--dark);
  border: 1px solid #333;
  border-top: 2px solid var(--sage);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.page-nav-sub a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.35;
  color: #bbb;
  text-decoration: none;
  text-align: left;
}
.page-nav-sub a:hover,
.page-nav-sub a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.06); }
.page-nav-sub a[aria-current="page"] { color: var(--bg); box-shadow: inset 3px 0 0 var(--sage); }

@media (max-width: 600px) {
  .page-nav .page-nav-links { gap: 4px 18px; }
  /* On phones an open menu spans the nav's width instead of hanging off one item. */
  .page-nav .page-nav-group { position: static; }
  .page-nav .page-nav-sub { left: 8px; right: 8px; transform: none; min-width: 0; }
}