/*
 * Agent200 — post content.
 *
 * Styles the HTML the classic editor (TinyMCE) writes into post_content: text, headings, lists,
 * quotes, links, images with alignment and captions, galleries, code, tables, embeds and media.
 * The site's templates use Tailwind; post_content cannot, so it is styled here by element.
 *
 * Loaded twice (inc/blog.php): on single posts, scoped to .prose-post, and as the classic
 * editor's editor style, where TinyMCE's iframe body is .mce-content-body. Keep every rule under
 * :is(.prose-post, .mce-content-body) so the editor shows what the site will.
 * Colours are literal: main.css (and its custom properties) is not loaded inside the editor.
 */

:is(.prose-post, .mce-content-body) {
    --c-ink-950: #0A0D0C;
    --c-ink-700: #333A36;
    --c-ink-600: #4C544F;
    --c-ink-500: #6C746E;
    --c-ink-400: #959C96;
    --c-ink-200: #DFE2DE;
    --c-ink-100: #ECEEEB;
    --c-ok-700: #087344;
    --c-ok-600: #079153;
    --c-ok-500: #12B368;
    --c-ok-100: #D3F8E1;
    --c-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    color: var(--c-ink-700);
    font-size: 1.0625rem;
    line-height: 1.75;
    overflow-wrap: break-word;
}

@media (min-width: 640px) {
    :is(.prose-post, .mce-content-body) { font-size: 1.125rem; }
}

/* The classic editor's iframe: same face, paper, and the reading column of the site. */
.mce-content-body {
    max-width: 44rem;
    margin: 2rem auto;
    padding: 0 1.25rem;
    background: #FAFAF8;
    font-family: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Floated images never poke out of the post. */
.prose-post::after { content: ""; display: table; clear: both; }

:is(.prose-post, .mce-content-body) > :first-child { margin-top: 0; }
:is(.prose-post, .mce-content-body) > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Text */

:is(.prose-post, .mce-content-body) :is(p, address) {
    margin: 0 0 1.5em;
    text-wrap: pretty;
}

:is(.prose-post, .mce-content-body) :is(h1, h2, h3, h4, h5, h6) {
    clear: both;
    color: var(--c-ink-950);
    font-weight: 600;
    text-wrap: balance;
    scroll-margin-top: 6rem;
}

/* Poppins collides below ~1.18 leading at display sizes. */
:is(.prose-post, .mce-content-body) h1 { margin: 2em 0 0.6em; font-size: 2.125em; line-height: 1.18; letter-spacing: -0.025em; }
:is(.prose-post, .mce-content-body) h2 { margin: 2.25em 0 0.6em; font-size: 1.6em; line-height: 1.22; letter-spacing: -0.02em; }
:is(.prose-post, .mce-content-body) h3 { margin: 2em 0 0.5em; font-size: 1.3em; line-height: 1.3; letter-spacing: -0.015em; }
:is(.prose-post, .mce-content-body) h4 { margin: 1.75em 0 0.5em; font-size: 1.1em; line-height: 1.4; letter-spacing: -0.01em; }
:is(.prose-post, .mce-content-body) h5 { margin: 1.75em 0 0.5em; font-size: 1em; line-height: 1.5; }
:is(.prose-post, .mce-content-body) h6 { margin: 1.75em 0 0.5em; font-size: 0.9em; line-height: 1.5; color: var(--c-ink-600); }

/* A heading straight after another needs less air. */
:is(.prose-post, .mce-content-body) :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-top: 0.75em; }

:is(.prose-post, .mce-content-body) a {
    color: var(--c-ok-700);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 160ms ease;
}

:is(.prose-post, .mce-content-body) a:hover { color: var(--c-ok-600); text-decoration-thickness: 2px; }
:is(.prose-post, .mce-content-body) :is(h1, h2, h3, h4, h5, h6) a { color: inherit; }

