/**
 * Article prose
 *
 * The body of anything written in the editor - headings, lists, blockquotes,
 * images, tables, captions - wrapped in .post-prose. Loaded by every template
 * that renders the_content(): blog posts, pages, and the video, course, and
 * book pages.
 *
 * Its own sheet because those live in different areas of the site and would
 * otherwise each need blog.css, which is 1,400 lines of chrome they don't use.
 * Blog-specific overrides that happen to mention .post-prose - the link colour
 * inside .reading-card - stay in blog.css, since .reading-card is the blog's.
 *
 * The comment thread and the ON1 Plus gate are here for the same reason and on
 * the same terms. One follows the_content() and one replaces it, and both
 * render on exactly the templates this sheet loads on and nowhere else. They
 * used to live in blog.css, which meant they went unstyled everywhere but the
 * blog - the video, book, and creative library pages all call
 * comments_template() and none of them load that sheet. The blog's own
 * wrappers around the thread, #post-comments-section and .comments-shell, stay
 * there, as do the .reading-card overrides.
 *
 * @copyright   2026, ON1
 */

.post-prose {
	font-size: var(--text-base);
	line-height: 1.75;
}

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

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

.post-prose h2 {
	font-size: var(--text-2xl);
	margin: 2.75rem 0 1.125rem;
}

.post-prose h3 {
	font-size: var(--text-xl);
	margin: 2.25rem 0 1rem;
}

.post-prose h4 {
	font-size: var(--text-lg);
	margin: 2rem 0 0.875rem;
}

.post-prose ol,
.post-prose ul {
	margin: 0 0 1.5rem;
	padding-left: 1.5rem;
}

.post-prose li {
	margin-bottom: 0.5rem;
}

.post-prose blockquote {
	border-left: 3px solid var(--blue-500);
	font-size: var(--text-lg);
	/* One step up from the body copy, so a pull quote still reads as one */
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
}

.post-prose blockquote p:last-child {
	margin-bottom: 0;
}

.post-prose img {
	border-radius: var(--border-radius);
	height: auto;
	max-width: 100%;
}

.post-prose figure,
.post-prose .wp-caption {
	margin: 2rem 0;
	max-width: 100%;
}

.post-prose figcaption,
.post-prose .wp-caption-text {
	color: var(--text-400);
	font-size: var(--text-xs);
	margin-top: 0.5rem;
}

.post-prose iframe,
.post-prose video {
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--border-radius);
	display: block;
	height: auto;
	margin: 2rem 0;
	max-width: 100%;
	width: 100%;
}

/*
 * Before/after sliders, rewritten out of the old TwentyTwenty markup by
 * on1_before_after_sliders().
 *
 * Do not set `display` here. The component's own :host rule is
 * `display: flex; flex-direction: column`, and an outer document rule beats
 * :host - overriding it to block collapses the host to 0x0, because the only
 * in-flow child is a slot the flex column was sizing. Margin and radius are
 * safe; layout belongs to the component.
 */
.post-prose image-compare {
	border-radius: var(--border-radius);
	margin: 2rem 0;
}

.post-prose image-compare img {
	margin: 0;
}

.post-prose table {
	border-collapse: collapse;
	margin: 2rem 0;
	width: 100%;
}

.post-prose td,
.post-prose th {
	border-bottom: 1px solid var(--bg-700);
	padding: 0.625rem 0.75rem;
	text-align: left;
}

.post-prose th {
	color: var(--text-100);
	font-weight: 600;
}

.post-prose code {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	font-family: var(--monospace);
	font-size: var(--text-sm);
	padding: 0.125rem 0.375rem;
}

.post-prose .alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.post-prose .alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.post-prose .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 575.98px) {
	.post-prose .alignleft,
	.post-prose .alignright {
		float: none;
		margin: 0 0 1rem;
	}
}

/* !- ON1 Plus gate
 *
 * Pinned dark with data-theme="dark" so it reads as a promo panel rather than
 * part of the article, whichever way the site theme is set.
 */
.plus-gate {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	margin: 2.5rem 0 0;
	padding: 2.5rem;
	text-align: center;
}

@media (max-width: 575.98px) {
	.plus-gate {
		padding: 1.75rem;
	}
}

.plus-gate-head img {
	margin: 0 auto 1rem;
}

.plus-gate-head h2 {
	font-size: var(--text-2xl);
	margin-bottom: 2rem;
}

.plus-gate .feature-list {
	text-align: left;
}

.plus-gate-actions {
	margin-top: 2rem;
}

.plus-gate-actions .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

.plus-gate-note {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-top: 1rem;
}

.plus-gate-note a {
	color: var(--blue-400);
	text-decoration: none;
}

