// Heading
//
// Various heading weights and styles.
//
// .-hero   - Hero heading
// .-alpha  - Alpha heading, default appearance for <code>h1</code> tags
// .-beta   - Beta heading, default appearance for <code>h2</code> tags
// .-gamma  - Gamma heading, default appearance for <code>h3</code> tags
// .-delta  - Delta heading, default appearance for <code>h4</code>, <code>h5</code>, and <code>h6</code> tags
// .-banner - Stylized header banners.
//
// Markup: <h2 class="heading {{modifier_class}}"><span>Heading</span></h2>
//
// Styleguide Heading
h1, h2, h3, h4, h5, h6,
.heading.-hero, .heading.-alpha, .heading.-beta,
.heading.-gamma, .heading.-delta, .heading.-epsilon {
  clear: both;
  font-family: $base-font-family;
  font-weight: $weight-bold;
  line-height: $header-line-height;
  color: $purple;
  margin: 0 0 ($base-spacing / 6);
  text-rendering: optimizeLegibility;
}

.heading.-banner {
  @include clearfix;
  background: $black;
  color: $white;
  text-transform: uppercase;
  padding: gutter();
  margin: 0;

  span {
    @include media($medium) {
      @include span(12 no-gutters);
      @include push(2);
    }
  }
}

.heading.-hero {
  font-size: $font-larger;

  @include media($tablet) {
    font-size: $font-hero;
  }
}

h1, .heading.-alpha {
  font-size: $font-large;

  @include media($tablet) {
    font-size: $font-larger;
  }
}

h2, .heading.-beta {
  font-size: $font-medium;

  @include media($tablet) {
    font-size: $font-large;
  }
}

h3, .heading.-gamma {
  color: $dark-gray;
  font-size: $font-medium;
  font-weight: $weight-sbold;
}

h4, h5, h6, .heading.-delta {
  color: $dark-gray;
  font-size: $font-regular;
  font-weight: $weight-sbold;
}