/* =====================================================
   Layout offsets for Dask Sphinx Theme
   - Optional top Dask bar + custom black nav + white (article) header
   - Sidebars sit below the combined header
   - Anchor jumps (TOC) never hide under the header
   - Mobile drawers (left + right) appear ABOVE the navs
   ===================================================== */

/* =========================
   1) GLOBAL SIZES / OFFSETS
   ========================= */
:root {
  /* If you have an extra top bar (e.g. “Dask / Distributed / …”), set this.
     Otherwise keep it 0px. */
  --dask-topbar-height: 20px;

  /* Your custom header heights */
  --nav-top-height: 20px;     /* black nav height */
  --nav-scroll-height: 0px;   /* white nav height */
  --nav-gap: 0px;             /* optional gap under the combined header */

  /* Derived values */
  --site-header-height: calc(
    var(--dask-topbar-height) +
    var(--nav-top-height) +
    var(--nav-scroll-height)
  );
  --page-offset: calc(var(--site-header-height) + var(--nav-gap));
}

/* Anchor / TOC jumps: never hide under the header */
html {
  scroll-padding-top: var(--page-offset);
}

:target,
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: var(--page-offset);
}

/* =========================
   2) BLACK NAV (CUSTOM TOP)
   ========================= */
nav.navbar-scroll-wrap {
  position: sticky;
  top: var(--dask-topbar-height) !important;
  z-index: 20000;
}

/* =========================
   3) WHITE NAV (ARTICLE BAR)
   ========================= */
.bd-header-article {
  position: sticky;
  top: calc(var(--dask-topbar-height) + var(--nav-top-height)) !important;
  z-index: 15000;

  /* Safety: prevent unexpected spacing */
  margin-top: 0 !important;
  left: 0;
  right: 0;
}

/* =========================
   4) MAIN / SIDEBARS OFFSETS
   ========================= */
.bd-sidebar-primary,
.bd-sidebar-secondary {
  top: var(--page-offset);
  height: calc(100vh - var(--page-offset));
}

/* =========================
   5) Z-INDEX BASELINE (DESKTOP)
   ========================= */
.bd-sidebar-primary,
.bd-sidebar-secondary,
.bd-sidebar,
.bd-toc {
  z-index: 1000;
}

.overlay-primary,
.overlay-secondary {
  z-index: 999;
}

/* =========================
   6) MOBILE DRAWERS ABOVE NAV
   ========================= */
@media (max-width: 1200px) {
  /* Left drawer panel */
  .bd-sidebar-primary,
  .bd-sidebar {
    z-index: 30000 !important;
  }

  /* Right drawer panel (TOC) */
  .bd-sidebar-secondary,
  .bd-toc {
    z-index: 30000 !important;
  }

  /* Overlays behind drawers */
  .overlay-primary,
  .overlay-secondary {
    z-index: 29999 !important;
  }

  /* Nav bars stay below drawers */
  nav.navbar-scroll-wrap {
    z-index: 20000 !important;
  }

  .bd-header-article {
    z-index: 15000 !important;
  }
}

/* ===========================
   FIX: only MY black nav sticks
   =========================== */

/* 1) Force my black nav to always be at the top */
nav.navbar-scroll-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  /* ✅ avoid tiny horizontal overflow on mobile */
  width: auto !important;
  max-width: 100vw !important;

  z-index: 99999 !important;
}

/* 2) Stop Dask top bar from sticking (this causes the gap/duplicate look) */
#navbar-main,
header#navbar-main,
.bd-header,
header.bd-header {
  position: static !important;
  top: auto !important;
}

/* 3) Push page content down so it doesn’t go under the fixed nav */
html,
body {
  padding-top: var(--nav-top-height) !important; /* your black bar height */
}

/* =========================================================
   MOBILE FIX: Stop sideways page sliding WITHOUT breaking sticky
   (IMPORTANT: do NOT set overflow-x on html)
   ========================================================= */
@media (max-width: 1200px) {
  body {
    overflow-x: clip; /* best */
  }
  @supports not (overflow: clip) {
    body { overflow-x: hidden; } /* fallback */
  }

  /* Most common overflow sources */
  pre, .highlight, .highlight pre {
    overflow-x: auto;
    max-width: 100%;
  }

  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  img, svg {
    max-width: 100%;
    height: auto;
  }
}