/*
Theme Name: Gumleaf
Theme URI: https://gumleafpublishing.com.au/
Author: Gumleaf Publishing
Author URI: https://gumleafpublishing.com.au/
Description: A warm, child-friendly block theme for Gumleaf Publishing — an independent Australian children's picture-book publisher in Ballarat, Victoria. Built around the Gumleaf logo palette: paper cream, gumleaf sage, waterhole blue, golden wattle and red earth. Cover-forward book merchandising for families, a dedicated curriculum-led lane for teachers and school principals, gentle scroll animations throughout, and WooCommerce + B2B wholesale ready.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gumleaf
Tags: block-theme, full-site-editing, e-commerce, education, blog, two-columns, wide-blocks, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, accessibility-ready
*/

/* =========================================================================
   GUMLEAF 2.0

   Design tokens live in theme.json. This file carries what theme.json
   cannot express: component behaviour, motion, decorative motifs and
   the accessibility niceties.

   Contents
     1.  Tokens & primitives
     2.  Motion system (scroll reveals, drift, hover physics)
     3.  Page furniture (grain, skip link, focus, selection)
     4.  Header & navigation
     5.  Buttons & links
     6.  Cards, shells & panels
     7.  Book covers & merchandising
     8.  Section decoration (dividers, motifs, eyebrows)
     9.  Teaching / schools components
     10. Forms & newsletter
     11. Footer
     12. Editorial content (posts, pages)
     13. Utilities, responsive & reduced motion
   ====================================================================== */


/* -------------------------------------------------------------------------
   1. TOKENS & PRIMITIVES
   ---------------------------------------------------------------------- */

:root {
	--gl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--gl-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
	--gl-ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

	--gl-fast: 180ms;
	--gl-base: 320ms;
	--gl-slow: 720ms;

	--gl-radius-sm: 8px;
	--gl-radius: 20px;
	--gl-radius-shell: 28px;
	--gl-pill: 999px;

	--gl-shell-pad: 6px;

	--gl-header-h: 76px;

	/* Tinted shadows — they carry the page's warm hue, never flat black. */
	--gl-shadow-soft: 0 1px 2px rgba(30, 56, 63, 0.04), 0 8px 22px -8px rgba(30, 56, 63, 0.10);
	--gl-shadow-lift: 0 2px 4px rgba(30, 56, 63, 0.05), 0 18px 40px -14px rgba(30, 56, 63, 0.20);
	--gl-shadow-cover: 0 2px 6px rgba(30, 56, 63, 0.10), 0 24px 48px -16px rgba(30, 56, 63, 0.28);
	--gl-shadow-float: 0 30px 70px -24px rgba(30, 56, 63, 0.34);
}

/* Fraunces is a variable serif. These axes give it the soft, slightly
   hand-cut warmth that suits a children's publisher without losing the
   editorial authority teachers respond to. */
.wp-block-post-title,
.wp-block-site-title,
h1, h2, h3, h4,
.gumleaf-display {
	font-variation-settings: "SOFT" 28, "WONK" 1, "opsz" 60;
	text-wrap: balance;
}

p, li, dd, figcaption, blockquote {
	text-wrap: pretty;
}

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

::selection {
	background: var(--wp--preset--color--wattle-light);
	color: var(--wp--preset--color--ink-deep);
}


/* -------------------------------------------------------------------------
   2. MOTION SYSTEM
   ---------------------------------------------------------------------- */

/*
 * Scroll reveals.
 *
 * Any element carrying .gl-reveal starts slightly low and transparent,
 * then settles when it enters the viewport. Driven by IntersectionObserver
 * in assets/js/gumleaf.js, with a bounded scroll sweep that only ever
 * examines the elements still waiting and removes itself once they are all
 * revealed — so a fast flick on a phone can never strand content invisible.
 *
 * The .gl-js class is added to <html> by the same script, so if JavaScript
 * is unavailable everything is simply visible. Content is never hidden
 * behind JS that might not run.
 */
.gl-js .gl-reveal,
.gl-js [data-gl-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition:
		opacity var(--gl-slow) var(--gl-ease-out),
		transform var(--gl-slow) var(--gl-ease-out);
	transition-delay: var(--gl-reveal-delay, 0ms);
	will-change: transform, opacity;
}

.gl-js .gl-reveal--left  { transform: translate3d(-26px, 0, 0); }
.gl-js .gl-reveal--right { transform: translate3d(26px, 0, 0); }
.gl-js .gl-reveal--scale { transform: scale(0.955); }

.gl-js .gl-reveal.is-revealed,
.gl-js [data-gl-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Children cascade in one after another rather than all at once. */
.gl-js .gl-stagger > *,
.gl-js [data-gl-stagger] > * {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition:
		opacity var(--gl-slow) var(--gl-ease-out),
		transform var(--gl-slow) var(--gl-ease-out);
}

.gl-js .gl-stagger.is-revealed > *,
.gl-js [data-gl-stagger].is-revealed > * {
	opacity: 1;
	transform: none;
}

.gl-js .gl-stagger.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.gl-js .gl-stagger.is-revealed > *:nth-child(2) { transition-delay: 90ms; }
.gl-js .gl-stagger.is-revealed > *:nth-child(3) { transition-delay: 180ms; }
.gl-js .gl-stagger.is-revealed > *:nth-child(4) { transition-delay: 270ms; }
.gl-js .gl-stagger.is-revealed > *:nth-child(5) { transition-delay: 360ms; }
.gl-js .gl-stagger.is-revealed > *:nth-child(6) { transition-delay: 450ms; }
.gl-js .gl-stagger.is-revealed > *:nth-child(n+7) { transition-delay: 520ms; }

/* A leaf turning slowly on the breeze. Transform only — GPU safe. */
@keyframes gl-drift {
	0%   { transform: translate3d(0, 0, 0) rotate(-4deg); }
	50%  { transform: translate3d(6px, -14px, 0) rotate(4deg); }
	100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
}

@keyframes gl-float {
	0%   { transform: translate3d(0, 0, 0); }
	50%  { transform: translate3d(0, -12px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

@keyframes gl-ripple {
	0%   { transform: scale(0.9); opacity: 0.55; }
	70%  { transform: scale(1.35); opacity: 0; }
	100% { transform: scale(1.35); opacity: 0; }
}

@keyframes gl-draw {
	to { stroke-dashoffset: 0; }
}

.gl-drift { animation: gl-drift 11s var(--gl-ease-soft) infinite; }
.gl-float { animation: gl-float 7s var(--gl-ease-soft) infinite; }


/* -------------------------------------------------------------------------
   3. PAGE FURNITURE
   ---------------------------------------------------------------------- */

/*
 * Paper grain.
 *
 * Fixed and pointer-events:none so it never triggers a repaint while the
 * page scrolls. It stops the large cream fields reading as flat digital
 * colour and gives the whole site the feel of good picture-book stock.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.4;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.36'/%3E%3C/svg%3E");
}

.skip-link {
	position: absolute;
	top: -120px;
	left: 12px;
	z-index: 200;
	padding: 0.85rem 1.4rem;
	background: var(--wp--preset--color--ink-deep);
	color: var(--wp--preset--color--warm-white);
	border-radius: 0 0 14px 14px;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: top var(--gl-base) var(--gl-ease-out);
}

.skip-link:focus {
	top: 0;
	color: var(--wp--preset--color--warm-white);
}

*:focus-visible {
	outline: 3px solid var(--wp--preset--color--terracotta-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--gl-header-h) + 1.5rem); }

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

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}


/* -------------------------------------------------------------------------
   4. HEADER & NAVIGATION
   ---------------------------------------------------------------------- */

.gumleaf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--paper);
	transition:
		box-shadow var(--gl-base) var(--gl-ease-out),
		background-color var(--gl-base) var(--gl-ease-out);
}

.gumleaf-header.is-scrolled {
	background: rgba(251, 246, 236, 0.86);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 1px 0 rgba(227, 218, 202, 0.9), 0 14px 32px -22px rgba(30, 56, 63, 0.4);
}

/* The thin announcement strip above the masthead. */
.gumleaf-utility-bar {
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
}

.gumleaf-utility-bar a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 253, 248, 0.42);
	padding-bottom: 1px;
	transition: border-color var(--gl-fast) var(--gl-ease-out);
}

