:root {
  --page-nav-offset: 16;
}

html {
  scroll-behavior: smooth;
}

#in-page-navigation {
  position: relative;
  background-color: #fefefe;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #efefef;
  font-size: .875rem;
  overflow-y: auto;
  box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.15);
  height: min-content;
  width: 100%;
  max-height: calc(100svh - 2rem);
  max-width: calc(100vw - 4rem);
}

#in-page-navigation .open-page-navigation {
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: .5rem;
}

#in-page-navigation .open-page-navigation::before {
  content: "\f03a";
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-weight: 900;
  margin-right: .5rem;
}

/* navigation */
ol.in-page-navigation-menu {
  display: none;
}

.page-navigation-open ol.in-page-navigation-menu {
  display: block;
}

ol.in-page-navigation-menu[class],
ol.in-page-navigation-menu[class] ol {
  list-style: none;
  margin: 0;
}

ol.in-page-navigation-menu[class] li {
  padding-left: .5rem;
  margin-top: .5rem;
}

ol.in-page-navigation-menu[class] ol {
  margin-left: .5rem;
  margin-top: .5rem;
  margin-bottom: 1rem;
}

a.active {
  font-weight: 600;
}

@media screen and (max-width: 39.9375rem) {
  :root {
    --page-nav-offset: 87;
  }
  .page-wrapper[class] {
    overflow-x: unset;
  }

  .node--type-page>.node__content.grid-x {
    position: relative;
    flex-direction: column-reverse;
  }

  .node__aside {
    position: sticky;
    top: 1rem;
  }

  .node__aside>.text-formatted {
    position: relative;
  }

  #in-page-navigation {
    margin-bottom: 2rem;
  }

  #in-page-navigation:not(.page-navigation-open):hover {
    background-color: #f0f0f0;
  }

  #in-page-navigation>h3 {
    cursor: pointer;
  }

  #in-page-navigation:not(.page-navigation-open) .open-page-navigation {
    margin-bottom: 0;
  }

  #in-page-navigation:not(.page-navigation-open) .close-page-navigation {
    display: none;
  }

  .close-page-navigation {
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    text-indent: -9999px;
    position: absolute;
    right: 1rem;
    top: .6rem;
  }

  .close-page-navigation::before {
    content: "\f00d";
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    position: absolute;
    inset: 0;
    text-indent: 0;
  }

}

@media screen and (min-width: 40rem) {

  /* Make #in-page-navigation sticky */
  /* reset overflow on page-wrapper */
  .page-wrapper[class] {
    overflow-x: initial;
  }

  .node__aside {
    position: relative;
  }

  .node__aside>.text-formatted {
    position: sticky;
    top: 1rem;
  }

  #in-page-navigation {
    width: 100%;
    font-size: .875rem;
    overflow-x: auto;
    overflow-y: auto;
  }

  ol.in-page-navigation-menu {
    display: block;
  }

  .close-page-navigation {
    display: none;
  }
}