:is(.prose-post, .mce-content-body) :is(strong, b) { color: var(--c-ink-950); font-weight: 600; }
:is(.prose-post, .mce-content-body) :is(em, i, cite, dfn) { font-style: italic; }
:is(.prose-post, .mce-content-body) :is(del, s, strike) { color: var(--c-ink-500); text-decoration: line-through; }
:is(.prose-post, .mce-content-body) ins { text-decoration: underline; text-decoration-color: var(--c-ok-500); text-underline-offset: 3px; }
:is(.prose-post, .mce-content-body) mark { background: var(--c-ok-100); color: var(--c-ink-950); padding: 0.05em 0.2em; border-radius: 0.25em; }
:is(.prose-post, .mce-content-body) small { font-size: 0.85em; }
:is(.prose-post, .mce-content-body) abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
:is(.prose-post, .mce-content-body) address { font-style: normal; }
:is(.prose-post, .mce-content-body) :is(sup, sub) { position: relative; font-size: 0.72em; line-height: 0; vertical-align: baseline; }
:is(.prose-post, .mce-content-body) sup { top: -0.5em; }
:is(.prose-post, .mce-content-body) sub { bottom: -0.25em; }

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

:is(.prose-post, .mce-content-body) :is(ul, ol) { margin: 0 0 1.5em; padding-left: 1.5em; }
:is(.prose-post, .mce-content-body) ul { list-style: disc; }
:is(.prose-post, .mce-content-body) ol { list-style: decimal; }
:is(.prose-post, .mce-content-body) ul ul { list-style: circle; }
:is(.prose-post, .mce-content-body) ol ol { list-style: lower-alpha; }
:is(.prose-post, .mce-content-body) li { margin: 0 0 0.5em; padding-left: 0.375em; }
:is(.prose-post, .mce-content-body) li > :is(ul, ol) { margin: 0.5em 0 0; }
:is(.prose-post, .mce-content-body) li > p { margin-bottom: 0.5em; }
:is(.prose-post, .mce-content-body) ul > li::marker { color: var(--c-ink-400); }
:is(.prose-post, .mce-content-body) ol > li::marker { color: var(--c-ink-500); font-weight: 500; font-variant-numeric: tabular-nums; }

:is(.prose-post, .mce-content-body) dl { margin: 0 0 1.5em; }
:is(.prose-post, .mce-content-body) dt { color: var(--c-ink-950); font-weight: 600; }
:is(.prose-post, .mce-content-body) dd { margin: 0.25em 0 1em; color: var(--c-ink-600); }

/* ---------------------------------------------------------------- Quotes and rules */

:is(.prose-post, .mce-content-body) blockquote {
    clear: both;
    margin: 2.25em 0;
    padding: 0.125em 0 0.125em 1.5em;
    border-left: 2px solid var(--c-ok-500);
    color: var(--c-ink-950);
    font-size: 1.2em;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

:is(.prose-post, .mce-content-body) blockquote p { margin-bottom: 0.75em; }
:is(.prose-post, .mce-content-body) blockquote > :last-child { margin-bottom: 0; }

:is(.prose-post, .mce-content-body) blockquote cite {
    display: block;
    margin-top: 0.75em;
    color: var(--c-ink-500);
    font-size: 0.75em;
    font-style: normal;
    letter-spacing: 0;
}

:is(.prose-post, .mce-content-body) hr {
    clear: both;
    height: 0;
    margin: 3em 0;
    border: 0;
    border-top: 1px solid var(--c-ink-200);
}

/* ---------------------------------------------------------------- Images and captions */

:is(.prose-post, .mce-content-body) img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    vertical-align: middle;
}

/* An image on its own line (the classic editor wraps it in a <p>) gets room around it. */
:is(.prose-post, .mce-content-body) p:has(> img:only-child),
:is(.prose-post, .mce-content-body) p:has(> a:only-child > img:only-child) { margin: 2em 0; }

:is(.prose-post, .mce-content-body) figure { margin: 2em 0; max-width: 100%; }

:is(.prose-post, .mce-content-body) .wp-caption { max-width: 100%; }
:is(.prose-post, .mce-content-body) .wp-caption img { display: block; margin: 0; }

:is(.prose-post, .mce-content-body) :is(.wp-caption-text, .wp-caption-dd, figcaption, .gallery-caption) {
    margin: 0.75rem 0 0;
    color: var(--c-ink-500);
    font-size: 0.8125rem;
    line-height: 1.55;
}

:is(.prose-post, .mce-content-body) .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
:is(.prose-post, .mce-content-body) figure.aligncenter { display: table; }
:is(.prose-post, .mce-content-body) .aligncenter :is(.wp-caption-text, figcaption) { text-align: center; }

/* Floats only where there is room for text beside them; on phones they stack. */
:is(.prose-post, .mce-content-body) :is(.alignleft, .alignright) { display: block; margin: 2em auto; }

