// -----------------------------------------------------------
// 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 up self-hosted fonts here
@include fontFace('Archivo', '../fonts/archivo-v6-latin_latin-ext-regular', 400);
@include fontFace('Archivo', '../fonts/archivo-v6-latin_latin-ext-italic', 400, italic);
@include fontFace('Archivo', '../fonts/archivo-v6-latin_latin-ext-700', 700);
@include fontFace('Archivo', '../fonts/archivo-v6-latin_latin-ext-700italic', 700, italic);

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

// Start typography settings
body {
  font-size: 1.7rem;
  font-family: $font-base;
  color: $color-body;
  font-weight: $body-weight;

  // 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
%link {
  color: #111;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
  box-shadow: inset 0 -1px 0 0 #fff, inset 0 -2px 0 0 rgba(#111, .6);
  transition: all .55s;
  background-image: linear-gradient(to top, #111, #111);
  background-size: 100% 0;
  background-position: left bottom;
  background-repeat: no-repeat;

  &:hover {
    color: #fff;
    text-shadow: none;
    padding-left: 5px;
    padding-right: 5px;
    box-shadow: none;
    background-size: 100% 2.8rem;
    margin-left: -5px;
    margin-right: -5px;
  }
}

// Preset for small fonts
%small {
  @include responsive-font(14px, 17px);
}

%extrasmall {
  @include responsive-font(12px, 14px);
}

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

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: $headings-weight;
}

// Define heading scales
// Current: Perfect fourth: https://type-scale.com/
$heading_typescale: medium;

// Defaults are null
$h1_min: null;
$h1_max: null;
$h2_min: null;
$h2_max: null;
$h3_min: null;
$h3_max: null;
$h4_min: null;
$h4_max: null;
$h5_min: null;
$h5_max: null;
$h6_min: null;
$h6_max: null;

@if $heading_typescale == 'large' {
  $h1_min: 32px;
  $h1_max: 67px;
  $h2_min: 24px;
  $h2_max: 51px;
  $h3_min: 21px;
  $h3_max: 38px;
  $h4_min: 18px;
  $h4_max: 28px;
  $h5_min: 14px;
  $h5_max: 28px;
  $h6_min: 14px;
  $h6_max: 21px;
}

@if $heading_typescale == 'medium' {
  $h1_min: 32px;
  $h1_max: 51px;
  $h2_min: 24px;
  $h2_max: 38px;
  $h3_min: 21px;
  $h3_max: 28px;
  $h4_min: 18px;
  $h4_max: 21px;
  $h5_min: 14px;
  $h5_max: 17px;
  $h6_min: 14px;
  $h6_max: 12px;
}

@if $heading_typescale == 'small' {
  $h1_min: 38px;
  $h1_max: 28px;
  $h2_min: 21px;
  $h2_max: 28px;
  $h3_min: 20px;
  $h3_max: 21px;
  $h4_min: 16px;
  $h4_max: 18px;
  $h5_min: 16px;
  $h5_max: 18px;
  $h6_min: 14px;
  $h6_max: 16px;
}

h1,
%h1 {
  @include responsive-font($h1_min, $h1_max);
}

h2,
%h2 {
  @include responsive-font($h2_min, $h2_max);
}

h3,
%h3 {
  @include responsive-font($h3_min, $h3_max);
}

h4,
%h4 {
  @include responsive-font($h4_min, $h4_max);
}

h5,
%h5 {
  @include responsive-font($h5_min, $h5_max);
}

h6,
%h6 {
  @include responsive-font($h6_min, $h6_max);
}

// 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;

  > img {
    width: 100%;
  }
}

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

// 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;
}