// -----------------------------------------------------------
// Typography
//
// Everything around fonts, font size definitions and typeset
// presets. No modular scale, but a sophisticated viewport
// based responsive mixin can be found in _helpers.scss
// -----------------------------------------------------------

// Set root size for rems
:root {
  font-size: 62.5%;
}

// Start typography settings
body {
  font-size: $font-size-medium;
  font-family: $font-paragraphs;
  color: $color-paragraphs;
  font-weight: $font-weight-paragraphs;

  // Font smoothing options
  text-size-adjust: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Links
a {
  color: $color-links;
  text-decoration: none;

  &:hover {
    color: $color-hover;
  }
}

// Special link styles for example in blog posts, use with @extend
%textlink {
  position: relative;
  overflow: visible;
  font-weight: 700;
  z-index: 1;
  text-decoration: none;
  transition: all .18s ease-in-out;
  display: inline-flex;
  color: $color-paragraphs;
  border-bottom: 1px solid $color-links;
  box-shadow: inset 0 -.1rem 0 $color-links;

  &:hover,
  &:focus {
    box-shadow: inset 0 -100px 0 $color-links;
    color: $color-white;
  }
}

// Defaults
p,
dd,
dt,
figcaption,
hr,
small,
ol,
ul,
li,
blockquote,
kbd,
pre,
samp,
code,
th,
td,
table,
tr,
%default {
  @include responsive-font($font-size-min, $font-size-max);
  letter-spacing: -.003em;
  line-height: $line-height-paragraphs;
}

p {
  margin-top: 2.9rem;
  margin-bottom: 2.9rem;

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

// Heading defaults
h1,
h2,
h3,
h4,
h5,
h6 {
  color: $color-headings;
  font-family: $font-headings;
  font-weight: $font-weight-headings;
  margin-top: 2.7rem;
  margin-bottom: 2.7rem;

  &:first-child {
    margin-top: 0;
  }
}

h2,
h3,
h4,
h5,
h6 {
  line-height: $line-height-headings;
}

// Define heading scales
// Current: Perfect fourth: https://type-scale.com/
h1,
%h1 {
  @include responsive-font($font-size-min-h1, $font-size-max-h1);
}

h2,
%h2 {
  @include responsive-font($font-size-min-h2, $font-size-max-h2);
}

h3,
%h3 {
  @include responsive-font($font-size-min-h3, $font-size-max-h3);
}

h4,
%h4 {
  @include responsive-font($font-size-min-h4, $font-size-max-h4);
}

h5,
%h5 {
  @include responsive-font($font-size-min-h5, $font-size-max-h5);
}

h6,
%h6 {
  @include responsive-font($font-size-min-h6, $font-size-max-h6);
}

// Lists
ul {
  list-style: disc outside;
  padding-left: 1.9rem;

  li {
    padding-left: 0;
  }
}

ol {
  padding-left: 1.9rem;
}

// Bold.
b,
strong {
  font-weight: 700;
}

// Italic.
em,
i {
  font-style: italic;
}

// Inline small text.
small {
  line-height: 1;
  font-size: .875em;
}

// images
img {
  -ms-interpolation-mode: bicubic;
  height: auto;
  vertical-align: middle;
  max-width: 100%;
}

// Figures and captions
figure {
  position: relative;
  margin-bottom: 1rem;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}

// Figcaption.
figcaption {
  margin-top: 0;
  font-style: normal;
  font-weight: $font-weight-paragraphs;
}

// Quotes.
blockquote {
  clear: both;
  border: 0 none;
  position: relative;
  margin-top: 3rem;
  padding-bottom: 3rem;
  margin: 0;

  p {
    font-style: italic;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
    color: #666;
  }

  @media (min-width: $container-ipad) {
    margin-top: 4rem;
    padding-bottom: 4rem;
  }

  &:before {
    content: '';
    display: block;
    height: 4px;
    position: absolute;
    left: 0;
    top: 0;
    max-width: 147px;

    @media (min-width: $container-mobile) {
      width: 30%;
    }
  }
}

cite {
  display: block;
  font-style: italic;
}

// Horizontal rule.
hr {
  background-image: linear-gradient(to bottom, rgba(#000, 0) 50%, #000 50%);
  background-repeat: repeat-x;
  background-size: 2px 2px;
  background-position: 0 50%;
  border: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 0;
  height: 0;
}

kbd,
pre,
samp {
  font-family: $font-monospace;
}

// Code block.
code {
  color: #c7254e;
  background-color: #f9f2f4;
  font-family: $font-monospace;
  line-height: 1;
  padding: .375rem .5rem;
  border-radius: .3rem;
  font-size: inherit; // normalize.css sets this as 1em by default

  pre & {
    display: inline-block;
    padding: 1.15rem 1rem .85rem;
  }
}

// Preformatted text.
pre {
  border-radius: .3rem;
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  margin-bottom: 2rem;
}