//
// Headlines
//

// H1
%h1,
h1 {
  @extend %heading-font-heavy;

  margin-top: 0;
  margin-bottom: 0;
  color: $h1-color;
  font-size: $font-size-xl;
  line-height: $heading-line-height;
}

// H2
%h2,
h2 {
  @extend %heading-font-heavy;

  margin-top: 0;
  color: $h2-color;
  font-size: $font-size-lg;
  line-height: $heading-line-height;
}

// H3
%h3,
h3 {
  @extend %heading-font-heavy;

  margin-top: 0;
  color: $h3-color;
  font-size: $font-size-md;
  line-height: $heading-line-height;
}

// H4
%h4,
h4 {
  @extend %heading-font-bold;

  margin-top: 0;
  color: $h4-color;
  font-size: $font-size-sm;
  line-height: $heading-line-height;
}

// H5
%h5,
h5 {
  @extend %heading-font-bold;

  margin-top: 0;
  color: $h5-color;
  font-size: $font-size-base;
  line-height: $paragraph-line-height;
}

// H6
%h6,
h6 {
  @extend %heading-font-heavy;

  margin-top: 0;
  color: $h6-color;
  font-size: $font-size-base;
  line-height: $paragraph-line-height;
}

// Remove links stylings inside headlines
h1,
h2,
h3,
h4,
h5,
h6 {
  // hyphenate-limit-chars: 9 4 4;
  // hyphenate-limit-last: always;
  // hyphenate-limit-lines: 1;
  // TODO turn on when it's supported
  // see: http://clagnut.com/blog/2395

  hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;

  > a:not([class]) {
    @extend %link-unstyled;
  }
}

.teaser-section-heading {
  @extend %h2;

  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;

  // Prevent older Browsers from screwing up with max-content widths
  @supports (width: max-content) {
    width: max-content;
    border-bottom: 4px solid $teaser-section-heading-border-color;
  }
}

.section-heading--primary {
  @extend %h1;

  color: $h2-color;
  text-align: center;
}

.section-heading--secondary {
  @extend %h2;

  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
}

.section-heading--inverted {
  color: $brand-white;
}

//Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  %h1,
  h1 {
    font-size: $font-size-2xl;
  }

  // H2
  %h2,
  h2 {
    font-size: $font-size-xl;
  }

  // H3
  %h3,
  h3 {
    font-size: $font-size-lg;
  }

  // H4
  %h4,
  h4 {
    font-size: $font-size-md;
  }

  // H5
  %h5,
  h5 {
    font-size: $font-size-sm;
  }

  // H6
  %h6,
  h6 {
    font-size: $font-size-sm;
  }

  .teaser-section-heading {
    font-size: $font-size-xl;
  }
}