.gumleaf-utility-bar a:hover {
	color: inherit;
	border-bottom-color: var(--wp--preset--color--wattle-glow);
}

/* Brand lock-up. The supplied logo is used as an image so the wordmark is
   always exactly the artwork Gumleaf owns, with the site name available to
   screen readers and search engines as real text. */
.gumleaf-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	text-decoration: none;
	color: inherit;
}

.gumleaf-brand-logo {
	display: block;
	width: auto;
	height: 52px;
	transition: transform var(--gl-base) var(--gl-ease-spring);
}

.gumleaf-brand:hover .gumleaf-brand-logo {
	transform: translateY(-2px) rotate(-0.6deg);
}

.gumleaf-brand--footer .gumleaf-brand-logo { height: 62px; }

.gumleaf-brand-mark-img {
	display: block;
	width: auto;
	height: 46px;
	transition: transform var(--gl-base) var(--gl-ease-spring);
}

.gumleaf-brand:hover .gumleaf-brand-mark-img { transform: translateY(-2px) rotate(-3deg); }

.gumleaf-brand-copy { display: flex; flex-direction: column; line-height: 1.15; }

.gumleaf-brand-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.375rem;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink-deep);
}

.gumleaf-brand-tagline {
	font-family: var(--wp--preset--font-family--hand);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--sage-deep);
}

.gumleaf-brand--footer .gumleaf-brand-name { color: var(--wp--preset--color--warm-white); }
.gumleaf-brand--footer .gumleaf-brand-tagline { color: var(--wp--preset--color--sage-light); }

/* Navigation: a soft underline that sweeps out from the centre. */
.gumleaf-nav .wp-block-navigation-item__content {
	position: relative;
	padding: 0.35rem 0.15rem;
}

.gumleaf-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--wattle);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--gl-base) var(--gl-ease-out);
}

.gumleaf-nav .wp-block-navigation-item__content:hover::after,
.gumleaf-nav .wp-block-navigation-item__content:focus-visible::after,
.gumleaf-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* You-are-here marker. */
.gumleaf-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-deep);
	font-weight: 800;
}

/* The teacher route is highlighted — principals and teachers should be able
   to find their lane without hunting through a consumer bookshop menu. */
.gumleaf-nav .gumleaf-nav-schools > .wp-block-navigation-item__content,
.gumleaf-nav-schools a {
	border: 2px solid var(--wp--preset--color--sage-deep);
	border-radius: var(--gl-pill);
	padding: 0.5rem 1.1rem;
	color: var(--wp--preset--color--sage-deep);
	transition:
		background-color var(--gl-base) var(--gl-ease-out),
		color var(--gl-base) var(--gl-ease-out),
		transform var(--gl-base) var(--gl-ease-spring);
}

.gumleaf-nav .gumleaf-nav-schools > .wp-block-navigation-item__content::after { display: none; }

.gumleaf-nav .gumleaf-nav-schools > .wp-block-navigation-item__content:hover,
.gumleaf-nav-schools a:hover {
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--warm-white);
	transform: translateY(-1px);
}

/* Mobile overlay menu. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper);
	padding: clamp(2rem, 8vw, 4rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 600;
}

.gl-js .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > * {
	animation: gl-menu-in 520ms var(--gl-ease-out) both;
}

.gl-js .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(1) { animation-delay: 60ms; }
.gl-js .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(2) { animation-delay: 110ms; }
.gl-js .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(3) { animation-delay: 160ms; }
.gl-js .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(4) { animation-delay: 210ms; }
.gl-js .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(n+5) { animation-delay: 260ms; }

@keyframes gl-menu-in {
	from { opacity: 0; transform: translate3d(0, 26px, 0); }
	to   { opacity: 1; transform: none; }
}

/* Header utility icons (search / account / cart). */
.gumleaf-header-icons { display: flex; align-items: center; gap: 0.15rem; }

.gumleaf-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--gl-pill);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition:
		background-color var(--gl-fast) var(--gl-ease-out),
		color var(--gl-fast) var(--gl-ease-out),
		transform var(--gl-fast) var(--gl-ease-spring);
}

.gumleaf-icon-link:hover {
	background: var(--wp--preset--color--sage-light);
	color: var(--wp--preset--color--ink-deep);
	transform: translateY(-1px);
}

.gumleaf-icon-link:active { transform: translateY(0) scale(0.94); }

.gumleaf-icon-link svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gumleaf-relative { position: relative; display: inline-flex; }

.gumleaf-cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--gl-pill);
	background: var(--wp--preset--color--terracotta-deep);
	color: var(--wp--preset--color--warm-white);
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 19px;
	text-align: center;
	animation: gl-pop 380ms var(--gl-ease-spring);
}

@keyframes gl-pop {
	from { transform: scale(0.4); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}


/* -------------------------------------------------------------------------
   5. BUTTONS & LINKS
   ---------------------------------------------------------------------- */

.wp-block-button__link {
	transition:
		background-color var(--gl-base) var(--gl-ease-out),
		border-color var(--gl-base) var(--gl-ease-out),
		color var(--gl-base) var(--gl-ease-out),
		transform var(--gl-base) var(--gl-ease-spring),
		box-shadow var(--gl-base) var(--gl-ease-out);
	box-shadow: 0 1px 2px rgba(30, 56, 63, 0.06);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(30, 56, 63, 0.44);
}

/* Physical press. */
.wp-block-button__link:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 1px 2px rgba(30, 56, 63, 0.1);
	transition-duration: 90ms;
}

/* Terracotta call to action — uses the deep tone so white text clears AA. */
.is-style-gumleaf-accent .wp-block-button__link {
	background: var(--wp--preset--color--terracotta-deep);
	border-color: var(--wp--preset--color--terracotta-deep);
	color: var(--wp--preset--color--warm-white);
}

.is-style-gumleaf-accent .wp-block-button__link:hover {
	background: #8E4523;
	border-color: #8E4523;
	color: var(--wp--preset--color--warm-white);
}

/* Sage call to action for the schools lane. */
.is-style-gumleaf-leaf .wp-block-button__link {
	background: var(--wp--preset--color--sage-deep);
	border-color: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--warm-white);
}

.is-style-gumleaf-leaf .wp-block-button__link:hover {
	background: var(--wp--preset--color--leaf-deep);
	border-color: var(--wp--preset--color--leaf-deep);
	color: var(--wp--preset--color--warm-white);
}

/* Outlined secondary. */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink-deep);
	border-color: var(--wp--preset--color--ink-deep);
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink-deep);
	color: var(--wp--preset--color--warm-white);
}

/* Quiet tertiary — a text link with an arrow that slides. */
.is-style-gumleaf-quiet .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--sky-deep);
	padding-left: 0;
	padding-right: 0;
	box-shadow: none;
	text-decoration: none;
}

