/**
 * ClimateSort article typography & layout (rc15)
 * Scoped to article bodies / Elementor text-editor & theme-post-content on singular posts & pages.
 * Reuses :root colour vars (--g, --ink, --mut, --line, --soft, --r, …). No new hard-coded colours.
 * Fonts: Space Grotesk (headings) + IBM Plex Sans (body) only.
 *
 * Spacing targets (readability + SEO):
 *   body 18px desktop / 17px mobile, line-height 1.65, measure 65–75ch,
 *   p ~1.2em, H2 mt 2.2em / mb 0.6em, H3 mt 1.6em / mb 0.5em,
 *   lists & figures ~1.5em, mobile side padding >= 20px, tap targets >= 44px,
 *   images have width/height or aspect-ratio (CLS).
 */

.csp-article,
.csp-article-view .entry-content,
.article .prose,
.csp-v3 .prose,
.single .entry-content,
.page .entry-content,
body.single-post .elementor-widget-theme-post-content .elementor-widget-container,
body.page .elementor-widget-theme-post-content .elementor-widget-container,
body.single-post .elementor-widget-text-editor .elementor-widget-container,
body.page .elementor-widget-text-editor .elementor-widget-container {
	--csp-font-body: 'IBM Plex Sans', system-ui, sans-serif;
	--csp-font-heading: 'Space Grotesk', sans-serif;
	--csp-fs-body: 1.0625rem; /* 17px mobile */
	--csp-fs-h1: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
	--csp-fs-h2: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
	--csp-fs-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
	--csp-fs-h4: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
	--csp-lh: 1.65;
	--csp-measure: min(70ch, 100%); /* mid of 65–75ch; never exceed parent */
	--csp-pad-x: max(20px, 1.25rem);
	font-family: var(--csp-font-body) !important;
	font-size: var(--csp-fs-body) !important;
	line-height: var(--csp-lh);
	color: var(--ink);
	max-width: var(--csp-measure);
	padding-left: var(--csp-pad-x);
	padding-right: var(--csp-pad-x);
	margin-left: auto;
	margin-right: auto;
	overflow-wrap: anywhere;
	word-break: break-word;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.csp-article,
	.csp-article-view .entry-content,
.article .prose,
.csp-v3 .prose,
	.single .entry-content,
	.page .entry-content,
	body.single-post .elementor-widget-theme-post-content .elementor-widget-container,
	body.page .elementor-widget-theme-post-content .elementor-widget-container,
	body.single-post .elementor-widget-text-editor .elementor-widget-container,
	body.page .elementor-widget-text-editor .elementor-widget-container {
		--csp-fs-body: 1.125rem; /* 18px desktop */
		padding-left: 0;
		padding-right: 0;
	}
}

/* Normalize Elementor / inline font overrides inside article body only (not vendor shells). */
.csp-article :where(p, li, span, div)[style*="font-family"],
.csp-article :where(p, li, span, div)[style*="font-size"],
.single .entry-content :where(p, li, span, div)[style*="font-family"],
.single .entry-content :where(p, li, span, div)[style*="font-size"],
.page .entry-content :where(p, li, span, div)[style*="font-family"],
.page .entry-content :where(p, li, span, div)[style*="font-size"],
body.single-post .elementor-widget-text-editor :where(p, li, span, div)[style*="font-family"],
body.single-post .elementor-widget-text-editor :where(p, li, span, div)[style*="font-size"],
body.page .elementor-widget-text-editor :where(p, li, span, div)[style*="font-family"],
body.page .elementor-widget-text-editor :where(p, li, span, div)[style*="font-size"],
body.single-post .elementor-widget-theme-post-content :where(p, li, span, div)[style*="font-family"],
body.single-post .elementor-widget-theme-post-content :where(p, li, span, div)[style*="font-size"],
body.page .elementor-widget-theme-post-content :where(p, li, span, div)[style*="font-family"],
body.page .elementor-widget-theme-post-content :where(p, li, span, div)[style*="font-size"] {
	font-family: var(--csp-font-body) !important;
	font-size: inherit !important;
}
/* Headings with leftover Elementor inline fonts: brand scale wins */
body.csp-v3 .article .prose :is(h1,h2,h3,h4)[style],
body.csp-article-view .prose :is(h1,h2,h3,h4)[style],
body.csp-v3 .csp-article :is(h1,h2,h3,h4)[style] {
	font-family: var(--csp-font-heading, 'Space Grotesk', sans-serif) !important;
}
body.csp-v3 .article .prose h1[style], body.csp-article-view .prose h1[style] { font-size: var(--csp-fs-h1, clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem)) !important; }
body.csp-v3 .article .prose h2[style], body.csp-article-view .prose h2[style] { font-size: var(--csp-fs-h2, clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem)) !important; }
body.csp-v3 .article .prose h3[style], body.csp-article-view .prose h3[style] { font-size: var(--csp-fs-h3, clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem)) !important; }


