$side-padding: 30px;
$left-nav-width: 250px;

body {
  background-color: $grey-color-dark;

  .page-content {
    background: $background-color;
  }
}

article {
  padding: 0 15px;
}

details {
  &:not([open]) {
    margin: 15px 0;
  }

  > summary {
    cursor: pointer;

    &[bold] {
      font-weight: bold;
    }
  }
}

header.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: $background-color;

  @include media-query($on-laptop) {
    position: fixed;
    transition: transform 300ms ease-in-out;
    transform: translateY(0);

    &.hide-header {
      transform: translateY(-92px);
    }
  }
}

table, td, th {
  border-collapse: collapse;
}
table {
  padding: 0;
  margin-bottom: 15px;

  tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0;

    &:nth-child(2n) {
      background-color: #f8f8f8;
    }

    th {
      font-weight: bold;
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px;
    }

    td {
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px;
    }

    th :first-child, td :first-child {
      margin-top: 0;
    }

    th :last-child, td :last-child {
      margin-bottom: 0;
    }
  }
}

.page-content {
  margin-top: 62px;

  .wrapper {
    display: flex;
    padding-left: 0;
    padding-right: 0;
    align-items: stretch;

    @include media-query($on-laptop) {
      padding-left: 0;
      padding-right: 0;

      &[show-nav] {

        > nav.nav-list {
          transform: translateX(0);
        }

        > .nav-screen {
          z-index: 1;
          opacity: .4;
        }

      }

    }

    .page-content-main {
      flex: 1;
      overflow: auto;
    }

    article {
      padding-left: $side-padding;
      padding-right: $side-padding;
      padding-top: 10px;

      @include media-query($on-palm) {
        padding-left: $side-padding / 2;
        padding-right: $side-padding / 2;
      }

      h1:not(.post-title) {
        background-color: $brand-light;
        color: $brand-dark;
        margin-left: $side-padding * -1;
        margin-right: $side-padding * -1;
        margin-top: 35px;
        padding: 10px $side-padding;

        @include media-query($on-palm) {
          margin-left: $side-padding / -2;
          padding-left: $side-padding / -2;
        }
      }

      h2 {
        border-bottom: 1px solid $grey-color-light;
        margin-top: 35px;
      }
    }

    > nav.nav-list {
      width: $left-nav-width;
      min-width: $left-nav-width;
      overflow-y: auto;
      border-right: 1px solid $grey-color-light;
      padding-left: $side-padding;
      padding-top: 10px;
      margin-left: -5px;

      .current-page {
        background-color: adjust-color($brand-light, $alpha: -0.7);
      }

      @include media-query($on-laptop) {
        position: fixed;
        width: $left-nav-width;
        top: 62px;
        bottom: 0;
        right: 0;
        z-index: 10;
        border: 1px solid $grey-color-light;
        border-right: none;
        margin-right: 0;
        padding: 10px 25px;
        background: white;
        transform: translateX(301px);
        transition: transform 300ms ease-in-out;
      }

      ul {
        list-style: none;
        margin: 0 0 15px 0;
        padding: 0;

        ul {
          margin-bottom: 0;
        }

        li {
          a {
            padding-left: 5px;
          }

          li a {
            padding-left: 20px;
          }

          li li a {
            padding-left: 35px;
          }

          li li li a {
            padding-left: 50px;
          }

          li li li li a {
            padding-left: 65px;
          }

          li li li li li a {
            padding-left: 80px;
          }
        }
      }

      a {
        display: block;
        padding: 5px 0;
      }
    }

    &.scroll-nav {
      article {
        margin-left: $left-nav-width + $side-padding - 5px;

        @include media-query($on-laptop) {
          margin-left: $side-padding;
        }
      }

      nav.nav-list {
        position: fixed;
        top: 0;
        height: 100%;
        overflow: auto;
      }

      @include media-query($on-laptop) {
        top: 62px;
        bottom: 0;
      }
    }

    > .nav-screen {
      position: fixed;
      top: 62px;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
      background: #000;
      opacity: 0;
      transition: all 300ms ease-in-out;
    }
  }
}

.post-subtitle {
  font-size: 18px;
  color: #777;
}

.site-nav {
  > ul {
    list-style: none;
    margin-bottom: 0;

    li {
      display: inline-block;

      a {
        display: block;
        padding: 0 10px;
        color: $text-color;
        line-height: 38px;
      }

      ul {
        display: none;
        margin: 0;
        padding: 0;
      }
    }
  }
}

.site-footer {
  border-top: 1px solid $grey-color-light;
  border-bottom: 1px solid $grey-color-light;
  padding: $side-padding;
  margin-top: 2 * $side-padding;
  font-size: 90%;
  background-color: #fafafa;
  text-align: center;
  margin-bottom: $side-padding / 2;

  p {
    margin: 7px 0;
  }

  &.scroll-nav {
    margin-left: $left-nav-width + $side-padding - 5px;
    margin-bottom: 120px;
  }

  .footer-fine-print {
    font-size: 12px;
    opacity: .7;
  }

  .footer-links {

    > div {
      display: inline-block;

      &:before {
        content: ' | '
      }

      &:last-child:after {
        content: ' | '
      };
    }
  }
}

.toc {
  a {
    display: inline-block;
    padding: 5px 0;
  }
}