/* Ghost Koenig Prose Styles
/* Adapted from: https://github.com/TryGhost/Koenig
/* -------------------------------------------------------------------- */

.prose {
    /* Reset margins */
    :where(
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        blockquote,
        aside
    ) {
        margin: 1.6rem 0 0;
        min-width: 100%;
        max-width: 100%;
    }

    /* Headings
    /* -------------------------------------------------------------------- */
    :where(
        h1,
        h2,
        h3,
        h4,
        h5,
        h6
    ) {
        font-family: var(--gh-font-body);
        font-weight: 700;
        color: var(--gray-text-contrast);
    }

    :where(
        h1 strong,
        h2 strong,
        h3 strong,
        h4 strong,
        h5 strong,
        h6 strong
    ) {
        font-weight: 800;
    }

    /* H1 should be almost the same size as the post title to suggest avoid using it */
    :where(h1) {
        font-size: 4.4rem;
        line-height: 1.15em;
        letter-spacing: -0.015em;
    }

    :where(h2) {
        font-size: 3.2rem;
        line-height: 1.2em;
        letter-spacing: -0.014em;
    }

    :where(h3) {
        font-size: 2.5rem;
        line-height: 1.3em;
        letter-spacing: -0.013em;
    }

    /* H4 is almost the same size as H3 to discourage using it */
    :where(h4) {
        font-size: 2.2rem;
        line-height: 1.35em;
        letter-spacing: -0.011em;
    }

    :where(h5) {
        font-size: 2.0rem;
        line-height: 1.35em;
        font-weight: 700;
        letter-spacing: -0.011em;
    }

    :where(h6) {
        font-size: 1.85rem;
        line-height: 1.4em;
        font-weight: 700;
        letter-spacing: -0.008em;
    }

    /* Heading spacing after content */
    :where(
        p + h1,
        p + h2,
        p + h3,
        p + h4,
        p + h5,
        p + h6,
        blockquote + h1,
        blockquote + h2,
        blockquote + h3,
        blockquote + h4,
        blockquote + h5,
        blockquote + h6,
        aside + h1,
        aside + h2,
        aside + h3,
        aside + h4,
        aside + h5,
        aside + h6,
        ul + h1,
        ul + h2,
        ul + h3,
        ul + h4,
        ul + h5,
        ul + h6,
        ol + h1,
        ol + h2,
        ol + h3,
        ol + h4,
        ol + h5,
        ol + h6
    ) {
        margin: 4.8rem 0 0;
    }

    /* Headings right after post title */
    :where(
        h1:first-child,
        h2:first-child,
        h3:first-child,
        h4:first-child,
        h5:first-child,
        h6:first-child
    ) {
        margin-top: 0rem;
    }

    /* Paragraph
    /* -------------------------------------------------------------------- */
    :where(
        p,
        blockquote,
        aside,
        ul,
        ol
    ) {
        font-family: georgia, Times, serif;
        font-weight: 400;
        line-height: 1.6em;
        font-size: 2.0rem;
    }

    :where(
        p strong,
        blockquote strong,
        aside strong,
        ul strong,
        ol strong
    ) {
        font-weight: 700;
    }

    :where(h1 + p) {
        margin: 1.0rem 0 0;
    }

    :where(h2 + p) {
        margin: 0.8rem 0 0;
    }

    :where(
        h3 + p,
        h4 + p,
        h5 + p,
        h6 + p
    ) {
        margin: 0.8rem 0 0;
    }

    :where(
        p + p,
        blockquote + p,
        aside + p,
        ul + p,
        ol + p
    ) {
        margin: 3.2rem 0 0;
    }

    /* Paragraph right after title */
    :where(p:first-child) {
        margin-top: 0rem;
    }

    /* Lists
    /* -------------------------------------------------------------------- */
    :where(
        ul,
        ol
    ) {
        margin: 1.6rem 0 0;
        padding: 0;
        min-width: 100%;
        max-width: 100%;
    }

    :where(ul li) {
        display: list-item;
        list-style-type: disc;
        margin: 1.0rem 0 0 2.4rem;
        padding: 0 0 0 0.6rem;
        line-height: 3.2rem;
    }

    :where(ul li:first-child) {
        margin: 0 0 0 2.4rem;
    }

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

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

    :where(ol li) {
        display: list-item;
        list-style-type: decimal;
        margin: 1.0rem 0 0 2.2rem;
        padding: 0 0 0 0.8rem;
        line-height: 3.2rem;
    }

    :where(ol li:first-child) {
        margin: 0 0 0 2.2rem;
    }

    :where(ol ol li) {
        list-style-type: lower-alpha;
    }

    :where(ol ol ol li) {
        list-style-type: lower-roman;
    }

    :where(
        p + ul,
        p + ol
    ) {
        margin: 3.0rem 0 0;
    }

    :where(
        ul + ul,
        ul + ol,
        ol + ul,
        ol + ol,
        blockquote + ul,
        blockquote + ol,
        aside + ul,
        aside + ol
    ) {
        margin: 3.0rem 0 0;
    }

    :where(
        h1 + ul,
        h1 + ol,
        h2 + ul,
        h2 + ol
    ) {
        margin: .8rem 0 0;
    }

    :where(
        h3 + ul,
        h3 + ol,
        h4 + ul,
        h4 + ol,
        h5 + ul,
        h5 + ol,
        h6 + ul,
        h6 + ol
    ) {
        margin: 1.2rem 0 0;
    }

    :where(
        ul ul,
        ul ol,
        ol ul,
        ol ol
    ) {
        margin: 1.0rem 0 2rem;
    }

    /* Lists right after title */
    :where(
        ul:first-child,
        ol:first-child
    ) {
        margin-top: 0rem;
    }

    /* Links
    /* -------------------------------------------------------------------- */
    :where(a) {
        color: var(--ghost-accent-color);
        text-decoration: underline;
    }

    /* Blockquote
    /* -------------------------------------------------------------------- */
    :where(blockquote p) {
        margin: 0;
    }

    :where(blockquote) {
        border-left: 0.25rem solid var(--ghost-accent-color);
        padding-left: 2.0rem;
        font-style: italic;
    }

    :where(
        h1 + blockquote,
        h2 + blockquote
    ) {
        margin: .8rem 0 0;
    }

    :where(
        h3 + blockquote,
        h4 + blockquote,
        h5 + blockquote,
        h6 + blockquote
    ) {
        margin: .4rem 0 0;
    }

    :where(
        p + blockquote,
        blockquote + blockquote
    ) {
        margin: 3.2rem 0 0;
    }

    /* Aside, Blockquote Alternative
    /* -------------------------------------------------------------------- */
    :where(aside p) {
        margin: 0;
    }

    :where(aside) {
        margin: 3.2rem 0 0;
        padding: 1rem 6rem 1.25rem;
        font-style: italic;
        text-align: center;
        font-size: 2.4rem;
        color: var(--gray-solid);
    }

    :where(
        h1 + aside,
        h2 + aside
    ) {
        margin: .8rem 0 0;
    }

    :where(
        h3 + aside,
        h4 + aside,
        h5 + aside,
        h6 + aside
    ) {
        margin: .4rem 0 0;
    }

    :where(
        p + aside,
        blockquote + aside
    ) {
        margin: 3.2rem 0 0;
    }

    /* Horizontal Rule
    /* -------------------------------------------------------------------- */
    :where(hr) {
        display: block;
        margin: 1.6rem 0;
        border: 0;
        border-top: 1px solid var(--gray-border);
    }

    /* Code
    /* -------------------------------------------------------------------- */
    :where(code) {
        font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
        background: var(--gray-bg);
        border: 1px solid var(--gray-border);
        border-radius: 2px;
        color: var(--gray-text-contrast);
        font-size: .8em;
        line-height: 1em;
        padding: .4rem .4rem .2rem;
        vertical-align: middle;
        white-space: pre-wrap;
    }

    :where(pre) {
        font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
        border-radius: 2px;
        line-height: 1.4em;
        vertical-align: middle;
        white-space: pre-wrap;
    }

    /* Images
    /* -------------------------------------------------------------------- */
    :where(img) {
        display: inline;
        max-width: 100%;
        height: auto;
    }

    :where(figure) {
        margin: 3.2rem 0;
    }

    :where(figcaption) {
        margin-top: 1rem;
        font-size: 1.4rem;
        text-align: center;
        color: var(--gray-text);
    }

    /* Tables
    /* -------------------------------------------------------------------- */
    :where(table) {
        width: 100%;
        margin: 3.2rem 0;
        border-collapse: collapse;
    }

    :where(th) {
        font-weight: 700;
        text-align: left;
        padding: 1rem;
        border-bottom: 2px solid var(--gray-border);
    }

    :where(td) {
        padding: 1rem;
        border-bottom: 1px solid var(--gray-border);
    }

    /* Responsive Typography
    /* -------------------------------------------------------------------- */
    @media (max-width: 500px) {
        :where(h1) {
            font-size: 3.2rem;
        }

        :where(h2) {
            font-size: 2.8rem;
        }

        :where(h3) {
            font-size: 2.4rem;
        }

        :where(h4) {
            font-size: 2.3rem;
        }

        :where(h5) {
            font-size: 2.0rem;
        }

        :where(h6) {
            font-size: 1.9rem;
        }

        :where(
            p,
            blockquote,
            aside,
            ul,
            ol
        ) {
            font-size: 1.8rem;
        }

        :where(aside) {
            font-size: 2.2rem;
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }

    @media (max-width: 800px) {
        :where(aside) {
            padding-left: 4rem;
            padding-right: 4rem;
        }
    }
}