.is-style-gumleaf-quiet .wp-block-button__link::after {
	content: " →";
	display: inline-block;
	transition: transform var(--gl-base) var(--gl-ease-out);
}

.is-style-gumleaf-quiet .wp-block-button__link:hover {
	color: var(--wp--preset--color--terracotta-deep);
	transform: none;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.is-style-gumleaf-quiet .wp-block-button__link:hover::after { transform: translateX(5px); }

/*
 * Links on tinted panels.
 *
 * The default link colour (waterhole deep) is only 4.4:1 against the light
 * sage/sky/wattle/earth panel fills — just under AA. Deep leaf clears it on
 * all four, and reads as a deliberate second link colour rather than a patch.
 */
.gumleaf-panel a:not(.wp-block-button__link),
.gumleaf-path a:not(.wp-block-button__link),
.has-sage-light-background-color a:not(.wp-block-button__link),
.has-sky-light-background-color a:not(.wp-block-button__link),
.has-wattle-light-background-color a:not(.wp-block-button__link),
.has-terracotta-light-background-color a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--leaf-deep);
}

.gumleaf-panel a:not(.wp-block-button__link):hover,
.gumleaf-path a:not(.wp-block-button__link):hover,
.has-sage-light-background-color a:not(.wp-block-button__link):hover,
.has-sky-light-background-color a:not(.wp-block-button__link):hover,
.has-wattle-light-background-color a:not(.wp-block-button__link):hover,
.has-terracotta-light-background-color a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--ink-deep);
}

/* The quiet-link button style inherits the same treatment on those panels. */
.gumleaf-panel .is-style-gumleaf-quiet .wp-block-button__link,
.has-sage-light-background-color .is-style-gumleaf-quiet .wp-block-button__link,
.has-sky-light-background-color .is-style-gumleaf-quiet .wp-block-button__link,
.has-wattle-light-background-color .is-style-gumleaf-quiet .wp-block-button__link,
.has-terracotta-light-background-color .is-style-gumleaf-quiet .wp-block-button__link {
	color: var(--wp--preset--color--leaf-deep);
}

/* Body links get a warm underline that thickens on hover instead of jumping. */
.wp-block-post-content a:not(.wp-block-button__link),
.gumleaf-prose a {
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--gl-fast) var(--gl-ease-out), color var(--gl-fast) var(--gl-ease-out);
	text-decoration-color: var(--wp--preset--color--sage);
}

.wp-block-post-content a:not(.wp-block-button__link):hover,
.gumleaf-prose a:hover {
	text-decoration-thickness: 2.5px;
	text-decoration-color: currentColor;
}


/* -------------------------------------------------------------------------
   6. CARDS, SHELLS & PANELS
   ---------------------------------------------------------------------- */

/*
 * The nested shell.
 *
 * A card is not a flat rectangle with a border — it is an inner panel
 * sitting inside a slightly tinted tray, with concentric radii. It reads
 * as a physical object, like a mounted illustration board.
 */
.is-style-gumleaf-shell {
	background: rgba(146, 162, 115, 0.13);
	padding: var(--gl-shell-pad);
	border-radius: var(--gl-radius-shell);
	box-shadow: inset 0 0 0 1px rgba(95, 112, 67, 0.14);
}

.is-style-gumleaf-shell > .wp-block-group,
.is-style-gumleaf-shell > * {
	border-radius: calc(var(--gl-radius-shell) - var(--gl-shell-pad));
}

.is-style-gumleaf-card {
	background: var(--wp--preset--color--warm-white);
	border-radius: var(--gl-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--gl-shadow-soft);
	box-shadow: var(--gl-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.7);
	transition:
		transform var(--gl-base) var(--gl-ease-out),
		box-shadow var(--gl-base) var(--gl-ease-out);
	height: 100%;
}

/* Only lift cards that are actually clickable. */
.is-style-gumleaf-card:has(a):hover {
	transform: translateY(-4px);
	box-shadow: var(--gl-shadow-lift);
}

/* Cards inside a columns row: equal height, buttons pinned to the bottom so
   they form a clean horizontal line whatever the copy length. */
.gumleaf-equal .wp-block-column {
	display: flex;
	flex-direction: column;
}

.gumleaf-equal .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.gumleaf-equal .wp-block-buttons { margin-top: auto; padding-top: var(--wp--preset--spacing--30); }

/* A tinted panel — used to separate a section without dropping a dark slab
   into the middle of a cream page. */
.gumleaf-panel {
	border-radius: var(--gl-radius-shell);
	padding: clamp(1.75rem, 4vw, 3rem);
}

.gumleaf-panel--sage { background: var(--wp--preset--color--sage-light); }
.gumleaf-panel--sky { background: var(--wp--preset--color--sky-light); }
.gumleaf-panel--wattle { background: var(--wp--preset--color--wattle-light); }
.gumleaf-panel--earth { background: var(--wp--preset--color--terracotta-light); }

/* Numbered step / lesson cards. */
.gumleaf-steps,
.wp-block-list.is-style-gumleaf-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	counter-reset: gl-step;
}

.gumleaf-steps > li,
.wp-block-list.is-style-gumleaf-steps > li {
	counter-increment: gl-step;
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.15rem;
	align-items: start;
	padding: 1.15rem 1.35rem;
	background: var(--wp--preset--color--warm-white);
	border-radius: var(--gl-radius);
	box-shadow: var(--gl-shadow-soft);
	transition: transform var(--gl-base) var(--gl-ease-out), box-shadow var(--gl-base) var(--gl-ease-out);
}

.gumleaf-steps > li:hover,
.wp-block-list.is-style-gumleaf-steps > li:hover {
	transform: translateX(4px);
	box-shadow: var(--gl-shadow-lift);
}

.gumleaf-steps > li::before,
.wp-block-list.is-style-gumleaf-steps > li::before {
	content: counter(gl-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--gl-pill);
	background: var(--wp--preset--color--wattle-light);
	color: var(--wp--preset--color--wattle-deep);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 700;
	font-variation-settings: "SOFT" 40, "WONK" 1;
}

.gumleaf-steps strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink-deep);
	margin-bottom: 0.15rem;
}

/* Tick list — the "why teachers will like it" pattern from the flyers. */
.gumleaf-ticks,
.wp-block-list.is-style-gumleaf-ticks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.7rem;
}

.gumleaf-ticks > li,
.wp-block-list.is-style-gumleaf-ticks > li {
	position: relative;
	padding-left: 2.1rem;
	line-height: 1.55;
}

.gumleaf-ticks > li::before,
.wp-block-list.is-style-gumleaf-ticks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: var(--gl-pill);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7043' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 0.85rem no-repeat,
		var(--wp--preset--color--sage-light);
}

/* Small facts / figures. */
.gumleaf-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	padding: 0;
	margin: 0;
}

.gumleaf-fact {
	padding: 1.25rem 1.35rem;
	border-radius: var(--gl-radius);
	background: var(--wp--preset--color--warm-white);
	box-shadow: var(--gl-shadow-soft);
}

.gumleaf-fact b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	line-height: 1;
	font-weight: 700;
	font-variation-settings: "SOFT" 40, "WONK" 1;
	color: var(--wp--preset--color--sage-deep);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.3rem;
}

.gumleaf-fact span {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-soft);
}


/* -------------------------------------------------------------------------
   7. BOOK COVERS & MERCHANDISING
   ---------------------------------------------------------------------- */

/*
 * A picture-book cover wants to look like a physical object on a shelf —
 * a soft ground shadow, a hint of a spine, and a gentle lift when a
 * browsing parent hovers it.
 */
