/*
 * utility.css — /articles/, /prompts/, /newsletter/, search, 404, and the
 * generic page.
 *
 * These six templates share a shape — a measure-width header, a body, and a
 * route out — so they share a stylesheet rather than each carrying twenty lines
 * of near-identical rules. Bundling them also means the two dead-end pages
 * (search-zero and 404) are styled by a file that is already in cache from a
 * normal browse, which is exactly when you want them to look finished.
 */

/* ---------------------------------------------------------------------------
 * Shared headers
 * ------------------------------------------------------------------------ */

.ait-index__header,
.ait-prompts__header,
.ait-newsletter__header,
.ait-search__header,
.ait-page__header {
	margin-bottom: var(--s-6);
}

.ait-index__title,
.ait-prompts__title,
.ait-newsletter__title,
.ait-search__title,
.ait-page__title,
.ait-404__title {
	margin: 0 0 var(--s-3);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}

.ait-index__lede,
.ait-prompts__lede,
.ait-newsletter__lede,
.ait-404__lede {
	margin: 0;
	font-size: 1.125rem;
	line-height: var(--lh-body);
}

.ait-page__updated {
	margin: var(--s-3) 0 0;
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------------
 * Chip rows
 *
 * One rule for every chip row on the site: the topic bar on /articles/, the
 * jump list on /prompts/, and the doors on both dead-end pages.
 * ------------------------------------------------------------------------ */

.ait-index__topic-list,
.ait-prompts__jump-list,
.ait-search__doors,
.ait-404__doors {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0 0 var(--s-6);
	padding: 0;
	list-style: none;
}

.ait-index__topic-list > li,
.ait-prompts__jump-list > li,
.ait-search__doors > li,
.ait-404__doors > li {
	margin: 0;
}

.ait-index__topic-list > li::before,
.ait-prompts__jump-list > li::before,
.ait-search__doors > li::before,
.ait-404__doors > li::before {
	content: none;
}

.ait-index__topics {
	margin-bottom: var(--s-6);
}

.ait-index__empty {
	max-width: var(--measure);
	color: var(--c-ink-muted);
}

/* ---------------------------------------------------------------------------
 * /prompts/
 *
 * Generous spacing between prompts, because every one is a thing to be read and
 * copied rather than a row in a list. The block supplies its own box styling;
 * this file only spaces them.
 * ------------------------------------------------------------------------ */

.ait-prompts__group {
	margin-top: var(--s-8);
	scroll-margin-top: var(--scroll-margin);
}

.ait-prompts__group-title {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.ait-prompts__list {
	display: grid;
	gap: var(--s-5);
	max-width: var(--measure);
}

.ait-prompts__empty {
	color: var(--c-ink-muted);
}

.ait-prompts__cta {
	margin-top: var(--s-9);
	padding: var(--s-6) var(--s-5);
	border-radius: var(--r-lg);
	background: var(--c-band);
}

/* ---------------------------------------------------------------------------
 * /newsletter/
 * ------------------------------------------------------------------------ */

.ait-newsletter__box {
	margin-bottom: var(--s-7);
	padding: var(--s-6) var(--s-5);
	border-radius: var(--r-lg);
	background: var(--c-band);
}

.ait-newsletter__note {
	margin: var(--s-3) 0 0;
	font-size: var(--fs-small);
	color: var(--c-ink);
}

.ait-newsletter__what {
	display: grid;
	gap: var(--s-5);
	margin: 0 0 var(--s-7);
	padding: 0;
	list-style: none;
}

.ait-newsletter__what > li {
	margin: 0;
}

.ait-newsletter__what > li::before {
	content: none;
}

.ait-newsletter__what h2 {
	margin: 0 0 var(--s-2);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.ait-newsletter__what p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Search and 404
 *
 * A zero-result and a 404 are the same page wearing different hats: the reader
 * wanted something we do not have. Both get warm copy, a search field, six
 * doors, and the Library — never an apology and never a bare "not found".
 * ------------------------------------------------------------------------ */

.ait-search__form,
.ait-404__form {
	margin-top: var(--s-4);
	max-width: 32rem;
}

.ait-search__zero-title {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.ait-search__zero {
	padding-top: var(--s-6);
}

.ait-search__zero p,
.ait-404__lede {
	margin-bottom: var(--s-5);
}

.ait-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Pagination
 *
 * Core markup, so the selectors are core's. `rel=prev/next` semantics come from
 * `the_posts_pagination()`; this only makes the links tappable at 48px, which
 * is the difference between working pagination and pagination that works on a
 * desk.
 * ------------------------------------------------------------------------ */

.pagination {
	margin-top: var(--s-7);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding-inline: var(--s-3);
	border: var(--border-hair);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-ink);
	font-weight: 600;
	text-decoration: none;
}

.pagination .page-numbers:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
}

.pagination .page-numbers.current {
	border-color: var(--c-primary);
	background: var(--c-primary);
	color: var(--c-bg);
}

.pagination .page-numbers:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}