/* Typography for the body of a blog or help article: the HTML written in the editor or by AI. */

.blog-body {
    font-family: "Lato", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.75;
    color: #2b2b2b;
    overflow-wrap: break-word;
}

.blog-body > :first-child { margin-top: 0; }
.blog-body > :last-child { margin-bottom: 0; }

.blog-body p { margin: 0 0 1.25em; }

.blog-body h2,
.blog-body h3,
.blog-body h4 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: #1b1b1b;
    letter-spacing: -.01em;
}

.blog-body h2 {
    font-size: 1.75rem;
    line-height: 1.3;
    margin: 2.75rem 0 1rem;
}

.blog-body h3 {
    font-size: 1.3rem;
    line-height: 1.35;
    margin: 2.25rem 0 .75rem;
}

.blog-body h4 {
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 1.75rem 0 .5rem;
}

/* Text pasted into the editor brings its own font sizes, which shrink a heading inside its own line */
.blog-body h2 [style*="font-size"],
.blog-body h3 [style*="font-size"],
.blog-body h4 [style*="font-size"] { font-size: inherit !important; line-height: inherit; }

/* A subsection straight after its section heading needs less room than one after a paragraph. */
.blog-body h2 + h3 { margin-top: 1.25rem; }

.blog-body ul,
.blog-body ol {
    margin: 0 0 1.25em;
    padding-left: 1.5em;
}

/* landing.css takes the markers off every list on the page; an article's lists need them back */
.blog-body ul { list-style: disc; }
.blog-body ol { list-style: decimal; }
.blog-body ul ul { list-style: circle; }

.blog-body li { margin-bottom: .6em; padding-left: .25em; }
/* The editor wraps each list item's text in a paragraph, which would double the gap between items */
.blog-body li > p { margin: 0; }
.blog-body li > ul,
.blog-body li > ol { margin: .5em 0 0; }
.blog-body li::marker { color: #c59b03; font-weight: 700; }

.blog-body strong { font-weight: 700; color: #1b1b1b; }

.blog-body a { color: #c59b03; text-decoration: underline; text-underline-offset: .15em; }
.blog-body a:hover { color: #9c7a02; }

.blog-body blockquote {
    margin: 2.5rem 0;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid #f7d24a;
    border-radius: 0 .75rem .75rem 0;
    background: #fffbea;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #3a3a3a;
}

.blog-body blockquote p { margin-bottom: .75em; }

/* A callout opens with a bold line of its own, which reads as its label */
.blog-body blockquote > p:first-child:has(> strong:only-child) {
    margin-bottom: .5em;
    font-family: "Montserrat", sans-serif;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9c7a02;
}

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

.blog-body img,
.blog-body iframe,
.blog-body video {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    border-radius: .75rem;
}

/* The editor puts an image in a paragraph of its own, often followed by an italic caption in the next one */
.blog-body p:has(> img),
.blog-body p:has(> strong > img) { margin: 2.5rem 0 .75rem; }
.blog-body p:has(> img) img,
.blog-body p:has(> strong > img) img { margin: 0 auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }

.blog-body p:has(> img) + p:has(> em:only-child),
.blog-body p:has(> strong > img) + p:has(> em:only-child) {
    margin-bottom: 2.5rem;
    font-size: .875rem;
    line-height: 1.5;
    text-align: center;
    color: #6d6d67;
}

.blog-body table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse;
    font-size: 1rem;
}

.blog-body th,
.blog-body td {
    padding: .6rem .75rem;
    border-bottom: 1px solid #e3e6ea;
    text-align: left;
    vertical-align: top;
}

.blog-body th { font-weight: 700; border-bottom-width: 2px; }

.blog-body hr { margin: 2.5rem 0; border: 0; border-top: 1px solid #e3e6ea; opacity: 1; }

@media (max-width: 575.98px) {
    .blog-body { font-size: 1.0625rem; line-height: 1.7; }
    .blog-body h2 { font-size: 1.45rem; margin-top: 2.25rem; }
    .blog-body h3 { font-size: 1.2rem; margin-top: 1.75rem; }
    .blog-body blockquote { padding: .75rem 1rem; font-size: 1.075rem; }
}