/* Independent scrolling via fixed sidebars.
 *
 * position:fixed keeps sidebars in the viewport regardless of page length.
 * .body and .content are padded to prevent article content from going under
 * the fixed sidebars. Padding transitions match the collapse animation.
 *
 * Fixed navbar:  63px   (nav.navbar)
 * Fixed toolbar: 48px   (div.toolbar, sticky at 63px)
 * Left nav:      20rem  → collapses to 28px
 * Right TOC:     16rem  → collapses to 28px
 *
 * SCOPE: everything here is gated to >= 1024px, which is the breakpoint where
 * the Antora bundle switches the nav from a mobile slide-in drawer to the
 * in-flow desktop sidebar (site.css: `.nav-container { position:static }` at
 * min-width:1024px). Below 1024px we intentionally leave the bundle's native
 * mobile navigation untouched — no fixed sidebars, no body/content offsets —
 * so the page can use the full viewport width on phones and tablets.
 */

@media screen and (min-width: 1024px) {

/* ── Left sidebar: fixed ──────────────────────────────────────────── */

.nav-container {
  position: fixed !important;
  top: 63px;
  left: 0;
  width: 20rem;
  height: calc(100vh - 63px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
  /* The bundle paints the nav background + right border on aside.nav, but we
   * force that element to height:auto below, so its #fafafa fill stops at the
   * last menu item and the fixed container shows the white body beneath it.
   * Carry the background and border on the full-height container instead so
   * the sidebar reaches the bottom of the viewport. */
  background: #fafafa;
  box-shadow: 0.5px 0 3px #c1c1c1;
}

/* aside.nav no longer needs to paint the background/border itself */
.nav-container .nav {
  background: transparent !important;
  box-shadow: none !important;
}

/* Thin nav scrollbar — still functional but less intrusive */
.nav-container::-webkit-scrollbar { width: 4px; }
.nav-container::-webkit-scrollbar-track { background: transparent; }
.nav-container::-webkit-scrollbar-thumb { background: #d0d4dc; border-radius: 2px; }
.nav-container { scrollbar-width: thin; scrollbar-color: #d0d4dc transparent; }

body.kf-nav-collapsed .nav-container {
  width: 28px !important;
}

/* Indent .body so main content doesn't go under the fixed nav */
.body {
  padding-left: 20rem;
  transition: padding-left 0.18s ease;
  box-sizing: border-box;
}

body.kf-nav-collapsed .body {
  padding-left: 28px;
}

body.kf-no-transition .body {
  transition: none !important;
}

/* Antora bundle sets .nav { position:sticky; top:3.5rem } which creates a 56px
 * whitespace gap inside our fixed+scrollable nav container. Reset it. */
.nav-container .nav {
  position: relative !important;
  top: 0 !important;
  height: auto !important;
  /* NOTE: do NOT set a definite min-height here. `.nav .panels` has
   * `height: 100% !important`; giving .nav a definite min-height makes that
   * child resolve 100% against the viewport instead of its content, collapsing
   * .panels to viewport height so .nav never overflows and .nav-container can no
   * longer scroll a long/expanded nav tree. The sidebar background reaching the
   * bottom is handled by `background` on .nav-container above, not by stretching
   * .nav. */
}

/* Antora bundle makes .nav-panel-menu the scroll container (overflow-y:scroll,
 * height:calc(100%-2.5rem)), but 100% is unresolved with height:auto above,
 * collapsing it and trapping content. Let .nav-container scroll instead. */
.nav-container .nav-panel-menu {
  overflow-y: visible !important;
  height: auto !important;
}

/* The bundle pins .nav-panel-explore (component/version switcher) with
 * position:absolute; bottom:0 inside aside.nav. That relies on aside.nav being
 * exactly viewport-height with .nav-panel-menu scrolling internally and
 * reserving 2.5rem at the bottom for the context bar. In our model aside.nav is
 * height:auto and .nav-container scrolls, so an absolute explore panel pins to
 * the bottom of the tall content and overlays the last menu items. Return it to
 * normal flow (.panels is a flex column) so it stacks below the menu instead. */
.nav-container .nav-panel-explore {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  max-height: none !important;
}

/* Toggle button stays visible as nav content scrolls */
aside.nav .kf-nav-toggle-btn {
  position: sticky !important;
  top: 10px;
  float: right;
  margin-right: 6px;
  z-index: 10;
}

body.kf-nav-collapsed aside.nav .kf-nav-toggle-btn {
  float: none;
  position: relative !important;
  top: auto;
  margin: 10px auto 0;
  display: flex;
}

/* ── Part pages: hide TOC and expand content ─────────────────────── */

body[class*="part-"] aside.toc.sidebar {
  display: none !important;
}

body[class*="part-"] .content article.doc {
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Right TOC: fixed ─────────────────────────────────────────────── */

aside.toc.sidebar {
  position: fixed !important;
  top: 111px;
  right: 0;
  width: 16rem;
  height: calc(100vh - 111px);
  overflow: clip !important;
  z-index: 50;
}

body.kf-toc-collapsed aside.toc.sidebar {
  width: 28px !important;
}

/* Indent .content so article doesn't go under the fixed TOC */
.content {
  transition: padding-right 0.18s ease;
  box-sizing: border-box;
}

body.kf-toc-collapsed .content {
  padding-right: 28px;
}

body.kf-no-transition .content {
  transition: none !important;
}

/* TOC inner panel scrolls independently */
aside.toc.sidebar .toc-panel-inner {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

body.kf-toc-collapsed aside.toc.sidebar .toc-panel-inner {
  overflow: hidden;
}

/* Override Antora's sticky .toc-menu — not needed in a fixed sidebar */
aside.toc.sidebar .toc-menu {
  position: static !important;
  top: auto !important;
}

/* Antora bundle makes the <ul> the scroll container (overflow-y:auto, hidden scrollbar)
 * and scrolls it via JS on every scroll event. Remove it as a scroll container so
 * .toc-panel-inner handles scrolling instead and Antora's u.scrollTop is a no-op. */
aside.toc.sidebar .toc-menu ul {
  max-height: none !important;
  overflow-y: visible !important;
}

} /* end @media (min-width: 1024px) */