/* SparkED — the design system.
 *
 * Tokens (colours, type scale, spacing, radii) are in theme.json and arrive here as --wp--preset--* and
 * --wp--custom--* custom properties. This sheet adds what theme.json cannot express: the organic section
 * edges, the component looks registered as block styles in functions.php, focus and motion rules.
 *
 * Order: 1 base · 2 type · 3 sections and shapes · 4 components · 5 header and footer · 6 forms
 *        7 catalogue and course page · 8 motion · 9 print
 */

/* ---------------------------------------------------------------------------------------------- 1 base */

:root {
	/* Motion (the packet's §7 and §9): buttons ease over 240 ms, a card's shell over 500 ms. */
	--sparked-motion-button: 240ms;
	--sparked-motion-card: 500ms;
	--sparked-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sparked-wave-height: clamp(1.75rem, 5vw, 4.5rem);
	--sparked-focus: 3px solid var(--wp--preset--color--cobalt-dark);
	/* Two wave silhouettes, used as masks so the edge takes its section's own ground colour. */
	--sparked-wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V58C180 18 360 4 560 22s380 62 600 44 200-34 280-52v88z'/%3E%3C/svg%3E");
	--sparked-wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v40c160 34 340 52 540 40s360-58 560-56 240 30 340 44V0z'/%3E%3C/svg%3E");
	--sparked-arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C320 10 1120 10 1440 100z'/%3E%3C/svg%3E");
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Sections sit flush against each other; each carries its own vertical rhythm. */
.wp-site-blocks > * + *,
.wp-site-blocks > main > * + * {
	margin-block-start: 0;
}

img {
	height: auto;
	max-width: 100%;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--sparked-focus);
	outline-offset: 3px;
	border-radius: 0.35rem;
}

::selection {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.skip-link:focus {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--small);
}

/* The main region takes focus from the skip link (MP-1709, functions.php): a region, not a control, so no ring
   around the whole page. Tab moves on from it to the first control inside, which shows its own ring. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible {
	outline: none;
}

/* ---------------------------------------------------------------------------------------------- 2 type */

h1, h2, h3, h4,
.wp-block-site-title,
.wp-block-quote {
	text-wrap: balance;
	overflow-wrap: break-word;
}

/*
 * Comfortaa has no italic: an emphasised word in a heading is set off by colour, never a slanted fake. The colour is
 * the section's own (B7, design team; MP-866): on a tinted ground, that family's dark (each family's dark on its light
 * is a checked pair); on the page's own ground, Coral dark. Emphasis is the author's choice: nothing adds it.
 * A button on a tinted section takes the same family dark (--sparked-action; MP-893), below.
 */
h1 em, h2 em, h3 em {
	font-style: normal;
	color: var(--sparked-heading-accent, var(--wp--preset--color--coral-dark));
}

.has-gold-light-background-color { --sparked-heading-accent: var(--wp--preset--color--gold-dark); --sparked-action: var(--wp--preset--color--gold-dark); }
.has-coral-light-background-color { --sparked-heading-accent: var(--wp--preset--color--coral-dark); --sparked-action: var(--wp--preset--color--coral-dark); }
.has-peacock-light-background-color { --sparked-heading-accent: var(--wp--preset--color--peacock-dark); --sparked-action: var(--wp--preset--color--peacock-dark); }
.has-plum-light-background-color { --sparked-heading-accent: var(--wp--preset--color--plum-dark); --sparked-action: var(--wp--preset--color--plum-dark); }
.has-leaf-light-background-color { --sparked-heading-accent: var(--wp--preset--color--leaf-dark); --sparked-action: var(--wp--preset--color--leaf-dark); }
.has-cobalt-light-background-color { --sparked-heading-accent: var(--wp--preset--color--cobalt-dark); --sparked-action: var(--wp--preset--color--cobalt-dark); }
.has-orchid-light-background-color { --sparked-heading-accent: var(--wp--preset--color--orchid-dark); --sparked-action: var(--wp--preset--color--orchid-dark); }
.has-sky-light-background-color { --sparked-heading-accent: var(--wp--preset--color--sky-dark); --sparked-action: var(--wp--preset--color--sky-dark); }

p {
	text-wrap: pretty;
}

.has-lead-font-size {
	line-height: 1.55;
}

/* A short label above a heading, in natural sentence case: no miniature capitals, no ornament (the packet's §4).
   Large and bold enough to read as the section's label, in the brand's coral (MP-1511, Chris: they were too small).
   One rule for every section label on every page. */
.is-style-eyebrow {
	margin-block-end: 0.5rem;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-transform: none;
	color: var(--wp--preset--color--coral-dark);
}

.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}

/* The marker on draft copy. Visible on purpose: it comes off when SparkED approves the words. */
.is-style-note {
	display: inline-block;
	margin-block: 0.75rem 0;
	padding: 0.3rem 0.85rem;
	border: 1px dashed var(--wp--preset--color--gold-dark);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--gold-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

.is-style-note.has-text-align-center {
	display: table;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------- 3 sections and organic shapes */

.sparked-section {
	position: relative;
	padding-block: var(--wp--preset--spacing--50);
}

.sparked-section.is-style-wave-top,
.sparked-section.is-style-wave-both,
.sparked-section.is-style-arc-top {
	margin-block-start: var(--sparked-wave-height);
}

.sparked-section.is-style-wave-bottom,
.sparked-section.is-style-wave-both {
	margin-block-end: var(--sparked-wave-height);
}

.is-style-wave-top::before,
.is-style-wave-both::before,
.is-style-arc-top::before,
.is-style-wave-bottom::after,
.is-style-wave-both::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: var(--sparked-wave-height);
	background-color: inherit;
	-webkit-mask: var(--sparked-wave-a) center / 100% 100% no-repeat;
	mask: var(--sparked-wave-a) center / 100% 100% no-repeat;
	pointer-events: none;
}

.is-style-wave-top::before,
.is-style-wave-both::before,
.is-style-arc-top::before {
	bottom: calc(100% - 1px);
}

.is-style-arc-top::before {
	-webkit-mask-image: var(--sparked-arc);
	mask-image: var(--sparked-arc);
}

.is-style-wave-bottom::after,
.is-style-wave-both::after {
	top: calc(100% - 1px);
	-webkit-mask-image: var(--sparked-wave-b);
	mask-image: var(--sparked-wave-b);
}

/* A group used as a shaped block inside the page (not a full-width section) keeps its edges too. */
.wp-block-group[class*="is-style-wave"]:not(.sparked-section),
.wp-block-group.is-style-arc-top:not(.sparked-section) {
	position: relative;
}

/* The hero */
.sparked-hero {
	padding-block: clamp(2.5rem, 6vw, 5rem) var(--wp--preset--spacing--40);
}

.sparked-hero h1 {
	margin-block-end: var(--wp--preset--spacing--30);
}

.sparked-hero .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

.sparked-hero__columns {
	gap: clamp(2rem, 5vw, 4.5rem);
}

.sparked-hero .wp-block-image {
	margin: 0;
}

@media (max-width: 781px) {
	.sparked-hero .wp-block-image {
		max-width: 26rem;
		margin-inline: auto;
	}
}

/* Video (MP-1423; the site plugin's [sparked_video]): a click-to-play preview, then the player in the same frame.
   The frame has the signature corners (one large, one medium, two small) and a border in the base colour of the
   section it sits in. */
.sparked-video {
	--sparked-video-border: var(--sparked-peacock-base);
	--sparked-video-dpx: 1px; /* One device pixel, at the display scales below (MP-1573). */
	margin: 0;
	container-type: inline-size; /* The frame is sized from its column's width (cqi), below. */
}

@media (min-resolution: 1.095dppx) and (max-resolution: 1.105dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 1.1); } }
@media (min-resolution: 1.195dppx) and (max-resolution: 1.205dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 1.2); } }
@media (min-resolution: 1.245dppx) and (max-resolution: 1.255dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 1.25); } }
@media (min-resolution: 1.328dppx) and (max-resolution: 1.338dppx) { .sparked-video { --sparked-video-dpx: calc(1px * 3 / 4); } }
@media (min-resolution: 1.495dppx) and (max-resolution: 1.505dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 1.5); } }
@media (min-resolution: 1.745dppx) and (max-resolution: 1.755dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 1.75); } }
@media (min-resolution: 1.995dppx) and (max-resolution: 2.005dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 2); } }
@media (min-resolution: 2.245dppx) and (max-resolution: 2.255dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 2.25); } }
@media (min-resolution: 2.495dppx) and (max-resolution: 2.505dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 2.5); } }
@media (min-resolution: 2.62dppx) and (max-resolution: 2.63dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 2.625); } }
@media (min-resolution: 2.745dppx) and (max-resolution: 2.755dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 2.75); } }
@media (min-resolution: 2.995dppx) and (max-resolution: 3.005dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 3); } }
@media (min-resolution: 3.495dppx) and (max-resolution: 3.505dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 3.5); } }
@media (min-resolution: 3.995dppx) and (max-resolution: 4.005dppx) { .sparked-video { --sparked-video-dpx: calc(1px / 4); } }

.has-gold-light-background-color :is(.sparked-video, iframe) { --sparked-video-border: var(--sparked-gold-base); }
.has-coral-light-background-color :is(.sparked-video, iframe) { --sparked-video-border: var(--sparked-coral-base); }
.has-peacock-light-background-color :is(.sparked-video, iframe) { --sparked-video-border: var(--sparked-peacock-base); }
.has-plum-light-background-color :is(.sparked-video, iframe) { --sparked-video-border: var(--sparked-plum-base); }
.has-leaf-light-background-color :is(.sparked-video, iframe) { --sparked-video-border: var(--sparked-leaf-base); }
.has-cobalt-light-background-color :is(.sparked-video, iframe) { --sparked-video-border: var(--sparked-cobalt-base); }
.has-orchid-light-background-color :is(.sparked-video, iframe) { --sparked-video-border: var(--sparked-orchid-base); }
.has-sky-light-background-color :is(.sparked-video, iframe) { --sparked-video-border: var(--sparked-sky-base); }

/* The 16:9 is the frame's INSIDE (MP-1546, Chris): the border is drawn outside it (content-box), so the player's area is
   the video's shape and the player shows no black bars of its own. Every SparkED video is 16:9.
   The player meets the frame on all four edges (MP-1567, MP-1573, Chris): a browser draws the player's page on WHOLE
   device pixels, so an inside that ended part-way through a device pixel left a 1 device-pixel strip of the frame's own
   white beside the player (at the right, in Chromium; at the bottom, in Firefox). So the inside is a whole number of
   device pixels wide and high (the display scales above; any other scale rounds to the CSS pixel), and the player is
   drawn on its own layer (will-change), which the browser places on whole device pixels together with its border. The
   frame is less than one device pixel narrower than its column (centred in it), and its height is within half a device
   pixel of 16:9. The border is not thicker. */
.sparked-video__play,
.sparked-video__player {
	--sparked-video-frame: 3px;
	--sparked-video-inside: round(down, 100cqi - 2 * var(--sparked-video-frame), var(--sparked-video-dpx));
	position: relative;
	display: block;
	box-sizing: content-box;
	width: var(--sparked-video-inside);
	height: round(var(--sparked-video-inside) * 9 / 16, var(--sparked-video-dpx));
	margin-inline: auto;
	overflow: hidden;
	border: var(--sparked-video-frame) solid var(--sparked-video-border);
	border-radius: var(--sparked-shape-l) var(--sparked-shape-m) var(--sparked-shape-s) var(--sparked-shape-s);
	background: var(--sparked-white);
	box-shadow: var(--wp--preset--shadow--soft);
}

