/* ==========================================================================

BASE ELEMENTS
========================================================================== */

html {

/* sticky footer fix */
position: relative;
min-height: 100%;

}

body {

margin: 0;
padding: 0;
color: $text-color;
font-family: $global-font-family;
line-height: 1.5;

&.overflow--hidden {
  /* when primary navigation is visible, the content in the background won't scroll */
  overflow: hidden;
}

}

h1, h2, h3, h4, h5, h6 {

margin: 2em 0 0.5em;
line-height: 1.2;
font-family: $header-font-family;
font-weight: bold;

}

h1 {

margin-top: 0;
font-size: $h-size-1;

}

h2 {

font-size: $h-size-2;

}

h3 {

font-size: $h-size-3;

}

h4 {

font-size: $h-size-4;

}

h5 {

font-size: $h-size-5;

}

h6 {

font-size: $h-size-6;

}

small, .small {

font-size: $type-size-6;

}

p {

margin-bottom: 1.3em;

}

u, ins {

text-decoration: none;
border-bottom: 1px solid $text-color;
a {
  color: inherit;
}

}

del a {

color: inherit;

}

/* reduce orphans and widows when printing */

p, pre, blockquote, ul, ol, dl, figure, table, fieldset {

orphans: 3;
widows: 3;

}

/* abbreviations */

abbr, abbr {

text-decoration: none;
cursor: help;
border-bottom: 1px dotted $text-color;

}

/* blockquotes */

blockquote {

margin: 2em 1em 2em 0;
padding-left: 1em;
padding-right: 1em;
font-style: italic;
border-left: 0.25em solid $primary-color;

cite {
  font-style: italic;

  &:before {
    content: "\2014";
    padding-right: 5px;
  }
}

}

/* links */

a {

&:focus {
  @extend %tab-focus;
}

&:visited {
  color: $link-color-visited;
}

&:hover {
  color: $link-color-hover;
  outline: 0;
}

}

/* buttons */

button:focus {

@extend %tab-focus;

}

/* code */

tt, code, kbd, samp, pre {

font-family: $monospace;

}

pre {

overflow-x: auto; /* add scrollbars to wide code blocks*/

}

p > code, a > code, li > code, figcaption > code, td > code {

padding-top: 0.1rem;
padding-bottom: 0.1rem;
font-size: 0.8em;
background: $code-background-color;
border-radius: $border-radius;

&:before,
&:after {
  letter-spacing: -0.2em;
  content: "\00a0"; /* non-breaking space*/
}

}

/* horizontal rule */

hr {

display: block;
margin: 1em 0;
border: 0;
border-top: 1px solid $border-color;

}

/* lists */

ul li, ol li {

margin-bottom: 0.5em;

}

li ul, li ol {

margin-top: 0.5em;

}

/*

Media and embeds
========================================================================== */

/* Figures and images */

figure {

display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
align-items: flex-start;
flex-wrap: wrap;
margin: 2em 0;

img,
iframe,
.fluid-width-video-wrapper {
  margin-bottom: 1em;
}

img {
  width: 100%;
  border-radius: $border-radius;
  -webkit-transition: $global-transition;
  transition: $global-transition;
}

> a {
  display: block;
}

&.half {
  > a,
  > img {
    @include breakpoint($small) {
      width: calc(50% - 0.5em);
    }
  }

  figcaption {
    width: 100%;
  }
}

&.third {
  > a,
  > img {
    @include breakpoint($small) {
      width: calc(33.3333% - 0.5em);
    }
  }

  figcaption {
    width: 100%;
  }
}

}

/* Figure captions */

figcaption {

margin-bottom: 0.5em;
color: $muted-text-color;
font-family: $caption-font-family;
font-size: $type-size-6;

a {
  -webkit-transition: $global-transition;
  transition: $global-transition;

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

}

/* Fix IE9 SVG bug */

svg:not(:root) {

overflow: hidden;

}

/*

Navigation lists
========================================================================== */

/**

* Removes margins, padding, and bullet points from navigation lists
*
* Example usage:
* <nav>
*    <ul>
*      <li><a href="#link-1">Link 1</a></li>
*      <li><a href="#link-2">Link 2</a></li>
*      <li><a href="#link-3">Link 3</a></li>
*    </ul>
*  </nav>
*/

nav {

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* override white-space for nested lists */
ul li,
ol li {
  margin-bottom: 0;
}

li ul,
li ol {
  margin-top: 0;
}

}

/*

Global animation transition
========================================================================== */

b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input, .btn, .highlight, .archive__item-teaser {

-webkit-transition: $global-transition;
transition: $global-transition;

}