/*
 * Content that the theme did not write.
 *
 * A block theme styles the blocks it ships with. Real sites are older than
 * that: posts migrated from the classic editor, pages built by a page builder
 * and abandoned, an image pasted straight into the editor by whoever ran the
 * site in 2014. That markup carries the classic alignment classes and bare
 * <img> tags, and a theme that only knows wp-block-image leaves all of it
 * unstyled — which is exactly what makes a migrated site look untidy.
 *
 * This sheet gives that content the same manners as a block. It loads on
 * singular views only, where post content is actually rendered.
 */

/*
 * The base rules come first and say what every image in content gets; the
 * alignment rules follow as modifiers. Keep the base rules free of any
 * property an alignment class needs to override: selectors like
 * ".entry-content p > img:only-child" out-specify ".entry-content .alignleft",
 * so a width set there would win over a float's cap no matter the order.
 */

/* ---------- Images in content ---------- */

/*
 * Every image in content gets the corner radius the theme uses everywhere
 * else, whether it arrived as a block, a bare <img> or a classic caption.
 * width/height attributes from the classic editor are ignored in favour of the
 * intrinsic ratio, so a tag that claims 895x504 for a 300px file simply stops
 * at the column edge instead of stretching.
 */
.entry-content img {
	border-radius: var(--wp--custom--radius--medium);
}

/* A cover background belongs to the cover surface, not to the generic content
 * image treatment. Inherit an intentional cover radius; otherwise stay flush. */
.entry-content .wp-block-cover__image-background {
	border-radius: inherit;
}

/*
 * Only display is set here. max-width and height come from the global img rule
 * in style.css, and stating them again would out-specify the alignment classes
 * below: ".entry-content p > img:only-child" counts two classes and two
 * elements, ".entry-content .alignleft" only two classes, so a float would
 * never get its width cap.
 */
.entry-content > img,
.entry-content p > img:only-child {
	display: block;
}

/* A bare image on its own line is a figure in everything but name. */
.entry-content p:has(> img:only-child) {
	margin-block: var(--wp--preset--spacing--40);
}

/* Icons and inline images keep their place in the line of text. */
.entry-content p > img:not(:only-child) {
	border-radius: var(--wp--custom--radius--small);
	vertical-align: middle;
}

/* ---------- Classic captions ---------- */

/*
 * .wp-caption is what the classic editor wrapped captioned images in, and it
 * carries an inline width attribute that is usually a few pixels too wide.
 */
.entry-content .wp-caption {
	max-width: 100%;
	width: auto !important;
	margin-block: var(--wp--preset--spacing--40);
}

.entry-content .wp-caption img {
	display: block;
	width: 100%;
	height: auto;
}

.entry-content .wp-caption-text,
.entry-content figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
	line-height: 1.5;
	margin-top: 0.5rem;
	margin-bottom: 0;
	text-align: left;
}

/* ---------- Classic alignments ---------- */

/*
 * Floated content is capped and centred content is centred. The cap matters:
 * legacy markup regularly carries a hardcoded width wider than the column it
 * now sits in, and an 895px float in a 44rem column would push the text beside
 * it down to a one-word ribbon.
 */
.entry-content .alignleft,
.entry-content .alignright {
	max-width: 50%;
}

.entry-content .alignleft {
	float: left;
	margin: 0.35rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) 0;
}

.entry-content .alignright {
	float: right;
	margin: 0.35rem 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* alignnone is what the classic editor writes for "no alignment". It is not a
   float, so it only needs to behave like a block and keep its own line. */
.entry-content img.alignnone,
.entry-content img.aligncenter {
	display: block;
}

/* A float must never survive into a narrow column: below this width the text
   beside it has nowhere to go. */
@media (max-width: 600px) {
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-block: var(--wp--preset--spacing--30);
	}
}

/* Text never wraps into the space under a float. */
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6 {
	clear: both;
}

/* ---------- Rhythm ---------- */

/*
 * Classic content has no blockGap: it is a flat run of <p>, <h4> and <img>
 * siblings. Without these the paragraphs sit on the browser default and the
 * headings crowd whatever follows them.
 */
.entry-content > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.entry-content > * + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.entry-content > :is(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.entry-content > :first-child {
	margin-block-start: 0;
}

.entry-content > :last-child {
	margin-block-end: 0;
}

/*
 * Spacers the editor set deliberately keep their own spacing, and so does
 * anything a block layout is already spacing for us.
 */
.entry-content > .wp-block-spacer + *,
.entry-content > * + .wp-block-spacer {
	margin-block-start: 0;
}

/* An empty paragraph is a stray keystroke, not a design decision. */
.entry-content p:empty {
	display: none;
}

/* ---------- Tables and embeds in old content ---------- */

/* Classic tables have no wrapper to scroll in, so they must not push the page. */
.entry-content > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-width: 100%;
	border-radius: var(--wp--custom--radius--medium);
}