/*------------------------------------*\

    WYSIWYG

    Editor-controlled rich text: headings, blockquotes, links and
    button-style links, bold/italic, lists and alignment. Background is
    white, dark green (#1E3120) or light grey (#F1F1F1) — all three set
    in flexible-content.css.

\*------------------------------------*/

.wysiwyg {
    position: relative;
}

.wysiwyg__wrapper {
    margin-inline: auto;
    max-width: 61.25rem;
}

.wysiwyg__wrapper > :first-child {
    margin-top: 0;
}

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


/*------------------------------------*\
    Blockquote
\*------------------------------------*/

div.wysiwyg__wrapper blockquote {
    background: var(--fx-cream);
    border-left: 0.25rem solid var(--fx-green);
    color: var(--fx-dark-green);
    font-family: var(--fx-font-display);
    font-style: normal;
    margin: 2.25rem 0;
    padding: 1.5rem 1.75rem;
    position: relative;
}

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

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

.wysiwyg.bg-light-gray .wysiwyg__wrapper blockquote {
    background: var(--fx-white);
}

.wysiwyg.bg-green .wysiwyg__wrapper blockquote {
    background: rgba(255, 255, 255, 0.07);
    border-left-color: var(--fx-white);
    color: var(--fx-white);
}

/* Keep editor body copy readable on Dark Green / Light Gray / White.
   Heading and link colors for .bg-green live in flexible-content.css. */
.wysiwyg.bg-green .wysiwyg__wrapper :is(p, li, dd) {
    color: rgba(255, 255, 255, 0.88);
}

.wysiwyg.bg-white .wysiwyg__wrapper :is(p, li, dd),
.wysiwyg.bg-light-gray .wysiwyg__wrapper :is(p, li, dd) {
    color: var(--fx-text);
}


/*------------------------------------*\
    Lists
\*------------------------------------*/

.wysiwyg__wrapper ul,
.wysiwyg__wrapper ol {
    margin-bottom: 1.25em;
}

.wysiwyg__wrapper li {
    margin-bottom: 0.375em;
}

.wysiwyg__wrapper li::marker {
    color: var(--fx-green);
    font-weight: 600;
}

.wysiwyg.bg-green .wysiwyg__wrapper li::marker {
    color: rgba(255, 255, 255, 0.7);
}


/*------------------------------------*\
    Alignment (editor controlled)
\*------------------------------------*/

.wysiwyg__wrapper .aligncenter {
    text-align: center;
}

.wysiwyg__wrapper .alignright {
    text-align: right;
}

.wysiwyg__wrapper .alignleft {
    text-align: left;
}