.csp-article h1, .csp-article h2, .csp-article h3, .csp-article h4,
.single .entry-content h1, .single .entry-content h2, .single .entry-content h3, .single .entry-content h4,
.page .entry-content h1, .page .entry-content h2, .page .entry-content h3, .page .entry-content h4,
body.single-post .elementor-widget-text-editor h1,
body.single-post .elementor-widget-text-editor h2,
body.single-post .elementor-widget-text-editor h3,
body.single-post .elementor-widget-text-editor h4,
body.page .elementor-widget-text-editor h1,
body.page .elementor-widget-text-editor h2,
body.page .elementor-widget-text-editor h3,
body.page .elementor-widget-text-editor h4,
body.single-post .elementor-widget-theme-post-content h1,
body.single-post .elementor-widget-theme-post-content h2,
body.single-post .elementor-widget-theme-post-content h3,
body.single-post .elementor-widget-theme-post-content h4,
body.page .elementor-widget-theme-post-content h1,
body.page .elementor-widget-theme-post-content h2,
body.page .elementor-widget-theme-post-content h3,
body.page .elementor-widget-theme-post-content h4 {
	font-family: var(--csp-font-heading) !important;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--ink);
	max-width: var(--csp-measure);
}

.csp-article h1, .article .prose h1, .csp-v3 .prose h1, .single .entry-content h1, .page .entry-content h1,
body.single-post .elementor-widget-text-editor h1, body.page .elementor-widget-text-editor h1,
body.single-post .elementor-widget-theme-post-content h1, body.page .elementor-widget-theme-post-content h1 {
	font-size: var(--csp-fs-h1) !important;
	margin: 2em 0 0.6em;
}

.csp-article h2, .article .prose h2, .csp-v3 .prose h2, .single .entry-content h2, .page .entry-content h2,
body.single-post .elementor-widget-text-editor h2, body.page .elementor-widget-text-editor h2,
body.single-post .elementor-widget-theme-post-content h2, body.page .elementor-widget-theme-post-content h2 {
	font-size: var(--csp-fs-h2) !important;
	margin: 2.2em 0 0.6em; /* proximity: more above than below */
}

.csp-article h3, .article .prose h3, .csp-v3 .prose h3, .single .entry-content h3, .page .entry-content h3,
body.single-post .elementor-widget-text-editor h3, body.page .elementor-widget-text-editor h3,
body.single-post .elementor-widget-theme-post-content h3, body.page .elementor-widget-theme-post-content h3 {
	font-size: var(--csp-fs-h3) !important;
	margin: 1.6em 0 0.5em;
}

.csp-article h4, .article .prose h4, .csp-v3 .prose h4, .single .entry-content h4, .page .entry-content h4,
body.single-post .elementor-widget-text-editor h4, body.page .elementor-widget-text-editor h4,
body.single-post .elementor-widget-theme-post-content h4, body.page .elementor-widget-theme-post-content h4 {
	font-size: var(--csp-fs-h4) !important;
	margin: 1.4em 0 0.45em;
}

.csp-article p, .article .prose p, .csp-v3 .prose p, .single .entry-content p, .page .entry-content p,
body.single-post .elementor-widget-text-editor p, body.page .elementor-widget-text-editor p,
body.single-post .elementor-widget-theme-post-content p, body.page .elementor-widget-theme-post-content p {
	margin: 0 0 1.2em;
	font-family: var(--csp-font-body) !important;
	font-size: var(--csp-fs-body) !important;
	line-height: var(--csp-lh);
	color: var(--ink);
}

.csp-article ul, .csp-article ol, .article .prose ul, .article .prose ol, .csp-v3 .prose ul, .csp-v3 .prose ol,
.single .entry-content ul, .single .entry-content ol,
.page .entry-content ul, .page .entry-content ol,
body.single-post .elementor-widget-text-editor ul, body.single-post .elementor-widget-text-editor ol,
body.page .elementor-widget-text-editor ul, body.page .elementor-widget-text-editor ol,
body.single-post .elementor-widget-theme-post-content ul, body.single-post .elementor-widget-theme-post-content ol,
body.page .elementor-widget-theme-post-content ul, body.page .elementor-widget-theme-post-content ol {
	margin: 0 0 1.5em;
	padding-left: 1.35em;
	line-height: var(--csp-lh);
}
.csp-article li + li, .single .entry-content li + li, .page .entry-content li + li {
	margin-top: 0.35em;
}

