// ---------------------------------------------------------------------
//  Typography Styles
// ---------------------------------------------------------------------


/* A community dedicated to advancing diversity, equity, and inclusion within open source. */


.h1 {
  display: block;
  font-family: $serif;
  font-weight: 700;
  font-size: 48px !important;
  line-height: 125%;
  letter-spacing: 0;

  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }

  @include start-at($large) {
    font-size: 88px !important;
  }
}


.h2 {
  display: block;
  font-family: $serif;
  font-weight: 700;
  font-size: 48px !important;
  line-height: 1.2;
  letter-spacing: 0;

  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }

  @include start-at($large) {
    font-size: 72px !important;
  }
}


.h3 {
  display: block;
  font-family: $serif;
  font-weight: 700;
  font-size: 32px !important;
  line-height: 125%;
  letter-spacing: 0;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }

  @include start-at($large) {
    font-size: 40px !important;

    &.h3-lg {
      font-size: 48px !important;
    }
  }
}

.h3--alt {
  font-size: 28px !important;

  @include start-at($large) {
    font-size: 32px !important;
  }
}


.h4 {
  display: block;
  font-family: $serif;
  font-weight: 700;
  font-size: 20px !important;
  line-height: 125%;
  letter-spacing: 0;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.h5 {
  font-family: $sans-serif;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 1px;
  line-height: 1.25;
  text-transform: uppercase;

  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }

  @include start-at($medium) {
    font-size: 20px !important;;
  }
}

.h6 {
  font-family: $sans-serif;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1px;
  line-height: 1.25;
  text-transform: uppercase;

  @include start-at($medium) {
    font-size: 16px !important;;
  }
}





// ----------------------------------------
// Paragraph Style Mixins
// ----------------------------------------

@mixin para {
  display: block;
  font-family: $sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  line-height: $base-line-height;

  @include start-at($medium) {
    font-size: 20px;
  }
}



@mixin p-sm {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 0;

  @include start-at($medium) {
    font-size: 16px;
  }
}


// ----------------------------------------
// Paragraph Styles
// ----------------------------------------

.p,
p {
  @include para;
  //color: var(--color-text-secondary);

  + p {
    margin-top: 18px;
  }

  a {
    color: #1F44D2;
  }

  .text-white & {
    color: $white;
  }
}

.p-md {
  @include para;
  font-size: 18px;
  color: var(--color-scale-gray-5);

  @include start-at($medium) {
    font-size: 24px;
  }
}

.f2, .f3, .f4 {
  color: var(--color-scale-gray-5);
}

.f4 {
  color: var(--color-scale-gray-5);
  line-height: 1.4 !important;
}

.p-lg {
  @include para;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;

  @include start-at($large) {
    font-size: 24px;
  }
}

.p-xlg {
  @include para;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;

  @include start-at($large) {
    font-size: 32px;
  }
}



.p-sm,
small {
  @include p-sm;
}


.text-content {
  > * {
    margin-bottom: 16px;
  }
}



.long-form,
.rte {
  p {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  li {
    margin-bottom: 6px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  ul {
    list-style: initial;
    padding-left: 36px;
    margin: 24px 0;

    &:last-child {
      margin-bottom: 0;
    }
  }

  ol {
    list-style: decimal;
    padding-left: 48px;
    margin: 24px 0;
  }

}


.font-weight-800 {
  font-weight: 800 !important;
}
.font-weight-400 {
  font-weight: 400 !important;
}
.font-weight-500 {
  font-weight: 500 !important;
}

small {
  display: block;
  font-size: 12px;
  color: var(--color-scale-gray-5);

  @include start-at($large) {
    font-size: 14px;
  }
}


.text-orange {
  color: var(--color-scale-orange-4) !important;
}

.font-italic {
  font-style: italic;
}


.h1, .h2 {
    u {
    position: relative;
    text-decoration: none;
    z-index: 1;
    display: inline-flex;

    &:after {
      content: '';
      position: absolute;
      display: block;
      height: 16px;
      width: 100%;
      background: $brand;
      bottom: 16px;
      z-index: -2;
    }
  }
}


blockquote {
  position: relative;
  z-index: 1;

  > img {
    position: absolute;
    top: -12px;
    left: 12px;
    z-index: -1;
    width: 64px;
  }

  .h3 {
    @include start-at($large) {
      font-size: 32px !important;
    }
  }
}


.rte ul a {
  text-decoration: underline;
  transition: opacity $trans;

  &:hover {
    opacity: 0.6;
  }
}

.text-white p a {
  color: $white;
}