.sparked-video__player {
	will-change: transform;
}

/* The Pause video / Play video button under a page-top video that started by itself, muted (MP-2843; WCAG 2.2.2). It
   sits under the frame, outside it, so the frame keeps its exact 16:9 inside. */
button.sparked-video__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 12px 0 0;
	padding: 6px 18px;
	border: 2px solid var(--sparked-video-border);
	border-radius: 999px;
	background: var(--sparked-white);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

button.sparked-video__toggle:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

button.sparked-video__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/* A browser without CSS rounding (before 2023) keeps the 16:9 inside, unrounded. */
@supports not (width: round(down, 1px, 1px)) {
	.sparked-video__play,
	.sparked-video__player {
		width: calc(100% - 2 * var(--sparked-video-frame));
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* Every OTHER YouTube player gets the same frame (MP-2256, census C94; Chris, 11-03: "The youtube video doesn't get the
   round corner treatment in our style guide"): YouTube's share code pasted into a Custom HTML block, an address the
   click-to-play cannot take (a playlist), and the block editor's preview of a YouTube Embed block, which staff see while
   they build a page. (A YouTube address WordPress draws by itself is the click-to-play already: Sparked_Site_Video.)
   The signature corners, the border in the section's colour, the soft shadow. As for the click-to-play (MP-1546), the
   16:9 is the player's INSIDE: the border is drawn outside it (content-box), so the player shows no black bars. */
:is(.wp-block-embed.is-provider-youtube iframe, iframe[src*="youtube.com/embed/"], iframe[src*="youtube-nocookie.com/embed/"]):not(.sparked-video__player) {
	--sparked-yt-frame: 3px;
	box-sizing: content-box;
	border: var(--sparked-yt-frame) solid var(--sparked-video-border, var(--sparked-peacock-base));
	border-radius: var(--sparked-shape-l) var(--sparked-shape-m) var(--sparked-shape-s) var(--sparked-shape-s);
	background: var(--sparked-white);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Share code sets its own size (560 by 315), and so does an Embed block without WordPress's 16:9 wrapper: the player
   fills its column instead, its inside 16:9, the frame within the column. */
:is(.wp-block-embed.is-provider-youtube iframe, iframe[src*="youtube.com/embed/"], iframe[src*="youtube-nocookie.com/embed/"]):not(.sparked-video__player, .wp-has-aspect-ratio iframe) {
	display: block;
	width: calc(100% - 2 * var(--sparked-yt-frame));
	height: auto;
	aspect-ratio: 16 / 9;
}

/* In WordPress's 16:9 wrapper (an Embed block, on the page and in the editor) the player fills the wrapper: the wrapper
   grows by the frame, so the inside stays 16:9. Its height is (width - 2 frames) * 9 / 16 + 2 frames, and a padding
   percentage is of the width: 56.25% + 6px - 6px * 9 / 16 = 56.25% + 2.625px. */
.wp-block-embed.is-provider-youtube.wp-embed-aspect-16-9.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
	padding-top: calc(56.25% + 2.625px);
}

.wp-block-embed.is-provider-youtube.wp-has-aspect-ratio iframe {
	width: calc(100% - 2 * var(--sparked-yt-frame));
	height: calc(100% - 2 * var(--sparked-yt-frame));
}

.sparked-video__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 80%;
}

.sparked-video__cue {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.65rem 1.15rem 0.65rem 0.85rem;
	border-radius: 999px;
	background: var(--sparked-ink);
	color: var(--sparked-paper);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.sparked-video__play:is(:hover, :focus-visible) .sparked-video__cue {
	background: var(--sparked-role-primary);
}

.sparked-video__play:focus-visible {
	outline: 3px solid var(--sparked-role-focus);
	outline-offset: 3px;
}

@media (max-width: 781px) {
	.sparked-hero .sparked-video {
		max-width: 34rem;
		margin-inline: auto;
	}
}

/* Organic image frames */
.wp-block-image.is-style-blob img,
.wp-block-image.is-style-blob-alt img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--blob--one);
	box-shadow: var(--wp--preset--shadow--soft);
}

.wp-block-image.is-style-blob-alt img {
	border-radius: var(--wp--custom--blob--two);
	aspect-ratio: 5 / 4;
}

.wp-block-image.is-style-soft img {
	box-shadow: var(--wp--preset--shadow--soft);
}

/* The architectural shapes (the packet's §6): one large corner, one medium and two small, in four orientations, named
   by where the large corner sits. The medium corner follows it clockwise. The corners are circles in pixels, never a
   percentage (on a short, wide box a percentage corner is a stretched ellipse that reads as a pill; MP-964); a smaller
   box takes a smaller set (section 10). Staff choose them as block styles on a group, an image or a
   cover; the buttons stay symmetrical pills.
   Every card and featured container has this shape (MP-893), never even corners: an orientation sets the four
   corners as variables (--sparked-tl, -tr, -br, -bl), orientation a unless something says otherwise, so a grid can
   vary them on purpose and a hover can move them. Content boxes take it too: the course page's boxes, questions,
   the store's summaries and forms (MP-964). Only buttons and small tags are pills; form fields keep the small radius. */
:root {
	--sparked-shape-l: var(--wp--custom--radius--large);
	--sparked-shape-m: var(--wp--custom--radius--medium);
	--sparked-shape-s: var(--wp--custom--radius--small);
}

[class*="is-style-shape-"],
.is-style-card,
.is-style-card-tint,
.sparked-course-card:not(.sparked-living),
.sparked-living__card,
.sparked-audience-card,
.sparked-course-intro,
.sparked-course-outcomes li,
.sparked-course-details section,
.is-style-steps > *,
.sparked-timeline > *,
.wp-block-details,
.wp-block-quote,
.wp-block-image.is-style-soft,
.sparked-course-image,
.sparked-course-art {
	--sparked-tl: var(--sparked-shape-l);
	--sparked-tr: var(--sparked-shape-m);
	--sparked-br: var(--sparked-shape-s);
	--sparked-bl: var(--sparked-shape-s);
	border-radius: var(--sparked-tl) var(--sparked-tr) var(--sparked-br) var(--sparked-bl);
}

.is-style-shape-b,
.is-style-card:nth-child(even),
.is-style-card-tint:nth-child(even),
.sparked-audience-card:nth-child(even),
.sparked-course-outcomes li:nth-child(even),
.sparked-course-details section:nth-child(even),
.is-style-steps > :nth-child(even),
.sparked-timeline > :nth-child(even),
.wp-block-details:nth-of-type(even) {
	--sparked-tl: var(--sparked-shape-s);
	--sparked-tr: var(--sparked-shape-l);
	--sparked-br: var(--sparked-shape-m);
	--sparked-bl: var(--sparked-shape-s);
}

.is-style-shape-c,
.sparked-course-image {
	--sparked-tl: var(--sparked-shape-s);
	--sparked-tr: var(--sparked-shape-s);
	--sparked-br: var(--sparked-shape-l);
	--sparked-bl: var(--sparked-shape-m);
}

.is-style-shape-d,
.wp-block-quote {
	--sparked-tl: var(--sparked-shape-m);
	--sparked-tr: var(--sparked-shape-s);
	--sparked-br: var(--sparked-shape-s);
	--sparked-bl: var(--sparked-shape-l);
}

/* An image takes its figure's shape. */
.wp-block-image[class*="is-style-shape-"] img,
.wp-block-image.is-style-soft img {
	border-radius: var(--sparked-tl) var(--sparked-tr) var(--sparked-br) var(--sparked-bl);
}

/* A card you can open shifts its corners as the pointer or the keyboard reaches it (the packet's §9: eased, the card's
   500 ms): each corner moves one place clockwise, so the large curve travels. With reduced motion it stays still.
   The living cards (below) do the same as they open. */
@media (prefers-reduced-motion: no-preference) {
	.sparked-course-card:not(.sparked-living),
	.sparked-audience-card,
	a.is-style-card,
	.sparked-card-link {
		transition:
			border-radius var(--sparked-motion-card) var(--sparked-ease),
			transform var(--sparked-motion-button) var(--sparked-ease),
			box-shadow var(--sparked-motion-button) var(--sparked-ease);
	}

	.sparked-course-card:not(.sparked-living):is(:hover, :focus-within),
	.sparked-audience-card:is(:hover, :focus-within),
	a.is-style-card:is(:hover, :focus-visible),
	.sparked-card-link:is(:hover, :focus-visible) {
		border-radius: var(--sparked-bl) var(--sparked-tl) var(--sparked-tr) var(--sparked-br);
	}
}

.wp-block-group[class*="is-style-shape-"],
.wp-block-cover[class*="is-style-shape-"] {
	overflow: hidden;
}

.wp-block-image[class*="is-style-shape-"],
.wp-block-image.is-style-soft {
	border-radius: 0;
}

/* ------------------------------------------------------------------------------------- 4 components */

/* Cards. Cards in one row are one height (the grid stretches them) and a card's buttons sit at its bottom, so the
   buttons of a row line up (MP-1173); cards.js shares a grid's cards out in balanced, centered rows. */
.is-style-card,
.is-style-card-tint {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.is-style-card > .wp-block-buttons:last-child,
.is-style-card-tint > .wp-block-buttons:last-child {
	margin-block-start: auto;
	padding-block-start: 0.85rem;
}

.is-style-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--soft);
}

.is-style-card-tint {
	border: 1px solid rgba(44, 42, 39, 0.06);
}

.is-style-card > * + *,
.is-style-card-tint > * + * {
	margin-block-start: 0.85rem;
}

.is-style-card h3,
.is-style-card-tint h3,
.is-style-card h2,
.is-style-card-tint h2 {
	margin-block-start: 0;
}

.is-style-card p,
.is-style-card-tint p {
	color: var(--wp--preset--color--ink-soft);
}

a.is-style-card,
.sparked-card-link {
	text-decoration: none;
	color: inherit;
	transition: transform var(--sparked-motion-button) var(--sparked-ease), box-shadow var(--sparked-motion-button) var(--sparked-ease);
}

.sparked-card-link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--lift);
}

.sparked-icon {
	margin: 0 0 0.25rem;
}

.sparked-icon img {
	width: 3.25rem;
	height: 3.25rem;
}

