/*
 * Long-form content: blog posts and plain pages (.th-prose), in the editor too.
 * Covers classic-editor HTML from old posts as well as core blocks.
 * Selectors use :where() so blocks and templates can override them easily.
 */

.th-prose {
	font-size: var(--th-fs-body-lg);
	line-height: 1.7;
	overflow-wrap: break-word;
}

/* ---------- Vertical rhythm (at any depth: old posts wrap everything in <div>s) ---------- */

.th-prose :where(p, ul, ol, dl, blockquote, figure, table, pre, hr, iframe, h1, h2, h3, h4, h5, h6, .wp-block-embed, .wp-block-image, .wp-block-group, .wp-block-buttons, .wp-block-columns, .wp-block-table, .wp-block-quote, .wp-block-separator, .wp-caption) {
	margin-block: 0;
}

.th-prose :where(*) + :where(p, ul, ol, dl, blockquote, figure, table, pre, hr, iframe, .wp-block-embed, .wp-block-image, .wp-block-group, .wp-block-buttons, .wp-block-columns, .wp-block-table, .wp-block-quote, .wp-caption, div:not([class])) {
	margin-top: 1.1em;
}

/* ---------- Headings (old posts use h1 and h5 as section headings) ---------- */

.th-prose :where(h1, h2, h3, h4, h5, h6) {
	color: var(--th-heading, var(--th-navy));
	font-family: var(--th-font-heading);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.th-prose :where(*) + :where(h1, h2, h3, h4, h5, h6) {
	margin-top: 1.8em;
}

.th-prose :where(h1, h2, h3, h4, h5, h6) + :where(*) {
	margin-top: 0.6em;
}

.th-prose :where(h1, h2) {
	font-size: var(--th-fs-h2-sm);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.th-prose :where(h3) {
	font-size: 1.375rem;
	font-weight: 700;
}

.th-prose :where(h4) {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.35;
}

.th-prose :where(h5, h6) {
	font-size: var(--th-fs-body-lg);
	font-weight: 700;
	line-height: 1.4;
}

.th-prose :where(h1, h2, h3, h4, h5, h6):empty,
.th-prose :where(p):empty {
	display: none;
}

/* ---------- Inline text ---------- */

.th-prose :where(a) {
	color: var(--th-link, var(--th-navy));
	font-weight: 500;
	text-decoration-color: color-mix(in srgb, var(--th-blue) 60%, transparent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.th-prose :where(a):hover {
	color: var(--th-link-hover, var(--th-navy-dark));
	text-decoration-color: currentcolor;
}

.th-prose :where(strong, b) {
	font-weight: 700;
}

.th-prose :where(small) {
	font-size: var(--th-fs-sm);
}

.th-prose :where(code, kbd) {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: var(--th-surface-light);
	font-size: 0.9em;
}

.th-prose :where(mark) {
	padding-inline: 0.15em;
	background: var(--th-surface-blue);
	color: inherit;
}

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

.th-prose :where(ul, ol) {
	padding-left: 1.4em;
}

.th-prose :where(li) + :where(li),
.th-prose :where(li > ul, li > ol) {
	margin-top: 0.4em;
}

.th-prose :where(li)::marker {
	color: var(--th-blue);
	font-weight: 600;
}

/* ---------- Quotes ---------- */

.th-prose :where(blockquote, .wp-block-quote) {
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--th-blue);
	color: var(--th-navy);
	font-family: var(--th-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.5;
}

.th-prose :where(blockquote) :where(p + p) {
	margin-top: 0.6em;
}

.th-prose :where(blockquote cite, .wp-block-quote cite, .wp-block-pullquote cite) {
	display: block;
	margin-top: 10px;
	color: var(--th-text-muted);
	font-family: var(--th-font-body);
	font-size: var(--th-fs-sm);
	font-style: normal;
	font-weight: 500;
}

.th-prose :where(.wp-block-pullquote) {
	padding: 28px 0;
	border-block: 2px solid var(--th-border);
	text-align: center;
}

.th-prose :where(.wp-block-pullquote blockquote) {
	padding: 0;
	border: 0;
}

/* ---------- Images, captions and alignment (classic and block) ---------- */

.th-prose :where(img) {
	border-radius: var(--th-radius-sm);
}

.th-prose :where(figure) {
	margin-inline: 0;
}

.th-prose :where(figcaption, .wp-caption-text, .wp-element-caption) {
	margin-top: 8px;
	color: var(--th-text-muted);
	font-size: var(--th-fs-sm);
	line-height: 1.5;
	text-align: center;
}

.th-prose :where(.wp-caption) {
	max-width: 100%;
}

.th-prose :where(.aligncenter, img.aligncenter) {
	display: block;
	margin-inline: auto;
}

.th-prose :where(.alignleft, .alignright) {
	max-width: 50%;
	margin-bottom: 1em;
}

.th-prose :where(.alignleft) {
	float: left;
	margin-right: 1.5em;
}

.th-prose :where(.alignright) {
	float: right;
	margin-left: 1.5em;
}

/* Floated images inside a paragraph keep the paragraph's top spacing. */
.th-prose :where(p) > :where(img.alignleft, img.alignright) {
	margin-top: 0.35em;
}

.th-prose::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 600px) {
	.th-prose :where(.alignleft, .alignright) {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}
}

/* Wide/full images are kept to the text column: classic themes have no wider layout. */
.th-prose :where(.alignwide, .alignfull) {
	max-width: 100%;
}

/* ---------- Embeds: YouTube, podcasts, Amazon and raw iframes in old posts ---------- */

.th-prose :where(iframe, video, embed, object) {
	display: block;
	max-width: 100%;
	border: 0;
}

.th-prose :where(.wp-block-embed) {
	margin-inline: 0;
}

.th-prose :where(.wp-block-embed__wrapper) {
	position: relative;
}

.th-prose :where(.wp-block-embed.is-type-video iframe, iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"], iframe[src*="player.vimeo.com"]) {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--th-radius-sm);
	background: var(--th-navy-dark);
}

.th-prose :where(.wp-block-embed.is-type-rich iframe) {
	width: 100%;
}

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

.th-prose :where(.wp-block-table) {
	overflow-x: auto;
	margin-inline: 0;
}

.th-prose :where(table) {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--th-fs-sm);
	line-height: 1.5;
}

/* A bare <table> from the classic editor scrolls on its own on narrow screens. */
.th-prose > :where(table),
.th-prose :where(div > table) {
	display: block;
	overflow-x: auto;
}

.th-prose :where(th, td) {
	padding: 10px 14px;
	border: 1px solid var(--th-border);
	text-align: left;
	vertical-align: top;
}

.th-prose :where(thead th, thead td) {
	background: var(--th-surface-light);
	color: var(--th-navy);
	font-weight: 700;
}

.th-prose :where(.wp-block-table.is-style-stripes tbody tr:nth-child(odd)) {
	background: var(--th-surface-light);
}

/* ---------- Rules, code blocks ---------- */

.th-prose :where(hr, .wp-block-separator) {
	height: 0;
	border: 0;
	border-top: 1px solid var(--th-border-strong);
}

.th-prose :where(* + hr, * + .wp-block-separator) {
	margin-block: 2em;
}

.th-prose :where(pre) {
	overflow-x: auto;
	padding: 18px 20px;
	border-radius: var(--th-radius-sm);
	background: var(--th-navy-dark);
	color: var(--th-on-dark-text);
	font-size: var(--th-fs-sm);
	line-height: 1.6;
}

.th-prose :where(pre code) {
	padding: 0;
	background: none;
	font-size: inherit;
}

/* ---------- Core blocks ---------- */

.th-prose :where(.wp-block-buttons) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.th-prose :where(.wp-block-button__link) {
	display: inline-block;
	padding: 14px 22px;
	border: 1.5px solid transparent;
	border-radius: var(--th-radius-sm);
	background: var(--th-navy);
	color: var(--th-white);
	font-size: var(--th-fs-body);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

.th-prose :where(.wp-block-button__link):hover {
	color: var(--th-white);
	filter: brightness(1.12);
}

.th-prose :where(.is-style-outline .wp-block-button__link) {
	border-color: var(--th-navy);
	background: transparent;
	color: var(--th-navy);
}

.th-prose :where(.wp-block-group.has-background) {
	padding: 24px 28px;
	border-radius: var(--th-radius);
}

.th-prose :where(.wp-block-columns) {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.th-prose :where(.wp-block-column) {
	flex: 1 1 240px;
	min-width: 0;
}

.th-prose :where(.wp-block-gallery) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	list-style: none;
}

.th-prose :where(.wp-block-gallery figure) {
	flex: 1 1 200px;
	margin: 0;
}

.th-prose :where(.wp-block-details) {
	padding: 14px 18px;
	border: 1px solid var(--th-border);
	border-radius: var(--th-radius-sm);
}

.th-prose :where(.wp-block-details summary) {
	color: var(--th-navy);
	font-weight: 600;
}

.th-prose :where(.has-text-align-center) {
	text-align: center;
}

.th-prose :where(.has-text-align-right) {
	text-align: right;
}