Headings: H 4

h1, h2, h3, h4, h5, h6 {
  padding: 0;
}

h1, h2     { margin: 60px 0 20px; }
h3         { margin: 40px 0 20px; }
h4, h5, h6 { margin: 20px 0 10px; }
h1, h2, h3, h4 {
  color: var(--wai-green);
  @media print {
    color: #000;
  }
}

h1 {
  font-size: 1.5rem;
  @media (--medium) {
    font-size: 2rem;
  }
  @media (--large) {
    font-size: 2.375rem;
  }
  line-height: 1.2;
  font-weight: normal;
  margin-block-start: 0;
  & + h2 {
    margin-block-start: 0;
  }
}

h2 {
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: bold;
  border-block-end: 1px solid var(--line-grey);
  & + h3 {
    margin-block-start: 0;
  }
}

h3, h4 {
  font-size: 1.125rem;
  line-height: 1.4;
}

h3 + h4 {
  margin-block-start: 0;
}

h4 {
  font-weight: normal;
  & + h5 {
    margin-block-start: 0;
  }
}

h5 {
  font-weight: bold;
  line-height: 1.6;
  & + h6 {
    margin-block-start: 0;
  }
}

h6 {
  font-size:.875rem;
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
  &.ex:before, &.ap:before, & b {
    color: var(--w3c-blue) !important;
    font-weight: bold;
  }
}

.no-js {
  & .ex {
    counter-increment: examples;
    counter-reset: approaches;
    &:before {
      content: 'Example ' counter(examples) ': ';
    }
    &.inap {
      counter-reset: none;
    }
  }

  & .newap {
    counter-reset: approaches;
  }

  & .newex {
    counter-reset: examples;
  }


  & h2.first, & h3.first, & .newexap {
    counter-reset: examples approaches;
  }

  & .ap {
    counter-increment: approaches;
    &:before {
      content: 'Approach ' counter(approaches) ': ';
    }
  }
}