.is-style-gumleaf-cover img,
.gumleaf-cover img {
	border-radius: 6px 12px 12px 6px;
	box-shadow: var(--gl-shadow-cover);
	transition:
		transform var(--gl-slow) var(--gl-ease-out),
		box-shadow var(--gl-slow) var(--gl-ease-out);
}

.is-style-gumleaf-cover,
.gumleaf-cover { position: relative; display: inline-block; }

/* The spine. */
.is-style-gumleaf-cover::before,
.gumleaf-cover::before {
	content: "";
	position: absolute;
	top: 2%;
	left: 0;
	bottom: 2%;
	width: 7px;
	border-radius: 6px 0 0 6px;
	background: linear-gradient(90deg, rgba(30, 56, 63, 0.26), rgba(30, 56, 63, 0.02));
	pointer-events: none;
	z-index: 2;
}

a:hover .is-style-gumleaf-cover img,
a:hover .gumleaf-cover img,
.is-style-gumleaf-cover:hover img,
.gumleaf-cover:hover img {
	transform: translateY(-8px) rotate(-1.1deg) scale(1.015);
	box-shadow: var(--gl-shadow-float);
}

/* Book card used across the homepage and shop. */
.gumleaf-book-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
}

.gumleaf-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.75rem;
	border-radius: var(--gl-radius-sm);
	background: var(--wp--preset--color--sky-light);
	color: var(--wp--preset--color--ink-deep);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.gumleaf-tag--age { background: var(--wp--preset--color--wattle-light); }
.gumleaf-tag--curriculum { background: var(--wp--preset--color--sage-light); }
.gumleaf-tag--new { background: var(--wp--preset--color--terracotta-light); }

.gumleaf-price-note {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: 0.02em;
}


/* -------------------------------------------------------------------------
   8. SECTION DECORATION
   ---------------------------------------------------------------------- */

/* Eyebrow above a heading — small, quiet, sets the section's job. */
.gumleaf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.95rem;
	border-radius: var(--gl-pill);
	background: var(--wp--preset--color--sage-light);
	color: var(--wp--preset--color--leaf-deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

.gumleaf-eyebrow::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A5C33'%3E%3Cpath d='M12 1c5 5 7 10 7 13a7 7 0 0 1-14 0c0-3 2-8 7-13z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A handwritten aside, echoing the tagline in the logo. */
.gumleaf-hand {
	font-family: var(--wp--preset--font-family--hand);
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--wp--preset--color--sage-deep);
}

/*
 * Torn-paper section edges. Sections that meet each other get a soft
 * organic boundary rather than a ruled line — it keeps large colour fields
 * from feeling like stacked boxes.
 */
.gumleaf-edge-top,
.gumleaf-edge-bottom { position: relative; }

.gumleaf-edge-top::before,
.gumleaf-edge-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: clamp(28px, 4vw, 56px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

.gumleaf-edge-top::before {
	top: 0;
	transform: translateY(-99%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V26c120-18 240 6 360 10s240-14 360-18 240 10 360 14 240-10 360-16v44z' fill='%23F7F1E6'/%3E%3C/svg%3E");
}

.gumleaf-edge-bottom::after {
	bottom: 0;
	transform: translateY(99%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0v34c120 18 240-6 360-10s240 14 360 18 240-10 360-14 240 10 360 16V0z' fill='%23F7F1E6'/%3E%3C/svg%3E");
}

/* A single rule with a leaf sitting on it — used between major sections. */
.gumleaf-rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--wp--preset--color--sage);
}

.gumleaf-rule::before,
.gumleaf-rule::after {
	content: "";
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.42;
}

/* Decorative leaf scatter, absolutely positioned inside a section. */
.gumleaf-scatter {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.gumleaf-scatter span {
	position: absolute;
	display: block;
	background: currentColor;
	opacity: 0.13;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c5 5 7 10 7 13a7 7 0 0 1-14 0c0-3 2-8 7-13z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c5 5 7 10 7 13a7 7 0 0 1-14 0c0-3 2-8 7-13z'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: gl-drift 14s var(--gl-ease-soft) infinite;
}

.gumleaf-scatter span:nth-child(1) { width: 62px; height: 62px; top: 12%; left: 6%; animation-duration: 13s; }
.gumleaf-scatter span:nth-child(2) { width: 40px; height: 40px; top: 62%; left: 14%; animation-duration: 17s; animation-delay: -3s; }
.gumleaf-scatter span:nth-child(3) { width: 78px; height: 78px; top: 22%; right: 8%; left: auto; animation-duration: 19s; animation-delay: -6s; }
.gumleaf-scatter span:nth-child(4) { width: 34px; height: 34px; bottom: 14%; right: 18%; left: auto; top: auto; animation-duration: 15s; animation-delay: -9s; }

.gumleaf-section-relative { position: relative; }
.gumleaf-section-relative > * { position: relative; z-index: 1; }

/* Hero. */
.gumleaf-hero { position: relative; overflow: hidden; }

.gumleaf-hero-stack { position: relative; }

.gumleaf-hero-art {
	position: relative;
	border-radius: var(--gl-radius-shell);
	overflow: hidden;
	box-shadow: var(--gl-shadow-lift);
}

.gumleaf-hero-art img { display: block; width: 100%; }

/* The cover that overlaps the hero artwork — depth without a hard grid. */
.gumleaf-hero-cover {
	position: absolute;
	left: -5%;
	bottom: -12%;
	width: 36%;
	max-width: 215px;
	z-index: 2;
	animation: gl-float 9s var(--gl-ease-soft) infinite;
}

.gumleaf-hero-cover img {
	border-radius: 6px 12px 12px 6px;
	box-shadow: var(--gl-shadow-float);
}

/* The trust strip under the hero: four short facts that stay evenly
   distributed instead of leaving an orphan on a second row. */
.gumleaf-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.gumleaf-trust > * { margin: 0; }

/* Ripple under the leaf — a nod to the logo's waterhole. */
.gumleaf-ripple {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gumleaf-ripple::after {
	content: "";
	position: absolute;
	bottom: -6px;
	width: 62%;
	aspect-ratio: 3 / 1;
	border: 2px solid var(--wp--preset--color--sage);
	border-radius: 50%;
	opacity: 0.5;
	animation: gl-ripple 4.5s var(--gl-ease-soft) infinite;
}


/* -------------------------------------------------------------------------
   9. TEACHING / SCHOOLS COMPONENTS
   ---------------------------------------------------------------------- */

/* The banner that sits at the top of the schools portal. */
.gumleaf-schools-banner {
	background: var(--wp--preset--color--sage-light);
	border-radius: var(--gl-radius);
	padding: 1rem 1.5rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-deep);
}

/* Curriculum chips — Victorian Curriculum codes and learning areas. */
.gumleaf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.gumleaf-chips > li {
	padding: 0.4rem 0.85rem;
	border-radius: var(--gl-pill);
	background: var(--wp--preset--color--warm-white);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--hairline);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	transition: box-shadow var(--gl-fast) var(--gl-ease-out), transform var(--gl-fast) var(--gl-ease-spring);
}

.gumleaf-chips > li:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--sage);
}

/* Callout on a product page pointing teachers at the notes. */
.gumleaf-teacher-callout {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 1.25rem 1.5rem;
	border-radius: var(--gl-radius);
	background: var(--wp--preset--color--sage-light);
	border-left: 5px solid var(--wp--preset--color--sage-deep);
}

.gumleaf-teacher-callout p { margin: 0.5rem 0 0; }

