/**
 * @file
 * Typography
 * Base typography for the theme
 */

//## Headers
h1 {
  @include fontsize(42px);
  font-weight: 800;
  line-height: 1;
  font-family: $font-acumen-cond;
  font-style: normal;

  @media (min-width: $break-medium) {
    @include fontsize(48px);
    line-height: 1.2;
  }

  @media (min-width: $break-large) {
    @include fontsize(72px);
    line-height: 1.1;
  }
}

h2 {
  margin: 48px 0 16px;
  @include fontsize(28px);
  line-height: 1;
  font-family: $font-acumen-cond;
  font-style: normal;
  font-weight: 800;

  @media (min-width: $break-medium) {
    margin: 64px 0 24px;
    @include fontsize(42px);
  }

  @media (min-width: $break-large) {
    margin: 80px 0 32px;
    @include fontsize(54px);
  }
}

h3 {
  margin: 35px 0 16px;
  @include fontsize(24px);
  font-weight: 800;
  line-height: 1.3;
  font-family: $font-acumen-cond;
  font-style: normal;

  @media (min-width: $break-medium) {
    margin: 64px 0 24px;
    @include fontsize(36px);
  }

  @media (min-width: $break-large) {
    margin: 80px 0 32px;
    @include fontsize(42px);
    line-height: 1;
  }
}

h4 {
  margin: 35px 0 16px;
  @include fontsize(21px);
  font-weight: 800;
  line-height: 1.3;
  font-family: $font-acumen-cond;
  font-style: normal;

  @media (min-width: $break-medium) {
    margin: 64px 0 24px;
    @include fontsize(28px);
  }

  @media (min-width: $break-large) {
    margin: 80px 0 32px;
    @include fontsize(38px);
    line-height: 1;
  }
}

h5 {
  margin: 35px 0 16px;
  @include fontsize(18px);
  font-weight: 600;
  line-height: 1.3;
  font-family: $font-acumen;
  font-style: normal;

  @media (min-width: $break-medium) {
    margin: 64px 0 24px;
    @include fontsize(22px);
    line-height: 1.2;
  }

  @media (min-width: $break-large) {
    margin: 80px 0 32px;
    @include fontsize(24px);
    line-height: 1.3;
  }
}

h6 {
  margin: 35px 0 16px;
  @include fontsize(16px);
  font-weight: 800;
  line-height: 1.3;
  font-family: $font-acumen-cond;
  font-style: normal;

  @media (min-width: $break-medium) {
    margin: 64px 0 24px;
    @include fontsize(18px);
    line-height: 1;
  }

  @media (min-width: $break-large) {
    margin: 80px 0 32px;
    @include fontsize(20px);
    line-height: 1.25;
  }
}

// ## Script font styles
.script {
  @include fontsize(18px);
  line-height: .9;
  font-weight: 600;
  font-family: $font-handwriting;
  font-style: normal;

  @media (min-width: $break-medium) {
    @include fontsize(28px);
  }

  @media (min-width: $break-large) {
    @include fontsize(36px);
  }
}

//## Body Copy
body {
  @include fontsize(16px);
  line-height: 1.5rem;
  font-weight: 500;

  @media (min-width: $break-medium) {
    line-height: 1.625rem;
  }

  @media (min-width: $break-large) {
    @include fontsize(18px);
    line-height: 1.6rem;
    font-weight: 500;
  }
}

//## Paragraphs
p {
  margin: 0 0 1em;

  &:empty {
    display: none;
  }
}

strong {
  font-weight: 700;
}

//## List items
ul {
  padding-left: 1.25rem;
  margin: 1rem 0;
  list-style: none;

  > li {
    padding-left: 1.875rem;
    margin: 0 0 1rem 0;
    list-style-position: inside;
    position: relative;

    ul, ol {
      margin: 1rem 0 0;
    }

    &:before {
      content: '';
      width: 9px;
      height: 9px;
      border: 3px solid $color-green;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 0.39em;

      @media (min-width: $break-large) {
        top: 0.45em;
      }
    }
  }
}

ol {
  padding-left: 1.25rem;
  margin: 1rem 0;
  counter-reset: item;
  list-style-type: none;

  > li:before {
    content: counter(item) ".";
    counter-increment: item;
    color: $color-green;
    font-weight: 700;
    margin-right: 0.875rem;
  }

  > li {
    display: block;
    padding-left: 6px;
    margin: 0 0 1rem 0;
    list-style-position: inside;

    ol {
      margin: 1rem 0 0;
      padding-left: 20px;
    }

    ul {
      margin: 1rem 0 0;
    }
  }

}