@media (min-width: 640px) {
    :is(.prose-post, .mce-content-body) .alignleft { float: left; max-width: 50%; margin: 0.375em 2em 1.25em 0; }
    :is(.prose-post, .mce-content-body) .alignright { float: right; max-width: 50%; margin: 0.375em 0 1.25em 2em; }
}

/* ---------------------------------------------------------------- Galleries ([gallery]) */

:is(.prose-post, .mce-content-body) .gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 2em 0;
}

@media (min-width: 640px) {
    :is(.prose-post, .mce-content-body) .gallery-columns-1 { grid-template-columns: minmax(0, 1fr); }
    :is(.prose-post, .mce-content-body) .gallery-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    :is(.prose-post, .mce-content-body) .gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    :is(.prose-post, .mce-content-body) :is(.gallery-columns-5, .gallery-columns-6, .gallery-columns-7, .gallery-columns-8, .gallery-columns-9) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

:is(.prose-post, .mce-content-body) .gallery-item { margin: 0; }
:is(.prose-post, .mce-content-body) .gallery-icon img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.75rem; }
:is(.prose-post, .mce-content-body) .gallery br { display: none; }

/* ---------------------------------------------------------------- Code */

:is(.prose-post, .mce-content-body) :is(code, kbd, samp, tt, var) {
    font-family: var(--c-mono);
    font-size: 0.85em;
    font-style: normal;
}

:is(.prose-post, .mce-content-body) :not(pre) > :is(code, samp, tt) {
    padding: 0.15em 0.4em;
    border-radius: 0.375rem;
    background: var(--c-ink-100);
    color: var(--c-ink-950);
}

:is(.prose-post, .mce-content-body) kbd {
    padding: 0.1em 0.45em;
    border-radius: 0.375rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--c-ink-200), inset 0 -1px 0 var(--c-ink-200);
    color: var(--c-ink-950);
}

/* Same surface as the site's code windows. */
:is(.prose-post, .mce-content-body) pre {
    clear: both;
    margin: 2em 0;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    border-radius: 1rem;
    background: #0A0D0C;
    color: #D5DAD6;
    font-family: var(--c-mono);
    font-size: 0.8125rem;
    line-height: 1.75;
    white-space: pre;
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

:is(.prose-post, .mce-content-body) pre code { padding: 0; background: none; color: inherit; font-size: inherit; }

/* ---------------------------------------------------------------- Tables */

:is(.prose-post, .mce-content-body) table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

:is(.prose-post, .mce-content-body) caption { margin-bottom: 0.75rem; color: var(--c-ink-500); font-size: 0.8125rem; text-align: left; }

:is(.prose-post, .mce-content-body) th {
    padding: 0 1rem 0.75rem 0;
    border-bottom: 1px solid var(--c-ink-400);
    color: var(--c-ink-950);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    vertical-align: bottom;
}

:is(.prose-post, .mce-content-body) td {
    padding: 0.875rem 1rem 0.875rem 0;
    border-bottom: 1px solid var(--c-ink-200);
    vertical-align: top;
}

:is(.prose-post, .mce-content-body) tbody th { border-bottom-color: var(--c-ink-200); vertical-align: top; padding-top: 0.875rem; }
:is(.prose-post, .mce-content-body) :is(td, th) > :last-child { margin-bottom: 0; }

/* Wide tables scroll sideways on phones instead of widening the page. */
@media (max-width: 639px) {
    .prose-post table { display: block; overflow-x: auto; scrollbar-width: thin; }
}

/* ---------------------------------------------------------------- Embeds and media */

:is(.prose-post, .mce-content-body) :is(iframe, embed, object, video, audio) { max-width: 100%; }

/* oEmbed video players: full width at 16:9, whatever size core printed. */
:is(.prose-post, .mce-content-body) iframe:is([src*="youtube.com"], [src*="youtube-nocookie.com"], [src*="vimeo.com"], [src*="loom.com"], [src*="wistia"]) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 2em 0;
    border: 0;
    border-radius: 1rem;
}

:is(.prose-post, .mce-content-body) video { display: block; width: 100%; height: auto; border-radius: 1rem; }
:is(.prose-post, .mce-content-body) .wp-video { width: 100% !important; margin: 2em 0; }
:is(.prose-post, .mce-content-body) .wp-audio-shortcode { width: 100%; margin: 1.5em 0; }
:is(.prose-post, .mce-content-body) .wp-embedded-content { max-width: 100%; }

/* ---------------------------------------------------------------- Utility classes core prints */

:is(.prose-post, .mce-content-body) .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}