/*
 * Prose: editor-written content (pages, article bodies, transcripts,
 * text messages). The same file styles the front end and the editors:
 *
 *  - .reading            the wrapper around the_content() on the front end
 *                        (and the classic editor's body, see
 *                        asw_tiny_mce_body_class())
 *  - .reading--page      standard pages (About, Contact, ...)
 *  - .is-root-container  the block editor's content root; pages are the
 *                        only content written in the block editor, so it
 *                        takes the page rules
 *
 * add_editor_style() prefixes every selector with .editor-styles-wrapper,
 * which is why the editor needs its own selector instead of .reading.
 * Colours come from the theme.json palette, with fallbacks for the
 * classic editor.
 */

/* Body text ------------------------------------------------------------ */

.reading,
.is-root-container {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 21px;
    line-height: 1.65;
    color: var(--wp--preset--color--ink, #15211D);
}

.reading > *,
.is-root-container > * {
    margin-top: 0;
    margin-bottom: 22px;
}

.reading > :last-child,
.is-root-container > :last-child {
    margin-bottom: 0;
}

.reading a,
.is-root-container a {
    color: var(--wp--preset--color--accent, #1E5A4C);
}

/* Small print (the editor's "Small" size: intro notes, copyright lines)
   looks like the theme's other small text: sans, muted. The size itself is
   the theme.json "small" preset, which core applies with this class. */

.reading .has-small-font-size,
.is-root-container .has-small-font-size {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: var(--wp--preset--font-size--small, 14px);
    line-height: 1.5;
    color: var(--wp--preset--color--muted, #4F5E58);
}

/* Subheadings: articles and transcripts use the semibold serif; pages use
   the regular weight, a size up. */

.reading h2,
.reading h3,
.reading h4,
.reading h5,
.reading h6 {
    margin: 36px 0 14px;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-weight: 600;
    line-height: 1.2;
}

.reading h2 { font-size: 28px; }
.reading h3 { font-size: 24px; }
.reading h4,
.reading h5,
.reading h6 { font-size: 21px; }

.reading--page h2,
.reading--page h3,
.is-root-container h2,
.is-root-container h3,
.is-root-container h4 {
    margin: 40px 0 14px;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-weight: 400;
    line-height: 1.2;
}

.reading--page h2,
.is-root-container h2 { font-size: 30px; }

.reading--page h3,
.is-root-container h3 { font-size: 24px; }

.is-root-container h4 { font-size: 21px; font-weight: 600; }

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

.reading ul,
.reading ol,
.is-root-container ul,
.is-root-container ol {
    padding-left: 1.3em;
}

.reading li + li,
.is-root-container li + li {
    margin-top: 6px;
}

/* Quotes: italic serif, indented, no border. On pages the quote is the
   verse style (pine green, reference in small sans below). */

.reading blockquote,
.is-root-container blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 0 24px;
    border: 0;
    background: none;
    font-style: italic;
    color: var(--wp--preset--color--ink-soft, #3C4A45);
}

.reading blockquote p,
.is-root-container blockquote p {
    margin: 0;
}

.reading blockquote p + p,
.is-root-container blockquote p + p {
    margin-top: 12px;
}

.reading--page blockquote,
.is-root-container blockquote {
    padding-left: 0;
    font-size: clamp(20px, 2.6vw, 26px);
    line-height: 1.3;
    color: var(--wp--preset--color--accent, #1E5A4C);
}

.reading blockquote cite,
.is-root-container blockquote cite {
    display: block;
    margin-top: 6px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--muted, #4F5E58);
}

/* Rules: the Separator block is the 2px ink rule used under page intros. */

.reading hr,
.is-root-container hr {
    height: 0;
    margin: 32px 0 28px;
    border: 0;
    border-top: 1px solid var(--wp--preset--color--line, #D5DBD6);
    background: none;
    opacity: 1;
}

.reading--page hr,
.is-root-container hr {
    border-top: 2px solid var(--wp--preset--color--ink, #15211D);
}

/* Images, captions, embeds ------------------------------------------- */

.reading figure,
.is-root-container figure {
    margin-left: 0;
    margin-right: 0;
}

.reading img,
.is-root-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.reading figcaption,
.is-root-container figcaption {
    margin-top: 8px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    color: var(--wp--preset--color--muted, #4F5E58);
}

.reading iframe {
    max-width: 100%;
}

/* Tables: a ruled list, like the Contact page's. The first column is a
   small uppercase label. */

.reading table,
.is-root-container table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--wp--preset--color--ink, #15211D);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.5;
}

.reading .wp-block-table,
.is-root-container .wp-block-table {
    overflow-x: auto;
}

.reading .wp-block-table table,
.is-root-container .wp-block-table table {
    border-top: 2px solid var(--wp--preset--color--ink, #15211D);
}

.reading th,
.reading td,
.is-root-container th,
.is-root-container td {
    padding: 16px 16px 16px 0;
    border: 0;
    border-bottom: 1px solid var(--wp--preset--color--line, #D5DBD6);
    text-align: left;
    vertical-align: baseline;
}

.reading th,
.reading td:first-child,
.is-root-container th,
.is-root-container td:first-child {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #4F5E58);
}

.reading td:last-child,
.is-root-container td:last-child {
    padding-right: 0;
}

/* Buttons: the Button block's default is the filled primary button
   (colours from theme.json); "Outline" is the outlined button. */

.reading .wp-block-buttons,
.is-root-container .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 16px;
}

.reading .wp-block-button__link,
.is-root-container .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 6px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.reading .is-style-outline > .wp-block-button__link,
.is-root-container .is-style-outline > .wp-block-button__link {
    padding: 0 24px;
    border: 1px solid var(--wp--preset--color--accent, #1E5A4C);
    background: transparent;
    color: var(--wp--preset--color--accent, #1E5A4C);
}

.reading .is-style-outline > .wp-block-button__link:hover,
.is-root-container .is-style-outline > .wp-block-button__link:hover {
    background: #E9EDE9;
    color: var(--wp--preset--color--accent-dark, #123B31);
}

@media (max-width: 480px) {
    .reading,
    .is-root-container {
        font-size: 19px;
        line-height: 1.6;
    }
}