/* 06-components/_sectionnav.css — a section's own row of page links, and the sticky head
   that holds it under the AI notice.

   c-stickyhead is the pinned block at the top of a section: it takes over the bleed and
   the sticky offset the bars inside it would each have claimed, so a notice and a
   navigation row stack as two lines of one head rather than two elements competing for
   the same top edge. .o-appshell__body is the scroll container, so the negative top
   offset pins the block to that element's top edge, as it does for a lone notice. */
.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);
}
/* Inside the head the notice is one of its lines: the head does the sticking and the
   bleeding, so the notice keeps only its own padding and rule. */
.c-stickyhead .c-ai-notice {
  position: static;
  margin: 0;
}

/* c-sectionnav — one link per page of the section, set a step above the body size
   because these are what the reader is here to click and the bar is the section's whole
   navigation. It wraps to a second line on a narrow screen rather than scrolling
   sideways, so no link is off the edge. The left inset is the menu bar's, as the
   notice's is, so both bars start on the brand's column. */
.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-lg);
}
/* The current page is marked by amber and weight both, never by colour alone — the
   contents rail's idiom, kept now that the rail is a bar. */
.c-sectionnav__link { color: var(--text-muted); }
.c-sectionnav__link:hover,
.c-sectionnav__link.is-current { color: var(--accent); }
.c-sectionnav__link.is-current { font-weight: var(--fw-bold); }

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