@mixin emphasizedAnchor {
  text-decoration: underline;

  &:hover,
  &.active {
    background-color: $primary-color;
    color: $secondary-color;
  }

}

@mixin headlineAnchor {
  text-decoration: underline;
}

// Makes classes for each headline style that can be used to override the looks:
// t-h1, t-h2, ...
@each $size, $headers in $header-sizes {
  @include breakpoint($size) {
    @each $header, $font-size in $headers {
      .t-#{$header} {
        font-size: rem-calc($font-size);
      }
    }
  }
}

.t-subheader {
  font-weight: normal;
  color: $dark-gray;
}

.t-h {
  font-family: $header-font-family;
}

// Special page title header
.c-page-title {
  font-size: 2.55rem;
  margin-bottom: 0.85em;

  @include breakpoint(640px down) {
    padding-top: 0.7em;
  }
}

// Page header section with provided whitespace for clean separation from the content
.c-page-header {
  padding-bottom: 2rem;
}

// The block will have larger text for better readability. Often used with
// conjuction to .c-content-block
.c-emphasized-text {
  font-size: 1.15rem;
}

.c-emphasized-anchor {
  @include emphasizedAnchor();
}

.c-headline-anchor {
  @include headlineAnchor();
}