.csp-article blockquote,
.single .entry-content blockquote, .page .entry-content blockquote,
body.single-post .elementor-widget-text-editor blockquote, body.page .elementor-widget-text-editor blockquote,
body.single-post .elementor-widget-theme-post-content blockquote, body.page .elementor-widget-theme-post-content blockquote {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	border-left: 4px solid var(--g);
	background: var(--soft);
	color: var(--ink2);
	border-radius: 0 var(--r) var(--r) 0;
}
.csp-article blockquote p:last-child,
.single .entry-content blockquote p:last-child,
.page .entry-content blockquote p:last-child { margin-bottom: 0; }

/* Links + focus + tap targets */
.csp-article a, .article .prose a, .csp-v3 .prose a, .single .entry-content a, .page .entry-content a,
body.single-post .elementor-widget-text-editor a, body.page .elementor-widget-text-editor a,
body.single-post .elementor-widget-theme-post-content a, body.page .elementor-widget-theme-post-content a {
	color: var(--g);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-weight: 500;
	/* enlarge hit area without shifting layout */
	padding: 0.15em 0;
}
.csp-article a:hover, .single .entry-content a:hover, .page .entry-content a:hover { color: var(--g2); }
.csp-article a:focus-visible, .single .entry-content a:focus-visible, .page .entry-content a:focus-visible,
body.single-post .elementor-widget-text-editor a:focus-visible, body.page .elementor-widget-text-editor a:focus-visible,
body.single-post .elementor-widget-theme-post-content a:focus-visible, body.page .elementor-widget-theme-post-content a:focus-visible {
	outline: 2px solid var(--g);
	outline-offset: 3px;
	border-radius: 2px;
}

