/* Keep page within viewport so content wraps */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Constrain the navbar logo so it doesn't overflow */
#logo,
nav .navbar-brand img#logo {
  max-height: 2.5rem;
  max-width: 10rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* TOC as left sidebar with hamburger toggle (no dropdown in banner) */
.toc-toggle-nav {
  flex-shrink: 0;
}

/* Sidebar: fixed left on md+, offcanvas overlay on small screens */
#tocOffcanvas.toc-sidebar.offcanvas {
  width: 280px;
  max-width: 85vw;
}

@media (min-width: 768px) {
  #tocOffcanvas.toc-sidebar.offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1045;
    visibility: visible !important;
    background: var(--bs-body-bg, #fff);
    border-right: 1px solid var(--bs-border-color, rgba(0,0,0,.175));
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
  }
  #tocOffcanvas.toc-sidebar.offcanvas.show {
    transform: translateX(0);
  }

  /* Main content shifts when sidebar is open */
  body:has(#tocOffcanvas.show) .layout-with-sidebar,
  body .layout-with-sidebar {
    transition: margin-left 0.2s ease-in-out;
  }

  body:has(#tocOffcanvas.show) .layout-with-sidebar {
    margin-left: 280px;
  }
}

/* Backdrop only on small screens (Bootstrap adds it for offcanvas) */
@media (min-width: 768px) {
  .offcanvas-backdrop {
    display: none;
  }
}

/* Main: no Bootstrap container — constrain to viewport so content wraps */
.docfx-main.layout-with-sidebar {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body:has(#tocOffcanvas.show) .docfx-main.layout-with-sidebar {
    max-width: calc(100vw - 280px);
  }
}
.layout-with-sidebar .content .actionbar,
.layout-with-sidebar .content article,
.layout-with-sidebar .content .contribution,
.layout-with-sidebar .content .next-article {
  margin-left: 0 !important;
}
.layout-with-sidebar .content {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 1rem;
  overflow-wrap: break-word;
}
.layout-with-sidebar .content article {
  max-width: 100%;
  overflow-wrap: break-word;
}