/*
 * Kotlet — the classes WordPress writes, not the theme.
 *
 * Alignment, captions, sticky posts and the post author's own comments are
 * marked up by the editor and by core templates, so a theme that never names
 * these classes renders imported content wrongly: a floated image that does not
 * float, a caption that reads as body text. They live in the components layer
 * with everything else the theme styles, so a variant stylesheet still wins.
 *
 * Nothing here is Kotlet's own vocabulary — every selector below is a class core
 * emits. Theme classes are prefixed klt-.
 */
@layer components {
	.alignleft {
		float: left;
		margin-inline-end: var(--klt-space-m);
		margin-block-end: var(--klt-space-s);
	}

	.alignright {
		float: right;
		margin-inline-start: var(--klt-space-m);
		margin-block-end: var(--klt-space-s);
	}

	.aligncenter {
		display: block;
		margin-inline: auto;
	}

	/*
	 * Floats belong to the paragraph they sit in, and nothing outside the entry
	 * should have to know one happened.
	 */
	.klt-entry__content::after {
		content: "";
		display: block;
		clear: both;
	}

	.klt-entry__content.klt-flow > * + * {
		margin-block-start: var(--klt-space-m);
	}

	.klt-entry__content.klt-flow > :is(h2, h3, h4) {
		margin-block-start: var(--klt-space-xl);
		line-height: 1.15;
	}

	.klt-entry__content > :is(ul, ol) {
		padding-inline-start: 1.4em;
	}

	.klt-entry__content blockquote {
		margin-inline: 0;
		padding-inline-start: var(--klt-space-m);
	}

	.klt-entry__content table {
		display: block;
		width: max-content;
		min-width: 100%;
		max-width: 100%;
		overflow-x: auto;
		border-collapse: collapse;
		-webkit-overflow-scrolling: touch;
	}

	.klt-entry__content :is(th, td) {
		min-width: min(12rem, 48vw);
		padding: var(--klt-space-xs) var(--klt-space-s);
		border: 1px solid currentcolor;
		text-align: start;
		vertical-align: top;
	}

	.klt-entry__content th {
		font-weight: bolder;
	}

	@media (max-width: 37.5rem) {
		/*
		 * A floated image next to two words of text is not a layout. On a narrow
		 * screen the picture takes the width and the text goes under it.
		 */
		.alignleft,
		.alignright {
			float: none;
			display: block;
			margin-inline: auto;
		}
	}

	.wp-caption {
		max-width: 100%;
	}

	.wp-caption img {
		display: block;
	}

	.wp-caption-text,
	.gallery-caption {
		margin-block-start: var(--klt-space-xs);
	}

	/*
	 * A sticky post is one the editor pinned to the top of the blog. Without a
	 * mark it simply looks like a post published out of order.
	 */
	.sticky .klt-story-card__title::before,
	.sticky .klt-entry__title::before {
		content: "★";
		margin-inline-end: 0.4em;
	}

	/*
	 * Every list of links core builds — a nav menu, a page list, a category
	 * list — renders as text the height of one line, which on a phone is a
	 * target of about twenty pixels. WCAG 2.2 asks for twenty-four in both
	 * directions (2.5.8, Target Size (Minimum)), so the link is given the
	 * height rather than the list being given spacing: spacing would push a
	 * footer of four menus apart by a third of a screen.
	 *
	 * inline-flex keeps the link as wide as its words, so a menu still reads as
	 * a list of names and not as a column of buttons.
	 */
	.menu-item > a,
	.page_item > a,
	.cat-item > a {
		display: inline-flex;
		align-items: center;
		min-block-size: 24px;
	}

}

/* WordPress prints its global link treatment unlayered; accessibility must win it. */
.klt-entry__content a,
.klt-meta__author-link {
	text-decoration: underline;
}

.klt-entry__content li > a {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
}