/*------------------------------------*\
  $TYPE
\*------------------------------------*/

/**
 * Headings
 */
$h1-size: 24;
$h2-size: 22;
$h3-size: 20;
$h4-size: 18;
$h5-size: 18;
$h6-size: 16;

h1 {
  font-size: font-size($h1-size);
}

h2 {
  font-size: font-size($h2-size);
}

h3 {
  font-size: font-size($h3-size);
}

h4 {
  font-size: font-size($h4-size);
}

h5 {
  font-size: font-size($h5-size);
}

h6 {
  font-size: font-size($h6-size);
}

@include headings {
  margin: {
    bottom: 10px;
  }
  color: $dark-grey;
  font: {
    family: $heading-font;
    weight: 400;
  }

  &.alt {
    font: {
      family: $body-font;
      weight: 600;
    }
  }
}


/**
 * We need to add additional margins if certain elements follow other certain
 * elements, so this is where we're doing it.
 */
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {
  margin-top: 40px;
}

p.intro + h2,
p.intro + h3,
p.intro + h4,
p.intro + h5,
p.intro + h6 {
  margin-top: 10px;
}

ul + h2,
ol + h2,
ul + h3,
ol + h3,
ul + h4,
ol + h4,
ul + h5,
ol + h5,
ul + h6,
ol + h6 {
  margin-top: 40px;
}

h2 + h3,
h2 + h4 {
  margin: {
    top: 20px;
  }
}


/**
 * Paragraphs
 */
p {
  margin-bottom: $base-spacing-unit;
  line-height: 1.5;
  font-size: font-size(16);

  margin: {
    right: auto;
    left: auto;
  }

  max-width: 900px;
  text-align: center;

  &.intro {
    margin: {
      bottom: 30px;
    }
    font: {
      family: $heading-font;
      size: font-size(22);
    }
    color: #121214;
    line-height: 1.3;
  }
}

strong,
b {
  font-weight: bold;
}

small {
  font-size: 75%;
}

em,
i,
cite {
  font-style: italic;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

del {
  text-decoration: line-through;
}

mark {
  background: yellow;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

address {
  margin-bottom: $base-spacing-unit;
}


/**
 * Links
 */
a {
  color: $link-color;

  @if ($link-underlined == false) {
    text-decoration: none;
  }

  @include states() {
    color: $link-color-hover;

    @if ($link-underlined-hover == false) {
      text-decoration: none;
    } @elseif ($link-underlined-hover == true) {
      text-decoration: underline;
    }
  }
}


/**
 * Blockquotes
 */
q {
  quotes: '\201C''\201D''\2018''\2019';

  &:before {
    content: open-quote;
  }

  &:after {
    content: close-quote;
  }
}

blockquote {
  margin-bottom: 15px;

  p {
    &:before {
      content: '\201C';
    }

    &:after {
      content: '\201D';
    }
  }
}