.gumleaf-teacher-callout a { color: var(--wp--preset--color--leaf-deep); font-weight: 700; }

/* Download row — teaching notes, order forms, catalogue PDFs. */
.gumleaf-downloads {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.gumleaf-downloads a {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.25rem;
	border-radius: var(--gl-radius);
	background: var(--wp--preset--color--warm-white);
	box-shadow: var(--gl-shadow-soft);
	text-decoration: none;
	color: var(--wp--preset--color--ink-deep);
	font-weight: 700;
	transition: transform var(--gl-base) var(--gl-ease-out), box-shadow var(--gl-base) var(--gl-ease-out);
}

.gumleaf-downloads a::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7043' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7.5 10.5L12 15l4.5-4.5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--gl-base) var(--gl-ease-spring);
}

.gumleaf-downloads a:hover {
	transform: translateY(-3px);
	box-shadow: var(--gl-shadow-lift);
	color: var(--wp--preset--color--leaf-deep);
}

.gumleaf-downloads a:hover::before { transform: translateY(3px); }

.gumleaf-downloads small {
	margin-left: auto;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.8125rem;
}

/* Ordering / how-it-works timeline. */
.gumleaf-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	counter-reset: gl-tl;
}

.gumleaf-timeline > li {
	counter-increment: gl-tl;
	position: relative;
	padding-left: 3.6rem;
}

.gumleaf-timeline > li::before {
	content: counter(gl-tl);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--gl-pill);
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--warm-white);
	font-weight: 800;
	font-size: 1rem;
	z-index: 1;
}

.gumleaf-timeline > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 2.9rem;
	bottom: calc(var(--wp--preset--spacing--40) * -1);
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--wp--preset--color--sage) 0 6px, transparent 6px 12px);
	opacity: 0.6;
}

.gumleaf-timeline h3 { margin: 0.25rem 0 0.4rem; font-size: 1.25rem; }
.gumleaf-timeline p { margin: 0; }

/* Two-path chooser: families on one side, schools on the other. */
.gumleaf-path {
	position: relative;
	overflow: hidden;
	border-radius: var(--gl-radius-shell);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform var(--gl-base) var(--gl-ease-out), box-shadow var(--gl-base) var(--gl-ease-out);
}

.gumleaf-path::after {
	content: "";
	position: absolute;
	right: -18%;
	bottom: -22%;
	width: 56%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.1;
	transition: transform var(--gl-slow) var(--gl-ease-out);
}

.gumleaf-path:hover { transform: translateY(-5px); box-shadow: var(--gl-shadow-lift); }
.gumleaf-path:hover::after { transform: scale(1.18) translate(-4%, -6%); }

.gumleaf-path > * { position: relative; z-index: 1; }


/* -------------------------------------------------------------------------
   10. FORMS & NEWSLETTER
   ---------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea,
.wp-block-search__input {
	width: 100%;
	padding: 0.85rem 1.1rem;
	border: 2px solid var(--wp--preset--color--hairline);
	border-radius: 12px;
	background: var(--wp--preset--color--warm-white);
	color: var(--wp--preset--color--ink-deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	transition: border-color var(--gl-fast) var(--gl-ease-out), box-shadow var(--gl-fast) var(--gl-ease-out);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--sage-deep);
	box-shadow: 0 0 0 4px rgba(146, 162, 115, 0.25);
	outline: none;
}

label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.gumleaf-field-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	/* ink, not ink-soft: hints also sit on tinted panels where the
	   softer grey drops below 4.5:1. */
	color: var(--wp--preset--color--ink);
}

.gumleaf-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 34rem;
}

.gumleaf-newsletter-form input[type="email"] { flex: 1 1 15rem; }

.gumleaf-newsletter-form button {
	flex: none;
	padding: 0.9rem 1.8rem;
	border: 2px solid var(--wp--preset--color--ink-deep);
	border-radius: var(--gl-pill);
	background: var(--wp--preset--color--ink-deep);
	color: var(--wp--preset--color--warm-white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform var(--gl-base) var(--gl-ease-spring), background-color var(--gl-base) var(--gl-ease-out);
}

.gumleaf-newsletter-form button:hover { background: var(--wp--preset--color--ink); transform: translateY(-2px); }
.gumleaf-newsletter-form button:active { transform: translateY(0) scale(0.98); }

/* Search block. */
.wp-block-search__button {
	border-radius: var(--gl-pill);
	border: 2px solid var(--wp--preset--color--ink-deep);
	background: var(--wp--preset--color--ink-deep);
	color: var(--wp--preset--color--warm-white);
	padding: 0.7rem 1.4rem;
	font-weight: 700;
}


/* -------------------------------------------------------------------------
   11. FOOTER
   ---------------------------------------------------------------------- */

.gumleaf-footer { position: relative; }

.gumleaf-footer a {
	color: var(--wp--preset--color--sage-light);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--gl-fast) var(--gl-ease-out), color var(--gl-fast) var(--gl-ease-out);
}

.gumleaf-footer a:hover {
	color: var(--wp--preset--color--wattle-glow);
	border-bottom-color: var(--wp--preset--color--wattle-glow);
}

.gumleaf-footer .gumleaf-brand,
.gumleaf-footer .gumleaf-brand:hover { border-bottom: none; }

.gumleaf-copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255, 253, 248, 0.78);
}

.gumleaf-footer-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Wattle glow rather than brand wattle: the brand gold is only
	   4.16:1 on the footer ground and fails AA at this size. */
	color: var(--wp--preset--color--wattle-glow);
	margin-bottom: 0.9rem;
}

.gumleaf-acknowledgement {
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255, 253, 248, 0.82);
	max-width: 46rem;
}


/* -------------------------------------------------------------------------
   12. EDITORIAL CONTENT
   ---------------------------------------------------------------------- */

.gumleaf-prose > * + * { margin-top: 1.15em; }

.wp-block-post-content > h2,
.gumleaf-prose h2 { margin-top: 2.2em; }

.wp-block-post-content > h3,
.gumleaf-prose h3 { margin-top: 1.8em; }

.wp-block-post-featured-image img { border-radius: var(--gl-radius); }

.wp-block-post-date,
.gumleaf-meta {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: 0.02em;
}

.wp-block-post-terms a,
.gumleaf-meta a { text-decoration: none; }

/* Blog cards. */
.gumleaf-post-card {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	height: 100%;
	padding: 0;
	border-radius: var(--gl-radius);
	overflow: hidden;
	background: var(--wp--preset--color--warm-white);
	box-shadow: var(--gl-shadow-soft);
	transition: transform var(--gl-base) var(--gl-ease-out), box-shadow var(--gl-base) var(--gl-ease-out);
}

.gumleaf-post-card:hover { transform: translateY(-4px); box-shadow: var(--gl-shadow-lift); }

.gumleaf-post-card .wp-block-post-featured-image img { border-radius: 0; transition: transform var(--gl-slow) var(--gl-ease-out); }
.gumleaf-post-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.gumleaf-post-card .wp-block-post-featured-image { overflow: hidden; }

/* 404 and empty states. */
.gumleaf-empty {
	text-align: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

.gumleaf-empty img { width: 120px; margin: 0 auto var(--wp--preset--spacing--40); }


/* -------------------------------------------------------------------------
   12b. PATTERN COMPONENTS
   ---------------------------------------------------------------------- */

/* Placeholder artwork. A dashed frame makes it unmistakable that this image
   is waiting to be replaced, even at a glance in the Site Editor. */
.gumleaf-placeholder {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gl-radius);
}