/* Grids keep a comfortable gap */
.wp-block-group.is-layout-grid {
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.sparked-section > .is-layout-grid,
.sparked-section > .wp-block-columns {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* The Contact page's other ways to start (MP-1183): the three in one row, or one under another on a phone, never
   two and one. */
.wp-block-group.is-layout-grid.sparked-contact-ways {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
	.wp-block-group.is-layout-grid.sparked-contact-ways {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Buttons: one symmetrical pill (the packet's §7). At rest the theme.json colours; on hover an eased change of
   colour with a 1px lift and a soft shadow; pressed sinks back; focus shows the ring whether or not the pointer is
   over it; a disabled button says so. Named properties only, never `transition: all`. */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	text-decoration: none;
	transition:
		background-color var(--sparked-motion-button) var(--sparked-ease),
		color var(--sparked-motion-button) var(--sparked-ease),
		border-color var(--sparked-motion-button) var(--sparked-ease),
		box-shadow var(--sparked-motion-button) var(--sparked-ease),
		transform var(--sparked-motion-button) var(--sparked-ease);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--lift);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(1px);
	box-shadow: none;
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: var(--sparked-focus);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--pill);
}

/* Disabled (design team C3): Cool White with Ink lettering, still readable; never faded with opacity. */
.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"],
.sparked-form button[type="submit"]:disabled,
.sparked-catalogue__actions button:disabled {
	border-color: var(--wp--preset--color--paper-deep);
	background: var(--wp--preset--color--paper-deep);
	color: var(--wp--preset--color--ink);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Busy (C3): the button keeps its size, takes no second press, and says so (WooCommerce's own "loading" classes,
   and aria-busy on ours); its spinner, where WooCommerce draws one, stops when reduced motion is asked for. */
.wp-element-button[aria-busy="true"],
.woocommerce .button.loading,
.wc-block-components-button.is-loading,
.wc-block-components-product-button__button.loading {
	cursor: progress;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce .button.loading::after,
	.wc-block-components-button.is-loading .wc-block-components-spinner,
	.wc-block-components-product-button__button.loading::after {
		animation: none;
	}
}

/* A card whose corners change shape on hover or keyboard focus (MP-1511): its large and small corners trade places. */
.sparked-morph {
	transition: border-radius 0.35s ease;
}

.sparked-morph:hover,
.sparked-morph:focus-within {
	--sparked-tl: var(--sparked-shape-s);
	--sparked-tr: var(--sparked-shape-l);
	--sparked-br: var(--sparked-shape-m);
	--sparked-bl: var(--sparked-shape-s);
}

.sparked-morph:nth-child(even):hover,
.sparked-morph:nth-child(even):focus-within {
	--sparked-tl: var(--sparked-shape-l);
	--sparked-tr: var(--sparked-shape-m);
	--sparked-br: var(--sparked-shape-s);
	--sparked-bl: var(--sparked-shape-s);
}

@media (prefers-reduced-motion: reduce) {
	.sparked-morph {
		transition: none;
	}
}

/* Outline: the second action beside a primary one. The retired "arrow" style (pages an earlier build stored) now
   draws the same outline pill, with no arrow and no underline (the packet's §7). */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-arrow > .wp-block-button__link {
	padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
	border: 2px solid var(--wp--preset--color--coral-dark);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--coral-dark);
	font-weight: 700;
	box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-arrow > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--coral-dark);
	background: var(--wp--preset--color--coral-dark);
	color: var(--wp--preset--color--paper);
}

/* A button on a tinted section takes that section's own checked pair (MP-893; design team C4: Warm White on each
   family's dark, each dark on its own light), not Coral everywhere: filled in the family's dark, or outlined in it;
   on hover the fill eases to Ink. On the page's own ground and in the header (the site's chrome) it stays Coral dark. */
.sparked-header {
	--sparked-action: initial;
}

[class*="-light-background-color"] .wp-block-button:not(.is-style-outline, .is-style-arrow, .is-style-soft) > .wp-block-button__link,
[class*="-light-background-color"] .sparked-pill.is-primary {
	background-color: var(--sparked-action, var(--wp--preset--color--coral-dark));
	color: var(--wp--preset--color--paper);
}

[class*="-light-background-color"] .wp-block-button:not(.is-style-outline, .is-style-arrow, .is-style-soft) > .wp-block-button__link:hover,
[class*="-light-background-color"] .sparked-pill.is-primary:hover {
	background-color: var(--sparked-action-hover, var(--wp--preset--color--ink));
}

[class*="-light-background-color"] .wp-block-button:is(.is-style-outline, .is-style-arrow) > .wp-block-button__link,
[class*="-light-background-color"] .sparked-pill:not(.is-primary) {
	border-color: var(--sparked-action, var(--wp--preset--color--coral-dark));
	color: var(--sparked-action, var(--wp--preset--color--coral-dark));
}

[class*="-light-background-color"] .wp-block-button:is(.is-style-outline, .is-style-arrow) > .wp-block-button__link:hover,
[class*="-light-background-color"] .sparked-pill:not(.is-primary):hover {
	border-color: var(--sparked-action, var(--wp--preset--color--coral-dark));
	background-color: var(--sparked-action, var(--wp--preset--color--coral-dark));
	color: var(--wp--preset--color--paper);
}

/* A card's button in its accent colour (MP-1511): the colour of the card's icon, or of its program; the words on one
   line. Filled in that colour on hover and keyboard focus. After the tinted sections' button colours, so a card's
   own accent wins on a tinted section too (each dark accent reads on every light tint). */
.sparked-accent { --sparked-accent: var(--wp--preset--color--coral-dark); }
.sparked-accent-peacock { --sparked-accent: var(--wp--preset--color--peacock-dark); }
.sparked-accent-coral { --sparked-accent: var(--wp--preset--color--coral-dark); }
.sparked-accent-plum { --sparked-accent: var(--wp--preset--color--plum-dark); }
.sparked-accent-gold { --sparked-accent: var(--wp--preset--color--gold-dark); }
.sparked-accent-leaf { --sparked-accent: var(--wp--preset--color--leaf-dark); }
.sparked-accent-cobalt { --sparked-accent: var(--wp--preset--color--cobalt-dark); }
.sparked-accent-orchid { --sparked-accent: var(--wp--preset--color--orchid-dark); }
.sparked-accent-sky { --sparked-accent: var(--wp--preset--color--sky-dark); }

.sparked-accent .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--sparked-accent);
	color: var(--sparked-accent);
	white-space: nowrap;
}

.sparked-accent .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.sparked-accent .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--sparked-accent);
	background: var(--sparked-accent);
	color: var(--wp--preset--color--paper);
}

/* Coral's own section keeps the site's Plum-dark hover, as on the page's ground. */
.has-coral-light-background-color {
	--sparked-action-hover: var(--sparked-role-primary-hover);
}

/* Soft: a quiet action on a busy section. */
.wp-block-button.is-style-soft > .wp-block-button__link {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
}

.wp-block-button.is-style-soft > .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper-deep);
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink-soft), var(--wp--preset--shadow--lift);
}

/* Lists */
ul.is-style-checks,
ul.is-style-pills,
ul.is-style-plain {
	list-style: none;
	padding-inline-start: 0;
}

ul.is-style-checks li {
	position: relative;
	padding-inline-start: 2rem;
}

ul.is-style-checks li + li {
	margin-block-start: 0.6rem;
}

ul.is-style-checks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.3em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--peacock-light)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232C6863' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 100% no-repeat;
}

.has-peacock-light-background-color ul.is-style-checks li::before {
	background-color: var(--wp--preset--color--card);
}

ul.is-style-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Only a link in a pill list is a pill (MP-1511, Chris's Oct 25 ruling: nothing that is not clickable may look like a
   button); an item that is only words is shown as words. */
ul.is-style-pills li {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

ul.is-style-pills li a {
	display: inline-block;
	padding: 0.4rem 0.95rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	text-decoration: none;
	color: inherit;
}

/*
 * Steps — a path that reads top to bottom on a phone and left to right on a desk. The numbers are for a true order
 * (B5, design team; MP-866): a set of choices or a list of dates is the same tile with no number (sparked-unnumbered).
 */
.is-style-steps {
	counter-reset: sparked-step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.is-style-steps > * {
	counter-increment: sparked-step;
	position: relative;
	margin: 0;
	padding: 4.25rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
}

.is-style-steps > *::before {
	content: counter(sparked-step);
	position: absolute;
	top: 1.25rem;
	inset-inline-start: 1.5rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--blob--three);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

.is-style-steps.sparked-unnumbered > * {
	padding-block-start: 1.5rem;
}

.is-style-steps.sparked-unnumbered > *::before {
	display: none;
}

.is-style-steps > *:nth-child(4n + 2)::before { background: var(--wp--preset--color--coral-light); }
.is-style-steps > *:nth-child(4n + 3)::before { background: var(--wp--preset--color--peacock-light); }
.is-style-steps > *:nth-child(4n + 4)::before { background: var(--wp--preset--color--plum-light); }

.is-style-steps h3,
.is-style-steps h4 {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--subhead);
}

.is-style-steps p {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

/* Quotes */
.wp-block-quote {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--card);
	box-shadow: var(--wp--preset--shadow--soft);
}

.wp-block-quote p {
	margin: 0 0 1rem;
}

.wp-block-quote cite {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

/* Questions and answers: ONE style for every FAQ on the site (every Details block: "Questions we are often asked"
   and the rest; MP-1154, MP-1175). Each question box takes its own brand family, in the same order on every page
   (Peacock, Coral, Plum, Cobalt, Gold, Leaf, then again; counted among the boxes only, so a heading before them never
   shifts the order): the family's light fill while closed, a stronger tint of it while open, and its edge so the box
   holds on any section ground. Opening moves each corner one place clockwise, the cards' corner change; the answer
   unfolds smoothly (questions.js, the card's 500 ms). With reduced motion nothing moves: the colour and the corners
   just switch. */
.wp-block-details {
	--sparked-question: var(--wp--preset--color--peacock);
	--sparked-question-light: var(--wp--preset--color--peacock-light);
	--sparked-question-fill: var(--sparked-question-light);
	--sparked-question-open: color-mix(in srgb, var(--sparked-question) 22%, var(--sparked-question-light));
	box-sizing: border-box;
	padding: 1.1rem 1.5rem;
	background: var(--sparked-question-fill);
	border: 1px solid color-mix(in srgb, var(--sparked-question) 45%, var(--sparked-question-light));
}

.wp-block-details:nth-of-type(6n + 2) {
	--sparked-question: var(--wp--preset--color--coral);
	--sparked-question-light: var(--wp--preset--color--coral-light);
}

.wp-block-details:nth-of-type(6n + 3) {
	--sparked-question: var(--wp--preset--color--plum);
	--sparked-question-light: var(--wp--preset--color--plum-light);
}

.wp-block-details:nth-of-type(6n + 4) {
	--sparked-question: var(--wp--preset--color--cobalt);
	--sparked-question-light: var(--wp--preset--color--cobalt-light);
}

.wp-block-details:nth-of-type(6n + 5) {
	--sparked-question: var(--wp--preset--color--gold);
	--sparked-question-light: var(--wp--preset--color--gold-light);
}

.wp-block-details:nth-of-type(6n) {
	--sparked-question: var(--wp--preset--color--leaf);
	--sparked-question-light: var(--wp--preset--color--leaf-light);
}

/* questions.js marks a box that is folding (.is-closing): it is still open, but already turning back. */
.wp-block-details[open]:not(.is-closing) {
	background: var(--sparked-question-open);
	border-radius: var(--sparked-bl) var(--sparked-tl) var(--sparked-tr) var(--sparked-br);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-details {
		transition:
			border-radius var(--sparked-motion-card) var(--sparked-ease),
			background-color var(--sparked-motion-card) var(--sparked-ease);
	}
}

/* While questions.js unfolds or folds an answer, the box's height moves and what is not yet in view is clipped. */
.wp-block-details.is-moving {
	overflow: hidden;
}

.wp-block-details + .wp-block-details {
	margin-block-start: 0.75rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
}

.wp-block-details[open] summary {
	margin-block-end: 0.75rem;
}

.wp-block-details p {
	color: var(--wp--preset--color--ink-soft);
}

/* Statistics */
.sparked-stat {
	text-align: center;
}

.sparked-stat .sparked-stat__figure {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--headline);
	line-height: 1;
	color: var(--wp--preset--color--peacock-dark);
}

.sparked-stat p + p {
	margin-block-start: 0.5rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Partner marks: a quiet row of rounded slots */
.sparked-partners {
	justify-content: center;
	gap: 1rem;
}

.sparked-partners > * {
	margin: 0;
	padding: 0.9rem 1.5rem;
	border-radius: var(--wp--custom--radius--small);
	border: 1px dashed var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.sparked-cta {
	max-width: 46rem;
}

.sparked-cta .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* A timeline of weeks (live learning) */
.sparked-timeline {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(9.5rem, 1fr);
	gap: 0.75rem;
	overflow-x: auto;
	padding-block-end: 0.75rem;
	scroll-snap-type: x proximity;
}

.sparked-timeline > * {
	scroll-snap-align: start;
	margin: 0;
	padding: 1.1rem 1.25rem;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
}

.sparked-timeline > *:last-child {
	background: var(--wp--preset--color--gold);
	border-color: transparent;
}

.sparked-timeline h3 {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--subhead);
}

.sparked-timeline p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* ----------------------------------------------------------------------------- 5 header and footer */

.sparked-header {
	position: relative;
	z-index: 20;
	padding-block: 0.85rem;
	background: var(--wp--preset--color--gold-light);
}

/*
 * One row (B1, design team; MP-866): the logo, the menu, WooCommerce's account and mini-cart icons and one button.
 * Under 1200 px the menu folds into its Menu button rather than wrapping or shrinking. Measured in Firefox with the
 * real fonts and the menu's real names (MP-884): the row needs 1044 px; the bar is the window less 96 px, so it
 * would fit from 1140 px, and folding under 1200 px keeps 60 px spare. Under 600 px the button takes its own row.
 * A longer menu name moves that point: the browser design check fails when the row wraps at any width.
 */
.sparked-header__bar {
	gap: 0.75rem 1.25rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.sparked-header__bar > * {
	flex: none;
}

/*
 * WooCommerce's closed mini-cart drawer only fades out (opacity 0, aria-hidden), so its links and buttons stayed in
 * the Tab order (MP-1198, WCAG 2.4.3 and 4.1.2: a keyboard user tabbed into a drawer they could not see). Closed, it
 * is hidden, out of the Tab order; the hiding waits for the 0.3 s fade-out. Opening shows it at once.
 */
.wc-block-components-drawer__screen-overlay--is-hidden {
	visibility: hidden;
	transition: opacity 0.3s, visibility 0s 0.3s;
}

.sparked-header__bar > .wp-block-navigation {
	flex: 1 1 auto;
	min-width: 0;
}

/* Folded: the logo, then the icons, the button and the Menu button at the right. */
@media (max-width: 1199px) {
	.sparked-header__bar > .wp-block-navigation {
		flex: none;
		order: 3;
	}

	.sparked-header__bar > .wp-block-woocommerce-customer-account {
		margin-inline-start: auto;
	}

	.sparked-header__bar > .sparked-header__actions {
		order: 2;
	}
}

/* WordPress folds its menu only under 600 px; between 600 px and the fold the theme folds it too. */
@media (min-width: 600px) and (max-width: 1199px) {
	.sparked-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sparked-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 599px) {
	.sparked-header__bar {
		flex-wrap: wrap;
		column-gap: 0.25rem;
	}

	.sparked-header__bar > .sparked-header__logo {
		margin-inline-end: auto;
	}

	.sparked-header__bar > .sparked-header__actions {
		order: 4;
		flex-basis: 100%;
	}
}

/* The checkout's own header (A5): the logo, then Back to cart and Help at the right; they wrap under it on a phone. */
.sparked-header__bar--checkout {
	flex-wrap: wrap;
}

.sparked-header__bar--checkout > .wp-block-buttons {
	gap: 0.5rem;
}

.sparked-header__bar--checkout .wp-block-button__link {
	padding: calc(0.6rem - 2px) calc(1.1rem - 2px);
	font-size: var(--wp--preset--font-size--small);
}

.sparked-header .wp-block-site-title a {
	display: inline-flex;
	align-items: baseline;
	letter-spacing: -0.01em;
}

/* The header logo: SparkED's PNG, a stand-in until the design packet (MP-798). Never wider than half a phone screen. */
.sparked-header__logo {
	margin: 0;
	line-height: 0;
}

.sparked-header__logo img {
	display: block;
	width: 190px;
	max-width: 46vw;
	height: auto;
}

/* In the footer, the wordmark stands in for the logo until SparkED supplies its artwork. */
.sparked-header .wp-block-site-title a::after,
.sparked-footer .wp-block-site-title a::after {
	content: "";
	width: 0.55em;
	height: 0.55em;
	margin-inline-start: 0.2em;
	border-radius: var(--wp--custom--blob--one);
	background: var(--wp--preset--color--gold);
	box-shadow: 0.32em -0.2em 0 -0.12em var(--wp--preset--color--coral);
	transform: translateY(-0.35em);
}

.sparked-header .wp-block-navigation {
	gap: 0.25rem 1.35rem;
	font-size: 1rem;
}

.sparked-header .wp-block-navigation-item__content {
	padding-block: 0.4rem;
}

.sparked-header .wp-block-navigation-item__content:hover,
.sparked-header .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--gold);
}

.sparked-header .wp-block-navigation__submenu-container {
	min-width: 15rem !important;
	padding: 0.6rem;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--card) !important;
	box-shadow: var(--wp--preset--shadow--lift);
}

