/*
 * Page content styles (oc:8869)
 * Restores, inside the page content and in the page editor, the block styles that the
 * Tailwind preflight in main.css resets, so a page looks on the site as it does in the editor.
 * Every rule is scoped to .page-content (page.php) or .editor-styles-wrapper (block editor).
 * The containers are wrapped in :where() so each rule has the specificity of its element selector
 * alone (never zero): it wins over the preflight because this file loads after main.css, and it
 * loses to the classes of the core blocks and to the colors and alignments chosen in the editor.
 */

:is(.page-content, .editor-styles-wrapper) {
    font-family: 'Nunito', serif;
    font-size: 18px;
    line-height: 1.6;
    color: #0F172A;
    overflow-wrap: anywhere;
}

/* Vertical rhythm between blocks */
:where(.page-content, .editor-styles-wrapper) :is(p, ul, ol, blockquote, pre, figure, hr) {
    margin-top: 0;
    margin-bottom: 1.25em;
}

/* Readable line length for top-level text blocks, unless they are aligned center or right */
:where(.page-content, .editor-styles-wrapper .is-root-container) > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote):not([class*="has-text-align-"]) {
    max-width: 720px; /* about 75 characters at 18px */
}

/* Headings: same scale as the theme (font.css) */
:where(.page-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Nunito', serif;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
:where(.page-content, .editor-styles-wrapper) h1 { font-size: 48px; }
:where(.page-content, .editor-styles-wrapper) h2 { font-size: 28px; }
:where(.page-content, .editor-styles-wrapper) h3 { font-size: 24px; }
:where(.page-content, .editor-styles-wrapper) h4 { font-size: 22px; }
:where(.page-content, .editor-styles-wrapper) h5 { font-size: 20px; }
:where(.page-content, .editor-styles-wrapper) h6 { font-size: 18px; }
:where(.page-content) > :first-child { margin-top: 0; }

/* Lists */
:where(.page-content, .editor-styles-wrapper) :is(ul, ol) {
    padding-left: 1.5em;
}
:where(.page-content, .editor-styles-wrapper) ul { list-style: disc; }
:where(.page-content, .editor-styles-wrapper) ul ul { list-style: circle; }
:where(.page-content, .editor-styles-wrapper) ol { list-style: decimal; }
:where(.page-content, .editor-styles-wrapper) li > :is(ul, ol) { margin-top: 0.25em; margin-bottom: 0; }
:where(.page-content, .editor-styles-wrapper) :where(li + li) { margin-top: 0.25em; }

/* Text links (buttons keep the block styles, link colors chosen in the editor win) */
:where(.page-content, .editor-styles-wrapper) a:where(:not(.wp-element-button)) {
    color: #254A9F;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
:where(.page-content, .editor-styles-wrapper) a:where(:not(.wp-element-button)):hover {
    color: #00176C;
}
:where(.page-content, .editor-styles-wrapper) :where(.has-text-color) a:where(:not(.wp-element-button)) {
    color: inherit;
}

:where(.page-content, .editor-styles-wrapper) strong { font-weight: 700; }
:where(.page-content, .editor-styles-wrapper) em { font-style: italic; }

/* Quote block (the pullquote keeps its own style) */
:where(.page-content, .editor-styles-wrapper) :where(.wp-block-quote) {
    border-left: 4px solid #254A9F;
    padding-left: 1em;
}
:where(.page-content, .editor-styles-wrapper) :where(.wp-block-quote) cite {
    display: block;
    font-size: 16px;
    font-style: normal;
    margin-top: 0.5em;
}

/* Images and media never wider than the content */
:where(.page-content, .editor-styles-wrapper) img {
    max-width: 100%;
    height: auto;
}
:where(.page-content, .editor-styles-wrapper) :where(.wp-block-embed) iframe {
    max-width: 100%;
}
:where(.page-content, .editor-styles-wrapper) :where(.wp-has-aspect-ratio) iframe {
    width: 100%;
    height: auto;
}
:where(.page-content, .editor-styles-wrapper) :where(.wp-embed-aspect-21-9) iframe { aspect-ratio: 21 / 9; }
:where(.page-content, .editor-styles-wrapper) :where(.wp-embed-aspect-18-9) iframe { aspect-ratio: 18 / 9; }
:where(.page-content, .editor-styles-wrapper) :where(.wp-embed-aspect-16-9) iframe { aspect-ratio: 16 / 9; }
:where(.page-content, .editor-styles-wrapper) :where(.wp-embed-aspect-4-3) iframe { aspect-ratio: 4 / 3; }
:where(.page-content, .editor-styles-wrapper) :where(.wp-embed-aspect-1-1) iframe { aspect-ratio: 1 / 1; }
:where(.page-content, .editor-styles-wrapper) :where(.wp-embed-aspect-9-16) iframe { aspect-ratio: 9 / 16; }
:where(.page-content, .editor-styles-wrapper) :where(.wp-embed-aspect-1-2) iframe { aspect-ratio: 1 / 2; }

/* Code */
:where(.page-content, .editor-styles-wrapper) pre {
    background: #F1F5F9;
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 16px;
}

/* Floating images stack on small screens */
@media (max-width: 600px) {
    .page-content :is(.alignleft, .alignright) {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
}