/*
  ----------------------------------------
  Typography
  ----------------------------------------
*/

@layer styles {
  /* General */
  body,
  p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.2;
    overflow-wrap: break-word;
  }

  p {
    margin-top: var(--space-sm);
    max-width: var(--max-w-text);
  }

  h1 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    margin-top: var(--space-2xl);
    max-width: var(--max-w-text);
    font-weight: 800;
    line-height: 0.8;
  }

  h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    margin-top: var(--space-xl);
    max-width: var(--max-w-text);
    font-weight: 700;
    line-height: 0.8;
  }

  h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-top: var(--space-lg);
    max-width: var(--max-w-text);
    font-weight: 700;
    line-height: 0.8;
  }

  h4 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    margin-top: var(--space-md);
    max-width: var(--max-w-text);
    font-weight: 700;
    line-height: 0.8;
  }

  a {
    color: var(--link);
    text-decoration: underline;
  }

  blockquote {
    margin-top: var(--space-md);
    padding-left: var(--space-sm);
    border-left: 6px solid var(--brand-1);
  }

  mark {
    background-color: var(--highlight);
  }

  :not(pre) > code {
    font-size: 90%;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    background-color: var(--lighter);
    border-radius: var(--rounded);
    color: var(--dark);
    white-space: nowrap;
  }

  /* Lists - styled by default, use .list-none class to reset */
  ul:not(.list-none),
  ol:not(.list-none) {
    display: flex;
    flex-direction: column;
    justify-content: items-around;
    gap: var(--space-sm);
    padding: var(--space-md);
    max-width: var(--max-w-text);
    list-style: none;
  }

  ul:not(.list-none) {
    li {
      position: relative;
      font-size: var(--text-base);
      line-height: 1.2;
      padding-left: 1.2em;
      max-width: var(--max-w-text);
    }

    li::before {
      position: absolute;
      top: -0.15em;
      color: var(--brand-1);
      left: calc(var(--space-2xs) * -1);
      font-size: 140%;
      content: "✦";
    }
  }

  ol:not(.list-none) {
    li {
      position: relative;
      font-size: var(--text-base);
      line-height: 1.3;
      padding-left: 1.3rem;
      counter-increment: step-counter;
    }

    li::before {
      display: flex;
      position: absolute;
      top: 0;
      left: -0.4rem;
      font-weight: 600;
      line-height: 0.8;
      width: 1.3rem;
      height: 1.3rem;
      border-radius: 9999px;
      background-color: var(--brand-1);
      align-items: center;
      justify-content: center;
      font-size: 70%;
      color: var(--white);
      content: counter(step-counter);
    }
  }

  /* Tables - styled by default, wrap in a <div> for rounded corners */
  table {
    min-width: 100%;
    font-size: var(--text-sm);
    white-space: nowrap;
    background-color: var(--white);

    thead {
      border-bottom: 1px solid var(--lighter);
    }

    th {
      font-size: var(--text-base);
      background-color: var(--lighter);
      padding: var(--space-2xs);
      font-weight: 600;
      color: var(--darker);
      text-align: left;
    }

    tr {
      border-bottom: 1px solid var(--lighter);

      &:last-child {
        border: none;
      }

      td {
        padding: var(--space-2xs);
      }
    }
  }

  /* Table wrapper for rounded corners */
  div:has(> table) {
    display: block;
    min-width: 100%;
    overflow-x: auto;
    border-radius: var(--rounded);
    border: 1px solid var(--light);
    min-height: 0;
  }
}