/* ============================================================================
 * learn.css — the Resources page and our guides
 * ============================================================================
 *
 * Loaded on /resources/ and /resources/{guide}/ only (inc/learn.php), after
 * site.css. The spend-and-get page's look, set for reading: one comfortable
 * measure of text on cream, white cards for the guides, numbered citations
 * that jump to the sources list.
 *
 * Every colour and size is a token. The literals are breakpoints inside @media.
 * ========================================================================= */

.mm-learn {
	max-width: var(--mm-container-max);
	margin: 0 auto;
	padding: var(--mm-space-8) var(--mm-space-5) var(--mm-space-12);
	box-sizing: border-box;
	color: var(--mm-color-ink);
	font-family: var(--mm-font-body);
}

.mm-learn-hero { max-width: calc(var(--mm-measure) + var(--mm-space-20)); margin-bottom: var(--mm-space-8); }
body.mm-site .mm-learn-eyebrow {
	display: block;
	margin: 0 0 var(--mm-space-2);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-2xs);
	font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-wide);
	text-transform: uppercase;
	color: var(--mm-color-brand-deep);
}
body.mm-site .mm-learn-h1 {
	margin: 0;
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: clamp(var(--mm-text-3xl), 8vw, var(--mm-text-4xl));
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--mm-color-ink);
	text-wrap: balance;
}
body.mm-site .mm-learn-lede {
	margin: var(--mm-space-4) 0 0;
	max-width: var(--mm-measure);
	font-size: var(--mm-text-lg);
	line-height: var(--mm-leading-normal);
	color: var(--mm-color-ink-muted);
}
body.mm-site .mm-learn-meta { margin: var(--mm-space-3) 0 0; font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }
body.mm-site .mm-learn-crumb { margin: 0 0 var(--mm-space-4); font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }
body.mm-site .mm-learn-crumb a { color: var(--mm-color-brand-deep); font-weight: var(--mm-weight-bold); text-decoration: none; }

/* --- The cards: the Resources page, and "More from Resources" ------------- */

.mm-learn-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mm-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-learn-cards li { margin: 0; }
body.mm-site .mm-learn-cards a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--mm-space-6) var(--mm-space-5);
	box-sizing: border-box;
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
	color: var(--mm-color-ink);
	text-decoration: none;
	transition: border-color var(--mm-motion-base) var(--mm-ease);
}
body.mm-site .mm-learn-cards a:hover { border-color: var(--mm-color-brand); }
.mm-learn-card--quiet a { background: var(--mm-color-sand) !important; box-shadow: none !important; }
.mm-learn-cardtitle {
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: var(--mm-text-2xl);
	line-height: var(--mm-leading-tight);
}
.mm-learn-cardsum { margin-top: var(--mm-space-2); font-size: var(--mm-text-sm); line-height: var(--mm-leading-normal); color: var(--mm-color-ink-muted); }
.mm-learn-cardfoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--mm-space-5);
	font-size: var(--mm-text-xs);
	color: var(--mm-color-ink-muted);
}
.mm-learn-go {
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: var(--mm-text-sm);
	color: var(--mm-color-ink);
	box-shadow: inset 0 calc(-1 * var(--mm-focus-ring)) 0 0 var(--mm-color-brand);
}
.mm-learn-go::after { content: ' \2192'; }

/* --- One guide ------------------------------------------------------------ */

.mm-learn-layout { display: grid; gap: var(--mm-space-6); }

.mm-learn-toc {
	padding: var(--mm-space-5);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	background: var(--mm-color-surface);
	align-self: start;
}
.mm-learn-toc ol { margin: 0; padding: 0 0 0 var(--mm-space-5); }
.mm-learn-toc li { margin: 0 0 var(--mm-space-2); font-size: var(--mm-text-sm); }
body.mm-site .mm-learn-toc a { color: var(--mm-color-ink); text-decoration: none; }
body.mm-site .mm-learn-toc a:hover { color: var(--mm-color-brand-deep); }

.mm-learn-body { max-width: var(--mm-measure); }
.mm-learn-sec { scroll-margin-top: calc(var(--mm-space-20) + var(--mm-space-4)); padding-top: var(--mm-space-6); }
.mm-learn-sec:first-child { padding-top: 0; }
body.mm-site .mm-learn-h2 {
	text-wrap: balance; /* no one-word last line (audit 2) */
	margin: 0 0 var(--mm-space-3);
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: var(--mm-text-2xl);
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--mm-color-ink);
}
body.mm-site .mm-learn-h3 {
	margin: 0 0 var(--mm-space-3);
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: var(--mm-text-lg);
	text-transform: none;
	letter-spacing: normal;
	color: var(--mm-color-ink);
}
body.mm-site .mm-learn-body p {
	margin: 0 0 var(--mm-space-4);
	font-size: var(--mm-text-lg);
	line-height: 1.65;
	color: var(--mm-color-ink);
}
.mm-learn-list {
	margin: 0 0 var(--mm-space-4);
	padding: var(--mm-space-4) var(--mm-space-5) var(--mm-space-4) var(--mm-space-10);
	background: var(--mm-color-surface);
	border-radius: var(--mm-radius-md);
	border: var(--mm-hairline) solid var(--mm-color-border);
}
.mm-learn-list li { margin: 0 0 var(--mm-space-2); font-size: var(--mm-text-base); line-height: var(--mm-leading-normal); }
.mm-learn-list li::marker { color: var(--mm-color-brand-deep); }

