// Typography
// ---------------------------------------

// Setting root sizes and base styles.
html {
  @include rootsize;

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

// Site-wide base styles.
body {
  @include fontsize(zeta, all);

  font-family: unquote(map-get($bodytype, font-family));
  font-style: normal;
  font-weight: map-get($bodytype, regular);
  line-height: 2rem;
}

// Links.
a {
  color: $linkColour;
  text-decoration: none;
  transition: color 0.1s, background-color 0.1s;

  &:hover,
  &:active,
  &:focus {
    color: $hoverColour;
    text-decoration: none;
  }
}

// Styles for typeset text.
.typeset {
  // Nice underlines for text links.
  p a,
  li a {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 50%,
      $linkColour 50%
    );
    background-position: 0 93%;
    background-repeat: repeat-x;
    background-size: 100% 0.15rem;
    text-shadow: 0.1rem 0 $backgroundColour, 0.15rem 0 $backgroundColour,
      -0.1rem 0 $backgroundColour, -0.15rem 0 $backgroundColour;

    &:hover,
    &:active,
    &:focus {
      background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 50%,
        $hoverColour 50%
      );
    }
  }

  // Paragraphs. OpenType ligatures and oldstyle figures enabled if available.
  p {
    @include baseline(
      $fontsize: zeta,
      $font: $bodytype,
      $lineheight: 2,
      $below: 2,
      $breakpoint: all
    );

    font-feature-settings: "kern", "onum", "liga";
  }

  // Headings. OpenType ligatures, discretionary ligatures and lining figures enabled if available.
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $headingColour;
    font-family: unquote(map-get($headingtype, font-family));
    font-feature-settings: "dlig", "liga", "lnum", "kern";
    font-style: normal;
    font-weight: map-get($headingtype, bold);
  }

  // Heading level 1.
  h1,
  .alpha {
    @include sassline(
      $fontsize: alpha,
      $font: $headingtype,
      $lineheight: 3,
      $below: 1,
      $breakpoint: all
    );
  }

  // Heading level 2.
  h2,
  .beta {
    @include sassline(beta, $headingtype, 3, 1, all);
  }

  // Heading level 3.
  h3,
  .gamma {
    @include sassline(gamma, $headingtype, 3, 1, all);
  }

  // Heading level 4.
  h4,
  .delta {
    @include sassline(delta, $headingtype, 2, 0, all);
  }

  // Heading level 5.
  h5,
  .epsilon {
    @include sassline(epsilon, $headingtype, 2, 0, all);
  }

  // Heading level 6.
  h6,
  .zeta {
    @include sassline(zeta, $headingtype, 2, 0, all);
  }

  // Lists.
  ul,
  ol {
    @include baseline(zeta, $bodytype, 2, 2, all);

    li {
      font-feature-settings: "kern", "onum", "liga";
      margin-left: 2rem;

      @include breakpoint(break-1) {
        margin-left: 0;
      }

      ol,
      ul {
        padding-top: 1rem;
        margin-bottom: 1rem;
        margin-left: 2rem;
      }
    }
  }

  // Ordered lists.
  ol {
    list-style-type: none;

    li {
      counter-increment: top-level;

      &:before {
        content: counter(top-level) ".";
        font-feature-settings: "lnum", "tnum";
        margin-left: -3rem;
        position: absolute;
        text-align: right;
        width: 2em;
      }

      ul {
        li {
          &:before {
            content: "";
          }

          ol {
            li {
              counter-increment: alt-level;

              &:before {
                content: counter(alt-level) ".";
              }
            }
          }
        }
      }

      ol {
        li {
          counter-increment: sub-level;

          &:before {
            content: counter(top-level) "." counter(sub-level);
          }

          ul {
            li {
              &:before {
                content: "";
              }
            }
          }

          ol {
            li {
              counter-increment: sub-sub-level;

              &:before {
                content: counter(top-level) "." counter(sub-level) "."
                  counter(sub-sub-level);
              }
            }
          }
        }
      }
    }
  }

  // Definition lists.
  dl {
    @include baseline(zeta, $bodytype, 2, 2, all);

    dt,
    dd {
      font-feature-settings: "kern", "onum", "liga";
      margin-left: 2rem;

      @include breakpoint(break-1) {
        margin-left: 0;
      }
    }

    dt {
      font-weight: map-get($bodytype, bold);
    }

    dd + dt {
      padding-top: 1rem;
    }
  }

  // Tables.
  table {
    @include sassline(eta, $headingtype, 2, 0, all);

    font-family: unquote(map-get($headingtype, font-family));
    font-feature-settings: "liga", "lnum", "tnum", "kern";
    font-style: normal;
    font-weight: map-get($headingtype, regular);
    width: 100%;

    thead {
      th {
        @include sassline(zeta, $headingtype, 2, 0, all);
        padding-bottom: 1px;
      }
    }
  }

  // Bold.
  b,
  strong,
  .bold {
    font-weight: map-get($bodytype, bold);
  }

  // Italic.
  em,
  i,
  .italic {
    font-style: map-get($bodytype, italic);
  }

  // Caption and inline small text.
  small,
  .caption {
    @include fontsize(theta, all);

    font-family: unquote(map-get($headingtype, font-family));
    font-style: normal;
    font-weight: map-get($headingtype, regular);
  }

  small {
    line-height: 1rem;
  }

  .caption {
    @include baseline(theta, $headingtype, 2, 2, all);

    color: $captionColour;
  }

  // Nice spacing for captions.
  h1 + .caption,
  .alpha + .caption,
  h2 + .caption,
  .beta + .caption,
  h3 + .caption,
  .gamma + .caption {
    margin-top: -1rem;
  }

  .delta + .caption,
  .epsilon + .caption,
  .zeta + .caption {
    margin-top: 0rem;
  }

  // Quotes.
  blockquote {
    p {
      border-left: 0.15rem solid $linkColour;
      font-style: map-get($bodytype, italic);
      padding-left: 1rem;

      // Add spacing below blockquote paragraphs to align to baseline grid.
      $get-scale: map-get($modular-scale, scale-0);
      $get-size: map-get($get-scale, zeta);
      $rootsize: nth($sizes, 1);
      $baseline-shift: #{(
          $get-size / 2 *
            ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))
        ) / $rootsize + 0.00001};
      $baseline-push: #{3 -
        (
          (
              $get-size *
                ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))
            ) / $rootsize + 0.00001
        )};

      margin-bottom: #{$baseline-push}rem;
      padding-bottom: #{$baseline-shift}rem;

      @for $i from 2 through $breakpoints-limit {
        $get-scale: map-get($modular-scale, scale-#{$i - 1});
        $get-size: map-get($get-scale, zeta);
        $rootsize: nth($sizes, $i);
        $baseline-shift: #{(
            $get-size /
              2 *
              ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))
          ) /
          $rootsize +
          0.00001};
        $baseline-push: #{3 -
          (
            (
                $get-size *
                  ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))
              ) /
              $rootsize +
              0.00001
          )};

        @media screen and (min-width: nth($points, $i) / 16 * 1em) {
          margin-bottom: #{$baseline-push}rem;
          padding-bottom: #{$baseline-shift}rem;
        }
      }
    }

    @include breakpoint(break-1) {
      margin-left: -1rem;
    }
  }

  // Horizontal rule.
  hr {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 50%,
      $captionColour 50%
    );
    background-position: 0 50%;
    background-repeat: repeat-x;
    background-size: 100% 0.15rem;
    border: 0;
    margin: 0;
    padding-bottom: 3rem;
    padding-top: 3rem;
  }

  // Code block.
  code,
  pre {
    background-color: $codeBackgroundColour;
    font-family: unquote(map-get($monospacetype, font-family));
  }

  pre {
    display: block;
    margin-bottom: 2rem;
    padding: 1rem;
    white-space: pre;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
  }

  code {
    @include fontsize(theta, all);

    line-height: 1rem;
  }

  // Letter space those capitals people, Jan Tschichold would be proud.
  .upper {
    font-kerning: normal;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
  }

  // Real small caps.
  .small-caps {
    font-feature-settings: "smcp", "kern";
    font-kerning: normal;
    letter-spacing: 0.1rem;
  }

  // Consistent height numbers with OpenType.
  .lining-numerals {
    font-feature-settings: "lnum", "kern";
  }

  // Ascending and descending numbers with OpenType.
  .oldstyle-numerals {
    font-feature-settings: "onum", "kern";
  }
}
