/* Extra styling for bare tags inside .prose (content authored via plain editor tags, no custom classes) */

.prose > ul:not(.list),
.prose > ol {
    list-style: none;
    padding-left: 0;
}

.prose > ul:not(.list) > li,
.prose > ol > li {
    position: relative;
    padding-left: 1.75rem;
    margin-top: 0.75rem;
}

.prose > ul:not(.list) > li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-green-700);
    font-weight: 700;
}

.prose > ol {
    counter-reset: prose-ol;
}

.prose > ol > li {
    counter-increment: prose-ol;
}

.prose > ol > li::before {
    content: counter(prose-ol) ".";
    color: var(--color-green-700);
    font-weight: 700;
}

.prose > img:not([class]) {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 1rem 0.75rem 0.75rem 0;
}

.prose > table:not([class]) {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
}

.prose > table:not([class]) th,
.prose > table:not([class]) td {
    border: 1px solid var(--color-border-medium-emphasis);
    padding: 0.625rem 0.875rem;
    text-align: left;
}

.prose > table:not([class]) th {
    background: var(--color-surface-2);
    font-weight: 600;
}

/* Same list/image/table icons for .caption-content, without .prose's color/font-size overrides */

/* Caption sits inside flex containers (.hero__content etc.) that space their direct children
   via row-gap/gap. display:contents removes this wrapper div from the box tree so its own
   children (h2/p/ul/...) become those direct flex children again and keep that spacing. */
.caption-content {
    display: contents;
}

.caption-content > ul:not(.list),
.caption-content > ol {
    list-style: none;
    padding-left: 0;
}

.caption-content > ul:not(.list) > li {
    display: grid;
    grid-template-columns: 0.75rem 1fr;
    align-items: center;
    column-gap: 0.5rem;
    margin-top: 0.75rem;
}

.caption-content > ul:not(.list) > li > svg,
.caption-content ul.list > li.list__item > svg {
    color: var(--color-green-700);
}

.caption-content > ol > li {
    position: relative;
    padding-left: 1.75rem;
    margin-top: 0.75rem;
}

.caption-content > ol {
    counter-reset: caption-ol;
}

.caption-content > ol > li {
    counter-increment: caption-ol;
}

.caption-content > ol > li::before {
    content: counter(caption-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-green-700);
    font-weight: 700;
}

.caption-content > img:not([class]) {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 1rem 0.75rem 0.75rem 0;
}

.caption-content > table:not([class]) {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
}

.caption-content > table:not([class]) th,
.caption-content > table:not([class]) td {
    border: 1px solid var(--color-border-medium-emphasis);
    padding: 0.625rem 0.875rem;
    text-align: left;
}

.caption-content > table:not([class]) th {
    background: var(--color-surface-2);
    font-weight: 600;
}

/* On dark/colored hero backgrounds the green arrow/counter blends into the background */

.caption-content--on-color > ul:not(.list) > li > svg,
.caption-content--on-color ul.list > li.list__item > svg,
.caption-content--on-color > ol > li::before {
    color: var(--color-text-on-color-high-emphasis);
}