.sparked-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.85rem;
	border-radius: var(--wp--custom--radius--small);
}

.sparked-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--gold-light);
	box-shadow: none;
}

.sparked-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
	background: var(--wp--preset--color--paper);
}

.sparked-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--subhead);
	padding-block: 0.6rem;
}

/* In the open phone menu, WordPress shows every group's list whatever its button says, so a button read as collapsed
   sat over a list that was shown (MP-1611, WCAG 4.1.2). Here a group's list shows only while its button says
   expanded: each button opens and closes its group, as on a wide screen. */
.sparked-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
	display: none;
}

.sparked-header__actions {
	gap: 0.6rem;
	align-items: center;
}

.sparked-header__actions .wp-block-button__link {
	padding: 0.7rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}


.sparked-footer {
	margin-block-start: var(--sparked-wave-height);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink);
}

.sparked-footer h2,
.sparked-footer h3 {
	margin-block-end: 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink-soft);
}

.sparked-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sparked-footer li + li {
	margin-block-start: 0.5rem;
}

/* The policy links are one row on one baseline (MP-1175): the columns' list spacing above is not theirs. */
.sparked-footer__policies li + li {
	margin-block-start: 0;
}

.sparked-footer__policies .wp-block-navigation__container {
	align-items: baseline;
}

.sparked-footer a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 rgba(44, 42, 39, 0.25);
}

.sparked-footer a:hover {
	color: var(--wp--preset--color--coral-dark);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--gold);
}

.sparked-footer .wp-block-site-title a {
	box-shadow: none;
}

.sparked-footer__legal {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid rgba(44, 42, 39, 0.14);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

/* ------------------------------------------------------------------------------------------ 6 forms */

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], select, textarea) {
	width: 100%;
	padding: 0.85rem 1.1rem;
	/* A field's edge must stand out 3:1 from the page (WCAG 1.4.11): Ink, soft, not the paler line colour. */
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
	line-height: 1.4;
	transition: border-color var(--sparked-motion-button) var(--sparked-ease), box-shadow var(--sparked-motion-button) var(--sparked-ease);
}

:where(input, select, textarea, button) {
	box-sizing: border-box;
	max-width: 100%;
}

:where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--cobalt-dark);
	box-shadow: 0 0 0 3px var(--wp--preset--color--cobalt-dark);
	outline: none;
}

:where(textarea) {
	min-height: 9rem;
	resize: vertical;
}

::placeholder {
	color: var(--wp--preset--color--ink-soft);
	opacity: 1;
}

.sparked-form {
	display: grid;
	gap: 1.25rem;
}

.sparked-form__row {
	display: grid;
	gap: 1.25rem;
}

.sparked-form__row > *,
.sparked-form > * {
	min-width: 0;
}

@media (min-width: 600px) {
	.sparked-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.sparked-form label,
.sparked-form legend {
	display: block;
	margin-block-end: 0.4rem;
	font-weight: 600;
}

.sparked-form .sparked-form__hint {
	display: block;
	margin-block-start: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.sparked-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.sparked-form .sparked-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.sparked-form .sparked-form__choices label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-weight: 400;
}

.sparked-form input[type="checkbox"],
.sparked-form input[type="radio"] {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--wp--preset--color--cobalt-dark);
}

.sparked-form button[type="submit"],
.sparked-form input[type="submit"] {
	justify-self: start;
	min-height: 2.75rem;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--coral-dark);
	color: var(--wp--preset--color--paper);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--sparked-motion-button) var(--sparked-ease), box-shadow var(--sparked-motion-button) var(--sparked-ease), transform var(--sparked-motion-button) var(--sparked-ease);
}

.sparked-form button[type="submit"]:hover {
	background: var(--sparked-role-primary-hover);
	color: var(--wp--preset--color--paper);
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* --------------------------------------------------------------------------------------------- statuses
 * The four status pairs (design team C2; tokens.json "statuses"): a dark for the text, edge and icon, a light for the
 * ground. Every notice carries its icon and a label as well as its colour, never colour alone. The icons are the
 * 24-unit stroke shapes of circle-alert, circle-check, triangle-alert and info, drawn as masks in the text colour. */
:root {
	--sparked-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
	--sparked-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--sparked-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
	--sparked-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

/* A message box (MP-2140, Chris: never a thicker edge on one side): one edge all round, and the four-corner signature at
 * a message's size, orientation b: the large corner at the top end, away from the icon at the start, the medium below
 * it, the two small on the icon's side. Static: a message never moves. Text clears the large curve (half of it plus
 * 0.5rem, the box's 1.25rem end padding). */
:root {
	--sparked-message-radius: 0.375rem 1.5rem 0.75rem 0.375rem;
}

.sparked-status {
	--sparked-status-dark: var(--sparked-status-info-dark);
	--sparked-status-light: var(--sparked-status-info-light);
	--sparked-status-icon: var(--sparked-icon-info);
	position: relative;
	padding: 1rem 1.25rem 1rem 3.25rem;
	border: 1px solid var(--sparked-status-dark);
	border-radius: var(--sparked-message-radius);
	background: var(--sparked-status-light);
	color: var(--wp--preset--color--ink);
}

.sparked-status::before {
	content: "";
	position: absolute;
	inset-inline-start: 1.1rem;
	top: 1.05rem;
	width: 1.4rem;
	height: 1.4rem;
	background: var(--sparked-status-dark);
	-webkit-mask: var(--sparked-status-icon) center / contain no-repeat;
	mask: var(--sparked-status-icon) center / contain no-repeat;
}

.sparked-status a {
	color: var(--sparked-status-dark);
}

.sparked-status--error,
.sparked-form__summary {
	--sparked-status-dark: var(--sparked-status-error-dark);
	--sparked-status-light: var(--sparked-status-error-light);
	--sparked-status-icon: var(--sparked-icon-error);
}

.sparked-status--success,
.sparked-form__status.is-ok {
	--sparked-status-dark: var(--sparked-status-success-dark);
	--sparked-status-light: var(--sparked-status-success-light);
	--sparked-status-icon: var(--sparked-icon-success);
}

.sparked-status--warning,
.sparked-form__status.is-stop {
	--sparked-status-dark: var(--sparked-status-warning-dark);
	--sparked-status-light: var(--sparked-status-warning-light);
	--sparked-status-icon: var(--sparked-icon-warning);
}

.sparked-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--gold-light);
	border: 1px dashed var(--wp--preset--color--gold-dark);
	color: var(--wp--preset--color--ink);
}

/* The newsletter line in the footer and on Resources */
.sparked-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 30rem;
}

.sparked-newsletter input {
	flex: 1 1 12rem;
	border-radius: var(--wp--custom--radius--small);
}

