/**
 * Conext "whitepaper" skin for the long-form article patterns.
 *
 * Everything is scoped under .conext-paper so it only affects the pattern,
 * never the rest of the site. Mirrors the Conext document design:
 * Montserrat display + Source Sans body, ink/green/charcoal palette,
 * charcoal executive panel, green-square numbered sections, references block.
 */

.conext-paper {
	--cnx-green:       #1a9e2e;
	--cnx-green-deep:  #137a22;
	--cnx-green-light: #62d076;
	--cnx-charcoal:    #383838;
	--cnx-ink:         #262829;
	--cnx-paper:       #ffffff;
	--cnx-mist:        #f3f3f1;
	--cnx-hair:        #e3e3de;
	--cnx-muted:       #6c7073;
	--cnx-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--cnx-body:    "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
	/* Brand diamond as a data-URI, drawn via ::before so the saved post markup
	   stays KSES-safe (no inline <svg> for wp_kses_post to strip). */
	--cnx-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='16' y='2' width='19.8' height='19.8' transform='rotate(45 16 16)' fill='%231a9e2e'/%3E%3Crect x='16' y='7' width='12.7' height='12.7' transform='rotate(45 16 16)' fill='%2346bd58'/%3E%3C/svg%3E");

	counter-reset: cnx-section;
	background: var(--cnx-paper);
	color: var(--cnx-ink);
	font-family: var(--cnx-body);
	line-height: 1.7;
	max-width: 840px;
	padding: 4px 84px 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 50px rgba(0, 0, 0, .12);
	-webkit-font-smoothing: antialiased;
}

.conext-paper > *,
.conext-paper .conext-exec > *,
.conext-paper .conext-refs > * {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Brand lockup ---------- */
.conext-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-top: 60px;
	margin-bottom: 38px;
}
.conext-brand::before {
	content: "";
	width: 30px;
	height: 30px;
	flex: none;
	background: center / contain no-repeat var(--cnx-mark);
}
.conext-brand .cnx-word {
	font-family: var(--cnx-display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: .34em;
	color: var(--cnx-ink);
}

/* ---------- Cover title ---------- */
.conext-paper > h1.wp-block-heading {
	font-family: var(--cnx-display);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--cnx-ink);
	margin: 0 0 18px;
}
.conext-paper > h1.wp-block-heading + p {
	font-size: 19px;
	line-height: 1.5;
	color: var(--cnx-muted);
	margin: 0 0 30px;
}
.conext-paper > h1.wp-block-heading + p em { font-style: normal; }

/* ---------- Separators become hairlines ---------- */
.conext-paper .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--cnx-hair);
	max-width: none;
	margin: 40px 0;
	opacity: 1;
}

/* ---------- Executive / Key-takeaways panel (charcoal) ---------- */
.conext-paper .conext-exec {
	background: var(--cnx-charcoal);
	color: #eceeec;
	padding: 32px 36px;
	margin: 8px 0 40px;
	border: 0;
}
.conext-paper .conext-exec h2.wp-block-heading {
	counter-increment: none;
	padding-left: 0;
	font-family: var(--cnx-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cnx-green-light);
	margin: 0 0 12px;
}
.conext-paper .conext-exec h2.wp-block-heading::before { content: none; }
.conext-paper .conext-exec p { margin: 0; font-size: 17px; line-height: 1.6; color: #eceeec; }
.conext-paper .conext-exec ul { margin: 4px 0 0; padding-left: 20px; }
.conext-paper .conext-exec li { font-size: 16px; margin-bottom: 8px; color: #eceeec; }
.conext-paper .conext-exec strong { color: #fff; }

/* ---------- Numbered body sections ---------- */
.conext-paper h2.wp-block-heading {
	counter-increment: cnx-section;
	position: relative;
	padding-left: 56px;
	font-family: var(--cnx-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--cnx-ink);
	margin: 52px 0 16px;
}
.conext-paper h2.wp-block-heading::before {
	content: counter(cnx-section, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 2px;
	font-family: var(--cnx-display);
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	background: var(--cnx-green);
	width: 38px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.conext-paper h3.wp-block-heading {
	font-family: var(--cnx-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--cnx-ink);
	margin: 32px 0 8px;
}

.conext-paper p { margin: 0 0 18px; font-size: 17px; }
.conext-paper .has-small-font-size { font-size: 13.5px; color: var(--cnx-muted); }
.conext-paper a { color: var(--cnx-green-deep); }

/* ---------- References / sources block ---------- */
.conext-paper .conext-refs {
	margin-top: 56px;
	padding: 28px 0 0;
	border-top: 1px solid var(--cnx-hair);
}
.conext-paper .conext-refs h3.wp-block-heading {
	font-family: var(--cnx-display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cnx-muted);
	margin: 0 0 14px;
}
.conext-paper .conext-refs p { font-size: 14px; color: var(--cnx-muted); }

/* ---------- Footer ---------- */
.conext-footer {
	margin: 40px -84px 0;
	background: var(--cnx-charcoal);
	color: #c9ccc9;
	padding: 22px 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--cnx-display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.conext-footer .cnx-fl { display: flex; align-items: center; gap: 9px; }
.conext-footer .cnx-fl::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: center / contain no-repeat var(--cnx-mark);
}
.conext-footer .cnx-word { color: #fff; letter-spacing: .26em; }

/* ---------- Narrow screens ---------- */
@media (max-width: 782px) {
	.conext-paper { padding-left: 28px; padding-right: 28px; box-shadow: none; }
	.conext-paper > h1.wp-block-heading { font-size: 32px; }
	.conext-footer { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; }
}

/* ---------- Print ---------- */
@media print {
	.conext-paper { box-shadow: none; max-width: none; }
	.conext-paper h2.wp-block-heading { page-break-after: avoid; }
	.conext-paper .conext-exec,
	.conext-paper .conext-refs { page-break-inside: avoid; }
}