/*
 * Chater Road article styles (front end and block editor).
 * Scoped to the essay body; uses ACSS tokens. Body text keeps the site default size.
 */
:where(.article-body, .editor-styles-wrapper) {
	--article-label-font: var(--font-label, Georgia, "Times New Roman", serif);
}

.article-body {
	counter-reset: article-section;
	overflow-wrap: anywhere;
	min-inline-size: 0;
}

.article-body > p,
.editor-styles-wrapper .wp-block-post-content > p {
	margin-block-end: 1.05em;
}

/* Numbered section headings */
.article-body .wp-block-heading.is-style-numbered-section,
.editor-styles-wrapper .wp-block-heading.is-style-numbered-section {
	counter-increment: article-section;
	position: relative;
	font-size: 1.7em;
	margin-block: 2.4rem 0.9rem;
	text-wrap: pretty;
	scroll-margin-block-start: 2rem;
}

.editor-styles-wrapper .wp-block-post-content,
.editor-styles-wrapper .is-root-container {
	counter-reset: article-section;
}

.article-body .wp-block-heading.is-style-numbered-section::before,
.editor-styles-wrapper .wp-block-heading.is-style-numbered-section::before {
	content: counter(article-section, decimal-leading-zero);
	position: absolute;
	inset-inline-end: calc(100% + 1.25rem);
	inset-block-start: 0.35rem;
	color: var(--secondary-dark);
	font: 0.75rem/1.4 var(--article-label-font);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.article-body h3.wp-block-heading {
	font-size: 1.2em;
	margin-block: 1.8rem 0.6rem;
}

/* Lead paragraph with drop cap */
.article-body .is-style-essay-lead,
.editor-styles-wrapper .is-style-essay-lead {
	font-size: 1.18em;
	line-height: 1.45;
}

@supports (initial-letter: 2) {
	.article-body .is-style-essay-lead::first-letter,
	.editor-styles-wrapper .is-style-essay-lead::first-letter {
		initial-letter: 2;
		margin-inline-end: 0.35em;
		color: var(--primary);
	}
}

/* In-text note references (WordPress footnotes) */
.article-body sup.fn,
.editor-styles-wrapper sup.fn {
	line-height: 0;
	font: 0.7rem var(--article-label-font);
	vertical-align: super;
}

.article-body sup.fn a,
.editor-styles-wrapper sup.fn a {
	padding: 0.2rem;
	color: var(--accent);
	text-decoration: none;
}

/* Editorial pull quote */
.article-body .wp-block-quote.is-style-editorial-pull-quote,
.editor-styles-wrapper .wp-block-quote.is-style-editorial-pull-quote {
	border: 0;
	border-block: 1px solid var(--secondary);
	border-radius: 0;
	padding: 1.75rem 2rem;
	margin: 2.5rem -1.5rem;
	background: var(--primary);
	color: var(--base);
	font-size: 1.4em;
	line-height: 1.3;
	font-style: italic;
	box-shadow: none;
}

.article-body .wp-block-quote.is-style-editorial-pull-quote p,
.editor-styles-wrapper .wp-block-quote.is-style-editorial-pull-quote p {
	margin: 0;
	font-size: inherit;
	font-style: italic;
	color: inherit;
}

.article-body .wp-block-quote.is-style-editorial-pull-quote cite {
	display: block;
	margin-block-start: 1rem;
	font: 0.75rem/1.5 var(--article-label-font);
	font-style: normal;
	letter-spacing: 0.06em;
}

/* Figures */
.article-body .wp-block-image.is-style-article-figure,
.article-body .wp-block-image.is-style-article-figure-uncropped {
	margin-block: 2rem;
}

.article-body .wp-block-image.is-style-article-figure img,
.editor-styles-wrapper .wp-block-image.is-style-article-figure img {
	inline-size: 100%;
	aspect-ratio: 1.85;
	object-fit: cover;
}

.article-body .wp-block-image :where(figcaption) {
	margin-block-start: 0.6rem;
	color: var(--text-dark-muted);
	font-size: var(--text-s);
}

/* Comparison panel (pattern) */
.article-body .article-comparison,
.editor-styles-wrapper .article-comparison {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.2rem;
	border-block: 1px solid var(--base-semi-light);
	padding: 1.5rem;
	margin-block: 2rem;
	background: color-mix(in srgb, var(--primary-semi-light) 15%, var(--base-ultra-light));
}

@media (min-width: 761px) {
	.article-body .article-comparison,
	.editor-styles-wrapper .article-comparison {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1.75rem;
	}
}

.article-comparison h3.wp-block-heading {
	margin-block: 0 0.5rem;
	font-size: 1.4rem;
}

.article-comparison p {
	margin: 0;
	line-height: 1.5;
}

/* Editorial tables */
.article-body .table-scroll {
	max-inline-size: 100%;
	overflow-x: auto;
	margin-block: 2rem;
}

.article-body .wp-block-table.is-style-editorial,
.editor-styles-wrapper .wp-block-table.is-style-editorial {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.wp-block-table.is-style-editorial table {
	inline-size: 100%;
	min-inline-size: 30rem;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.4;
}

.wp-block-table.is-style-editorial :where(figcaption) {
	order: -1;
	text-align: start;
	font-size: 1.2rem;
	padding-block-end: 0.8rem;
	margin: 0;
}

.wp-block-table.is-style-editorial :where(th, td) {
	padding: 0.85rem 0.7rem;
	border: 0;
	border-block-end: 1px solid var(--base-light);
	text-align: start;
	vertical-align: top;
}

.wp-block-table.is-style-editorial thead :where(th) {
	border-block: 1px solid var(--base-ultra-dark);
	font: 0.75rem/1.5 var(--article-label-font);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Article note */
.article-body .is-style-article-note,
.editor-styles-wrapper .is-style-article-note {
	font-size: 0.95rem;
	color: var(--text-dark-muted);
	border-inline-start: 2px solid var(--secondary);
	padding-inline-start: 1rem;
}

/* Links in running text. Site links have no underline by default (ACSS); links inside prose
   keep one so they are not distinguished by colour alone (WCAG 2.2 SC 1.4.1). */
.article-body :where(p, li, figcaption, td, th, blockquote) a,
.article-body .article-notes__body a,
.prose :where(p, li, figcaption, td, th, blockquote) a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.article-body :where(p, li, figcaption, td, th, blockquote) a:hover,
.article-body .article-notes__body a:hover,
.prose :where(p, li, figcaption, td, th, blockquote) a:hover {
	text-decoration: underline;
	text-decoration-color: var(--secondary);
}

/* Footnote numbers stay plain. */
.article-body sup.fn a,
.article-body sup.fn a:hover {
	text-decoration: none;
}