.sparked-newsletter button {
	min-height: 2.75rem;
	padding: 0.75rem 1.4rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--coral-dark);
	color: var(--wp--preset--color--paper);
	font: inherit;
	font-weight: 700;
	transition: background-color var(--sparked-motion-button) var(--sparked-ease);
}

.sparked-newsletter button:hover:not([disabled]) {
	background: var(--sparked-role-primary-hover);
	color: var(--wp--preset--color--paper);
}

.sparked-newsletter button[disabled] {
	opacity: 1;
	cursor: not-allowed;
}

/* The site's own forms (MP-562): the full sign-up is a grid like the other forms; the footer's is one line. */
.sparked-newsletter.sparked-form {
	display: grid;
	max-width: 40rem;
}

.sparked-newsletter.is-compact > .sparked-form__field {
	flex: 1 1 12rem;
}

.sparked-newsletter.is-compact > .sparked-form__field label {
	display: block;
	margin-block-end: 0.35rem;
	font-weight: 600;
}

.sparked-newsletter.is-compact > .sparked-form__field input {
	width: 100%;
}

.sparked-newsletter.is-compact > button {
	align-self: end;
}

.sparked-newsletter .sparked-form__hint,
.sparked-newsletter.is-compact > .sparked-form__summary,
.sparked-newsletter.is-compact > .sparked-form__status {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.sparked-form__req {
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
}

.sparked-form__error {
	position: relative;
	display: block;
	margin-block-end: 0.35rem;
	padding-inline-start: 1.5rem;
	color: var(--sparked-status-error-dark);
	font-weight: 600;
}

.sparked-form__error::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.15em;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: var(--sparked-icon-error) center / contain no-repeat;
	mask: var(--sparked-icon-error) center / contain no-repeat;
}

.sparked-form__field.has-error input,
.sparked-form__field.has-error textarea,
.sparked-form__field.has-error select {
	border-color: var(--sparked-status-error-dark);
	border-width: 2px;
}

.sparked-form__summary,
.sparked-form__status {
	position: relative;
	padding: 1rem 1.25rem 1rem 3.25rem;
	border: 1px solid var(--sparked-status-dark);
	border-radius: var(--sparked-message-radius);
	background: var(--sparked-status-light);
	color: var(--wp--preset--color--ink);
}

.sparked-form__summary::before,
.sparked-form__status::before {
	content: "";
	position: absolute;
	inset-inline-start: 1.1rem;
	top: 1.05rem;
	width: 1.4rem;
	height: 1.4rem;
	background: var(--sparked-status-dark);
	-webkit-mask: var(--sparked-status-icon) center / contain no-repeat;
	mask: var(--sparked-status-icon) center / contain no-repeat;
}

.sparked-form__summary p,
.sparked-form__status p {
	margin: 0;
	font-weight: 600;
}

.sparked-form__summary ul {
	margin: 0.5rem 0 0;
}

.sparked-form__summary a {
	color: var(--sparked-status-error-dark);
}



.sparked-form__summary:focus,
.sparked-form__status:focus {
	outline: var(--sparked-focus);
	outline-offset: 3px;
}

.sparked-form .sparked-form__check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.sparked-form .sparked-form__check label {
	margin: 0;
	font-weight: 400;
}

/* The honeypot: off-screen and out of the tab order; people never see or fill it. */
.sparked-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* -------------------------------------------------------------------- 7 catalogue and course page */

.sparked-catalogue {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	/* A filter, search or Clear filters lands here (#sparked-catalogue, MP-2204 W2): a little room above it. */
	scroll-margin-top: 1rem;
}

@media (min-width: 900px) {
	.sparked-catalogue {
		grid-template-columns: 16.5rem minmax(0, 1fr);
		align-items: start;
	}
}

/* The filters sit on the page itself, with no box around them (MP-893): the groups' own headings and boxes give the
   structure. On a phone they open as a sheet (below). */
.sparked-catalogue__filters {
	padding: 0;
}

/* Sticky, but never taller than the window: a longer list scrolls inside itself, so the browser can bring each
   focused filter into view (MP-1709; WCAG 2.4.7, 2.4.11). The padding, taken back by the margin, keeps the focus
   ring inside the scrolling box. */
@media (min-width: 900px) {
	.sparked-catalogue__filters {
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: -0.25rem;
		padding: 0.25rem;
	}
}

/* Each filter control asks the browser for room around it when focus brings it into view: Chromium otherwise
   stops with a focused filter at the window's very edge, part of a pixel past it (C41 F3; WCAG 2.2 2.4.11). */
.sparked-catalogue__filters :is(input, select, button, a, summary) {
	scroll-margin-block: 0.75rem;
}

.sparked-catalogue__filters h2 {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--subhead);
}

.sparked-catalogue__filters fieldset,
.sparked-catalogue__filters .sparked-facet {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.sparked-catalogue__filters legend,
.sparked-catalogue__filters .sparked-facet__label {
	margin-block-end: 0.5rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink-soft);
}

.sparked-catalogue__filters label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding-block: 0.2rem;
}

.sparked-catalogue__filters input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--wp--preset--color--cobalt-dark);
}

.sparked-catalogue__filters .sparked-count {
	margin-inline-start: auto;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.sparked-catalogue__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

/* "Show courses": the same primary pill as every button (Coral dark, eased to Plum dark, lift, press, ring). */
.sparked-catalogue__actions button {
	min-height: 2.75rem;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--coral-dark);
	color: var(--wp--preset--color--paper);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition:
		background-color var(--sparked-motion-button) var(--sparked-ease),
		box-shadow var(--sparked-motion-button) var(--sparked-ease),
		transform var(--sparked-motion-button) var(--sparked-ease);
}

.sparked-catalogue__actions button:hover {
	background: var(--sparked-role-primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--lift);
}

.sparked-catalogue__actions button:active {
	transform: translateY(1px);
	box-shadow: none;
}

.sparked-catalogue__actions button:focus-visible {
	outline: var(--sparked-focus);
	outline-offset: 3px;
}

/*
 * Above the results (A4, design team; MP-866): the search, prominent, and beside it Clear filters while a filter or
 * search is in use (Chris's walk, MP-2204 W2: seen without scrolling); then what is chosen, each removable from the
 * keyboard. No count, no order and no topic buttons there (W2).
 */
.sparked-catalogue__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-block-end: 1rem;
}

.sparked-catalogue__search {
	display: flex;
	flex: 1 1 18rem;
	gap: 0.5rem;
}

.sparked-catalogue__search input[type="search"] {
	flex: 1;
	min-width: 0;
}

.sparked-catalogue__toolbar > .sparked-catalogue__clear {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sparked-catalogue__search button,
.sparked-catalogue__sort button,
.sparked-catalogue__open,
.sparked-catalogue__close,
.sparked-catalogue__quick button,
.sparked-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.55rem 1.1rem;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sparked-motion-button) var(--sparked-ease);
}

.sparked-catalogue__search button:hover,
.sparked-catalogue__sort button:hover,
.sparked-catalogue__open:hover,
.sparked-catalogue__close:hover,
.sparked-catalogue__quick button:hover,
.sparked-pill:hover {
	background: var(--wp--preset--color--gold-light);
}

.sparked-pill.is-primary {
	border-color: var(--wp--preset--color--coral-dark);
	background: var(--wp--preset--color--coral-dark);
	color: var(--wp--preset--color--paper);
}

.sparked-pill.is-primary:hover {
	border-color: var(--sparked-role-primary-hover);
	background: var(--sparked-role-primary-hover);
}

.sparked-catalogue__open[hidden],
.sparked-catalogue__close[hidden] {
	display: none;
}

.sparked-catalogue__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 1rem;
}

.sparked-catalogue__summary {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

.sparked-catalogue__sort {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* "Sort by" on one line, beside its menu. */
.sparked-catalogue__sort label {
	flex: none;
	white-space: nowrap;
}

.sparked-catalogue__quick,
.sparked-catalogue__selected {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.sparked-catalogue__quick[hidden] {
	display: none;
}

.sparked-catalogue__quick button {
	min-height: 2.25rem;
	padding: 0.35rem 0.9rem;
	border-width: 1px;
	border-color: var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}

/* A chosen topic: filled, with a tick drawn beside its name (never the colour alone). */
.sparked-catalogue__quick button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--cobalt-dark);
	background: var(--wp--preset--color--cobalt-dark);
	color: var(--wp--preset--color--paper);
}

.sparked-catalogue__quick button[aria-pressed="true"]::before {
	content: "";
	width: 0.7em;
	height: 0.4em;
	border-inline-start: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.12em) rotate(-45deg);
}

.sparked-catalogue__selected a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.25rem;
	padding: 0.3rem 0.5rem 0.3rem 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--cobalt-light);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.sparked-catalogue__selected a:hover {
	background: var(--wp--preset--color--paper-deep);
}

.sparked-catalogue__selected a.sparked-catalogue__clear {
	padding-inline-end: 0.9rem;
	background: transparent;
	text-decoration: underline;
}

/* The remove mark: a cross drawn in two strokes. */
.sparked-catalogue__x {
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
}

.sparked-catalogue__x::before,
.sparked-catalogue__x::after {
	content: "";
	position: absolute;
	inset: 50% 25% auto;
	height: 2px;
	margin-block-start: -1px;
	background: currentColor;
	transform: rotate(45deg);
}

.sparked-catalogue__x::after {
	transform: rotate(-45deg);
}

.sparked-catalogue__head {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 1rem;
}

.sparked-catalogue__head h2 {
	margin: 0;
}

/*
 * On a phone, with the script: the filters are a dialog that slides over the page from the "Filters" button, never
 * the whole open sidebar above the results.
 */
@media (max-width: 899px) {
	.sparked-catalogue.has-drawer .sparked-catalogue__filters {
		display: none;
	}

	/* Its padding counts inside its width: otherwise, pinned to the right edge, a phone-wide dialog ran 72 px off the
	   screen's left edge, checkboxes and all (MP-1276). */
	.sparked-catalogue.has-drawer .sparked-catalogue__filters.is-open {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 1000;
		display: block;
		box-sizing: border-box;
		width: min(26rem, 100%);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 1.5rem;
		border-radius: var(--wp--custom--radius--small) 0 0 var(--wp--custom--radius--small);
		background: var(--wp--preset--color--card);
		box-shadow: var(--wp--preset--shadow--lift);
	}

	.sparked-catalogue.has-drawer .sparked-catalogue__filters.is-open .sparked-catalogue__actions {
		position: sticky;
		bottom: -1.5rem;
		margin: 0 -1.5rem -1.5rem;
		padding: 1rem 1.5rem 1.5rem;
		background: var(--wp--preset--color--card);
		border-block-start: 1px solid var(--wp--preset--color--line);
	}

	.sparked-catalogue__backdrop:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: 999;
		background: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
	}
}

@media (min-width: 900px) {
	.sparked-catalogue__open,
	.sparked-catalogue__close,
	.sparked-catalogue__backdrop {
		display: none !important;
	}
}

.sparked-no-scroll {
	overflow: hidden;
}

.sparked-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A resource card is the list item itself; a living card's surface is the element inside its slot (below). */
.sparked-course-card:not(.sparked-living),
.sparked-living__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--soft);
	overflow: hidden;
	transition: transform var(--sparked-motion-button) var(--sparked-ease), box-shadow var(--sparked-motion-button) var(--sparked-ease);
}

.sparked-course-card:not(.sparked-living):hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--lift);
}

.sparked-course-card__art {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--peacock-light);
	overflow: hidden;
}

