/* =========
   Technical docs spacing (Inter-friendly)
   ========= */

.prose {
    line-height: 1.5;
}

.prose .post-date + p {
    padding-top: var(--space-4);
}

/* Base flow */
.prose p {
    margin: 0 0 var(--space-2);
}

/* Headings: space before, tight after */

.prose.prose h1 {
    margin: 0 0 var(--space-4);
}

/* top, right-lef, bottom */
.prose h2, .prose.prose section h2 {
    margin: var(--space-6) 0 var(--space-3);
    line-height: 1.2;
}

.prose.prose h3 {
    margin: var(--space-5) 0 var(--space-2);
    line-height: 1.2;
}

.prose h4 {
    margin: var(--space-4) 0 var(--space-1);
    line-height: 1.2;
}

/* Don’t add extra space when a heading is the first thing after something else */
.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child {
    margin-top: 0;
}

.prose.prose h2 + h3, .prose h3 + h4, .prose h4 + h5, .prose.prose h1 + h2, .prose.prose h1 + h3 {
    margin-top: 0;
}

.post-summary h1, .post-summary h2, .post-summary h3 {
    margin-bottom: 0;
    margin-top: 0;
}

/* =========
   Lists
   ========= */

/* Attach lists to preceding paragraph more tightly */
.prose p + ul,
.prose p + ol {
    margin-top: calc(var(--space-4) * -0.25); /* pulls list up slightly */
}

.prose.prose ul,
.prose ol {
    margin: 0 0 var(--space-4);
    padding-left: 1.25rem;
}

/* Compact list items but still breathable */
.prose li {
    margin: 0.25rem 0;
}

/* Nested lists: keep them tight */
.prose li > ul,
.prose li > ol {
    margin: var(--space-2) 0 var(--space-2);
}

/* Paragraphs inside list items: reduce margin so items don’t become huge blocks */
.prose li > p {
    margin: var(--space-2) 0;
}

/* If you often have code blocks inside list items, keep it compact */
.prose li pre {
    margin: var(--space-2) 0;
}

/* =========
   Inline code
   ========= */

/* Inline code should not blow up line height */

:not(pre) > code {
    font-family: ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;

    font-size: 0.9em;
    font-weight: 500;

    color: color-mix(in srgb, currentColor 85%, transparent);
    background-color: color-mix(in srgb, currentColor 6%, transparent);

    white-space: normal;
    overflow-wrap: anywhere;
}

/* =========
   Code blocks (pre)
   ========= */

pre {
    margin: var(--space-4) 0;
    padding: var(--space-2) var(--space-3);
    overflow: auto;
    /*border-radius: 0.75rem;*/

    /* prevents huge lines from stretching layouts */
    max-width: 100%;

    /* keeps long tokens from forcing horizontal scroll too often
       (optional; comment out if you prefer pure horizontal scrolling) */
    white-space: pre;

}

/* Code inside pre should inherit sizing cleanly */
pre code {
    font-size: 0.9em; /* often best for dense code */
    line-height: 1.40; /* tighter than body text */
    padding: 0;

    font-family: inherit;
    font-weight: inherit;
    background: none;
    color: inherit;
}

/* If a code block follows a paragraph, pull it a touch closer */
p + pre {
    margin-top: var(--space-3);
}

/* If a paragraph follows a code block, also pull closer (reduces “canyon”) */
pre + p {
    margin-top: var(--space-3);
}


blockquote {
    margin: var(--space-4) 0;
    padding: 0.75rem 1rem 0.75rem 1.25rem;

    border-left: 4px solid color-mix(in srgb, currentColor 20%, transparent);
    background-color: color-mix(in srgb, currentColor 4%, transparent);

    border-radius: 0.5rem;
    font-style: normal;
}

blockquote > p:last-child {
    margin-bottom: 0;
}

blockquote > p:first-child {
    margin-top: 0;
}

p + blockquote {
    margin-top: var(--space-3);
}

/* =========
   Horizontal rule (optional)
   ========= */
.prose hr {
    margin: var(--space-6) 0;
}


article.prose.prose > section {
    /*max-width: initial;*/
    text-align: left;
    /* readability cap */
    max-width: 72ch;

    /* fluid on smaller screens */
    width: min(92vw, 72ch);

    /* center the column */
    margin-inline: auto;

    /* breathing room at the edges */
    padding-inline: clamp(16px, 4vw, 32px);
    padding-top: 0;
}

.prose-embed {
    max-width: 72ch;
}

/* Used by pages with tables */
article.prose.prose-wide > section {
    max-width: 82ch;
    width: min(92vw, 82ch);
}

@media all and (min-width: 924px) and (max-width: 1052px) {
    article.prose.prose-wide > section {
        width: 100%;
    }
}

/* Used by all EDI examples*/
article.prose.prose-extra-wide > section {
    max-width: 95ch;
    width: min(92vw, 95ch);
}

@media all and (min-width: 924px) and (max-width: 1158px) {
    article.prose.prose-extra-wide > section {
        max-width: 100%;
        width: 79vw;
        margin-inline-start: 0;
        margin-inline-end: 24px;
    }
}

/* Used by EDI viewer */
article.prose.prose-super-wide > section {
    max-width: 110ch;
    width: min(92vw, 110ch);
}


@media all and (min-width: 1230px) and (max-width: 1319px) {
    article.prose.prose-super-wide.viewer > section {
        max-width: 100%;
        width: 83vw;
        margin-inline-start: 0;
        margin-inline-end: 24px;
    }
}

/* Small screen tweaks */
@media (max-width: 480px) {
    .prose {
        padding-inline: 1rem;
    }

    .prose ul,
    .prose ol {
        padding-left: 1rem;
    }

    .prose h2 {
        margin-top: 1.75rem;
    }

    .prose h3 {
        margin-top: 1.25rem;
    }

    .pre {
        padding: 0.75rem 0.875rem;
        border-radius: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    pre code {
        font-size: 0.85em;
    }

    blockquote {
        padding: 0.75rem;
        padding-left: 1rem;
        border-left-width: 3px;
    }
}