/**
 * Layout shell.
 *
 * One container system, one section-rhythm system. Every band on every template
 * — header, hero, homepage sections, archive, single, call to action, footer —
 * aligns to the same left and right edge and picks its vertical padding from
 * one of three declared levels.
 *
 * Mobile-first: base rules describe the small screen and min-width queries add
 * complexity as space allows.
 *
 * Breakpoints (em, so they respect the browser's text size):
 *   xs 35em 560   sm 43em 688   md 48em 768   lg 64em 1024   xl 68.75em 1100
 * Custom properties cannot be used in media conditions, so these are literal.
 * They are documented in docs/design-system.md; change them together.
 */

@layer ajp.layout {

	/* ----------------------------------------------------------------------
	 * Container
	 *
	 * The single source of horizontal alignment. Nothing else sets a
	 * page-level max-width or outer gutter.
	 * -------------------------------------------------------------------- */

	.ajp-container {
		width: 100%;
		max-width: var(--ajp-container-max);
		margin-inline: auto;
		padding-inline: var(--ajp-gutter);
	}

	.ajp-container--narrow { max-width: var(--ajp-container-narrow); }
	.ajp-container--wide { max-width: var(--ajp-container-wide); }

	/* ----------------------------------------------------------------------
	 * Site frame
	 * -------------------------------------------------------------------- */

	.ajp-site {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		overflow-x: clip;
	}

	.ajp-site__main { flex: 1 0 auto; }

	/* ----------------------------------------------------------------------
	 * Section rhythm
	 *
	 * Three levels and nothing else. A component that wants different
	 * vertical space picks a level; it does not declare padding-block of its
	 * own. That rule is what makes the page read as one document.
	 * -------------------------------------------------------------------- */

	.ajp-section { padding-block: var(--ajp-section-y); }
	.ajp-section--tight { padding-block: var(--ajp-section-y-tight); }
	.ajp-section--loose { padding-block: var(--ajp-section-y-loose); }

	/* --- Section surfaces ------------------------------------------------
	 *
	 * Three, used to alternate. A surface change is the only thing that
	 * separates one section from the next: there are no dividing rules
	 * between sections and no section is drawn as a box.
	 * -------------------------------------------------------------------- */

	.ajp-section--surface { background-color: var(--ajp-color-surface); }

	.ajp-section--inverse {
		background-color: var(--ajp-color-inverse-bg);
		color: var(--ajp-color-on-inverse);
	}

	.ajp-section--inverse :is(h1, h2, h3, h4, h5, h6) {
		color: var(--ajp-color-on-inverse-heading);
	}

	.ajp-section--inverse a { color: var(--ajp-color-on-inverse-heading); }
	.ajp-section--inverse :focus-visible { outline-color: var(--ajp-focus-color-inverse); }

	/* ----------------------------------------------------------------------
	 * Flow — vertical spacing applied by the parent, so no child carries a
	 * margin that leaks out of its container.
	 * -------------------------------------------------------------------- */

	.ajp-flow > * + * {
		margin-block-start: var(--ajp-flow-space, var(--ajp-space-para));
	}

	.ajp-flow--tight { --ajp-flow-space: var(--ajp-space-2); }
	.ajp-flow--loose { --ajp-flow-space: var(--ajp-space-6); }

	/* ----------------------------------------------------------------------
	 * Prose — the wrapper for editor-controlled content.
	 * -------------------------------------------------------------------- */

	.ajp-prose { max-width: var(--ajp-measure); }

	/*
	 * Headings inside running prose sit one step below their element default.
	 * The base scale sizes h2 for a section heading — the same weight as "In
	 * stock now" on the homepage — which inside a document makes each heading
	 * read as a separate section rather than as part of one page.
	 *
	 * Scoped to .ajp-prose, so section heads (.ajp-head__title) and every
	 * template-owned heading are untouched.
	 */
	.ajp-prose > h2 { font-size: var(--ajp-text-h3); }
	.ajp-prose > h3 { font-size: var(--ajp-text-card); }
	.ajp-prose > * + * { margin-block-start: var(--ajp-space-para); }
	.ajp-prose > :is(h2, h3, h4) { margin-block-start: var(--ajp-space-block); }

	/*
	 * A heading opening the document does not need the gap that separates one
	 * section from the previous one — there is no previous one. Without this the
	 * section's own padding and the heading's margin stack, and every inner page
	 * starts with a band of empty space.
	 */
	.ajp-prose > :first-child { margin-block-start: 0; }
	.ajp-prose :is(ul, ol) { padding-inline-start: var(--ajp-space-5); }
	.ajp-prose li + li { margin-block-start: var(--ajp-space-2); }

	/*
	 * Legal small print. <small> is HTML's own element for it, so content can
	 * carry the meaning without carrying a class name. It is set at meta size by
	 * base.css; here it also steps back in colour, still above the AA threshold
	 * against the page background.
	 */
	.ajp-prose small { color: var(--ajp-color-muted); }

	/* ----------------------------------------------------------------------
	 * Cluster — a horizontal group that wraps.
	 * -------------------------------------------------------------------- */

	.ajp-cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ajp-cluster-gap, var(--ajp-gap-inline));
	}

	.ajp-cluster--tight { --ajp-cluster-gap: var(--ajp-space-2); }
	.ajp-cluster--between { justify-content: space-between; }

	/* Anything that can exceed its container scrolls inside itself rather
	 * than widening the page. */
	.ajp-scroll-x {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}