$body-font-family: 'Open Sans', sans-serif;
$header-font-family: 'Montserrat', sans-serif;
$normal-font-weight: 400;
$strong-font-weight: 700;
$light-italic-weight: 300;

$body-font-size: 15px;
$h1-font-size: 36px;
$h1-font-size-md: 30px;
$h2-font-size: 30px;
$h2-font-size-md: 28px;
$h3-font-size: 24px;
$h4-font-size: 12px;
$h5-font-size: 18px;
$btn-font-size: 15px;

// body font style
.body-font {
  font-family: $body-font-family;
  font-weight: $normal-font-weight;
  font-style: normal;
  font-size: $body-font-size;
  line-height: 2em;
  color: $body-font-color;
  text-transform: none;

  em {
    font-style: italic;
  }

  strong {
    font-weight: $strong-font-weight;
  }

  a {
    color: $link-color;
    text-decoration: none;

    &:hover,
    &:active,
    &.active {
      text-decoration: underline;
      color: $link-color;
    }
  }
}

.light-italic {
  font-weight: $light-italic-weight;
  font-style: italic;

  strong {
    font-style: normal;
    font-weight: $strong-font-weight;
  }
}

.pullquote {
  @extend .body-font;

  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  line-height: 1.3em;
}

.text-normal-weight {
  font-weight: $normal-font-weight;
}

.header-font {
  font-family: $header-font-family;
  font-weight: $normal-font-weight;
  font-style: normal;
  text-transform: uppercase;
  color: $header-font-color;
  margin-top: 0;
  margin-bottom: .5rem;

  strong {
    font-weight: $strong-font-weight;
  }

  a {
    color: $link-color;

    &:hover,
    &:active,
    &.active {
      text-decoration: underline;
      color: $link-color;
    }
  }
}

.uncap {
  text-transform: none !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.less-line-height {
  line-height: 1.5;
}

.header-font-uncap {
  @extend .header-font;
  @extend .uncap;
}

.header-font-alt {
  @extend .header-font-uncap;

  font-family: $body-font-family;
  color: $body-font-color;
}

.h4 {
  @extend .header-font;

  margin: 0 0 (2 * $vertical-height);
  font-size: $h4-font-size;
  line-height: 18px;
}

.h5 {
  @extend .body-font;

  font-size: $h5-font-size;
  font-weight: normal;
  line-height: 1.5em;
}

// Updated to only apply styles to bootstrap wrapped classes
.container, .container-fluid, .bootstrapstyle {
  @extend .body-font;

  p {
    margin: 0 0 (2 * $vertical-height);
  }

  h1 {
    @extend .header-font;

    margin: 0 0 (2 * $vertical-height);
    letter-spacing: -1px;
    font-size: $h1-font-size;
    line-height: 1.12em;

    @include media-breakpoint-down(md) {
      font-size: $h1-font-size-md;
    }
  }

  h2 {
    @extend .header-font;

    margin: 0 0 (2 * $vertical-height);
    font-size: $h2-font-size;
    line-height: 1em;

    @include media-breakpoint-down(md) {
      font-size: $h2-font-size-md;
    }
  }

  h3 {
    @extend .header-font;

    margin: 0 0 (2 * $vertical-height);
    font-size: $h3-font-size;
    line-height: 1em;
  }

  // Primary menu header height
  h4 {
    @extend .h4;
  }
  h5 {
    @extend .h5;
  }

  // Updated to maintain consistency
  .nav-link {
    &:hover, &:focus {
      text-decoration: none;
    }
  }

  button,
  input,
  select,
  textarea {
    font-family: $body-font-family;
    font-weight: $normal-font-weight;
  }
}

// Stop fucking prefixing. - textarea[placeholder], input[placeholder]
// This breaks things in chrome though, it never stops being placeholder
// text, even if you type in the field :(
.form-control::placeholder {
  // and this doesn't really work, but tough luck
  color: $gray-light;
  font-style: italic;
}