/* !- Comments */
.comments-title {
	font-size: var(--text-xl);
	margin-bottom: 1.75rem;
}

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-item {
	margin-bottom: 0;
}

/* Top-level threads are separated by a rule, not just space */
.comment-list > .comment-item + .comment-item {
	border-top: 1px solid var(--bg-700);
	margin-top: 2.25rem;
	padding-top: 2.25rem;
}

/* Replies hang off a rail, clear of the comment they answer and each other */
.comment-list .children {
	border-left: 1px solid var(--bg-700);
	margin-left: 1.5rem;
	margin-top: 2rem;
	padding-left: 1.5rem;
}

@media (max-width: 575.98px) {
	.comment-list .children {
		margin-left: 0.75rem;
		padding-left: 1rem;
	}
}

.comment-list .children .comment-item + .comment-item {
	margin-top: 2rem;
}

.comment-body {
	display: flex;
	gap: 1rem;
}

.comment-avatar img {
	border-radius: 50%;
	height: 3rem;
	width: 3rem;
}

.comment-main {
	flex: 1;
	min-width: 0;
}

.comment-meta {
	font-size: var(--text-mini);
	margin-bottom: 0.375rem;
}

.comment-author {
	color: var(--text-50);
	font-weight: 700;
}

.comment-date {
	color: var(--text-400);
	margin-left: 0.5rem;
}

.comment-text {
	font-size: var(--text-sm);
}

.comment-text p:last-child {
	margin-bottom: 0;
}

.comment-reply {
	font-size: var(--text-mini);
	margin: 0.5rem 0 0;
}

.comment-reply a {
	font-weight: 600;
	text-decoration: underline;
}

.comments-closed,
.comments-privacy {
	color: var(--text-400);
	font-size: var(--text-mini);
}

.post-comments #respond {
	margin-top: 2.5rem;
}

.post-comments .comment-reply-title {
	font-size: var(--text-lg);
	margin-bottom: 1rem;
}

.post-comments .comment-form label {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	margin-bottom: 0.375rem;
}

.post-comments .comment-form input[type="email"],
.post-comments .comment-form input[type="text"],
.post-comments .comment-form input[type="url"],
.post-comments .comment-form textarea {
	background: var(--bg-800);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	color: var(--text-100);
	font-size: var(--text-sm);
	padding: 0.625rem 0.875rem;
	width: 100%;
}

[data-theme="light"] .post-comments .comment-form input[type="email"],
[data-theme="light"] .post-comments .comment-form input[type="text"],
[data-theme="light"] .post-comments .comment-form input[type="url"],
[data-theme="light"] .post-comments .comment-form textarea {
	border-color: var(--bg-500);
}

.post-comments .comment-form input:focus,
.post-comments .comment-form textarea:focus {
	border-color: var(--blue-500);
	outline: none;
}

.post-comments .comment-form p {
	margin-bottom: 1rem;
}

.post-comments .comment-form .form-submit .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

.post-comments .comment-notes,
.post-comments .comment-form-cookies-consent label {
	color: var(--text-400);
	font-size: var(--text-mini);
}

.post-comments .comment-form-cookies-consent {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.post-comments .comment-form-cookies-consent label {
	display: inline;
	margin-bottom: 0;
}

/* !- Comment contrast
 *
 * Moved out of blog.css with the thread itself. --bg-700 is a surface step,
 * not a border one: as a hairline it lands at 1.1:1 against the ground it sits
 * on and effectively disappears. Dividers use --bg-600 instead, and take one
 * more step on the light theme - the ramp is compressed at its light end, so
 * the same token reads very differently on either side of the flip. Inside the
 * blog's reading card, which is always the page's inverse, blog.css steps them
 * the other way.
 */
.comment-list > .comment-item + .comment-item,
.comment-list .children {
	border-color: var(--bg-600);
}

[data-theme="light"] .comment-list > .comment-item + .comment-item,
[data-theme="light"] .comment-list .children {
	border-color: var(--bg-400);
}

/*
 * Comment chrome sits on the page tone. --text-400 holds against the dark
 * theme but not the light one, and --text-300 clears both.
 */
.comment-date,
.post-comments .comment-notes,
.post-comments .comments-closed,
.post-comments .comments-privacy,
.post-comments .comment-form-cookies-consent label,
.post-comments .must-log-in,
.post-comments .logged-in-as {
	color: var(--text-300);
}

/*
 * Comments are registration-only on this site, so most visitors see this.
 * These are the last paragraph inside #respond, so base.css's
 * `p:last-child { margin-bottom: 0 }` collapses the gap to the privacy line
 * that follows the form.
 */
.post-comments .must-log-in,
.post-comments .logged-in-as {
	font-size: var(--text-sm);
	margin-bottom: 1rem;
}

.post-comments a {
	color: var(--link);
}