/* Native blocks inside blog posts. Loaded on single posts and in the block
   editor (add_editor_style), so the editor shows the same boxes and buttons. */

/* Area (Group block, style "Area"): pale box with the hand-drawn border of the
   service cards. area-border.svg is a small tile cut from that border, with
   short side pieces whose ends join seamlessly; border-image keeps the corners
   fixed and repeats the sides, so the line keeps its thickness and wobble at
   any size. The selector carries .wp-block-group so it does not depend on
   loading after the core layout styles. */
.wp-block-group.is-style-cmath-area {
	padding: var(--space-113);
	border: 4px solid transparent;
	border-image: url("../img/area-border.svg?v=2") 4 fill / 4px round;
}

/* A background chosen in the editor shows instead of the pale fill. */
.wp-block-group.is-style-cmath-area.has-background,
.wp-block-group.is-style-cmath-area[style*="background-image"] {
	border-image-slice: 4;
	background-clip: padding-box;
}

.wp-block-group.is-style-cmath-area > :first-child {
	margin-top: 0;
}

.wp-block-group.is-style-cmath-area > :last-child {
	margin-bottom: 0;
}

.wp-block-group.is-style-cmath-area > * + * {
	margin-top: var(--space-100);
}

.cmath-single__content > .is-style-cmath-area {
	margin-block: var(--space-150);
}

/* The article already spaces the header from the content. */
.cmath-single__content > .is-style-cmath-area:first-child {
	margin-top: 0;
}

.cmath-single__content > .is-style-cmath-area:last-child {
	margin-bottom: 0;
}

@media (forced-colors: active) {
	.wp-block-group.is-style-cmath-area {
		border: 1px solid CanvasText;
		border-image: none;
	}
}

/* Headings: a step below the post title (h4 size), with more room above than
   between paragraphs. */
h2.wp-block-heading,
.cmath-single__content h2 {
	font-size: var(--font-h5-size);
}

:is(h3, h4, h5, h6).wp-block-heading,
.cmath-single__content :is(h3, h4, h5, h6) {
	font-size: var(--font-h6-size);
}

.wp-block-heading,
.cmath-single__content :is(h2, h3, h4, h5, h6),
.wp-block-group.is-style-cmath-area > :is(h2, h3, h4, h5, h6) {
	margin-top: 2em;
}

.cmath-single__content > :is(h2, h3, h4, h5, h6):first-child,
.is-root-container > .wp-block-heading:first-child {
	margin-top: 0;
}

/* Buttons: same look as the site's primary button. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-100);
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-50) var(--space-100);
	font-family: var(--font-family-paragraph);
	font-size: var(--font-body-size);
	font-weight: var(--font-body-weight);
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: var(--color-text-white);
	background: var(--color-brand-teal-darker);
	border: var(--border-width-default) solid var(--color-brand-teal-darker);
	border-radius: var(--radius-full);
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	color: var(--color-text-white);
	background: var(--color-brand-dark-turquoise);
	border-color: var(--color-brand-dark-turquoise);
}

/* Lists: the theme removes list markers site-wide; posts need them back. */
.wp-block-list,
.cmath-single__content > ul,
.cmath-single__content > ol {
	padding-left: 1.5em;
	list-style: disc;
}

ol.wp-block-list,
.cmath-single__content > ol {
	list-style: decimal;
}

.wp-block-list .wp-block-list {
	margin-top: var(--space-50);
}

/* Images and captions. */
.wp-block-image {
	margin-inline: 0;
}

.wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

.wp-block-image figcaption,
.wp-block-image .wp-element-caption {
	margin-top: var(--space-50);
	font-size: var(--font-label-s-size);
	color: var(--color-text-secondary);
	text-align: center;
}

/* Accordion (Details block). */
.wp-block-details {
	padding-block: var(--space-75);
	border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
}

.wp-block-details > summary + * {
	margin-top: var(--space-75);
}

/* Embedded videos. */
.wp-block-embed {
	margin-inline: 0;
}

.wp-block-embed iframe {
	max-width: 100%;
}