/* rc15.2 Images: keep natural size — never stretch/upscale; no object-fit:cover on content */
.csp-article img, .article .prose img, .csp-v3 .prose img, .single .entry-content img, .page .entry-content img,
body.single-post .elementor-widget-text-editor img, body.page .elementor-widget-text-editor img,
body.single-post .elementor-widget-theme-post-content img, body.page .elementor-widget-theme-post-content img,
.csp-article figure > img, .single .entry-content figure > img, .page .entry-content figure > img {
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: none !important;
	object-position: center !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	border-radius: var(--r);
}
/* Branded gap-filler only (broken/missing src) — still natural, never stretched */
.csp-article img.csp-img-placeholder,
.single .entry-content img.csp-img-placeholder,
.page .entry-content img.csp-img-placeholder,
body.single-post .elementor-widget-text-editor img.csp-img-placeholder,
body.single-post .elementor-widget-theme-post-content img.csp-img-placeholder {
	max-width: min(100%, 720px) !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	background: var(--g50, #E8F1EC);
	border: 1px solid var(--line, #D6E1DB);
}
.csp-article img[width][height],
.single .entry-content img[width][height],
.page .entry-content img[width][height],
body.single-post .elementor-widget-text-editor img[width][height],
body.page .elementor-widget-text-editor img[width][height],
body.single-post .elementor-widget-theme-post-content img[width][height],
body.page .elementor-widget-theme-post-content img[width][height] {
	aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
}
/* Fallback aspect-ratio for common WP sizes when attr() unsupported */
@supports not (aspect-ratio: attr(width type(<number>)) / attr(height type(<number>))) {
	.csp-article img[width][height],
	.single .entry-content img[width][height],
	.page .entry-content img[width][height] {
		aspect-ratio: auto;
	}
}

/* Headings wrapping an image (h3>img): no heading margins / type on the image */
.csp-article h1 > img, .csp-article h2 > img, .csp-article h3 > img, .csp-article h4 > img,
.single .entry-content h1 > img, .single .entry-content h2 > img,
.single .entry-content h3 > img, .single .entry-content h4 > img,
.page .entry-content h1 > img, .page .entry-content h2 > img,
.page .entry-content h3 > img, .page .entry-content h4 > img,
body.single-post .elementor-widget-text-editor h2 > img, body.single-post .elementor-widget-text-editor h3 > img,
body.page .elementor-widget-text-editor h2 > img, body.page .elementor-widget-text-editor h3 > img,
body.single-post .elementor-widget-theme-post-content h2 > img, body.single-post .elementor-widget-theme-post-content h3 > img,
body.page .elementor-widget-theme-post-content h2 > img, body.page .elementor-widget-theme-post-content h3 > img {
	margin: 0;
	display: block;
}
.csp-article h1:has(> img), .csp-article h2:has(> img), .csp-article h3:has(> img), .csp-article h4:has(> img),
.single .entry-content h1:has(> img), .single .entry-content h2:has(> img),
.single .entry-content h3:has(> img), .single .entry-content h4:has(> img),
.page .entry-content h1:has(> img), .page .entry-content h2:has(> img),
.page .entry-content h3:has(> img), .page .entry-content h4:has(> img),
body.single-post .elementor-widget-text-editor h2:has(> img), body.single-post .elementor-widget-text-editor h3:has(> img),
body.page .elementor-widget-text-editor h2:has(> img), body.page .elementor-widget-text-editor h3:has(> img),
body.single-post .elementor-widget-theme-post-content h2:has(> img), body.single-post .elementor-widget-theme-post-content h3:has(> img),
body.page .elementor-widget-theme-post-content h2:has(> img), body.page .elementor-widget-theme-post-content h3:has(> img) {
	margin: 1.5em 0;
	line-height: 0;
	font-size: 0 !important;
	letter-spacing: 0;
}

.csp-article figure, .article .prose figure, .csp-v3 .prose figure, .single .entry-content figure, .page .entry-content figure {
	margin: 1.5em 0;
	max-width: 100%;
}
.csp-article figcaption, .single .entry-content figcaption, .page .entry-content figcaption,
.csp-article .wp-caption-text, .single .entry-content .wp-caption-text, .page .entry-content .wp-caption-text {
	font-size: 0.9em;
	line-height: 1.45;
	color: var(--mut);
	margin-top: 0.5em;
	text-align: center;
}

/* Tables */
.csp-article .csp-table-wrap, .single .entry-content .csp-table-wrap, .page .entry-content .csp-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5em 0;
}
.csp-article table, .single .entry-content table, .page .entry-content table,
body.single-post .elementor-widget-text-editor table, body.page .elementor-widget-text-editor table,
body.single-post .elementor-widget-theme-post-content table, body.page .elementor-widget-theme-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
	line-height: 1.5;
	margin: 1.5em 0;
}
.csp-article th, .csp-article td, .single .entry-content th, .single .entry-content td, .page .entry-content th, .page .entry-content td,
body.single-post .elementor-widget-text-editor th, body.single-post .elementor-widget-text-editor td,
body.page .elementor-widget-text-editor th, body.page .elementor-widget-text-editor td,
body.single-post .elementor-widget-theme-post-content th, body.single-post .elementor-widget-theme-post-content td,
body.page .elementor-widget-theme-post-content th, body.page .elementor-widget-theme-post-content td {
	border: 1px solid var(--line);
	padding: 0.55em 0.75em;
	text-align: left;
	vertical-align: top;
}
.csp-article th, .single .entry-content th, .page .entry-content th { background: var(--soft); font-weight: 600; color: var(--ink); }

.csp-article pre, .csp-article code, .single .entry-content pre, .single .entry-content code, .page .entry-content pre, .page .entry-content code {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 0.9em;
}
.csp-article pre, .single .entry-content pre, .page .entry-content pre {
	overflow-x: auto;
	padding: 1em;
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: var(--r);
	margin: 1.5em 0;
}