.sparked-course-card:not(.sparked-living):nth-child(4n + 2) .sparked-course-card__art { background: var(--wp--preset--color--coral-light); }
.sparked-course-card:not(.sparked-living):nth-child(4n + 3) .sparked-course-card__art { background: var(--wp--preset--color--plum-light); }
.sparked-course-card:not(.sparked-living):nth-child(4n + 4) .sparked-course-card__art { background: var(--wp--preset--color--cobalt-light); }

/*
 * The living card (MP-895, from Chris's prototype 3), for courses and pathways. The list item is a slot that keeps
 * its size; the card inside it opens over its neighbors, never moving them (living-card.js holds the slot):
 *   - its corners move one place clockwise and its cover's corners, set inside them, follow;
 *   - it widens by --sparked-living-grow on each side while its text moves in by the same, so the title stays put
 *     (B2) and nothing jumps;
 *   - the outcomes, then the two actions, unfold below (500 ms, the packet's card time), and the cover's ring and
 *     swoop drift inwards while the icon turns slightly.
 * Its colors are its own pair's (Sparked_Site_Course_Art): the cover's ground and marks, and its buttons, each the
 * pair's dark on Warm White. With reduced motion it opens without moving. Without the script it shows everything.
 */
.sparked-living {
	--sparked-living-grow: 1.25rem;
	position: relative;
}

.sparked-living__card {
	position: relative;
	box-sizing: border-box;
}

.sparked-living.is-ready .sparked-living__card {
	transition:
		margin var(--sparked-motion-card) var(--sparked-ease),
		border-radius var(--sparked-motion-card) var(--sparked-ease),
		box-shadow var(--sparked-motion-card) var(--sparked-ease);
}

.sparked-living.is-open {
	z-index: 5;
}

.sparked-living.is-open .sparked-living__card {
	height: auto;
	min-height: 100%;
	margin-inline: calc(-1 * var(--sparked-living-grow));
	border-radius: var(--sparked-bl) var(--sparked-tl) var(--sparked-tr) var(--sparked-br);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* The cover touches the card's edge on its top and both sides (MP-1175): the card's own corners clip it, so it follows
   them as they move. Open, it widens with the card but keeps its resting height (living-card.js holds it), so the
   title under it never moves (B2). */
.sparked-living__cover {
	display: block;
	flex: none;
	margin: 0;
	aspect-ratio: 2 / 1;
	overflow: hidden;
}

.sparked-living__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sparked-living__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.4rem 1.5rem 1.5rem;
}

.sparked-living.is-ready .sparked-living__body {
	transition: padding var(--sparked-motion-card) var(--sparked-ease);
}

.sparked-living.is-open .sparked-living__body {
	padding-inline: calc(1.5rem + var(--sparked-living-grow));
}

/* What unfolds: the outcomes, and the actions under the price. Each takes no room at rest. */
.sparked-living.has-js :is(.sparked-living__extra, .sparked-living__actions) {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
}

.sparked-living.is-ready :is(.sparked-living__extra, .sparked-living__actions) {
	transition:
		grid-template-rows var(--sparked-motion-card) var(--sparked-ease),
		opacity 300ms var(--sparked-ease),
		visibility 0s linear var(--sparked-motion-card);
}

.sparked-living.is-open :is(.sparked-living__extra, .sparked-living__actions) {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s, 130ms, 0s;
}

.sparked-living.is-open .sparked-living__actions {
	transition-delay: 0s, 180ms, 0s;
}

.sparked-living__extra-inner,
.sparked-living__actions-inner {
	min-height: 0;
	overflow: hidden;
}

.sparked-living__extra-inner {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block-start: 0.75rem;
}

.sparked-living__extra-title {
	margin: 0 0 0.35rem;
	color: var(--sparked-art-dark, var(--wp--preset--color--ink));
	font-weight: 700;
}

.sparked-living__extra ul {
	margin: 0;
	padding-inline-start: 1.1rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.sparked-living__actions-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-block-start: 0.85rem;
}

.sparked-living__actions-inner > * {
	flex: 1 1 8rem;
	justify-content: center;
}

/* The card's own buttons, in its pair's dark (each family's dark on Warm White is a checked pair). */
.sparked-living__toggle,
.sparked-living__actions .sparked-pill {
	border-color: var(--sparked-art-dark, var(--wp--preset--color--coral-dark));
	color: var(--sparked-art-dark, var(--wp--preset--color--coral-dark));
}

.sparked-living__actions .sparked-pill.is-primary {
	background: var(--sparked-art-dark, var(--wp--preset--color--coral-dark));
	color: var(--wp--preset--color--paper);
}

.sparked-living__actions .sparked-pill.is-primary:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.sparked-living__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding: 0.5rem 1.1rem;
	border: 2px solid;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition:
		background-color var(--sparked-motion-button) var(--sparked-ease),
		color var(--sparked-motion-button) var(--sparked-ease),
		transform var(--sparked-motion-button) var(--sparked-ease);
}

.sparked-living__toggle:hover,
.sparked-living__toggle[aria-expanded="true"] {
	background: var(--sparked-art-dark, var(--wp--preset--color--coral-dark));
	color: var(--wp--preset--color--paper);
}

.sparked-living__toggle:hover {
	transform: translateY(-1px);
}

.sparked-living__toggle:focus-visible {
	outline: var(--sparked-focus);
	outline-offset: 3px;
}

.sparked-living__toggle-sign::before {
	content: "+";
}

.sparked-living__toggle[aria-expanded="true"] .sparked-living__toggle-sign::before {
	content: "\2212";
}

.sparked-living:not(.has-js) .sparked-living__toggle {
	display: none;
}

/* The course art as a cover: the pair's light ground, the ring (its standard) and the swoop (the accent's), and the
   icon in its dark, all placed in the cover's own height (the layouts come from Sparked_Site_Course_Art). */
.sparked-art {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	container-type: size;
	background: var(--sparked-art-light);
}

.sparked-art__ring,
.sparked-art__swoop {
	position: absolute;
	box-sizing: border-box;
	border-style: solid;
	border-radius: 50%;
	translate: -50% -50%;
	transition: transform var(--sparked-motion-card) var(--sparked-ease);
}

.sparked-art__ring {
	border-color: var(--sparked-art-mid);
}

.sparked-art__swoop {
	border-color: var(--sparked-art-accent);
}

.sparked-art__symbol {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46cqh;
	height: 46cqh;
	translate: -50% -50%;
	background: var(--sparked-art-dark);
	-webkit-mask: var(--sparked-icon) center / contain no-repeat;
	mask: var(--sparked-icon) center / contain no-repeat;
	transition: transform var(--sparked-motion-card) var(--sparked-ease);
}

.sparked-living.is-open :is(.sparked-art__ring, .sparked-art__swoop) {
	transform: translate(var(--sparked-art-move));
}

.sparked-living.is-open .sparked-art__symbol {
	transform: rotate(-8deg) scale(1.08);
}

@media (max-width: 600px) {
	.sparked-living {
		--sparked-living-grow: 0.75rem;
	}
}

/* The course page's picture, when it is the course art: the SVG draws its own four-corner shape. */
.sparked-course-image.is-course-art svg {
	display: block;
	width: 100%;
	height: auto;
}

.sparked-course-card__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sparked-course-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.4rem 1.5rem 1.5rem;
}

/*
 * Card titles (B2, design team; MP-866): Hanken Grotesk 700, wrapping in full: never cut short, never an ellipsis.
 * Comfortaa stays on page headings. Cards in a row grow to the tallest (the grid stretches them).
 */
.sparked-course-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.sparked-course-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.sparked-course-card__title a:hover {
	color: var(--wp--preset--color--coral-dark);
}

.sparked-course-card__excerpt {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	/* At most four lines on every card (Chris's walk, MP-1430); a longer one ends in an ellipsis. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

/*
 * A long price ($8,000.00 up to $500,000.00, or a sale's two prices) never pushes the button off the card (MP-1276):
 * the foot wraps, the button keeps its size and the card's right edge, and only the price may break, at any width.
 */
.sparked-course-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1rem;
	margin-block-start: auto;
	padding-block-start: 0.85rem;
}

.sparked-course-card__foot > :last-child:not(:only-child) {
	flex-shrink: 0;
	margin-inline-start: auto;
}

/* The foot sits at the card's bottom in a pathway card too, whose body is a block group with the editor's own spacing
   (MP-1173): the price and the Explore button of every card in a row line up. */
.sparked-living__body > .sparked-course-card__foot {
	margin-block-start: auto;
}

.sparked-course-card__price {
	min-width: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	overflow-wrap: anywhere;
}

/* An annual course's card (Chris's walk, MP-1430): "Annual subscription" over its cover, its price as a year's at the
   card's price size and the renewal small underneath, within the foot's own height (the Explore button's), so the card
   is the size of its neighbours. The badge is the brand gold with ink lettering (Chris, 10-30: keep the pill, in a
   colour; ink on gold reads at its small bold size, light lettering on the other brand colours does not). */
.sparked-course-card__badge {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	z-index: 1;
	padding: 0.3rem 0.8rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	pointer-events: none;
}

.sparked-course-card__price--annual {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

/* "/yr" is the price's unit, a size down; the two lines stay narrow enough to sit beside Explore, as a one-time price
   does (a three-column row is tight at 1440 px). */
.sparked-course-card__amount > [aria-hidden="true"] {
	font-size: 0.7em;
}

.sparked-course-card__renewal {
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	white-space: nowrap;
}

.sparked-course-card__foot:has(> .sparked-course-card__price--annual) {
	column-gap: 0.75rem;
}

.sparked-course-card__more {
	font-weight: 600;
	color: var(--wp--preset--color--peacock-dark);
	text-decoration: none;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--gold);
}

/*
 * Lists with meaning (MP-1186, Chris's choice): a course named on a page is a mini course card, a real link with the
 * course art's icon on its colour pair, in the card corners; one not yet in the store shows the same, without a link
 * or a hover. Items that are not links are living lists: medallions (a round icon over the words), tiles (a tinted
 * tile) or compact (a small round icon beside the words). None is shaped or coloured like a button.
 */
.sparked-mini-courses {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sparked-mini-courses > li {
	display: flex;
}

.sparked-mini-course {
	--sparked-shape-l: 1.5rem;
	--sparked-shape-m: 0.75rem;
	--sparked-shape-s: 0.375rem;
	display: grid;
	flex: 1;
	grid-template-columns: 5.25rem minmax(0, 1fr);
	min-height: 6rem;
	overflow: hidden;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

a.sparked-mini-course {
	transition:
		transform var(--sparked-motion-button) var(--sparked-ease),
		box-shadow var(--sparked-motion-button) var(--sparked-ease),
		border-radius var(--sparked-motion-card) var(--sparked-ease);
}

a.sparked-mini-course:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--lift);
}

a.sparked-mini-course:is(:hover, :focus-visible) {
	border-radius: var(--sparked-bl) var(--sparked-tl) var(--sparked-tr) var(--sparked-br);
}

a.sparked-mini-course:focus-visible {
	outline: var(--sparked-focus);
	outline-offset: 3px;
}

.sparked-mini-course__art,
.sparked-living-list__icon {
	position: relative;
	display: block;
	container-type: size;
	background: var(--sparked-art-light);
}

.sparked-mini-course__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.85rem 1.1rem;
}

.sparked-mini-course__title {
	font-weight: 700;
	line-height: 1.3;
}

a.sparked-mini-course .sparked-mini-course__title {
	color: var(--sparked-art-dark);
}

