@mixin emphasizedAnchor {
  text-decoration: underline;

  &.active {
    font-weight: bold;
  }

}

@mixin headlineAnchor {
  // &:hover {
  //   text-decoration: underline;
  // }
}

@mixin headerStyle($header, $type: main) {
  $settings: map-get($headers, $type);

  @each $breakpointSize, $headers in map-get($settings, sizes) {
    @include breakpoint($breakpointSize) {
      font-family: #{map-get($settings, family)};
      font-size: rem-calc(map-get($headers, $header));
      font-weight: map-get($settings, weight);

      $letter-spacing: map-get($settings, letter-spacing);

      @if ($letter-spacing) {
        letter-spacing: $letter-spacing;
      }
    }
  }
}

@function getHeaderSettings($prop, $type: main) {
  $settings: map-get($headers, $type);
  @return map-get($settings, $prop);
}

@mixin fontFeatures() {
  font-feature-settings: "kern", "onum", "liga";
  font-kerning: auto;
  text-rendering: optimizeLegibility;
}

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

// Special page title header
.c-page-title {
  margin-bottom: 0;

  @include headerStyle('h2', super);
}

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

.c-top-sub-nav + .page-content .o-section,
.c-top-sub-nav + .page-content .c-page-header {
  @include breakpoint(medium) {
    padding-top: 0;
  }
}

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

.t-font-features {
  @include fontFeatures();
}