/* Author avatar + related thumbnails: no empty boxes (lazy/missing fallback) */
.csp-article-view .elementor-author-box__avatar,
.csp-article-view .elementor-author-box__avatar img,
.csp-article-view .ast-author-avatar,
.csp-article-view .ast-author-avatar img {
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	background: var(--soft);
	object-fit: cover;
}
.csp-article-view .elementor-author-box__avatar img[src=""],
.csp-article-view .elementor-author-box__avatar img:not([src]),
.csp-article-view .ast-author-avatar img[src=""],
.csp-article-view .ast-author-avatar img:not([src]) {
	display: none;
}
.csp-article-view .elementor-post__thumbnail,
.csp-article-view .elementor-post__thumbnail img,
.csp-article-view .ast-related-post-featured-section,
.csp-article-view .related-posts img {
	background: var(--soft);
	min-height: 44px;
	border-radius: var(--r);
	object-fit: cover;
}
.csp-article-view .elementor-post__thumbnail img[src=""],
.csp-article-view .elementor-post__thumbnail img:not([src]),
.csp-article-view .related-posts img[src=""],
.csp-article-view .related-posts img:not([src]) {
	visibility: hidden;
}
/* rc15.2: never leave a big empty gap — soft brand fill when related/avatar img failed */
.csp-article-view .elementor-post__thumbnail__link.csp-thumb-empty,
.csp-article-view .elementor-post__thumbnail.csp-thumb-empty,
.csp-article-view .csp-thumb-empty:not(.elementor-author-box__avatar) {
	display: block !important;
	min-height: 120px;
	background: var(--g50, #E8F1EC);
	border: 1px solid var(--line, #D6E1DB);
	border-radius: var(--r);
}
.csp-article-view .csp-thumb-empty img { opacity: 0; }
.csp-article-view .elementor-author-box__avatar.csp-thumb-empty {
	display: inline-block;
	width: 64px;
	height: 64px;
	background: var(--g50, #E8F1EC);
}
.csp-article-view .elementor-author-box__avatar.csp-thumb-empty img { display: none; }

/* Tap targets for related cards / author name */
.csp-article-view .elementor-post__title a,
.csp-article-view .elementor-author-box__name a,
.csp-article-view .related-posts a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* TOC / Contents chrome: keep brand heading font, don't skew scale */
.csp-article-view nav.card h2,
.csp-article-view .toc,
.single .toc {
  font-family: var(--csp-font-heading);
}
.csp-article-view nav.card h2 {
  font-size: 1rem;
  margin: 0 0 0.5em;
}

/* rc15 body brand fonts (classic theme shells) */
body.csp-article-view,
body.csp-article-view .wp-site-blocks,
body.single-post,
body.page:not(.csp-v3) {
	font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
}
body.csp-article-view h1,
body.csp-article-view h2,
body.csp-article-view h3,
body.csp-article-view h4,
body.single-post h1,
body.single-post h2,
body.single-post h3,
body.page:not(.csp-v3) h1,
body.page:not(.csp-v3) h2,
body.page:not(.csp-v3) h3 {
	font-family: 'Space Grotesk', sans-serif !important;
}
/* Tap targets in theme chrome when v3 header is absent */
body.csp-article-view .wp-block-navigation-item__content,
body.csp-article-view .wp-block-navigation__responsive-container-open,
body.csp-article-view header a,
body.csp-article-view footer a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	box-sizing: border-box;
}

/* rc15 prose + toc taps */
.article .prose,
.csp-v3 .prose {
	--csp-font-body: 'IBM Plex Sans', system-ui, sans-serif;
	--csp-font-heading: 'Space Grotesk', sans-serif;
	--csp-fs-body: 1.0625rem;
	--csp-fs-h1: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
	--csp-fs-h2: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
	--csp-fs-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
	--csp-lh: 1.65;
	--csp-measure: min(70ch, 100%);
	font-family: var(--csp-font-body) !important;
	font-size: var(--csp-fs-body) !important;
	line-height: var(--csp-lh);
	max-width: var(--csp-measure);
}
@media (min-width: 768px) {
	.article .prose, .csp-v3 .prose { --csp-fs-body: 1.125rem; }
}
.article .prose h1, .csp-v3 .prose h1 { font-family: var(--csp-font-heading) !important; font-size: var(--csp-fs-h1) !important; }
.article .prose h2, .csp-v3 .prose h2 { font-family: var(--csp-font-heading) !important; font-size: var(--csp-fs-h2) !important; margin-top: 2.2em; margin-bottom: 0.6em; }
.article .prose h3, .csp-v3 .prose h3 { font-family: var(--csp-font-heading) !important; font-size: var(--csp-fs-h3) !important; margin-top: 1.6em; margin-bottom: 0.5em; }

/* rc15 mobile overflow: never let measure or replaced content widen the page */
@media (max-width: 760px) {
  .csp-article,
  .csp-article-view .entry-content,
  .article .prose,
  .csp-v3 .prose,
  .single .entry-content,
  .page .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow-x: clip;
  }
  .csp-article img,
  .article .prose img,
  .csp-v3 .prose img,
  .csp-article h1 img, .csp-article h2 img, .csp-article h3 img, .csp-article h4 img,
  .prose h1 img, .prose h2 img, .prose h3 img, .prose h4 img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  .article, .article > * { max-width: 100%; min-width: 0; }
}