/*---*\
WYSIWYG
Rich-text section for headings, links, quotes, media, buttons, and tables.

KEY FEATURES:
- White, light grey, and navy backgrounds
- Blockquote with angled left edge on tablet/desktop
- Floated images on tablet/desktop; centered full-width on mobile
- Shared table scroll styling with Ninja Tables

IMPLEMENTATION NOTES:
- Typography tokens come from custom-properties.css / global.css
- Table chrome and the mobile scrollbar live in ninja-tables.css
- Blockquote bg variants also match parent .bg-gray / .bg-dark on other blocks
\*---*/

.wysiwyg {
    overflow: hidden;
}

.wysiwyg__content > * {
    margin-top: 0;
    margin-bottom: var(--space-paragraph);
}

.wysiwyg__content > :last-child {
    margin-bottom: 0;
}

.wysiwyg__content > h2,
.wysiwyg__content > h3,
.wysiwyg__content > h4,
.wysiwyg__content > h5,
.wysiwyg__content > h6 {
    margin-top: var(--space-heading-top);
}

.wysiwyg__content > :first-child,
.wysiwyg__content > .sub-heading:first-child + h2 {
    margin-top: 0;
}

.wysiwyg__content .sub-heading + h2,
.wysiwyg__content .sub-heading + h3 {
    margin-top: var(--space-heading-gap);
}

.wysiwyg__content sup {
    font-size: 0.6em;
}

.wysiwyg a:not(.btn, .image-button--link) {
    text-decoration: underline;
    text-decoration-thickness: 10%;
    text-underline-offset: 2px;
}

.wysiwyg a:not(.btn):hover {
    opacity: 0.8;
}

.wysiwyg ul {
    list-style: none;
    padding-left: 0;
    overflow: visible;
}

.wysiwyg ul li {
    position: relative;
    list-style: none;
    padding-left: 16px;
    margin-bottom: var(--space-list-item);
}

.wysiwyg ul li::marker {
    content: none;
}

.wysiwyg ul li:last-child {
    margin-bottom: 0;
}

.wysiwyg ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--color-secondary-hover);
    border-radius: 50% 50% 0 50%;
}

.wysiwyg.bg-dark ul,
.wysiwyg.bg-dark ol,
.wysiwyg.bg-dark li {
    color: var(--color-text-inverse);
}

.wysiwyg.bg-dark ul li::before,
.wysiwyg.bg-dark .wysiwyg__content ul li::before {
    background-color: var(--color-secondary);
}

.wysiwyg ol {
    padding-left: 24px;
}

.wysiwyg ol li {
    margin-bottom: var(--space-list-item);
}

.wysiwyg ol li:last-child {
    margin-bottom: 0;
}

.wysiwyg blockquote {
    position: relative;
    margin: 0 -100vw var(--space-paragraph) 0;
    padding: 24px calc(100vw + 20px) 24px 20px;
    background-color: var(--color-surface-off-white);
    border: 0;
}

.wysiwyg.bg-gray blockquote,
.bg-gray .wysiwyg blockquote {
    background-color: var(--color-surface-white);
}

.wysiwyg.bg-dark blockquote,
.bg-dark .wysiwyg blockquote {
    background-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

.wysiwyg blockquote p {
    margin: 0;
}

.wysiwyg img.alignright,
.wysiwyg .wp-caption.alignright,
.wysiwyg img.alignleft,
.wysiwyg .wp-caption.alignleft,
.wysiwyg img.aligncenter,
.wysiwyg .wp-caption.aligncenter,
.wysiwyg img.alignnone,
.wysiwyg .wp-caption.alignnone {
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 30px auto var(--space-paragraph);
}

.wysiwyg p:has(.btn) {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    align-items: center;
}

.wysiwyg .btn + .btn {
    margin-top: 0;
    margin-left: 0;
}

@media (min-width: 768px) {
    .wysiwyg blockquote {
        clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
        padding-left: 42px;
    }

    .wysiwyg img.alignright,
    .wysiwyg .wp-caption.alignright {
        float: right;
        width: auto;
        max-width: 50%;
        margin: 0 0 var(--space-paragraph) 20px;
    }

    .wysiwyg img.alignleft,
    .wysiwyg .wp-caption.alignleft {
        float: left;
        width: auto;
        max-width: 50%;
        margin: 0 20px var(--space-paragraph) 0;
    }

    .wysiwyg p:has(.btn) {
        gap: 18px 28px;
    }
}

@media (min-width: 1200px) {
    .wysiwyg ul li::before {
        top: 9.5px;
    }

    .wysiwyg p:has(.btn) {
        gap: 28px;
    }
}