//
// Headlines
//

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

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

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

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

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

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

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

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

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

  margin-top: 0;
  margin-bottom: $spacer-xs;
  line-height: $heading-line-height;
  color: $h5-color;
  font-size: $font-size-base;
}

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

  margin-top: 0;
  margin-bottom: $spacer-xs;
  line-height: $heading-line-height;
  color: $h6-color;
  font-size: $font-size-base;
}

// Remove links stylings inside headlines
h1,
h2,
h3,
h4,
h5,
h6 {
  & > a:not([class]) {
    @extend %link-unstyled;
  }
}

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

  margin: 0 auto $spacer-base;
  text-align: center;
  text-transform: uppercase;
  font-size: $font-size-lg;
}

.upcase-heading {
  @extend %h5;

  margin: 0 auto $spacer-md;
  text-transform: uppercase;
  font-size: $font-size-xxl;
}

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

  .teaser-section-heading__full-width {
    border: 0;
    width: 100%;
  }
}

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

  margin-top: $spacer-lg;
  margin-bottom: $spacer-base;
  text-align: center;
  color: $h2-color;
}

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

  margin-bottom: $spacer-sm;
  border-top: 8px solid $section-heading-border-color;
  padding-top: $spacer-sm;
}

.section-heading--tertiary {
  @extend %h5;

  margin-bottom: $spacer-base;
}

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

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

  .teaser-section-heading {
    margin-bottom: $spacer-lg;
    font-size: $font-size-xl;
  }
}