/* c-stickyhead takes over the bleed and the sticky offset each bar inside it would otherwise
   claim for itself, so a section's navigation rows and its notice stack as lines of one pinned
   head instead of competing for the same top edge. Its offset is measured against
   .o-appshell__body, the scroll container, as a lone notice's is. */
.c-stickyhead {
  position: sticky;
  top: calc(var(--space-lg) * -1);
  z-index: var(--z-bar);
  margin: calc(var(--space-lg) * -1) calc(var(--gutter-page) * -1) var(--space-lg);
}
/* The head does the sticking and the bleeding, so the notice inside it keeps only its own padding
   and rule. */
.c-stickyhead .c-ai-notice {
  position: static;
  margin: 0;
}

/* The bar is the section's whole navigation, so it wraps to a second line rather than scrolling
   sideways, which would put a link off the edge. Its left inset is the menu bar's, as the notice's
   is, so all three start on the brand's column. It is set at the body size: a nav row deeper in the
   tree than the menu bar cannot also be louder than it without reading as the page's own heading. */
.c-sectionnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-lg);
  padding: var(--space-sm) var(--gutter-page) var(--space-sm)
           calc(var(--space-xs) + var(--space-sm));
  background: var(--surface);
  border-bottom: var(--bw) solid var(--line);
  font-size: var(--text-md);
}
/* The current page is marked by weight as well as colour, so the cue does not rest on hue alone. */
.c-sectionnav__link { color: var(--text); }
.c-sectionnav__link:hover,
.c-sectionnav__link.is-current { color: var(--accent); }
.c-sectionnav__link.is-current { font-weight: var(--fw-bold); }

/* The second-level menu a group hangs under the section's bar. Size stops carrying the hierarchy
   here — the row is set at the same size as the bar above it, and depth is said in ink instead: the
   bar in --text, this row in --text-dim, the page you are on in accent. A row deeper in the tree
   cannot be larger than its parent without reading as the page's own heading, and it does not need
   to be smaller either, since the tone already places it. */
.c-sectionnav--nested {
  align-items: baseline;
  column-gap: var(--space-sm);
  padding-top: var(--space-2xs);
  padding-bottom: var(--space-2xs);
}
/* The first link's own padding would push its text past the inset the bars above start on, so the
   box is pulled back by exactly that padding. */
.c-sectionnav--nested .c-sectionnav__link--nested:first-child {
  margin-left: calc(var(--space-xs) * -1);
}
.c-sectionnav__link--nested {
  line-height: var(--lh-cell);
  padding: var(--space-3xs) var(--space-xs);
  color: var(--text-dim);
}

@media (max-width: 40rem) {
  .c-sectionnav { padding-left: var(--space-xs); }
}