/** General: Typography */

:root {
  --custom-heading-decorative-line-color: var(--strapi-neutral-150);
}

h1, h2, h3, h4, h5, h6 {
  --ifm-heading-color: var(--strapi-neutral-900);
  --ifm-heading-font-weight: 600;
  --ifm-code-font-size: 70%;
}

h1, .markdown h1:first-child {
  --ifm-h1-font-size: 35px;
  // --ifm-heading-line-height: 24px; // not good
}

h2, .markdown > h2 {
  --ifm-h2-font-size: 26px;
  // --ifm-heading-line-height: 24px; // not good
}

h3, .markdown > h3 {
  --ifm-h3-font-size: var(--strapi-font-size-lg);
  @include flex-row;
}

h2 {
  position: relative;

  &:after {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 1px;
    background-color: var(--custom-heading-decorative-line-color);
  }
}

p, ul {
  img {
    display: inline-block;
    vertical-align: text-bottom;
  }
}

/** Dark mode */
@include dark {
  h1, h2, h3, h4, h5, h6 {
    --ifm-heading-color: var(--strapi-neutral-900);
  }
}
