/*
 * legacy.css — the classic-content rules Twenty Seventeen used to provide (research R1.6).
 *
 * `core/post-content` runs the same `the_content` filter chain a classic theme ran, so the ~53
 * pre-2026 posts' HTML, shortcodes and old block markup render unchanged. What does NOT come with
 * them is the CSS: alignment classes, caption wrappers and `[gallery]` output were styled by the
 * active theme, and under a block theme nothing styles them (gutenberg issue 45834). The symptom is not
 * an error — it is a caption that stops being a caption and an image that stops floating, on posts
 * nobody is looking at today.
 *
 * Two rules about this file:
 *
 *   1. IT STATES NO COLOUR. Every colour here is a `var(--wp--preset--color--…)` preset that
 *      theme.json generated from the token set; `check-theme.js --colors` fails a literal.
 *   2. IT IS FOR CLASSIC MARKUP ONLY. Anything a block emits belongs in theme.json, where the
 *      editor can see it — a rule here is invisible to the site editor and drifts from what a
 *      reviewer reads.
 */

/* ── alignment ───────────────────────────────────────────────────────────────────────────────── */

.alignnone {
	margin: 0 0 1.5em;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 0 auto 1.5em;
}

.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}

@media (max-width: 480px) {
	/* A float in a 390px viewport leaves a column two words wide. */
	.alignleft,
	.alignright {
		display: block;
		float: none;
		margin: 0 0 1.5em;
	}
}

/* ── images ──────────────────────────────────────────────────────────────────────────────────── */

img.alignnone,
img.alignleft,
img.alignright,
img.aligncenter,
img.size-full,
img.size-large,
img.size-medium,
img.size-thumbnail,
img.wp-post-image,
.wp-caption img,
.wp-block-image img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 0 0 1.5em;
}

figure img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* ── captions ────────────────────────────────────────────────────────────────────────────────── */

.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption .wp-caption-text,
.wp-caption-dd,
.wp-block-image figcaption {
	color: var(--wp--preset--color--steel);
	font-size: var(--wp--preset--font-size--small);
	margin: 0.5em 0 0;
	text-align: center;
}

/* ── [gallery] ───────────────────────────────────────────────────────────────────────────────── */

.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.5em 1.5em;
}

.gallery-item {
	margin: 0 0 1em;
	padding: 0 0.5em;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 16.66%;
}

.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
	width: 12.5%;
}

.gallery-item img {
	display: block;
	height: auto;
	width: 100%;
}

.gallery-caption {
	color: var(--wp--preset--color--steel);
	display: block;
	font-size: var(--wp--preset--font-size--small);
}

/* ── classic tables ──────────────────────────────────────────────────────────────────────────── */

.wp-block-post-content table,
.entry-content table {
	border-collapse: collapse;
	display: block;
	margin: 0 0 1.5em;
	max-width: 100%;
	overflow-x: auto;
}

.wp-block-post-content th,
.wp-block-post-content td,
.entry-content th,
.entry-content td {
	border: 1px solid var(--wp--preset--color--teal-100);
	padding: 0.5em 0.75em;
	text-align: left;
}

.wp-block-post-content thead th,
.entry-content thead th {
	border-bottom-width: 2px;
}

/* ── the two class hooks WordPress requires a theme to state ─────────────────────────────────── */

.sticky {
	display: block;
}

.bypostauthor {
	display: block;
}

/* ── assistive text ──────────────────────────────────────────────────────────────────────────── */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--cloud);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--teal-700);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 0.75em 1em;
	text-decoration: underline;
	top: 5px;
	width: auto;
	z-index: 100000;
}