/* Same as prose (as much as possible), but without flexbox */
@utility prose-div {
  & {
    max-width: 100%;

    > * + * {
      margin-top: calc(var(--spacing) * 4);
    }

    /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. (We can also use scroll-margin-top + margin-top... but this is simpler). */
    > * + :where(h2),
    > * + :where(astro-island, astro-slot) > :where(h2):first-child {
      margin-top: var(--h2-margin-top, calc(var(--spacing) * 6));
      scroll-margin-top: var(--h2-margin-top, calc(var(--spacing) * 6));
    }

    > * + :where(h3),
    > * + :where(astro-island, astro-slot) > :where(h3):first-child {
      margin-top: var(--h3-margin-top, calc(var(--spacing) * 4));
      margin-bottom: var(--h3-margin-bottom, calc(var(--spacing) * -2));
      scroll-margin-top: var(--h3-margin-top, calc(var(--spacing) * 4));
    }

    > * + :where(h4, h5, h6),
    > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
      margin-top: calc(var(--spacing) * 4);
      margin-bottom: calc(var(--spacing) * -4);
      scroll-margin-top: calc(var(--spacing) * 4);
    }

    :where(ul) {
      list-style-type: initial;
    }

    /* Basic list styles */
    :where(ul, ol),
    > :where(astro-island, astro-slot) :where(ul, ol) {
      list-style-position: outside;
      margin-left: 2em;

      :where(ul, ol) {
        margin-left: 0;
        padding-left: 2em;
      }

      li {
        font-variant-numeric: lining-nums;
      }

      li + li {
        margin-top: calc(var(--spacing));
      }

      li:has(li) + li {
        margin-top: calc(var(--spacing) * 2);
      }

      li > :where(ul, ol) {
        margin-top: calc(var(--spacing));
      }
    }

    :where(a) {
      text-decoration: underline;
    }

    > img,
    figure img {
      border: 1px solid oklch(90% 0 0deg);
      border-radius: var(--radius);
    }

    &.fancylist,
    & .fancylist {
      padding-left: 0;
    }
  }
}