/* Breadcrumbs */
/* The fixed .mds-header is taller than the .page top padding (57px), so
   clear the overlap that the h1 top margin used to hide. */
.breadcrumbs {
  padding-top: 1.5rem;
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size--small);
  color: var(--color-foreground-secondary);
}

.breadcrumbs li + li::before {
  content: "›";
  margin: 0 .4em;
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* Anchor offset */
/* .mds-header is position: fixed, so any jump to #anchor (cross-page :ref:
   links, typed URLs, TOC links on page load) lands the target under it.
   The theme only offsets :target below the mobile breakpoint, and only by
   furo's own --header-height, which does not match .mds-header. Reserve
   the header height for every scroll-to-anchor and drop the theme's
   :target margin so the two do not add up on narrow screens. */
html {
  scroll-padding-top: 80px;
}

:target {
  scroll-margin-top: 0 !important;
}

/* A ref to the page title (h1 section or a label right above it) should
   also reveal the breadcrumbs above it. The oversized margin is clamped by
   the browser, so this lands at the very top of the page. */
article > section:first-of-type:target,
article > section:first-of-type > span[id]:has(~ h1):target {
  scroll-margin-top: 100vh !important;
}