/*
 * Article body (single.php → .rb-article-body): block-editor content styled like the original
 * article sections. Values are the computed values of the original utility classes (app.css).
 *
 * Original structure → block equivalent:
 *  - section heading  "font-display text-2xl font-bold tracking-tight text-midnight sm:text-3xl scroll-mt-28" → Heading (H2)
 *  - subheading       "font-display text-lg font-semibold tracking-tight text-midnight/90"                    → Heading (H3)
 *  - paragraph        "text-base leading-relaxed text-charcoal/85 sm:text-lg"                                  → Paragraph
 *  - bullets          "space-y-3 pl-2" + li "flex items-start gap-3 text-base leading-relaxed text-charcoal/85"
 *                     + dot "mt-2 size-1.5 shrink-0 rounded-full bg-gold"                                      → List
 *  - callout          "my-6 rounded-lg border border-hairline bg-white/80 p-6 shadow-sm"                       → Group .rb-callout
 *  - comparison       "my-8 grid gap-4 sm:grid-cols-2" + two cards "rounded-lg border p-5"                     → Group .rb-comparison > 2 Groups
 *  - pull quote       "my-8 border-l-2 border-gold bg-white/50 py-4 pr-6 pl-7 rounded-r-lg"                    → Quote (.rb-pullquote)
 * Spacing: sections were "space-y-6" blocks inside "space-y-12"; with collapsing margins the flat
 * block flow below gives the same distances (1.5rem inside a section, 3rem before each H2).
 */

/* ---------- Flow ---------- */
.rb-article-body > * {
	margin-top: 0;
	margin-bottom: 0;
}
.rb-article-body > * + * {
	margin-top: calc(var(--spacing) * 6);
}
.rb-article-body > h2:not(:first-child) {
	margin-top: calc(var(--spacing) * 12);
}
.rb-article-body .wp-block-group__inner-container {
	display: contents;
}

/* ---------- Headings ---------- */
.rb-article-body > h2 {
	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
	font-size: var(--text-2xl);
	line-height: var(--text-2xl--line-height);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--midnight);
	scroll-margin-top: calc(var(--spacing) * 28);
}
.rb-article-body > h3,
.rb-article-body > h4 {
	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
	font-size: var(--text-lg);
	line-height: var(--text-lg--line-height);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
	color: var(--midnight);
	color: color-mix(in oklab, var(--midnight) 90%, transparent);
	scroll-margin-top: calc(var(--spacing) * 28);
}

