/* ==========================================================================
   Andy's Junior base layer with reset, tokens, grid and typography.
   The design is 1440px wide and the container is 1280px.
   ========================================================================== */

:root {
	/* Palette picked from the 1440px design */
	--aj-cream: #f7f4f1;
	--aj-cream-hero: #dcd2c8;
	--aj-beige: #dcd2c8;
	--aj-beige-soft: #e5ded3;
	/* Measured off Step 1.pdf: panel fill and the ring around a radio */
	--aj-sand: #efeae5;
	--aj-sand-line: #e8e0d8;
	--aj-yellow: #ffda6e;
	--aj-yellow-soft: #fbe9a8;
	--aj-red: #eb5a37;
	--aj-red-dark: #d44a2a;
	--aj-orange: #ee9440;
	--aj-sage: #bdd0c3;
	--aj-blue: #c3d2e9;
	--aj-blue-deep: #c5d3e2;
	--aj-white: #fff;

	/* Text is neutral grey in the design, not blue */
	--aj-ink: #484446;
	--aj-ink-soft: #7a7677;
	--aj-muted: #8b8789;
	--aj-line: rgba(72, 68, 70, .12);

	/* Sizes */
	--aj-container: 1280px;
	--aj-gutter: 20px;
	--aj-radius: 20px;
	--aj-radius-sm: 12px;
	--aj-radius-btn: 10px;
	--aj-radius-pill: 100px;
	--aj-header-h: 80px;

	/* Gap from the screen edge to the container. Section decorations anchor to it */
	--aj-side: max(0px, calc(50% - var(--aj-container) / 2));
	--aj-side-bleed: max(0px, calc(50% - var(--aj-container) / 2 - 80px));

	--aj-shadow: 0 8px 30px rgba(72, 68, 70, .08);
	--aj-shadow-soft: 0 2px 12px rgba(72, 68, 70, .06);

	/* Headings use Futura New, files live in the theme (see fonts.css) */
	--aj-font-title: "Futura New";
	/* Inter stands in for Cera Round DEMO until the files arrive (see inc/enqueue.php) */
	--aj-font-text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Alias so older rules using var(--aj-font) keep working */
	--aj-font: var(--aj-font-text);
}

/* --------------------------------------------------------------- Reset -- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--aj-header-h) + var(--wp-admin--admin-bar--height, 0px) + 20px);
}

body {
	margin: 0;
	font-family: var(--aj-font-text);
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink);
	background: var(--aj-cream);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure {
	margin: 0;
	padding: 0;
}

/* The *__title classes cover headings that are not h1-h6 tags */
h1, h2, h3, h4, h5, h6,
[class$="__title"],
[class*="__title "] {
	font-family: var(--aj-font-title);
}

ul, ol {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img, svg, video {
	display: block;
	max-width: 100%;
}

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--aj-red);
	outline-offset: 3px;
}

.aj-skip {
	position: absolute;
	left: -9999px;
}

.aj-skip:focus {
	left: 16px;
	top: 16px;
	z-index: 999;
	padding: 10px 16px;
	background: var(--aj-white);
	border-radius: var(--aj-radius-btn);
}

/* -------------------------------------------------------------- Grid ---- */

.aj-container {
	width: 100%;
	max-width: calc(var(--aj-container) + var(--aj-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--aj-gutter);
}

.aj-sec {
	padding-block: 64px;
}

.aj-main--home > .aj-sec:first-of-type {
	padding-top: 72px;
}

/* -------------------------------------------------------------- Images -- */

/* The placehold.co stub takes up the right size right away */
.aj-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------- Section head --- */

.aj-sec-head {
	margin-bottom: 48px;
}

/* Without a subtitle the gap is smaller, same as in the design */
.aj-sec-head:not(:has(.aj-sec-head__text)) {
	margin-bottom: 26px;
}

.aj-sec-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

/* 48/48 from the design. Tracking is zero, so no letter-spacing here */
.aj-sec-head__title {
	font-size: 48px;
	line-height: 1;
	font-weight: 600;
}

/* Section subtitle is 18/24 in the design, in the same soft grey as the rest
   of the secondary copy — measured off the mobile export, not --aj-muted */
.aj-sec-head__text {
	margin-top: 16px;
	max-width: 940px;
	font-size: 18px;
	line-height: 100%;
	color: var(--aj-ink-soft);
}

.aj-sec-head__aside {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 4px;
}

.aj-link {
	font-size: 16px;
	font-weight: 500;
	color: var(--aj-ink-soft);
	border-bottom: 1px solid var(--aj-line);
	transition: color .2s, border-color .2s;
}

.aj-link:hover {
	color: var(--aj-red);
	border-color: var(--aj-red);
}

/* ================================================= Inner pages and 404 == */

.aj-main--inner {
	padding-block: 56px 72px;
}

.aj-page-head__title {
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
}

.aj-page-head__text {
	margin-top: 10px;
	color: var(--aj-muted);
}

.aj-content {
	margin-top: 24px;
	max-width: 800px;
	line-height: 1.65;
}

.aj-content > * + * {
	margin-top: 16px;
}

.aj-content h2 {
	margin-top: 32px;
	font-size: 24px;
}

.aj-content h3 {
	margin-top: 24px;
	font-size: 19px;
}

.aj-content ul {
	padding-left: 20px;
	list-style: disc;
}

.aj-content a {
	color: var(--aj-red);
	text-decoration: underline;
}

.aj-post-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 32px;
}

.aj-post-card {
	padding: 16px;
	background: var(--aj-white);
	border-radius: var(--aj-radius);
	box-shadow: var(--aj-shadow-soft);
}

.aj-post-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--aj-radius-sm);
}

.aj-post-card__title {
	margin-top: 12px;
	font-size: 18px;
	font-weight: 600;
}

.aj-post-card__excerpt {
	margin-top: 8px;
	font-size: 14px;
	color: var(--aj-muted);
}

.aj-404 {
	padding-block: 60px;
	text-align: center;
}

.aj-404__code {
	display: block;
	font-size: 92px;
	font-weight: 800;
	line-height: 1;
	color: var(--aj-yellow);
}

.aj-404__title {
	margin-top: 12px;
	font-size: 30px;
	font-weight: 700;
}

.aj-404__text {
	margin: 10px auto 24px;
	max-width: 460px;
	color: var(--aj-muted);
}

/* ======================================================= Responsive ===== */

/* Header is 88px everywhere, tablets get no separate height */
@media (max-width: 1024px) {
	/* Header is not sticky, so anchors only need room for the admin bar */
	html {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px);
	}

	.aj-sec {
		padding-block: 48px;
	}

	/* Sits between 48 on desktop and 32 on mobile */
	.aj-sec-head__title,
	.aj-page-head__title {
		font-size: 40px;
	}

	.aj-post-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	:root {
		--aj-gutter: 16px;
		--aj-radius: 16px;
	}

	/* Shared section spacing on mobile is 32px */
	.aj-sec {
		padding-block: 32px;
	}

	/* Mobile design, 390px */
	.aj-sec-head__title,
	.aj-page-head__title {
		font-size: 32px;
	}

	/* On mobile the subtitle wraps to three lines and needs 24px leading */
	.aj-sec-head__text {
		line-height: 1.333;
	}

	.aj-sec-head {
		margin-bottom: 32px;
	}

	.aj-post-list {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}