.sparked-mini-course__meta {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.sparked-living-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem 1.5rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.sparked-living-list__item {
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	line-height: 1.3;
}

.sparked-living-list.is-medallions .sparked-living-list__item {
	flex: 0 1 9.5rem;
	flex-direction: column;
	gap: 0.75rem;
	text-align: center;
}

.sparked-living-list.is-medallions .sparked-living-list__icon {
	width: 4.75rem;
	height: 4.75rem;
	border-radius: var(--wp--custom--radius--small);
	box-shadow: inset 0 0 0 2px var(--sparked-art-mid);
}

.sparked-living-list.is-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 1rem;
}

.sparked-living-list.is-tiles .sparked-living-list__item {
	--sparked-shape-l: 1.5rem;
	--sparked-shape-m: 0.75rem;
	--sparked-shape-s: 0.375rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.25rem 1.1rem;
	background: var(--sparked-art-light);
}

.sparked-living-list.is-tiles .sparked-living-list__icon {
	width: 2rem;
	height: 2rem;
	background: transparent;
}

.sparked-living-list.is-tiles .sparked-art__symbol {
	width: 100cqh;
	height: 100cqh;
}

.sparked-living-list.is-compact {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}

.sparked-living-list.is-compact .sparked-living-list__item {
	gap: 0.75rem;
	font-weight: 400;
}

.sparked-living-list.is-compact .sparked-living-list__icon {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--radius--small);
}

.sparked-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A card's facts (format, length, level, certificate; a resource's type) are words, not pills (MP-1511, Chris's Oct 25
   ruling: nothing that is not clickable may look like a button): each in its colour, divided by a dot. */
.sparked-chips li {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.5;
}

.sparked-chips li + li::before {
	content: "·";
	margin-inline: 0.45em;
	color: var(--wp--preset--color--ink-soft);
	font-weight: 400;
}

.sparked-chips li.is-format { color: var(--wp--preset--color--peacock-dark); }
.sparked-chips li.is-level { color: var(--wp--preset--color--plum-dark); }
.sparked-chips li.is-certificate { color: var(--wp--preset--color--gold-dark); }

/* The one empty state (A11): a heading, a line, one or two real next steps. */
/* No box around it (MP-893): the words and the next steps stand on the page. */
.sparked-empty {
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
}

.sparked-empty__title {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--subhead);
}

.sparked-empty__text {
	margin: 0 auto;
	max-width: 36rem;
}

.sparked-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin: 1.25rem 0 0;
}

.sparked-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 2rem;
}

.sparked-pagination a {
	padding: 0.5rem 1rem;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--border);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

/* The page you are on is not a link, so it is not a pill (MP-1511): its number, bold and underlined. */
.sparked-pagination span {
	padding: 0.5rem 0.6rem;
	color: var(--wp--preset--color--ink);
}

.sparked-pagination span[aria-current] {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* The course page: its facts as one compact row, divided by hairlines (A1: no row of small boxes). */
.sparked-course-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 0;
	margin: 0;
	padding: 0;
}

.sparked-course-facts > div {
	padding-inline: 1.1rem;
	border-inline-start: 1px solid var(--wp--preset--color--line);
}

.sparked-course-facts > div:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

/* In the purchase panel: format, time and certificate, one to a line, as two columns (MP-2847, Chris: "Certificate"
   broke as "Certific / ate"). The label column is as wide as the longest label, and a label never wraps or breaks
   inside a word; the value column takes the rest of the width and wraps between words ("Certificate of completion,
   Eligible for AASECT Credit" may take two lines). Each row's label and value sit in the panel's two columns (subgrid),
   so every label lines up; a browser without subgrid gives each row the same two columns, sized by its own label.
   In a narrow box (20rem wide or less: the purchase column beside a tablet-width page, or a phone) two columns
   would leave the value too little room and its words would break, so each label sits on its own line above its
   value. */
.sparked-course-facts.is-panel {
	container-type: inline-size;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.6rem 1rem;
	margin-block: 1rem;
	padding-block: 1rem;
	border-block: 1px solid var(--wp--preset--color--line);
}

.sparked-course-facts.is-panel > div {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 1rem;
	align-items: baseline;
	padding: 0;
	border: 0;
}

@supports (grid-template-columns: subgrid) {
	.sparked-course-facts.is-panel > div {
		grid-template-columns: subgrid;
	}
}

.sparked-course-facts.is-panel dt {
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
}

.sparked-course-facts.is-panel dd {
	margin: 0;
	min-width: 0;
	text-align: end;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: manual;
}

@container (max-width: 20rem) {
	.sparked-course-facts.is-panel > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}

	.sparked-course-facts.is-panel dd {
		text-align: start;
	}
}

.sparked-course-facts dt {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink-soft);
}

.sparked-course-facts dd {
	margin: 0.2rem 0 0;
	font-weight: 600;
}

.sparked-course-details {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (min-width: 782px) {
	.sparked-course-details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sparked-course-details > .is-wide {
		grid-column: 1 / -1;
	}
}

.sparked-course-details section {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
}

.sparked-course-details section:nth-child(3n + 1) { background: var(--wp--preset--color--peacock-light); border-color: transparent; }

.sparked-course-details h2 {
	margin: 0 0 0.85rem;
	font-size: var(--wp--preset--font-size--heading);
}

.sparked-course-details p:last-child,
.sparked-course-details ul:last-child {
	margin-block-end: 0;
}

/* Our Team and Our Partners (MP-2949): card grids, one column on a phone. A team card is the site's plain card: the
   photo in a circle beside the name and job title, then the bio. A partner card has its own colours, from the palette:
   a Peacock Light ground with a Peacock Dark band along its top, and its logo on a white panel. */
.sparked-team-grid,
.sparked-partner-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A few partners stand in the middle of the row, each card no wider than a team card. */
.sparked-partner-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 24rem));
	justify-content: center;
}

.sparked-person-card,
.sparked-partner-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: max(1.5rem, var(--sparked-box-pad, 1.5rem));
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--soft);
}

.sparked-person-card {
	background: var(--wp--preset--color--card);
}

.sparked-person-card__head {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sparked-person-card__photo {
	flex: 0 0 auto;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 20%;
	background: var(--wp--preset--color--plum-light);
}

.sparked-person-card__photo.is-initial {
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--plum-dark);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 2.25rem;
	font-weight: 700;
}

.sparked-person-card__name,
.sparked-partner-card__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--subhead, 1.25rem);
}

.sparked-person-card__role {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
}

.sparked-person-card__bio p,
.sparked-partner-card__text p {
	margin: 0 0 0.75rem;
}

.sparked-person-card__bio > :last-child,
.sparked-partner-card__text > :last-child {
	margin-block-end: 0;
}

.sparked-partner-card {
	border-top: 0.375rem solid var(--wp--preset--color--peacock-dark);
	background: var(--wp--preset--color--peacock-light);
}

.sparked-partner-card__logo {
	display: grid;
	place-items: center;
	min-height: 7rem;
	padding: 1rem;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--line);
}

.sparked-partner-card__logo-img {
	max-width: 100%;
	max-height: 5rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

.sparked-partner-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.75rem;
}

.sparked-partner-card__foot {
	margin: auto 0 0;
}

.sparked-partner-card__link {
	border-color: var(--wp--preset--color--peacock-dark);
	color: var(--wp--preset--color--peacock-dark);
}

.sparked-partner-card__new-tab {
	flex: 0 0 auto;
}

.sparked-cards-empty {
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
}

/* ----------------------------------------------------------------------------------------- 8 motion */

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

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

	.wp-block-button__link:hover,
	.wp-block-button__link:active,
	.wp-element-button:hover,
	.wp-element-button:active,
	.sparked-form button[type="submit"]:hover,
	.sparked-catalogue__actions button:hover,
	.sparked-catalogue__actions button:active,
	.sparked-course-card:hover,
	.sparked-living__toggle:hover,
	.sparked-card-link:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------------------------------ 9 print */

@media print {
	.sparked-header__actions,
	.wp-block-navigation,
	.sparked-newsletter,
	.is-style-note {
		display: none !important;
	}

	.sparked-section::before,
	.sparked-section::after {
		display: none;
	}

	body {
		background: #fff;
	}
}

/* Who we help (MP-611): one card per audience; the whole card follows its title's link. However many audiences
   there are, the row is centered, never spaced as if one were missing (MP-925); on a phone, one full-width column. */
.sparked-audience-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 19rem));
	justify-content: center;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sparked-audience-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
}

@media (max-width: 599px) {
	.sparked-audience-grid {
		grid-template-columns: 1fr;
	}
}

/* Each card's pill takes the card's own family dark (MP-893 item 5: each dark on its own light). */
.sparked-audience-card:nth-child(4n+1) { background: var(--wp--preset--color--gold-light); --sparked-action: var(--wp--preset--color--gold-dark); }
.sparked-audience-card:nth-child(4n+2) { background: var(--wp--preset--color--coral-light); --sparked-action: var(--wp--preset--color--coral-dark); }
.sparked-audience-card:nth-child(4n+3) { background: var(--wp--preset--color--cobalt-light); --sparked-action: var(--wp--preset--color--cobalt-dark); }
.sparked-audience-card:nth-child(4n+4) { background: var(--wp--preset--color--leaf-light); --sparked-action: var(--wp--preset--color--leaf-dark); }

.sparked-audience-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--subhead);
}

.sparked-audience-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.sparked-audience-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sparked-audience-card__title a:focus-visible {
	outline: none;
}

.sparked-audience-card:focus-within {
	outline: var(--sparked-focus);
	outline-offset: 3px;
}

.sparked-audience-card__text {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

/* "How we help" is a pill button (MP-925), outlined in the card's dark and filled with it as the card is reached;
   the card's title link is what a click follows, so the pill is not a second link. */
.sparked-audience-card__more.sparked-pill {
	align-self: flex-start;
	margin-top: auto;
	border-color: var(--sparked-action, var(--wp--preset--color--ink));
	color: var(--sparked-action, var(--wp--preset--color--ink));
}

.sparked-audience-card:is(:hover, :focus-within) .sparked-audience-card__more.sparked-pill {
	background: var(--sparked-action, var(--wp--preset--color--ink));
	color: var(--wp--preset--color--paper);
}

/* "Who it's for" on a course or resource, and the link that ends each list. */
.sparked-audience-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block: 1rem 0;
}

.sparked-audience-links__label {
	margin: 0;
	font-weight: 600;
}

.sparked-audience-links .sparked-chips a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* The onward actions after a list are pill buttons (MP-925: no bare text-link calls to action). */
.sparked-onward-link {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 1.5rem 0;
}

.sparked-related__title {
	margin-block: 2.5rem 1rem;
	font-size: var(--wp--preset--font-size--heading);
}

/*
 * The pathway cards (MP-1186, Chris's choice of option D): eight identical cards, each led by the sentence of the
 * person it is for on the pathway's own colour with its icon, then its number, title (a card title, B2: Hanken Grotesk
 * 700, in full), what it leads to, and View pathway at the bottom, level across the row.
 */
.sparked-pathway-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--soft);
}

.sparked-pathway-card > * {
	margin-block: 0;
}

.sparked-pathway-card__head {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-height: 9.5rem;
	box-sizing: border-box;
	padding: var(--sparked-box-pad) var(--sparked-box-pad) 1.25rem;
	background: var(--sparked-art-light, var(--wp--preset--color--peacock-light));
}

.sparked-pathway-card__icon {
	position: relative;
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	container-type: size;
}

.sparked-pathway-card__icon .sparked-art__symbol {
	width: 100cqh;
	height: 100cqh;
}