/* Editorial notice — for instructions to the site owner that must be
   deleted before launch. Deliberately loud. */
.gumleaf-notice {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 1rem 1.25rem;
	border-radius: var(--gl-radius-sm);
	border: 2px dashed var(--wp--preset--color--terracotta-deep);
	background: var(--wp--preset--color--terracotta-light);
	color: var(--wp--preset--color--ink-deep);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.gumleaf-notice strong { display: block; margin-bottom: 0.2rem; }

/* Quote cards — a wall, not a carousel with dots. */
.gumleaf-quote-card {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--gl-radius-shell);
	background: var(--wp--preset--color--warm-white);
	box-shadow: var(--gl-shadow-soft);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	transition: transform var(--gl-base) var(--gl-ease-out), box-shadow var(--gl-base) var(--gl-ease-out);
}

.gumleaf-quote-card:hover { transform: translateY(-3px); box-shadow: var(--gl-shadow-lift); }

.gumleaf-quote-card blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-deep);
	font-variation-settings: "SOFT" 28, "WONK" 1;
}

.gumleaf-quote-card--wide blockquote { font-size: 1.375rem; }

.gumleaf-quote-card blockquote::before {
	content: "";
	display: block;
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.75rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2392A273'%3E%3Cpath d='M9.5 5C6 6.6 4 9.6 4 13.2V19h6.4v-6.4H7.6c0-2.2 1-3.8 2.9-4.7zm10 0C16 6.6 14 9.6 14 13.2V19h6.4v-6.4h-2.8c0-2.2 1-3.8 2.9-4.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gumleaf-quote-card figcaption {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.gumleaf-quote-card figcaption span { font-weight: 800; color: var(--wp--preset--color--ink); font-size: 0.9375rem; }
.gumleaf-quote-card figcaption small { color: var(--wp--preset--color--ink-soft); font-size: 0.8125rem; }

/* FAQ — a two-column list, not a stack of accordions to click through. */
.gumleaf-faq {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.gumleaf-faq-item h3 {
	margin: 0 0 0.5rem;
	font-size: 1.1875rem;
	line-height: 1.35;
}

.gumleaf-faq-item p { margin: 0; color: var(--wp--preset--color--ink); }

/* Definition list used for supplier / ordering details. */
.gumleaf-deflist {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 0.55rem 1.25rem;
	margin: 1.25rem 0 1.75rem;
	font-size: 0.9375rem;
}

.gumleaf-deflist dt {
	font-weight: 800;
	color: var(--wp--preset--color--ink-deep);
}

.gumleaf-deflist dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 600px) {
	.gumleaf-deflist { grid-template-columns: 1fr; gap: 0.15rem; }
	.gumleaf-deflist dd { margin-bottom: 0.75rem; }
}

/* Enquiry form layout. */
.gumleaf-form p { margin: 0 0 1rem; }

.gumleaf-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0 1rem;
}

.gumleaf-submit {
	padding: 0.95rem 1.9rem;
	border: 2px solid var(--wp--preset--color--sage-deep);
	border-radius: var(--gl-pill);
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--warm-white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--gl-base) var(--gl-ease-out), transform var(--gl-base) var(--gl-ease-spring);
}

.gumleaf-submit:hover { background: var(--wp--preset--color--leaf-deep); border-color: var(--wp--preset--color--leaf-deep); transform: translateY(-2px); }
.gumleaf-submit:active { transform: translateY(0) scale(0.98); }

/* Radio choices in the schools enquiry — big, obvious targets, because the
   first question decides which of the two routes the enquiry becomes. */
.gumleaf-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
}

.gumleaf-fieldset legend {
	padding: 0;
	margin-bottom: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.gumleaf-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.6rem;
}

.gumleaf-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
	padding: 0.85rem 1rem;
	border-radius: 14px;
	background: var(--wp--preset--color--paper);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--hairline);
	cursor: pointer;
	font-weight: 400;
	transition: box-shadow var(--gl-fast) var(--gl-ease-out), background-color var(--gl-fast) var(--gl-ease-out);
}

.gumleaf-choice:hover { box-shadow: inset 0 0 0 2px var(--wp--preset--color--sage); }

.gumleaf-choice input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	flex: none;
	accent-color: var(--wp--preset--color--sage-deep);
}

.gumleaf-choice span {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.gumleaf-choice strong {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink-deep);
}

.gumleaf-choice:has(input:checked) {
	background: var(--wp--preset--color--sage-light);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--sage-deep);
}

.gumleaf-choice:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--terracotta-deep);
	outline-offset: 3px;
}

/* Book grid used by the reusable card row. */
.gumleaf-book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.gumleaf-book-grid .gumleaf-book-card > h3 { font-size: 1.3125rem; }
.gumleaf-book-grid .gumleaf-book-card > h3 a { text-decoration: none; color: inherit; }
.gumleaf-book-grid .gumleaf-book-card > h3 a:hover { color: var(--wp--preset--color--terracotta-deep); }
.gumleaf-book-grid .gumleaf-book-card > p { font-size: 0.9375rem; color: var(--wp--preset--color--ink); }
.gumleaf-book-grid .gumleaf-tag { align-self: flex-start; }

/* Lesson step body text sits in a span next to the number. */
.gumleaf-steps > li > span { display: block; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--ink); }

/* Headings that link should not look like body links. */
h1 a, h2 a, h3 a, h4 a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--gl-base) var(--gl-ease-out), color var(--gl-base) var(--gl-ease-out);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
	color: var(--wp--preset--color--terracotta-deep);
	background-size: 100% 2px;
}

/* Flip a two-column row so the artwork alternates sides. */
@media (min-width: 782px) {
	.gl-order-last { order: 2; }
}


/* -------------------------------------------------------------------------
   12c. SCHOOLS: PLANS, PRICING & CURRICULUM MAPPING

   The schools page is a normal WordPress Page, not a theme template — its
   block markup is pasted into the page and edited there. These styles stay
   in the theme so that page (and anything else you build with the same
   components) picks up the brand automatically, and so brand colours changed
   in the Site Editor flow through without touching the page.
   ---------------------------------------------------------------------- */

/*
 * The two routes to the books.
 *
 * A school buys one of two ways — physical class sets on a purchase order,
 * or a digital classroom licence paid by card. They are genuinely different
 * products with different buyers (business manager vs classroom teacher), so
 * they get equal weight rather than one being framed as the lesser option.
 */
.gumleaf-routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.gumleaf-route {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.6rem, 3.5vw, 2.5rem);
	border-radius: var(--gl-radius-shell);
	background: var(--wp--preset--color--warm-white);
	box-shadow: var(--gl-shadow-soft);
	overflow: hidden;
	transition: transform var(--gl-base) var(--gl-ease-out), box-shadow var(--gl-base) var(--gl-ease-out);
}

.gumleaf-route:hover { transform: translateY(-4px); box-shadow: var(--gl-shadow-lift); }

/* A colour band along the top edge, so the two routes are told apart at a
   glance without either looking like the "off" state of the other. */
.gumleaf-route::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--gl-route-accent, var(--wp--preset--color--sage));
}

.gumleaf-route--physical { --gl-route-accent: var(--wp--preset--color--terracotta); }
.gumleaf-route--digital { --gl-route-accent: var(--wp--preset--color--sky); }

.gumleaf-route h3 { margin: 0; font-size: 1.5rem; }

.gumleaf-route > p { margin: 0; color: var(--wp--preset--color--ink); }

.gumleaf-route .gumleaf-ticks { margin-top: 0.25rem; }

