/* G2G — blocks a client may add to a blog post.

   The article styles of the mockup (css/pages.css, .article-content) dress bare tags: text,
   headings, lists, a quote, a picture, a table. WordPress offers more blocks than that; each of
   them is brought to the same look here with the mockup's own tokens — no new colours, sizes
   or radii. Rhythm is kept the article's way: by top margins only.

   Every selector starts with .article-content. The editor copy (editor-post-blocks.css) is
   generated from this file by pointing that scope at the editor canvas of a post. */

.article-content {
	--post-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ── Rhythm ───────────────────────────────────────────────────────────────── */

/* WordPress gives its figures and boxes a bottom margin; the article spaces from the top. */
.article-content [class*="wp-block-"] {
	margin-bottom: 0;
}

/* A block that is an object rather than text stands 28 apart, as pictures and tables do. */
.article-content :where(.wp-block-columns, .wp-block-cover, .wp-block-media-text, .wp-block-buttons, .wp-block-file, .wp-block-embed, .wp-block-video, .wp-block-audio, .wp-block-gallery, .wp-block-pullquote, .wp-block-group.has-background, details, pre) {
	margin-top: var(--space-28);
}

.article-content :where(.wp-block-columns, .wp-block-cover, .wp-block-media-text, .wp-block-buttons, .wp-block-file, .wp-block-group.has-background, details, pre) + :where(p, ul, ol, blockquote, table) {
	margin-top: var(--space-28);
}

/* A plain group is a wrapper: it keeps the step of the text it holds. */
.article-content :where(.wp-block-group:not(.has-background)) {
	margin-top: var(--space-16);
}

/* Inside a box the first element starts at its top edge. */
.article-content :where(.wp-block-column, .wp-block-group, .wp-block-media-text__content, .wp-block-cover__inner-container, .wp-block-pullquote, details, td, th) > :first-child {
	margin-top: 0;
}

/* Wide and full alignment have nowhere to go in a reading column. */
.article-content :where(.alignwide, .alignfull) {
	max-width: 100%;
	margin-inline: 0;
}

/* Text never runs beside a floated picture past the end of the article. */
.article-content::after {
	content: "";
	display: block;
	clear: both;
}

.article-content :where(h2, h3, hr, table, blockquote, figure:not(.alignleft, .alignright), pre, details, .wp-block-columns, .wp-block-cover, .wp-block-media-text, .wp-block-buttons, .wp-block-file) {
	clear: both;
}

/* ── Captions ─────────────────────────────────────────────────────────────── */

.article-content figcaption,
.article-content .wp-element-caption {
	margin: var(--space-8) 0 0;
	color: var(--fg-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	text-align: start;
}

/* ── Picture ──────────────────────────────────────────────────────────────── */

.article-content .wp-block-image img {
	height: auto;
}

.article-content .wp-block-image.aligncenter,
.article-content .wp-block-image .aligncenter {
	margin-inline: auto;
}

@media (min-width: 768px) {
	.article-content .wp-block-image.alignleft,
	.article-content .wp-block-image .alignleft {
		float: left;
		max-width: 50%;
		margin: var(--space-28) var(--space-24) var(--space-8) 0;
	}

	.article-content .wp-block-image.alignright,
	.article-content .wp-block-image .alignright {
		float: right;
		max-width: 50%;
		margin: var(--space-28) 0 var(--space-8) var(--space-24);
	}
}

/* On a phone a picture beside the text leaves a column of three words: it stands alone. */
@media (max-width: 767px) {
	.article-content .wp-block-image.alignleft,
	.article-content .wp-block-image.alignright,
	.article-content .wp-block-image :is(.alignleft, .alignright) {
		float: none;
		margin-inline: 0;
	}
}

/* ── Gallery ──────────────────────────────────────────────────────────────── */

/* The theme switches the block gap off (the mockup owns all spacing), which leaves the
   pictures of a gallery touching. The gap is set in every place the block reads it: its
   default (the editor computes the column width from it), the value itself, and the gap. */
.article-content .wp-block-gallery.has-nested-images {
	--wp--style--gallery-gap-default: var(--space-12);
	--wp--style--unstable-gallery-gap: var(--space-12);
	gap: var(--space-12);
}

/* The frame and the corners move from the picture to its cell: the caption lies over the
   bottom of the picture and has to follow the same corners. */
.article-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	overflow: hidden;
	border-radius: var(--radius-md);
}

.article-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	border: 0;
	border-radius: 0;
}

