/* || Blog Post Page Template | Overwrites */
/* Implement in style-custom-editor.css */

.blog-post-page .editor-component-wrapper {
  strong span {
    font-weight: bold;
  }

  h2 {
    font: var(--heading-1-light-font);

    &:has(+ *):not(+ p) {
      margin-bottom: 48px;
    }
  }

  a {
    text-decoration: underline;
  }

  *:not(li) + * {
    margin-top: 32px;
  }

  ol {
    padding-left: 26px;
  }

  ul {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    margin-bottom: 32px;
    border-radius: 16px;
    background-color: var(--gray-10);
    padding: 32px;
    padding-left: 24px;
    list-style: none;
    gap: 0.5lh;

    li {
      margin-left: 40px;
      position: relative;
      color: var(--gray-80);

      &::before {
        content: "";
        position: absolute;
        left: -32px;
        top: 0.3333lh;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--blue);
      }
    }
  }

  ol {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    margin-bottom: 32px;
    border-radius: 16px;
    background-color: var(--gray-10);
    padding: 32px;
    padding-left: 24px;
    /* list-style: none; */
    gap: 0.5lh;

    li {
      margin-left: 32px;
      position: relative;
      color: var(--gray-80);

      &::marker {
        font-weight: bold;
        color: var(--blue);
      }
    }
  }
}

/* || END - Blog Post Page Template */