.gumleaf-route-foot {
	margin-top: auto;
	padding-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.gumleaf-route-meta {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-soft);
}

/* How you pay — a small honest label rather than a row of card logos. */
.gumleaf-pay {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--gl-radius-sm);
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.gumleaf-pay::before {
	content: "";
	width: 1rem;
	height: 1rem;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4E56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gumleaf-pay--invoice::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4E56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3h9l4.5 4.5V21h-13z'/%3E%3Cpath d='M14.5 3v4.5H19'/%3E%3Cpath d='M8.5 12.5h7M8.5 16.5h5'/%3E%3C/svg%3E");
}

/* Pricing plans. */
.gumleaf-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.gumleaf-plan {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: clamp(1.6rem, 3vw, 2.15rem);
	border-radius: var(--gl-radius-shell);
	background: var(--wp--preset--color--warm-white);
	box-shadow: var(--gl-shadow-soft);
	position: relative;
}

/*
 * The recommended tier is marked with colour and a label, not by being
 * taller than its neighbours — a height difference breaks the shared
 * baselines that make the three prices comparable at a glance.
 */
.gumleaf-plan--featured {
	background: var(--wp--preset--color--sky-light);
	box-shadow: var(--gl-shadow-lift);
}

.gumleaf-plan-flag {
	position: absolute;
	top: -0.7rem;
	left: clamp(1.6rem, 3vw, 2.15rem);
	padding: 0.28rem 0.75rem;
	border-radius: var(--gl-pill);
	background: var(--wp--preset--color--sky-deep);
	color: var(--wp--preset--color--warm-white);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gumleaf-plan h3 { margin: 0; font-size: 1.25rem; }

.gumleaf-plan-sub {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
	min-height: 3.1em;
}

.gumleaf-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 40, "WONK" 1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-deep);
}

.gumleaf-price b {
	font-size: clamp(2rem, 4vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
}

.gumleaf-price span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.gumleaf-plan .gumleaf-ticks { font-size: 0.9375rem; }

.gumleaf-plan .wp-block-buttons,
.gumleaf-plan-cta { margin-top: auto; padding-top: 0.5rem; }

/* An obvious, deletable marker on every figure that is not real yet. */
.gumleaf-tbc {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 5px;
	border: 1.5px dashed #833F20;
	background: var(--wp--preset--color--terracotta-light);
	/* A darker rust than the brand's red-earth-deep: at 11px/800 on the
	   light earth fill, terracotta-deep is only 4.23:1. This clears AA on
	   the earth fill, on warm white and on the light sky panel. */
	color: #833F20;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: middle;
}

/*
 * Curriculum mapping.
 *
 * A curriculum leader reads this table before anything else on the page, so
 * it gets real table semantics and scrolls inside its own container rather
 * than pushing the page sideways on a phone.
 */
.gumleaf-table-wrap {
	overflow-x: auto;
	border-radius: var(--gl-radius);
	box-shadow: var(--gl-shadow-soft);
	background: var(--wp--preset--color--warm-white);
	-webkit-overflow-scrolling: touch;
}

.gumleaf-curriculum {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.gumleaf-curriculum th,
.gumleaf-curriculum td {
	padding: 0.9rem 1.1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.gumleaf-curriculum thead th {
	background: var(--wp--preset--color--sage-light);
	color: var(--wp--preset--color--ink-deep);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--wp--preset--color--sage);
	/* The table scrolls inside its own container, so headers can stay on one
	   line without ever pushing the page sideways. */
	white-space: nowrap;
	position: sticky;
	top: 0;
}

.gumleaf-curriculum tbody th {
	font-weight: 800;
	color: var(--wp--preset--color--ink-deep);
	white-space: nowrap;
}

.gumleaf-curriculum tbody tr:last-child th,
.gumleaf-curriculum tbody tr:last-child td { border-bottom: 0; }

.gumleaf-curriculum tbody tr:hover td,
.gumleaf-curriculum tbody tr:hover th { background: var(--wp--preset--color--paper); }

.gumleaf-curriculum code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--sky-deep);
	background: none;
	border: 0;
	padding: 0;
}

/* Year-level route cards: which book suits which band. */
.gumleaf-levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.gumleaf-level {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	align-items: start;
	padding: clamp(1.4rem, 3vw, 1.9rem);
	border-radius: var(--gl-radius-shell);
	background: var(--wp--preset--color--warm-white);
	box-shadow: var(--gl-shadow-soft);
	transition: transform var(--gl-base) var(--gl-ease-out), box-shadow var(--gl-base) var(--gl-ease-out);
}

.gumleaf-level:hover { transform: translateY(-3px); box-shadow: var(--gl-shadow-lift); }

.gumleaf-level-band {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 18px;
	background: var(--wp--preset--color--wattle-light);
	/* Ink, not the matching deep tone: wattle-deep on wattle-light is only
	   4.19:1 and sky-deep on sky-light 4.40:1. The tinted ground already
	   distinguishes the two bands, so the numerals do not have to. */
	color: var(--wp--preset--color--ink-deep);
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 40, "WONK" 1;
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
}

.gumleaf-level-band b { font-size: 1.4rem; display: block; }
.gumleaf-level-band em {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gumleaf-level--upper .gumleaf-level-band {
	background: var(--wp--preset--color--sky-light);
	color: var(--wp--preset--color--ink-deep);
}

.gumleaf-level h3 { margin: 0 0 0.35rem; font-size: 1.1875rem; }
.gumleaf-level p { margin: 0 0 0.75rem; font-size: 0.9375rem; color: var(--wp--preset--color--ink); }

@media (max-width: 480px) {
	.gumleaf-level { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------------
   12d. BOOKS PAGE: SHELF, TITLE SECTIONS & BUY PANEL

   Like the schools page, the books page is a standalone WordPress Page
   rather than a theme template. These styles live here so the page inherits
   the brand and follows Site Editor colour changes.

   Each book carries its own accent, set once per section as --gl-book-accent
   and threaded through the eyebrow rule, the lesson numbers and the buy
   panel — so the three sections read as siblings rather than repeats.
   ---------------------------------------------------------------------- */

.gumleaf-book {
	--gl-book-accent: var(--wp--preset--color--sage);
	--gl-book-accent-deep: var(--wp--preset--color--sage-deep);
	--gl-book-accent-light: var(--wp--preset--color--sage-light);
	position: relative;
}

.gumleaf-book--sky {
	--gl-book-accent: var(--wp--preset--color--sky);
	--gl-book-accent-deep: var(--wp--preset--color--sky-deep);
	--gl-book-accent-light: var(--wp--preset--color--sky-light);
}

.gumleaf-book--wattle {
	--gl-book-accent: var(--wp--preset--color--wattle);
	--gl-book-accent-deep: var(--wp--preset--color--wattle-deep);
	--gl-book-accent-light: var(--wp--preset--color--wattle-light);
}

.gumleaf-book .gumleaf-eyebrow {
	background: var(--gl-book-accent-light);
	color: var(--wp--preset--color--ink-deep);
}

.gumleaf-book .gumleaf-steps > li::before {
	background: var(--gl-book-accent-light);
	color: var(--wp--preset--color--ink-deep);
}

/* The shelf: three covers to compare at a glance.
   Three equal columns is the right answer here — it is a comparison, and
   equal widths are what make the covers comparable. */
.gumleaf-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: end;
}

.gumleaf-shelf-item {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	text-align: left;
}

.gumleaf-shelf-item > a.gumleaf-cover { align-self: flex-start; }

/*
 * A slight stagger so three covers read as books on a shelf rather than
 * three identical tiles.
 *
 * The offset goes on the cover, not on the shelf item: the item is a direct
 * child of a .gl-stagger container, whose reveal sets transform:none on its
 * children and would cancel it. Shifting only the cover also keeps the three
 * titles on a common baseline, which is what makes them comparable.
 */
@media (min-width: 782px) {
	.gumleaf-shelf-item:nth-child(2) > .gumleaf-cover { transform: translateY(-16px); }
	.gumleaf-shelf-item:nth-child(3) > .gumleaf-cover { transform: translateY(8px); }
}

.gumleaf-shelf-item h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.gumleaf-shelf-item h3 a { text-decoration: none; }

.gumleaf-shelf-item p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

.gumleaf-shelf-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.35rem;
}

/* The line under the shelf — a ground for the covers to sit on. */
.gumleaf-shelf-rule {
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--wp--preset--color--hairline) 12%,
		var(--wp--preset--color--hairline) 88%,
		transparent 100%);
	margin-top: var(--wp--preset--spacing--30);
}

