// 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 .1s, background-color .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%,lighten($linkColour,20%) 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%,lighten($hoverColour,20%) 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';
  }
}