// 888                             888 d8b
// 888                             888 Y8P
// 888                             888
// 88888b.   .d88b.   8888b.   .d88888 888 88888b.   .d88b.  .d8888b
// 888 "88b d8P  Y8b     "88b d88" 888 888 888 "88b d88P"88b 88K
// 888  888 88888888 .d888888 888  888 888 888  888 888  888 "Y8888b.
// 888  888 Y8b.     888  888 Y88b 888 888 888  888 Y88b 888      X88
// 888  888  "Y8888  "Y888888  "Y88888 888 888  888  "Y88888  88888P'
//                                                       888
//                                                  Y8b d88P
//                                                   "Y88P"

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $color-theme-base-accent;
  font-weight: $font-weight-bold;
  line-height: $line-height-header;
  margin: 0 0 $space-m;

  .on-dark & {
    color: $color-theme-dark-text;
  }

  .on-light & {
    color: $color-theme-base-accent;
  }
}

h1,
.h1 {
  font-size: $font-size-h1;
}

h2,
.h2 {
  font-size: $font-size-h2;
}

h3,
.h3 {
  font-size: $font-size-h3;
}

h4,
.h4 {
  font-size: $font-size-h4;
}

h5,
.h5 {
  font-size: $font-size-h5;
}

h6,
.h6 {
  font-size: $font-size-h6;
}

.big-header {
  padding: $space-xxxl $space-m;
}

.header-caps {
  color: color(grey, 30);
  font-weight: $font-weight-black;
  text-transform: uppercase;
}

.header-overall {
  color: color(grey);
  font-size: 8vw;
  font-weight: $font-weight-normal;
  letter-spacing: -1px;
  margin: 0;

  @include breakpoint(m) {
    font-size: $space-xxxl;
    letter-spacing: -4px;
  }

  em {
    color: color(grey, 30);
    font-style: normal;
    font-weight: $font-weight-bold;
  }
}

.header-step,
.header-step:first-child {
  font-size: $font-size-h2;
  font-weight: $font-weight-bold;
  text-transform: uppercase;
  margin: (-$space-s) $space-m $space-s;

  @include breakpoint(l) {
    margin: (-$space-s) $space-l $space-s;
  }

  em {
    color: $color-theme-base-text;
    font-size: $font-size-xxxxl;
    font-style: normal;
    font-weight: $font-weight-black;
    margin-right: $space-m;
    white-space: nowrap;
  }
}

.header-tagline {
  font-size: $font-size-s;
  font-weight: $font-weight-normal;
  text-transform: uppercase;

  @include breakpoint(s) {
    font-size: 2.25vw;
    letter-spacing: 0.4rem;
  }

  @include breakpoint(m) {
    font-size: $font-size-m;
  }

  @include breakpoint(l) {
    margin-bottom: $space-m;
  }
}

.midhead {
  color: $color-theme-base-text;
  font-size: $font-size-xl;
  font-style: italic;
  margin-bottom: $space-m;
  margin-top: (-$space-s - $space-xs);

  + .subhead {
    color: $color-theme-base-accent;
  }
}

.subhead {
  color: $color-theme-base-text;
  font-size: $font-size-m;
  font-weight: $font-weight-bold;
  margin-bottom: $space-l;
  margin-top: (-$space-s);
}

.subhead-table {
  font-size: $font-size-xs;
  margin-top: (-$space-s);
  text-transform: uppercase;
}