/* Cover plus the interior spreads beneath it. */
.gumleaf-book-art { display: grid; gap: var(--wp--preset--spacing--30); }

.gumleaf-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}

.gumleaf-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	box-shadow: var(--gl-shadow-soft);
	transition: transform var(--gl-slow) var(--gl-ease-out), box-shadow var(--gl-slow) var(--gl-ease-out);
}

.gumleaf-gallery a:hover img,
.gumleaf-gallery img:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: var(--gl-shadow-lift);
}

/*
 * The buy panel.
 *
 * Two formats, side by side, each priced and each with its own button —
 * rather than a dropdown, because a parent deciding between a paperback and
 * an ebook wants to see both prices at once.
 */
.gumleaf-buy {
	border-radius: var(--gl-radius-shell);
	background: var(--wp--preset--color--warm-white);
	box-shadow: var(--gl-shadow-soft);
	padding: clamp(1.4rem, 3vw, 1.9rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-top: 5px solid var(--gl-book-accent);
}

.gumleaf-buy > h3 { margin: 0; font-size: 1.1875rem; }

.gumleaf-formats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.75rem;
}

.gumleaf-format {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.1rem 1.15rem;
	border-radius: 16px;
	background: var(--wp--preset--color--paper);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--hairline);
	transition: box-shadow var(--gl-base) var(--gl-ease-out), transform var(--gl-base) var(--gl-ease-out);
}

.gumleaf-format:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 2px var(--gl-book-accent);
}

.gumleaf-format-name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--wp--preset--color--ink-deep);
}

.gumleaf-format-name::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E383F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h6a2.5 2.5 0 0 1 2 1 2.5 2.5 0 0 1 2-1h6v13h-6a2.5 2.5 0 0 0-2 1 2.5 2.5 0 0 0-2-1H4z'/%3E%3Cpath d='M12 5.5v13'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gumleaf-format--ebook .gumleaf-format-name::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E383F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2.5'/%3E%3Cpath d='M9.5 18.5h5'/%3E%3C/svg%3E");
}

.gumleaf-format-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 40, "WONK" 1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-deep);
}

.gumleaf-format-price b { font-size: 1.75rem; font-weight: 700; line-height: 1; }

.gumleaf-format-price span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.gumleaf-format-note {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.gumleaf-format .wp-block-button__link,
.gumleaf-format .gumleaf-add {
	display: inline-block;
	margin-top: auto;
	align-self: flex-start;
	padding: 0.75rem 1.4rem;
	border-radius: var(--gl-pill);
	border: 2px solid var(--gl-book-accent-deep);
	background: var(--gl-book-accent-deep);
	color: var(--wp--preset--color--warm-white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--gl-base) var(--gl-ease-spring), background-color var(--gl-base) var(--gl-ease-out), box-shadow var(--gl-base) var(--gl-ease-out);
}

.gumleaf-format .gumleaf-add:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(30, 56, 63, 0.44);
	color: var(--wp--preset--color--warm-white);
}

.gumleaf-format .gumleaf-add:active { transform: translateY(0) scale(0.98); transition-duration: 90ms; }

/* The reassurance line under the two formats. */
.gumleaf-buy-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	margin: 0;
	padding-top: 0.25rem;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink);
}

.gumleaf-buy-trust li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.gumleaf-buy-trust li::before {
	content: "";
	width: 0.95rem;
	height: 0.95rem;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7043' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Book specification list. */
.gumleaf-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.9rem 1.5rem;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
}

.gumleaf-specs div {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.gumleaf-specs dt {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.gumleaf-specs dd {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--ink-deep);
	font-variant-numeric: tabular-nums;
}

/* A pull-quote-ish opening line for each book. */
.gumleaf-hook {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 28, "WONK" 1;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.45;
	color: var(--wp--preset--color--ink-deep);
	padding-left: 1.1rem;
	border-left: 4px solid var(--gl-book-accent);
}


/* -------------------------------------------------------------------------
   13. UTILITIES, RESPONSIVE & REDUCED MOTION
   ---------------------------------------------------------------------- */

.gumleaf-measure { max-width: 34rem; }
.gumleaf-measure-wide { max-width: 46rem; }

.gumleaf-tabular { font-variant-numeric: tabular-nums; }

/* Asymmetric bento grid used for the "what's inside" sections. */
.gumleaf-bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.gumleaf-bento > * { grid-column: span 2; }
.gumleaf-bento > .gl-span-3 { grid-column: span 3; }
.gumleaf-bento > .gl-span-4 { grid-column: span 4; }
.gumleaf-bento > .gl-span-6 { grid-column: span 6; }

@media (max-width: 900px) {
	.gumleaf-bento { grid-template-columns: repeat(2, 1fr); }
	.gumleaf-bento > *,
	.gumleaf-bento > .gl-span-3,
	.gumleaf-bento > .gl-span-4 { grid-column: span 1; }
	.gumleaf-bento > .gl-span-6 { grid-column: span 2; }
}

@media (max-width: 781px) {
	:root { --gl-header-h: 66px; }

	.gumleaf-brand-logo { height: 42px; }
	.gumleaf-brand-name { font-size: 1.125rem; }
	.gumleaf-brand-tagline { display: none; }

	.gumleaf-hero-cover {
		position: static;
		width: 46%;
		max-width: 180px;
		margin-top: -14%;
		margin-left: 6%;
		animation: none;
	}

	.gumleaf-bento { grid-template-columns: 1fr; }
	.gumleaf-bento > * { grid-column: span 1 !important; }

	.gumleaf-steps > li { grid-template-columns: 1fr; gap: 0.6rem; }

	.gumleaf-path { padding: 1.5rem; }

	.gumleaf-downloads small { margin-left: 0; width: 100%; }
	.gumleaf-downloads a { flex-wrap: wrap; }
}

@media (max-width: 600px) {
	.gumleaf-utility-bar { text-align: center; }
	.gumleaf-utility-bar .wp-block-group { justify-content: center; gap: 0.35rem; }
}

/*
 * Anyone who has asked their operating system to reduce motion gets a
 * completely still page. Nothing is hidden, nothing moves, nothing fades.
 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.gl-js .gl-reveal,
	.gl-js [data-gl-reveal],
	.gl-js .gl-stagger > *,
	.gl-js [data-gl-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media print {
	.gumleaf-header,
	.gumleaf-footer,
	.gumleaf-scatter,
	body::before { display: none !important; }

	body { background: #fff; color: #000; }

	.is-style-gumleaf-card,
	.gumleaf-steps > li { box-shadow: none; border: 1px solid #ccc; }
}