/* --- Sticky sidebars under the header/banner ---------------------------- */
:root {
  /* Fallback if Material’s vars aren't present; JS will override this at runtime */
  --header-offset-effective: calc(var(--md-header-height, 3.2rem) + var(--md-banner-height, 0px));
}

/* Desktop and larger – match Material’s breakpoint so drawers still work on mobile */
@media (min-width: 76.25em) {
  /* Primary (left) sidebar */
  .md-sidebar--primary {
    position: sticky;
    top: var(--header-offset-effective);
    height: calc(100vh - var(--header-offset-effective));
  }

  /* Scroll container inside the sidebar */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    max-height: 100%;
    overflow: auto;
  }

  /* Secondary (right) sidebar / ToC – enable if you use the right sidebar */
  .md-sidebar--secondary {
    position: sticky;
    top: var(--header-offset-effective);
    height: calc(100vh - var(--header-offset-effective));
  }
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    max-height: 100%;
    overflow: auto;
  }

  /* Make in-page anchor jumps land below the sticky header+banner */
  .md-content a[href^="#"],
  .md-typeset h1[id], .md-typeset h2[id],
  .md-typeset h3[id], .md-typeset h4[id],
  .md-typeset h5[id], .md-typeset h6[id] {
    scroll-margin-top: var(--header-offset-effective);
  }
}

/* Printing (for print-site plugin) – disable sticky so pages print naturally */
@media print {
  .md-sidebar--primary,
  .md-sidebar--secondary {
    position: static !important;
    height: auto !important;
  }
}