body {
  font-size: $font-size-base;

  @include media-breakpoint-up(md) {
    font-size: $font-size-base-md;
  }
}


//
// Headings
//

// Base heading overrides (just applies base breakpoint-specific font sizing)
@include font-family-heading-variant();

// Serif overrides
@include font-family-heading-variant($font-serif-heading-size-ratio, '.font-serif');

// Slab serif overrides
@include font-family-heading-variant($font-slab-serif-heading-size-ratio, '.font-slab-serif');

// Condensed overrides
@include font-family-heading-variant($font-condensed-heading-size-ratio, '.font-condensed');


//
// Display headings
//

// Base heading overrides (just applies base breakpoint-specific font sizing)
@include font-family-display-variant();

// Serif overrides
@include font-family-display-variant($font-serif-heading-size-ratio, '.font-serif');

// Slab serif overrides
@include font-family-display-variant($font-slab-serif-heading-size-ratio, '.font-slab-serif');

// Condensed overrides
@include font-family-display-variant($font-condensed-heading-size-ratio, '.font-condensed');


//
// Underline emphasis headings
//

%heading-underline {
  display: block; // Element must be block-level to display the underline correctly cross-browser
  // sass-lint:disable no-important
  font-family: $font-family-sans-serif !important; // This class is opinionated--we *always* want to display this heading using Gotham
  // sass-lint:enable no-important
  margin-bottom: $headings-margin-bottom * 2;
  padding-bottom: .65rem;
  position: relative;
  text-transform: uppercase;

  &::after {
    border-bottom: $border-width-thicker solid;
    bottom: 0;
    content: '';
    display: block;
    height: 0;
    min-width: 2rem;
    position: absolute;
    width: 1em;
  }
}

.heading-underline {
  @extend %heading-underline;

  &::after {
    border-bottom-color: $brand-primary;
  }
}

.heading-underline-inverse {
  @extend %heading-underline;

  &::after {
    border-bottom-color: $brand-inverse;
  }
}


//
// Lead text
//

// Base .lead overrides (just applies breakpoint-specific font sizing)
@include font-family-lead-variant(
  $lead-font-size,
  $lead-font-size-md,
  $lead-line-height
);

// Serif .lead overrides
@include font-family-lead-variant(
  $font-serif-lead-size,
  $font-serif-lead-size-md,
  $font-serif-lead-line-height,
  '.font-serif'
);

// Slab serif .lead overrides
@include font-family-lead-variant(
  $font-slab-serif-lead-size,
  $font-slab-serif-lead-size-md,
  $font-slab-serif-lead-line-height,
  '.font-slab-serif'
);

// There is intentionally not a .font-condensed variant included here;
// Knockout is not well-suited for use in lead text


//
// Blockquotes
//

.blockquote {
  padding: 1rem 0;
}

// Base .blockquote overrides (just applies breakpoint-specific font sizing)
@include font-family-blockquote-variant(
  $blockquote-font-size,
  $blockquote-font-size-md,
  $blockquote-line-height
);

// Serif .blockquote overrides
@include font-family-blockquote-variant(
  $font-serif-blockquote-size,
  $font-serif-blockquote-size-md,
  $font-serif-blockquote-line-height,
  '.font-serif'
);

// Slab serif .blockquote overrides
@include font-family-blockquote-variant(
  $font-slab-serif-blockquote-size,
  $font-slab-serif-blockquote-size-md,
  $font-slab-serif-blockquote-line-height,
  '.font-slab-serif'
);

// There is intentionally not a .font-condensed variant included here;
// Knockout is not well-suited for use in blockquotes

.blockquote-footer {
  font-family: $font-family-sans-serif;
  font-size: $blockquote-font-size * .75;

  @include media-breakpoint-up(md) {
    font-size: $blockquote-font-size-md * .75;
  }

  &::before {
    content: '';
  }
}

// Opposite alignment of blockquote
.blockquote-reverse {
  padding-right: 0;

  .blockquote-footer {
    &::after {
      content: ''; // nbsp, em dash
    }
  }
}

%blockquote-quotation {
  padding-bottom: 1em;
  padding-left: 2.75em;
  padding-right: 0;
  padding-top: 1.5em;
  position: relative;
  z-index: 0;

  @include media-breakpoint-up(md) {
    padding-left: 3.75em;
    padding-top: 2em;
  }

  &::before {
    content: '“';
    // Allow font family for quotation marks to be set separately
    font-family: $blockquote-quotation-mark-font-family;
    font-size: 5.25em;
    font-style: normal;
    font-weight: 600;
    left: -.05em;
    line-height: 0;
    position: absolute;
    top: .575em;
    z-index: -1;

    @include media-breakpoint-up(md) {
      top: .65em;
    }
  }
}

.blockquote-quotation {
  @extend %blockquote-quotation;

  &::before {
    color: $brand-primary;
  }
}

.blockquote-quotation-inverse {
  @extend %blockquote-quotation;

  .blockquote-footer {
    color: $gray-darker;
  }

  &::before {
    color: $brand-inverse;
  }
}


//
// Horizontal rules (dividers)
//

hr {
  border-color: $hr-border-color;
  border-width: $hr-border-width;
}

.hr-2 {
  border-width: $border-width-thicker;
}

.hr-3 {
  border-width: $border-width-thickest;
}

.hr-black {
  border-color: $black;
}

.hr-white {
  border-color: $white;
}

.hr-primary {
  border-color: $brand-primary;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {

    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .hr#{$infix}-vertical {
      border-left-style: solid;
      border-top-style: none;
      height: 100%;
      margin-bottom: 0;
      margin-left: $spacer-x;
      margin-right: $spacer-x;
      margin-top: 0;
      width: 0;
    }

    .hr#{$infix}-horizontal {
      border-left-style: none;
      border-top-style: solid;
      height: auto;
      margin-bottom: $spacer-y;
      margin-left: auto;
      margin-right: auto;
      margin-top: $spacer-y;
      width: auto;
    }

  }
}


//
// Sub, sup
//
sub {
  font-size: $sub-font-size-fixed; // IE11

  @supports (font-size: $sub-font-size) {
    font-size: $sub-font-size;
  }
}

sup {
  font-size: $sup-font-size-fixed; // IE11

  @supports (font-size: $sup-font-size) {
    font-size: $sup-font-size;
  }
}