body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

main {
  grid-column: 4 / span 9;
  grid-row: 1;
}

nav {
  display: grid;
  grid-column: 1 / span 3;
  grid-row: 1;
  z-index: 1;
  overflow: auto;
  gap: 2rem;
  --pico-nav-element-spacing-vertical: 0.8rem;
  --pico-nav-element-spacing-horizontal: 1rem;
  --pico-block-spacing-horizontal: 1rem;
  --pico-nav-element-spacing-horizontal: var(--pico-block-spacing-horizontal);
  height: 100vh;
  position: sticky;
  top: 0;
}

nav > details > summary {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content auto max-content;
  height: 100%;
  /* Text is rotate so rotate padding too. */
  padding-top: var(--pico-nav-element-spacing-horizontal);
  padding-bottom: var(--pico-nav-element-spacing-horizontal);
  padding-left: var(--pico-nav-element-spacing-vertical);
  padding-right: var(--pico-nav-element-spacing-vertical);
  border: 1px solid var(--pico-primary-border);

  & > * {
    writing-mode: sideways-lr;
  }

  & > :first-child {
    grid-column: 1;
    grid-row: 1;
  }

  & > :last-child {
    grid-column: 1;
    grid-row: 3;
  }
}

nav > details > summary::after {
  display: none;
}

nav:has(> details:open) {
  line-height: unset;
  border: 1px solid var(--pico-primary-border);

  & > details  > summary {
    border: none;
  }
}

hr {
  border-width: unset;
}

@media (width < 576px) {
  main {
    grid-column: 2 / span 11;
  }

  nav {
    grid-column: 1 / span 1;
  }

  /* Causes troubles on mobile 
  body:has(> nav > details:open) {
    overflow: hidden;
  } */

  nav:has(> details:open) {
    grid-column: 1 / span 12;
    backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
    & > details {
      background-color: rgba(from var(--pico-background-color) r g b / 0.9)
    }
  }
}

nav > div > strong {
  display: block;
  text-align: center;
  margin-top: var(--pico-nav-element-spacing-vertical);
  margin-bottom: var(--pico-nav-element-spacing-vertical);
}

#site-navigation {
  grid-column: 1;
  grid-row: 1;
}

#page-navigation {
  grid-column: 1;
  grid-row: 3;
}

#page-navigation:not(:has(a)) {
  display: none;
}

ol ol {
  margin-bottom: 0; /* Don't add extra space at the end of nested lists */
}

nav details:open > summary {
  margin-bottom: unset;
}

nav details summary::after {
  content: "X";
  color: rgba(0, 0, 0, 0);
  height: unset;
}

nav details > .navs {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content auto max-content;
  gap: 2rem;
  height: 100%;
}

figure {
  text-align: center;
}

nav ul {
  flex-direction: column;
  align-items: start;
  margin-bottom: revert;
  padding: unset;
  width: 100%;
  display: unset;
}

nav li {
  width: 100%;
  padding-bottom: 0; /* allow collapse of navigation elements' bottom-margin */
  padding-right: 0;
}

nav li li {
  padding-right: unset;
}

nav ol:first-of-type, nav ul:first-of-type {
  margin-left: unset;
}

nav ol:last-of-type, nav ul:last-of-type {
  margin-right: unset;
}

nav details {
  --pico-spacing: 0rem !important;
}

nav > details {
  display: flex;
  height: 100%;
  width: 100%;
}

body {
  flex-direction: row;
}

/* From https://github.com/picocss/pico/issues/653#issuecomment-2609951987 */
details summary {
  position: relative;
}

.navs details summary {
  width: 100%;
}

details summary::after {
  float: none;
  position: absolute;
  top: 0;
  left: calc(var(--pico-block-spacing-horizontal) * -1);
}

/* pico.css doesn't have section in :where() below */
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul, section) ~ :is(h1, h2, h3, h4, h5, h6) {
  margin-top: var(--pico-typography-spacing-top);
}

/* pico.css's use of inline-block makes it more difficult and guessable to
 * click on the details in the navigation */
nav li :where(a, [role="link"]) {
  display: inline;
}

h2:has(+ :is(#updates,#notes,#reports):empty) {
  display: none;
}

#page-navigation > ul.toc > li:not(:has(> ul)) {
  display: none;
}

main {
  :is(h2, h3, h4, h5, h6) > a {
    margin-right: var(--pico-nav-element-spacing-horizontal)
  }
}