.sparked-pathway-card .sparked-pathway-card__sentence {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.35;
}

.sparked-pathway-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem var(--sparked-box-pad) var(--sparked-box-pad);
}

.sparked-pathway-card__body > * {
	margin-block: 0;
}

.sparked-pathway-card .sparked-pathway-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.sparked-pathway-card__body > .wp-block-buttons:last-child {
	margin-block-start: auto;
	padding-block-start: 0.85rem;
}

.sparked-pathway-card .wp-block-button__link {
	background: var(--sparked-art-dark, var(--wp--preset--color--coral-dark));
	border-color: var(--sparked-art-dark, var(--wp--preset--color--coral-dark));
}

/* Where to next: the onward links every page but the home page ends on. */
.sparked-onward .wp-block-buttons {
	gap: 0.6rem;
}

/* ------------------------------------------------------- 10 box sizes, padding and section seams (MP-964) */

/* The four-corner signature at a size that suits the box: the full set on cards and featured boxes, a medium set on
   the smaller content boxes, a small set on rows (a question, a drawer). Every content box takes it; only buttons
   and small tags are pills, and form fields keep the small radius. */
.sparked-course-outcomes li,
.is-style-steps > *,
.sparked-timeline > * {
	--sparked-shape-l: 2.5rem;
	--sparked-shape-m: 1.25rem;
	--sparked-shape-s: 0.5rem;
}

.wp-block-details {
	--sparked-shape-l: 1.75rem;
	--sparked-shape-m: 0.875rem;
	--sparked-shape-s: 0.375rem;
}

/* Text and marks clear the large curve, wherever an orientation puts it: at least half the large corner plus 0.5rem
   on every side. */
[class*="is-style-shape-"],
.is-style-card,
.is-style-card-tint,
.sparked-audience-card,
.sparked-course-details section,
.is-style-steps > *,
.sparked-timeline > *,
.wp-block-details,
.wp-block-quote,
.sparked-living,
.sparked-course-card {
	--sparked-box-pad: calc(var(--sparked-shape-l) / 2 + 0.5rem);
}

.is-style-card,
.is-style-card-tint,
.sparked-course-details section,
.wp-block-quote {
	padding: max(clamp(1.5rem, 3vw, 2.25rem), var(--sparked-box-pad));
}

.sparked-audience-card,
.sparked-timeline > * {
	padding: var(--sparked-box-pad);
}

.wp-block-details {
	padding: max(1.1rem, var(--sparked-box-pad)) max(1.5rem, var(--sparked-box-pad));
}

.is-style-steps > * {
	padding: calc(var(--sparked-box-pad) + 3rem) var(--sparked-box-pad) var(--sparked-box-pad);
}

.is-style-steps > *::before {
	top: var(--sparked-box-pad);
	inset-inline-start: var(--sparked-box-pad);
}

.sparked-living__body,
.sparked-course-card__body {
	padding: 1.4rem max(1.5rem, var(--sparked-box-pad)) max(1.5rem, var(--sparked-box-pad));
}

.sparked-living.is-open .sparked-living__body {
	padding-inline: calc(max(1.5rem, var(--sparked-box-pad)) + var(--sparked-living-grow));
}

/* The catalog's filters stand on the page with no box (MP-893, MP-964). On a phone they open as a drawer from the
   screen's edge: the signature on its two free corners, the edge side flush. */
@media (max-width: 1099px) {
	.sparked-catalogue.has-drawer .sparked-catalogue__filters.is-open {
		border-radius: var(--wp--custom--radius--large) 0 0 var(--wp--custom--radius--medium);
		padding: calc(var(--wp--custom--radius--large) / 2 + 0.5rem);
	}
}

/* No gap between sections, or before the footer (MP-964). A wave no longer holds its section away from the next with
   a margin of page ground: it draws over the edge of the section beside it, so that section's own colour meets the
   curve. The padding below keeps the curve off that section's words (the design check measures it). */
.sparked-section.is-style-wave-top,
.sparked-section.is-style-wave-both,
.sparked-section.is-style-arc-top,
.sparked-footer {
	margin-block-start: 0;
}

.sparked-section.is-style-wave-bottom,
.sparked-section.is-style-wave-both {
	margin-block-end: 0;
}

.is-style-wave-bottom::after,
.is-style-wave-both::after {
	z-index: 1;
}

/* Where a wave reaches over a section's edge, that edge's padding is at least the wave's height plus 1rem: the
   section before a wave-topped one (the footer's too: the last section of the page), and the one after a
   wave-bottomed one. */
.sparked-section:has(+ :is(.is-style-wave-top, .is-style-wave-both, .is-style-arc-top)),
main > .sparked-section:last-child,
main > :last-child > .sparked-section:last-child {
	padding-block-end: max(var(--wp--preset--spacing--50), calc(var(--sparked-wave-height) + 1rem));
}

:is(.is-style-wave-bottom, .is-style-wave-both) + .sparked-section {
	padding-block-start: max(var(--wp--preset--spacing--50), calc(var(--sparked-wave-height) + 1rem));
}

/* Sections meet edge to edge: their own padding spaces them, never a margin of page ground between them. */
main .sparked-section + .sparked-section,
main > * + .sparked-section,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > main + footer {
	margin-block: 0;
}

/* ---------------------------------------------------------------- 11 pathway steps and wave seams (MP-987) */

/* The pathway pages' steps: one wide row per step, never a tall narrow column. Number, title and line on the left;
   what the step names on the right, a grid of small boxes whose names show and whose "what it brings" opens in
   place. A box that opens grows alone: the others in its row keep their height. On a phone the head sits above. */
.is-style-steps.sparked-path-steps {
	grid-template-columns: minmax(0, 1fr);
}

.sparked-path-steps > .sparked-path-step {
	display: grid;
	grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
	gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
	padding-block-start: var(--sparked-box-pad);
}

.sparked-path-step__head {
	padding-block-start: 3rem;
}

.sparked-path-step__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.75rem;
	align-items: start;
}

.sparked-path-step__items > * {
	margin: 0;
}

/* A pathway step's drawers sit on the step's own colour, so they keep the paper fill and the plain edge, open or
   closed; they still unfold and change corners like every question (MP-1154). */
.sparked-path-step__items .wp-block-details {
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--border);
}

.sparked-path-step__items .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

.sparked-path-step__items .wp-block-details summary {
	font-size: var(--wp--preset--font-size--small);
}

.sparked-path-step__plain {
	padding: var(--sparked-box-pad, 1.375rem);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781px) {
	.sparked-path-steps > .sparked-path-step {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Where a section's bottom wave meets the next section's top wave, only the upper one draws: two curves in one seam
   cross each other (the About page's pink and gold). */
:is(.is-style-wave-bottom, .is-style-wave-both) + :is(.is-style-wave-top, .is-style-wave-both, .is-style-arc-top)::before {
	display: none;
}

/* MP-1878: a resource's page. Its words read as the site's other pages do (headings, lists, spacing), and each file is
   a download box in the card's shape: the file's name, its type and size, and the site's button (the SparkED Site
   plugin draws it from the File block; there is no bare link). At phone width the button takes the full width. */
.sparked-resource-body > * + * {
	margin-block-start: 1rem;
}

.sparked-resource-body :is(h2, h3) {
	margin-block-start: 2rem;
}

.sparked-resource-body :is(ul, ol) {
	padding-inline-start: 1.25rem;
}

.sparked-resource-body li + li {
	margin-block-start: 0.35rem;
}

.sparked-download {
	--sparked-tl: var(--sparked-shape-l);
	--sparked-tr: var(--sparked-shape-m);
	--sparked-br: var(--sparked-shape-s);
	--sparked-bl: var(--sparked-shape-s);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	box-sizing: border-box;
	margin-block: 1.5rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--sparked-tl) var(--sparked-tr) var(--sparked-br) var(--sparked-bl);
	box-shadow: var(--wp--preset--shadow--soft);
}

.sparked-download__about {
	flex: 1 1 14rem;
	min-width: 0;
}

.sparked-download__about > p {
	margin: 0;
}

.sparked-download__name {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sparked-download__facts {
	margin-block-start: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.sparked-download__button {
	flex: 0 0 auto;
	box-sizing: border-box;
	max-width: 100%;
}

@media (max-width: 599px) {
	.sparked-download__button {
		flex-basis: 100%;
	}
}

/* MP-1935: a resource's three boxes (video, download, information). Each is a card in the site's own shape, on one of
   the brand tints the audience cards use, with a ring in that colour curving in from its top corner, as on the
   course art. Brand tokens only: no colour of its own. A box's unfilled heading, line or button is not shown. */
.sparked-box {
	--sparked-tl: var(--sparked-shape-l);
	--sparked-tr: var(--sparked-shape-m);
	--sparked-br: var(--sparked-shape-l);
	--sparked-bl: var(--sparked-shape-s);
	--sparked-box-tint: var(--wp--preset--color--peacock-light);
	--sparked-box-ring: var(--sparked-peacock-base);
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	margin-block: 2rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	padding-inline-end: clamp(2.5rem, 7vw, 4rem);
	background: var(--sparked-box-tint);
	border: 1px solid rgba(44, 42, 39, 0.06);
	border-radius: var(--sparked-tl) var(--sparked-tr) var(--sparked-br) var(--sparked-bl);
}

.sparked-box::before {
	content: "";
	position: absolute;
	top: -2.75rem;
	right: -2.75rem;
	width: 5.5rem;
	height: 5.5rem;
	border: 0.55rem solid var(--sparked-box-ring);
	border-radius: 50%;
	pointer-events: none;
}

.sparked-box--video {
	--sparked-box-tint: var(--wp--preset--color--peacock-light);
	--sparked-box-ring: var(--sparked-peacock-base);
}

.sparked-box--download {
	--sparked-box-tint: var(--wp--preset--color--coral-light);
	--sparked-box-ring: var(--sparked-coral-base);
}

.sparked-box--info {
	--sparked-box-tint: var(--wp--preset--color--gold-light);
	--sparked-box-ring: var(--sparked-gold-base);
}

/* MP-2950: the outside link box, on the fourth brand tint. Its button is the site's own (.wp-element-button). */
.sparked-box--link {
	--sparked-box-tint: var(--wp--preset--color--leaf-light);
	--sparked-box-ring: var(--sparked-leaf-base);
}

.sparked-box > * {
	position: relative;
}

.sparked-box > * + * {
	margin-block-start: 1rem;
}

.sparked-box > .wp-block-heading {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--subhead);
}

/* MP-2950: a button's "no words / no link" test is for the published page only. In the block editor the button is a
   div with no href while staff type into it, so it must stay visible there (body.editor-styles-wrapper is the
   editor canvas). */
.sparked-box > :is(p, .wp-block-heading):empty,
body:not(.editor-styles-wrapper) .sparked-box .wp-block-button:has(> .wp-block-button__link:empty),
body:not(.editor-styles-wrapper) .sparked-box .wp-block-button:has(> .wp-block-button__link:not([href])) {
	display: none;
}

/* The video takes the box's colour for its frame, as it takes its section's on other pages. */
.sparked-box--video .sparked-video {
	--sparked-video-border: var(--sparked-box-ring);
	margin-inline: 0;
}

.sparked-box--video .wp-block-embed {
	margin-inline: 0;
}

/* The download box inside a box: its own white card, without a second shadow. */
.sparked-box .sparked-download {
	margin-block: 0;
	box-shadow: none;
}

@media (max-width: 599px) {
	.sparked-box {
		padding-inline-end: clamp(1.5rem, 4vw, 2.25rem);
		padding-block-start: 2.5rem;
	}
}