.article-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	text-align: center;
}

/* The caption of the whole gallery sits as close to it as a caption to its picture (8),
   on the same left edge. */
.article-content .wp-block-gallery.has-nested-images > figcaption {
	flex-basis: 100%;
	margin-top: calc(var(--space-8) - var(--space-12));
	text-align: start;
}

/* ── Quote ────────────────────────────────────────────────────────────────── */

/* The name under a quote: smaller than the quote, not greyed out of sight. */
.article-content :where(blockquote) cite {
	display: block;
	margin-top: var(--space-12);
	color: var(--fg-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	font-style: normal;
	font-weight: var(--fw-medium);
}

/* "Plain" style: the mint line stays, the card goes. */
.article-content .wp-block-quote.is-style-plain {
	padding-block: 0;
	border-radius: 0;
	background-image: none;
}

/* Pullquote is the same card: one look for a quote, whichever block it was typed in. */
.article-content .wp-block-pullquote {
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	text-align: start;
}

.article-content .wp-block-pullquote > blockquote {
	margin-top: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.article-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

/* Button M of the mockup (.btn .btn--primary). */
.article-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--control-h-md);
	padding: 0 22px;
	border: var(--border-width-button) solid transparent;
	border-radius: var(--radius-pill);
	background-color: var(--color-cta);
	color: var(--color-text);
	font-size: var(--fs-button);
	line-height: var(--lh-button);
	letter-spacing: var(--ls-button);
	font-weight: var(--fw-button);
	text-align: center;
	text-decoration: none;
}

/* "Outline" style — Secondary of the mockup (.btn--secondary on a light section). */
.article-content .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	border: var(--sec-border-w) solid var(--sec-border);
	background-color: transparent;
}

.article-content .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	padding: 0 22px;
	color: var(--sec-fg);
}

@media (hover: hover) {
	.article-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover {
		background-color: var(--color-cta-hover);
	}

	.article-content .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
		border-color: var(--sec-hover-border);
		background-color: var(--sec-hover-bg);
		color: var(--sec-hover-fg);
	}
}

/* ── Separator ────────────────────────────────────────────────────────────── */

.article-content .wp-block-separator:not(.is-style-dots) {
	height: var(--border-width);
	border: 0;
	background-color: var(--line);
	opacity: 1;
}

/* "Dots" style: the three dots are text, so the rule gives up its one-pixel height. */
.article-content .wp-block-separator.is-style-dots {
	height: auto;
	margin-top: var(--space-28);
	overflow: visible;
	background-color: transparent;
	color: var(--fg-2);
	line-height: 1;
	text-align: center;
}

/* ── Code, preformatted text, verse ───────────────────────────────────────── */

.article-content :where(pre) {
	padding: var(--space-16) var(--space-20);
	border: var(--border-width) solid var(--line);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-soft);
	color: var(--fg);
	font-family: var(--post-mono);
	font-size: var(--fs-small);
	line-height: 1.6;
	overflow-x: auto;
	tab-size: 2;
}

/* A word of code inside a sentence. */
.article-content :where(:not(pre) > code, kbd) {
	padding: 1px var(--space-4);
	border-radius: var(--radius-xs);
	background-color: var(--color-surface-tint);
	color: var(--fg);
	font-family: var(--post-mono);
	font-size: 0.875em;
}

/* Verse is text with its own line breaks, not code: the article's face, no box. */
.article-content pre.wp-block-verse {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* ── Table ────────────────────────────────────────────────────────────────── */

/* The stylesheet of the Table block is not loaded (inc/assets.php); its options are kept here. */
.article-content .wp-block-table .has-fixed-layout {
	table-layout: fixed;
}

.article-content :where(th, td).has-text-align-center {
	text-align: center;
}

.article-content :where(th, td).has-text-align-right {
	text-align: right;
}

.article-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
	background-color: var(--row-alt);
}

