/* Restructure layout: header and footer frame the viewport,
   sidebar and content scroll independently within their areas. */
@media screen and (min-width: 76.25em) {
  /* Full viewport grid: header | main | footer */
  .md-container {
    display: grid;
    grid-template-rows: 1fr auto;
    height: calc(100vh - 4.8rem);
    overflow: hidden;
  }

  /* Main area fills middle row, no overflow */
  .md-main {
    overflow: hidden;
    min-height: 0;
    height: 100%;
  }

  .md-main__inner {
    height: 100%;
    min-height: 0;
  }

  /* Sidebar fills its flex cell and scrolls internally */
  .md-sidebar--primary {
    height: 100% !important;
    min-height: 0;
    overflow: hidden;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    height: 100% !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
  }
  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
  }

  /* Main content scrolls independently, no visible scrollbar */
  .md-content {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .md-content::-webkit-scrollbar {
    display: none;
  }

  /* No scrollbar on the right-side TOC */
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    overflow-y: hidden;
  }
}