/* Citation numbers: small, mono, amber-underlined, and a real target. */
.mm-cite { line-height: 0; margin-inline-start: var(--mm-hairline); }
body.mm-site .mm-cite a {
	font-family: var(--mm-font-numeric);
	font-size: var(--mm-text-2xs);
	font-weight: var(--mm-weight-bold);
	color: var(--mm-color-brand-deep);
	text-decoration: none;
	padding: 0 var(--mm-hairline);
}
.mm-learn-sources {
	margin-top: var(--mm-space-10);
	padding-top: var(--mm-space-6);
	border-top: var(--mm-hairline) solid var(--mm-color-border);
}
.mm-learn-sources ol { margin: 0; padding: 0; list-style: none; }
.mm-learn-sources li {
	display: flex;
	gap: var(--mm-space-3);
	margin: 0 0 var(--mm-space-3);
	font-size: var(--mm-text-sm);
	scroll-margin-top: calc(var(--mm-space-20) + var(--mm-space-4));
}
.mm-learn-sources li:target { background: var(--mm-color-brand-tint); border-radius: var(--mm-radius-sm); }
.mm-learn-sources .mm-num { flex: 0 0 auto; min-width: var(--mm-space-5); color: var(--mm-color-brand-deep); font-weight: var(--mm-weight-bold); }
body.mm-site .mm-learn-sources a { color: var(--mm-color-ink); text-decoration: underline; text-decoration-color: var(--mm-color-brand); text-underline-offset: var(--mm-space-1); }

body.mm-site .mm-learn-note {
	margin: var(--mm-space-10) 0 0;
	padding: var(--mm-space-4) var(--mm-space-5);
	border-left: var(--mm-space-1) solid var(--mm-color-brand);
	border-radius: var(--mm-radius-sm);
	background: var(--mm-color-surface);
	font-size: var(--mm-text-xs);
	line-height: var(--mm-leading-normal);
	color: var(--mm-color-ink-muted);
}
.mm-learn--hub .mm-learn-note { max-width: var(--mm-measure); }

.mm-learn-more { margin-top: var(--mm-space-16); }

@media (min-width: 700px) and (max-width: 999px) {
	/* Two across: an odd card out spans the row. */
	.mm-learn--hub .mm-learn-cards > li:nth-child(2n + 1):last-child { grid-column: 1 / -1; }
}
@media (min-width: 700px) {
	.mm-learn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.mm-learn { padding-top: var(--mm-space-12); }
	.mm-learn--hub .mm-learn-cards,
	.mm-learn-more .mm-learn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Four cards: four across, not three and one left over (audit 2). */
	.mm-learn-more .mm-learn-cards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* A card alone on the last row of the hub spans it. */
	.mm-learn--hub .mm-learn-cards > li:nth-child(3n + 1):last-child { grid-column: 1 / -1; }
	.mm-learn-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--mm-space-12); }
	.mm-learn-toc { position: sticky; top: calc(var(--mm-space-20) + var(--mm-space-4)); }
}

/* --- The store pages and the 404 (inc/store-info.php) --------------------- */

/* Contact: the email address as the page's one big thing. */
body.mm-site .mm-info-email {
	display: inline-flex;
	flex-direction: column;
	max-width: 100%;
	margin: var(--mm-space-6) 0 0;
	padding: var(--mm-space-5);
	box-sizing: border-box;
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
}
body.mm-site .mm-info-email p { margin: 0; }
body.mm-site .mm-info-email__main a {
	font-family: var(--mm-font-display);
	font-size: clamp(var(--mm-text-base), 5.2vw, var(--mm-text-xl));
	font-weight: var(--mm-weight-bold);
	color: var(--mm-color-ink);
	text-decoration: underline;
	text-decoration-color: var(--mm-color-brand);
	text-decoration-thickness: var(--mm-focus-ring);
	text-underline-offset: var(--mm-space-1);
	overflow-wrap: break-word;
}
body.mm-site .mm-info .mm-learn-body a,
body.mm-site .mm-info-ask a {
	color: var(--mm-color-ink);
	text-decoration: underline;
	text-decoration-color: var(--mm-color-brand);
	text-underline-offset: var(--mm-space-1);
}
body.mm-site .mm-learn-body .mm-info-ask {
	margin-top: var(--mm-space-8);
	padding-top: var(--mm-space-6);
	border-top: var(--mm-hairline) solid var(--mm-color-border);
	font-size: var(--mm-text-base);
}
.mm-info .mm-learn-more { margin-top: var(--mm-space-12); }

/* The 404's two ways out: the amber pill and a quiet link. */
body.mm-site .mm-info-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mm-space-4) var(--mm-space-6);
	margin: var(--mm-space-6) 0 0;
}
body.mm-site .mm-info-button {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-control-height);
	padding: 0 var(--mm-space-8);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-base);
	font-weight: var(--mm-weight-bold);
	text-decoration: none;
	transition: background var(--mm-motion-base) var(--mm-ease);
}
body.mm-site .mm-info-button:hover { background: var(--mm-color-star); color: var(--mm-color-on-brand); }
body.mm-site .mm-info-link {
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	color: var(--mm-color-ink);
	text-decoration: none;
	box-shadow: inset 0 calc(-1 * var(--mm-focus-ring)) 0 0 var(--mm-color-brand);
}
body.mm-site .mm-info-link::after { content: ' \2192'; }
body.mm-site .mm-info-button:focus-visible,
body.mm-site .mm-info-link:focus-visible,
body.mm-site .mm-info-email a:focus-visible {
	outline: var(--mm-focus-ring) solid var(--mm-color-brand-deep);
	outline-offset: var(--mm-focus-ring);
}
.mm-info--404 .mm-learn-more { margin-top: var(--mm-space-10); }

@media (min-width: 1000px) {
	.mm-learn-layout--single { grid-template-columns: minmax(0, 1fr); }
}