/* Shared offsets for the existing "On this page" menus.
   Header sizes match global-navigation.css at the same breakpoints.
   Each page keeps its own columns and places the menu beside its introduction. */
:root {
  --cdx-header-height: 85px;
  --cdx-page-nav-top: calc(var(--cdx-header-height) + 16px);
  --cdx-page-nav-max-height: calc(100vh - var(--cdx-header-height) - 32px);
  --cdx-page-anchor-offset: calc(var(--cdx-page-nav-extra, 0px) + 24px);
}

@media (max-width: 1100px) {
  :root { --cdx-header-height: 75px; }
}

@media (max-width: 850px) {
  :root { --cdx-header-height: 70px; }
}

@media (max-width: 580px) {
  :root { --cdx-header-height: 64px; }
}

@supports (height: 100dvh) {
  :root { --cdx-page-nav-max-height: calc(100dvh - var(--cdx-header-height) - 32px); }
}

@media screen {
  /* Reserve the header once at the scroll container, including for links
     outside the table of contents. This replaces older page-specific padding. */
  html { scroll-padding-top: var(--cdx-header-height); }
  /* Menu destinations must stay visible below the persistent navigation.
     Add only the remaining gap here so header clearance is not counted twice.
     Override older page-specific scroll margins on these targets only. */
  .cdx-page-anchor { scroll-margin-top: var(--cdx-page-anchor-offset) !important; }
}