.article-content :where(tfoot td) {
	color: var(--fg);
	font-weight: var(--fw-semibold);
}

/* ── Details ──────────────────────────────────────────────────────────────── */

/* A Details block typed as a question takes the look of the site's FAQ row (class faq-item,
   js/faq.js). One without that class gets the same row, drawn here. */
.article-content :where(details) + details {
	margin-top: 0;
}

.article-content :where(details:not(.faq-item)) {
	padding-block: var(--space-20);
	border-bottom: var(--border-width) solid var(--line);
}

.article-content :where(details:not(.faq-item)) > summary {
	color: var(--fg);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: var(--fw-h4);
	cursor: pointer;
}

.article-content :where(details:not(.faq-item)) > summary + * {
	margin-top: var(--space-12);
}

/* ── Columns ──────────────────────────────────────────────────────────────── */

.article-content .wp-block-columns {
	gap: var(--space-24);
}

/* ── Media & Text ─────────────────────────────────────────────────────────── */

.article-content .wp-block-media-text > .wp-block-media-text__content {
	padding: 0 0 0 var(--space-24);
}

.article-content .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	padding: 0 var(--space-24) 0 0;
}

@media (max-width: 600px) {
	.article-content .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: var(--space-16) 0 0;
	}
}

/* ── Cover ────────────────────────────────────────────────────────────────── */

.article-content .wp-block-cover {
	padding: var(--space-32);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* Over a dark picture the text takes the colours of a dark section. */
.article-content .wp-block-cover:not(.is-light) {
	--fg: var(--color-text);
	--fg-2: var(--color-text);
	--fg-accent: var(--color-accent);
	--line: var(--color-border-strong);
	--focus: var(--color-accent);
}

.article-content .wp-block-cover .wp-block-cover__image-background,
.article-content .wp-block-cover .wp-block-cover__video-background {
	border: 0;
	border-radius: 0;
}

@media (max-width: 767px) {
	.article-content .wp-block-cover {
		padding: var(--space-20);
	}
}

/* ── Group with a background ──────────────────────────────────────────────── */

.article-content .wp-block-group.has-background {
	padding: var(--space-24);
	border-radius: var(--radius-md);
}

/* ── Video, audio, embeds ─────────────────────────────────────────────────── */

.article-content .wp-block-video video,
.article-content .wp-block-embed iframe {
	border-radius: var(--radius-md);
}

.article-content .wp-block-video video {
	display: block;
	width: 100%;
}

.article-content .wp-block-audio audio {
	display: block;
	width: 100%;
}

/* ── File ─────────────────────────────────────────────────────────────────── */

.article-content .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12) var(--space-16);
	padding: var(--space-16) var(--space-20);
	border: var(--border-width) solid var(--line);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
}

/* The download button — Secondary of the mockup. */
.article-content .wp-block-file .wp-block-file__button {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-h-md);
	margin-left: 0;
	padding: 0 22px;
	border: var(--sec-border-w) solid var(--sec-border);
	border-radius: var(--radius-pill);
	background-color: transparent;
	color: var(--sec-fg);
	font-size: var(--fs-button);
	line-height: var(--lh-button);
	letter-spacing: var(--ls-button);
	font-weight: var(--fw-button);
	text-decoration: none;
}

@media (hover: hover) {
	.article-content .wp-block-file .wp-block-file__button:hover {
		border-color: var(--sec-hover-border);
		background-color: var(--sec-hover-bg);
		color: var(--sec-hover-fg);
	}
}

/* ── Footnotes, highlight ─────────────────────────────────────────────────── */

.article-content .wp-block-footnotes {
	margin-top: var(--space-40);
	padding-top: var(--space-20);
	border-top: var(--border-width) solid var(--line);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.article-content :where(sup.fn) a {
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.article-content :where(mark) {
	padding: 0 2px;
	background-color: var(--color-surface-tint-mint);
	color: inherit;
}