/* ---------- Paragraphs and lists ---------- */
.rb-article-body > p {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--charcoal);
	color: color-mix(in oklab, var(--charcoal) 85%, transparent);
}
.rb-article-body > ul,
.rb-article-body > ol {
	padding-left: calc(var(--spacing) * 2);
	list-style: none;
}
.rb-article-body > ul > li,
.rb-article-body > ol > li {
	position: relative;
	padding-left: calc(var(--spacing) * 4.5); /* dot 1.5 + gap 3 */
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--charcoal);
	color: color-mix(in oklab, var(--charcoal) 85%, transparent);
}
.rb-article-body > ul > li + li,
.rb-article-body > ol > li + li {
	margin-top: calc(var(--spacing) * 3);
}
.rb-article-body > ul > li::before {
	content: "";
	position: absolute;
	top: calc(var(--spacing) * 2);
	left: 0;
	width: calc(var(--spacing) * 1.5);
	height: calc(var(--spacing) * 1.5);
	border-radius: 9999px;
	background-color: var(--gold);
}
.rb-article-body > ol {
	counter-reset: rb-ol;
}
.rb-article-body > ol > li {
	counter-increment: rb-ol;
	padding-left: calc(var(--spacing) * 6);
}
.rb-article-body > ol > li::before {
	content: counter(rb-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: var(--font-weight-semibold);
	color: var(--gold);
}
.rb-article-body li > ul,
.rb-article-body li > ol {
	margin-top: calc(var(--spacing) * 3);
	padding-left: calc(var(--spacing) * 5);
	list-style: disc;
}

.rb-article-body strong,
.rb-article-body b {
	font-weight: var(--font-weight-semibold);
	color: var(--midnight);
}
.rb-article-body a:not([class]) {
	color: var(--midnight);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-underline-offset: 3px;
	transition: color 0.15s;
}
.rb-article-body a:not([class]):hover {
	color: var(--gold);
}

@media (width >= 40rem) {
	.rb-article-body > h2 {
		font-size: var(--text-3xl);
		line-height: var(--text-3xl--line-height);
	}
	.rb-article-body > p {
		font-size: var(--text-lg);
	}
}

/* ---------- Callout (Group block, class "rb-callout") ---------- */
.rb-article-body .rb-callout {
	margin-block: calc(var(--spacing) * 6);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	background-color: rgb(255 255 255 / 0.8);
	padding: calc(var(--spacing) * 6);
	box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
.rb-article-body .rb-callout p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--charcoal);
	color: color-mix(in oklab, var(--charcoal) 80%, transparent);
}
.rb-article-body .rb-callout p:not(:first-child) {
	margin-top: calc(var(--spacing) * 3);
}
/* First paragraph = title, with the file-text icon. */
.rb-article-body .rb-callout p:first-child:not(:last-child) {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--midnight);
}
.rb-article-body .rb-callout p:first-child:not(:last-child)::before {
	content: "";
	flex-shrink: 0;
	width: calc(var(--spacing) * 4);
	height: calc(var(--spacing) * 4);
	background-color: var(--gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Before / after comparison (Group "rb-comparison" with two Groups) ---------- */
.rb-article-body .rb-comparison {
	display: grid;
	gap: calc(var(--spacing) * 4);
	margin-block: calc(var(--spacing) * 8);
}
@media (width >= 40rem) {
	.rb-article-body .rb-comparison {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.rb-article-body .rb-comparison .wp-block-group {
	margin: 0;
	border: 1px solid var(--gold);
	border-radius: var(--radius);
	padding: calc(var(--spacing) * 5);
	border-color: color-mix(in oklab, var(--gold) 40%, transparent);
	background-color: color-mix(in oklab, var(--gold) 5%, transparent);
}
.rb-article-body .rb-comparison .wp-block-group:first-child {
	border-color: var(--destructive);
	border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
	background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
}
.rb-article-body .rb-comparison p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--midnight);
	font-weight: 500;
}
.rb-article-body .rb-comparison .wp-block-group:first-child p {
	color: var(--charcoal);
	color: color-mix(in oklab, var(--charcoal) 85%, transparent);
	font-weight: inherit;
}
.rb-article-body .rb-comparison p:not(:first-child) {
	margin-top: calc(var(--spacing) * 3);
}
/* First paragraph of each card = label (eyebrow). */
.rb-article-body .rb-comparison p:first-child:not(:last-child) {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.5rem; /* the original label is an inline span on a 1.5 × 16px line */
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}
.rb-article-body .rb-comparison .wp-block-group:first-child p:first-child:not(:last-child) {
	color: var(--destructive);
}

/* ---------- Pull quote (Quote block) ---------- */
.rb-article-body blockquote {
	margin-block: calc(var(--spacing) * 8);
	border-left: 2px solid var(--gold);
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	background-color: rgb(255 255 255 / 0.5);
	padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6) calc(var(--spacing) * 4) calc(var(--spacing) * 7);
}
.rb-article-body blockquote p {
	margin: 0;
	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
	color: var(--midnight);
}
.rb-article-body blockquote p + p {
	margin-top: calc(var(--spacing) * 3);
}
.rb-article-body blockquote p:first-of-type::before {
	content: "\201C";
}
.rb-article-body blockquote p:last-of-type::after {
	content: "\201D";
}
.rb-article-body blockquote cite {
	display: block;
	margin-top: calc(var(--spacing) * 3);
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}
@media (width >= 40rem) {
	.rb-article-body blockquote p {
		font-size: var(--text-2xl);
	}
}

/* ---------- Media ---------- */
.rb-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: calc(var(--radius) + 4px);
}
.rb-article-body > figure {
	margin-block: calc(var(--spacing) * 8);
}