/* The filter script adds .components-filter before it hides anything.
   Without that class, every group stays visible and the links still jump.
   The bar sits outside .page-hero so the compact title can hide the intro
   without taking the group links with it. */

html.components-filter .component-group.is-filtered-out {
  display: none;
}

.component-group {
  scroll-margin-top: calc(var(--header-h) + 40px + 3.25rem);
}

#all {
  scroll-margin-top: calc(var(--header-h) + 0.5rem);
}

.group-jump-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 45;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--border);
}

html.has-compact-title .group-jump-bar {
  top: calc(var(--header-h) + 40px);
}

.group-jump-bar .group-jump {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  padding: 0.55rem 0;
}

.group-jump a[aria-current="true"] {
  background: color-mix(in srgb, var(--primary) 18%, var(--bg-elevated));
  color: var(--primary);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 70%, var(--border));
  text-decoration: none;
}