/**
 * MooLabyte — motion, imagery and surface layer.
 *
 * Sits ON TOP of assets/css/site.css. Nothing here redefines a shipped token;
 * it only adds an extension layer (brass / deep / blush / lit variants), a
 * motion system, and the components those two make possible.
 *
 * Load order matters: this file must print AFTER site.css, which already
 * prints after kadence-global (see includes/Setup/Assets.php). Registered as
 * its own handle with 'moolabyte-site' as a dependency — see docs/UI-UX-SYSTEM.md §Wiring.
 *
 * Conventions kept from site.css:
 *   - Hand-defined --wp--preset--color--* customs are a Kadence workaround,
 *     not a design decision. Same note applies to the new tokens below.
 *   - Every animation lives inside @media (prefers-reduced-motion: no-preference).
 *   - Scroll-driven work is wrapped in @supports; without it, content is
 *     simply in its final, visible state. Nothing is ever hidden by default.
 *
 * @package MooLabyte
 */

/* =========================================================================
   1. EXTENSION TOKENS  —  "Ledger & Brass"
   Six shipped tokens stay untouched. These six are added, and every one of
   them was contrast-checked against the surfaces it is actually used on.
   Ratios are recorded inline so the next person doesn't have to re-derive them.
   ========================================================================= */

:root {
	/* Light-surface tokens. */
	--wp--preset--color--moola-brass: #8a6220;  /* 5.14:1 on cream, 4.67:1 on surface — AA body text */
	--wp--preset--color--moola-blush: #f6ede6;  /* warm alternating band; 16.27:1 with ink */
	--wp--preset--color--moola-deep:  #0b3b2a;  /* dark band / footer; 11.83:1 with cream */

	/* Dark-surface tokens. Only these are legible on --moola-deep or --moola-ink. */
	--wp--preset--color--moola-brass-lit: #e0b45e; /* 6.49:1 on deep, 9.72:1 on ink */
	--wp--preset--color--moola-fern-lit:  #5fcf9a; /* 6.50:1 on deep, 9.74:1 on ink */
	--wp--preset--color--moola-mist:      #c9d8cf; /* 8.49:1 on deep — muted meta text on dark */

	/* Short aliases, so component rules below stay readable. */
	--moola-ink: var(--wp--preset--color--moola-ink, #14110f);
	--moola-cream: var(--wp--preset--color--moola-cream, #faf8f4);
	--moola-green: var(--wp--preset--color--moola-green, #0f7a4a);
	--moola-indigo: var(--wp--preset--color--moola-indigo, #5b5a72);
	--moola-border: var(--wp--preset--color--moola-border, #e4dfd6);
	--moola-surface: var(--wp--preset--color--moola-surface, #f1ede4);
	--moola-brass: var(--wp--preset--color--moola-brass);
	--moola-blush: var(--wp--preset--color--moola-blush);
	--moola-deep: var(--wp--preset--color--moola-deep);

	/* ---- Motion tokens. Four durations, three curves, no more. ---- */
	--moola-dur-tap: 120ms;   /* button/link state change — must feel instant */
	--moola-dur: 240ms;       /* default hover/reveal */
	--moola-dur-slow: 520ms;  /* image arrival, section reveal */
	--moola-dur-page: 380ms;  /* cross-document view transition */

	--moola-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* leaves fast, lands soft */
	--moola-ease-soft: cubic-bezier(0.33, 0.9, 0.32, 1);   /* the "settle" — no overshoot */
	--moola-ease-rule: cubic-bezier(0.65, 0, 0.35, 1);     /* the drawn line; even ink flow */

	/* ---- Elevation. Warm, not grey: shadows tinted with the ink, never #000. ---- */
	--moola-lift-1: 0 1px 2px rgba(20, 17, 15, 0.04), 0 2px 8px rgba(20, 17, 15, 0.04);
	--moola-lift-2: 0 2px 4px rgba(20, 17, 15, 0.05), 0 12px 28px rgba(20, 17, 15, 0.08);

	--moola-radius: 0.75rem; /* matches the shipped card radius — do not fork this */
}

/* =========================================================================
   2. SIGNATURE — the drawn rule
   One motif, reused in three places: reading progress, section dividers,
   and the underline that grows under a heading as it enters view. It reads as
   ink being laid down, which is the only "decoration" this site gets.
   ========================================================================= */

.moola-rule,
.wp-block-separator.is-style-moola-rule {
	border: 0;
	height: 2px;
	width: 100%;
	max-width: none;
	margin-block: var(--wp--preset--spacing--large, 2.5rem);
	background: linear-gradient(90deg, var(--moola-ink) 0%, var(--moola-brass) 55%, transparent 100%);
	transform-origin: left center;
	opacity: 0.9;
}

/* Eyebrow: small caps label with a brass em-dash. Used above section headings
   and on the card's category. Structural, not decorative — it names the cluster. */
.moola-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.5em;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--moola-brass);
}

.moola-eyebrow::before {
	content: "";
	flex: 0 0 1.75rem;
	height: 1px;
	background: currentColor;
}

/* =========================================================================
   3. REVEAL PRIMITIVES (scroll-driven, zero JavaScript)
   Applied deliberately — section blocks, cards, below-fold figures. Never the
   whole page, never the LCP element, never anything a reader is waiting on.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		/* Rise: 14px and 340ms of scroll range. Any further and it reads as a
		   template effect rather than paper settling. */
		.moola-reveal,
		.wp-block-post-template > li,
		.entry-content > figure,
		.entry-content > .wp-block-table,
		.entry-content > .wp-block-columns {
			animation: moola-rise linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 26%;
		}

		/* The rule draws itself as it crosses into view. */
		.moola-rule,
		.wp-block-separator.is-style-moola-rule {
			animation: moola-draw linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 30%;
		}

		/* Section headings get a growing brass underline. Only h2 in article
		   flow — h3+ would turn the page into a light show. */
		.entry-content > h2 {
			position: relative;
		}

		.entry-content > h2::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -0.35em;
			height: 2px;
			width: 100%;
			background: var(--moola-brass);
			transform: scaleX(0);
			transform-origin: left;
			animation: moola-underline linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 32%;
		}

		/* Reading progress. Lives on the sticky header, so it costs no markup
		   and no layout. Single posts only. */
		body.single .wp-site-blocks > header::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -1px;
			height: 2px;
			background: linear-gradient(90deg, var(--moola-green), var(--moola-brass));
			transform: scaleX(0);
			transform-origin: left;
			animation: moola-underline linear both;
			animation-timeline: scroll(root block);
		}
	}
}

@keyframes moola-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes moola-draw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes moola-underline {
	to { transform: scaleX(1); }
}

/* =========================================================================
   4. IMAGERY
   The brief's real gap: posts ship with no featured image, and card slots
   collapse. Two fixes here — (a) every image lands on a reserved, paper-toned
   plate so nothing ever jumps, (b) images arrive by developing in rather than
   popping. See includes/Content/CoverFallback.php for the no-image case.
   ========================================================================= */

.wp-block-post-featured-image,
.moola-cover {
	position: relative;
	overflow: hidden;
	border-radius: var(--moola-radius);
	background-color: var(--moola-surface);
	/* Reserved plate: warm paper wash, so an unloaded image is a deliberate
	   surface rather than a grey hole. Costs zero requests. */
	background-image: linear-gradient(135deg, var(--moola-surface) 0%, var(--moola-blush) 100%);
}

.wp-block-post-featured-image img,
.moola-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Explicit ratio protects CLS even when an editor forgets width/height. */
	aspect-ratio: 16 / 9;
}

/* Card media sits slightly tighter than a full-width article figure. */
.wp-block-post-template .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		/* Below-fold images only. The above-fold hero is deliberately excluded:
		   never animate the element the LCP measurement is waiting for. */
		.wp-block-post-template .wp-block-post-featured-image img,
		.entry-content > figure img {
			animation: moola-develop linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 30%;
		}
	}
}

@keyframes moola-develop {
	from { opacity: 0; transform: scale(1.035); filter: saturate(0.7); }
	to   { opacity: 1; transform: none; filter: none; }
}

/* ---- Generated cover (no featured image). Paired with
   includes/Content/CoverFallback.php. Costs zero requests, never shifts. ---- */

.moola-cover--generated {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	position: relative;
	isolation: isolate;
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0 11px,
			rgba(20, 17, 15, 0.028) 11px 12px
		),
		linear-gradient(135deg, var(--moola-surface), var(--moola-blush));
}

.moola-cover--generated::after {
	content: "";
	position: absolute;
	inset: 0.6rem;
	border: 1px solid color-mix(in srgb, var(--moola-cover-accent, var(--moola-green)) 26%, transparent);
	border-radius: 0.4rem;
	pointer-events: none;
}

.moola-cover--generated[data-accent="green"]  { --moola-cover-accent: var(--moola-green); }
.moola-cover--generated[data-accent="brass"]  { --moola-cover-accent: var(--moola-brass); }
.moola-cover--generated[data-accent="indigo"] { --moola-cover-accent: var(--moola-indigo); }

.moola-cover__mark {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: clamp(3rem, 8vw, 4.5rem);
	line-height: 1;
	font-weight: 600;
	color: var(--moola-cover-accent, var(--moola-green));
	/* No opacity here on purpose — a real bug, caught by pa11y/axe, not
	   eyeballed: 0.85 opacity blends the accent color toward the cream
	   background, and every one of the three data-accent variants
	   (green 5.07:1, brass 5.14:1, indigo 6.28:1 base on cream) drops
	   below the 4.5:1 AA threshold once blended — confirmed 3.86:1 for
	   green via direct computed-style math, not assumed from the base
	   ratio. The base colors already pass comfortably at full opacity;
	   the "watermark" look isn't worth failing contrast for. */
}

.moola-cover__label {
	position: absolute;
	left: 1.25rem;
	bottom: 1rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* ink, not indigo: this sits on a gradient + diagonal-hatch pattern
	   background (.moola-cover--generated), not a flat surface color, so
	   the effective contrast varies by exact pixel position — axe
	   flagged this specific element. ink's ~16-18:1 base margin survives
	   that variance; indigo's ~5.7-6.3:1 didn't have enough headroom to
	   risk it. */
	color: var(--moola-ink);
}

/* Screenshot treatment. Comparison posts should show the actual tool — a real
   screenshot is both the cheapest image budget and the strongest E-E-A-T
   signal. This makes one look intentional instead of pasted. */
.entry-content .is-style-moola-screenshot img {
	border: 1px solid var(--moola-border);
	border-radius: 0.5rem;
	box-shadow: var(--moola-lift-2);
	background: var(--moola-cream);
}

.entry-content figcaption {
	margin-top: 0.75em;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--moola-indigo);
	border-left: 2px solid var(--moola-brass);
	padding-left: 0.75em;
}

/* =========================================================================
   5. CARDS
   Extends the shipped 3-column card. No new geometry, no new radius —
   only depth, a media plate, and a hover that responds to the pointer.
   ========================================================================= */

.wp-block-post-template > li {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--moola-surface);
	border: 1px solid var(--moola-border);
	border-radius: var(--moola-radius);
	overflow: hidden;
	box-shadow: var(--moola-lift-1);
	transition:
		transform var(--moola-dur) var(--moola-ease-soft),
		box-shadow var(--moola-dur) var(--moola-ease-soft),
		border-color var(--moola-dur) var(--moola-ease-soft);
}

/* Pointer-following warmth. --moola-mx/--moola-my are set by
   assets/js/moola-motion.js; without it the gradient sits centred and the
   card still lights up on hover. Nothing depends on the script. */
.wp-block-post-template > li::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity var(--moola-dur) var(--moola-ease-out);
	background: radial-gradient(
		18rem 18rem at var(--moola-mx, 50%) var(--moola-my, 0%),
		rgba(224, 180, 94, 0.16),
		transparent 70%
	);
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-post-template > li:hover {
		transform: translateY(-3px);
		border-color: var(--moola-brass);
		box-shadow: var(--moola-lift-2);
	}

	.wp-block-post-template > li:hover::before {
		opacity: 1;
	}
}

/* Keyboard parity: the same affordance without a mouse. */
.wp-block-post-template > li:focus-within {
	border-color: var(--moola-brass);
	box-shadow: var(--moola-lift-2);
}

.wp-block-post-template > li > * {
	padding-inline: 1.25rem;
}

.wp-block-post-template > li > .wp-block-post-featured-image {
	padding-inline: 0;
	border-radius: 0;
	margin-bottom: 1.1rem;
}

.wp-block-post-template > li > :last-child {
	padding-bottom: 1.25rem;
	margin-top: auto;
}

.wp-block-post-template .wp-block-post-title {
	line-height: 1.25;
	text-wrap: balance;
}

.wp-block-post-template .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(var(--moola-brass), var(--moola-brass));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--moola-dur) var(--moola-ease-out);
}

.wp-block-post-template > li:hover .wp-block-post-title a,
.wp-block-post-template .wp-block-post-title a:focus-visible {
	background-size: 100% 1px;
}

.wp-block-post-template .wp-block-post-date {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--moola-indigo); /* 5.71:1 on surface — verified AA */
}

/* =========================================================================
   6. HEADER
   Sticky, and condenses on scroll. Trust signals live here, not in a hero.
   ========================================================================= */

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--moola-cream) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--moola-border);
	transition: box-shadow var(--moola-dur) var(--moola-ease-out);
}

@supports not (backdrop-filter: blur(10px)) {
	.wp-site-blocks > header { background: var(--moola-cream); }
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.wp-site-blocks > header {
			animation: moola-condense linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 200px;
		}
	}
}

@keyframes moola-condense {
	to {
		padding-block: 0.4rem;
		box-shadow: var(--moola-lift-1);
	}
}

/* Nav links: the underline grows from the left, it does not blink on. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	padding-block: 0.25rem;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--moola-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--moola-dur) var(--moola-ease-out);
}

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

/* Trust line: "Independently tested · Est. 2026". Small, always visible,
   the cheapest E-E-A-T signal on a YMYL site. */
.moola-trustline {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--moola-indigo);
}

.moola-trustline strong {
	color: var(--moola-brass);
	font-weight: 600;
}

/* Desktop-only search field — an always-visible input costs zero extra JS.
   The core Search block's expand-on-click variant would pull in the
   Interactivity API view script, which is what this avoids. */
@media (max-width: 781px) {
	.moola-search {
		display: none;
	}
}

/* =========================================================================
   7. ARTICLE TYPOGRAPHY
   The 45rem measure is already right. What's missing is rhythm: a lede that
   announces the piece, links that feel like paper, and quotes that breathe.
   ========================================================================= */

.entry-content > p:first-of-type {
	font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
	line-height: 1.65;
	color: var(--moola-ink);
}

/* Drop cap on single posts only — never on archives or pages. */
body.single .entry-content > p:first-of-type::first-letter {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-weight: 600;
	color: var(--moola-green);
	initial-letter: 3 3;
	-webkit-initial-letter: 3 3;
	margin-right: 0.09em;
}

@supports not (initial-letter: 3) {
	body.single .entry-content > p:first-of-type::first-letter {
		float: left;
		font-size: 3.4em;
		line-height: 0.84;
		padding-right: 0.06em;
	}
}

/* A news explainer leads with the summary box, so the first direct-child
   paragraph of the content is the one *after* that box. A drop cap landing
   there reads as a mistake rather than an opening flourish, so the
   News Explainer template (templates/single-explainer.html) opts out. The
   lede sizing above is kept: that still earns its place. */
body.single .moola-explainer .entry-content > p:first-of-type::first-letter {
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	initial-letter: normal;
	-webkit-initial-letter: normal;
	float: none;
	font-size: inherit;
	line-height: inherit;
	margin-right: 0;
	padding-right: 0;
}

/* Dates carry more weight on a dated news piece than on an evergreen
   review, so the byline gets a rule and a little air rather than sitting
   as one more grey line under the title. */
.moola-explainer .moola-post-meta {
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--moola-border);
}

/* Body links: underline offset like a printed footnote, thickens on hover. */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--moola-green);
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, var(--moola-green) 40%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition:
		text-decoration-color var(--moola-dur-tap) var(--moola-ease-out),
		text-decoration-thickness var(--moola-dur-tap) var(--moola-ease-out);
}

.entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
	text-decoration-color: var(--moola-green);
	text-decoration-thickness: 2px;
}

/* Buttons: weight shifts, position doesn't. Moving buttons hurt fat-finger taps. */
.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--moola-dur-tap) var(--moola-ease-out),
		color var(--moola-dur-tap) var(--moola-ease-out),
		box-shadow var(--moola-dur) var(--moola-ease-soft);
}

@media (hover: hover) {
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		box-shadow: var(--moola-lift-2);
	}
}

/* Pull quote (is-style-moola-pullquote already exists) — add the settle. */
.entry-content .is-style-moola-pullquote {
	background: linear-gradient(90deg, var(--moola-blush), transparent 65%);
	border-radius: 0 var(--moola-radius) var(--moola-radius) 0;
	padding: 1.25rem 1.5rem;
}

/* Zebra table: keep the shipped striping. A sticky thead th was tried here
   and reverted 2026-08-21 — position:sticky on <th> inside an overflow-x:auto
   wrapper is a known cross-browser layout bug: the sticky cell's box stops
   contributing correctly to row-height flow, and the header row visibly
   overlaps the first tbody row instead of floating above it. Confirmed live
   via direct getBoundingClientRect() measurement (thead_th and the first
   tbody row's rects overlapped), and confirmed the fix by toggling the cell
   back to position:static, which closed the gap to 0px exactly. Not worth
   re-attempting with a fragile workaround; these tables aren't long enough
   to need a sticky header badly enough to risk this. */

.entry-content .wp-block-table {
	overflow-x: auto;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

/* Inline CTA callout — the cross-link between cluster posts. */
.moola-callout,
.entry-content .is-style-moola-callout {
	position: relative;
	margin-block: var(--wp--preset--spacing--large, 2.5rem);
	padding: 1.15rem 1.25rem 1.15rem 1.5rem;
	background: var(--moola-blush);
	border-left: 3px solid var(--moola-brass);
	border-radius: 0 var(--moola-radius) var(--moola-radius) 0;
}

/* =========================================================================
   7.5. EXPLAINER FURNITURE
   The four components a news explainer needs and an evergreen review doesn't:
   the dated byline stamp, the summary box that opens the piece, the update
   log that closes it, and the source list under that. All four are plain
   patterns or shortcodes — no block variations, no editor JS — so every rule
   here hangs off a class name that is genuinely emitted (checked against
   patterns/explainer-summary.php, patterns/update-log.php,
   patterns/sources-list.php and includes/Content/PostDates.php).
   ========================================================================= */

/* ---- Byline stamp: parts/post-meta.html + PostDates.php ---- */
.moola-post-meta {
	column-gap: 0.75rem;
	row-gap: 0.25rem;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	color: var(--moola-indigo);
}

.moola-post-meta p {
	margin-block: 0;
}

.moola-dates {
	display: inline-flex;
	flex-wrap: wrap;
	column-gap: 0.75rem;
}

/* The label is the whole point of the stamp — "Updated" is what distinguishes
   the second date from the first — so it stays visible rather than becoming a
   screen-reader-only string. 6.45:1 brass-on-cream. */
.moola-dates__label {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--moola-brass);
}

.moola-dates__updated::before {
	content: "·";
	margin-right: 0.75rem;
	color: var(--moola-border);
}

/* ---- Summary box ---- */
/* Deliberately not the callout's left rule (§7): a reader scanning a post
   should be able to tell the piece's own summary from an inline cross-link
   at a glance, so this one is a full plate with a brass rule along the top. */
.moola-summary {
	margin-block: var(--wp--preset--spacing--large, 2.5rem);
	padding: var(--wp--preset--spacing--medium, 1.5rem);
	background: var(--moola-blush);
	border: 1px solid var(--moola-border);
	border-top: 3px solid var(--moola-brass);
	border-radius: var(--moola-radius);
}

.moola-summary > :first-child {
	margin-top: 0;
}

.moola-summary > :last-child {
	margin-bottom: 0;
}

/* Sub-labels read as labels, not as article headings: body face, small,
   lettered out. They stay real <h3>s so the TOC and screen-reader heading
   list still see the box's structure. A single class (0,0,1,0) out-specifies
   theme.json's element selector for headings (0,0,0,1), so this holds
   whichever order the two stylesheets print in. */
.moola-summary__label {
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--moola-brass);
}

/* ---- Update log ---- */
.moola-update-log {
	margin-block: var(--wp--preset--spacing--large, 2.5rem);
	padding: 0.85rem 1.1rem;
	background: var(--moola-surface);
	border: 1px solid var(--moola-border);
	border-radius: var(--moola-radius);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.moola-update-log > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--moola-ink);
}

.moola-update-log > summary:focus-visible {
	outline: 2px solid var(--moola-brass);
	outline-offset: 3px;
	border-radius: 2px;
}

.moola-update-log ul:last-child {
	margin-bottom: 0;
}

/* ---- Sources ---- */
.moola-sources {
	color: var(--moola-indigo); /* 6.45:1 on cream */
}

.moola-sources li + li {
	margin-top: 0.5rem;
}

/* Primary/secondary is carried by the word in the pill, not by its colour —
   the tint is a second, redundant channel, never the only one. */
.moola-sources__tag {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.45rem;
	background: var(--moola-cream);
	border: 1px solid var(--moola-border);
	border-radius: 999px;
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.moola-sources__tag--primary {
	color: var(--moola-green);
	border-color: color-mix(in srgb, var(--moola-green) 35%, transparent);
}

/* =========================================================================
   7.6. RATE CALCULATOR
   The one thing in a news explainer that an answer engine cannot lift and
   restate: the reader's own numbers. Ships hidden and is revealed by
   assets/js/calc-rate.js, so a reader without JavaScript sees the post's
   static example table rather than a form that does nothing.
   ========================================================================= */

.moola-calc {
	margin-block: var(--wp--preset--spacing--large, 2.5rem);
	padding: var(--wp--preset--spacing--medium, 1.5rem);
	background: var(--moola-surface);
	border: 1px solid var(--moola-border);
	border-radius: var(--moola-radius);
}

.moola-calc__intro,
.moola-calc__note {
	font-size: 0.8125rem;
	color: var(--moola-indigo); /* 6.45:1 on cream, 5.9:1 on surface */
}

.moola-calc__intro {
	margin-top: 0;
}

.moola-calc__note {
	margin-bottom: 0;
}

.moola-calc__group {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.moola-calc__group > legend {
	padding: 0;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--moola-brass);
}

.moola-calc__field {
	display: block;
	margin-top: 0.75rem;
}

.moola-calc__field > span {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.875rem;
}

/* Inputs are typed into on a phone, so 16px minimum: anything smaller
   makes iOS Safari zoom the page on focus, which reads as a bug. */
.moola-calc__field input {
	width: 100%;
	padding: 0.5rem 0.65rem;
	background: var(--moola-cream);
	border: 1px solid var(--moola-border);
	border-radius: 0.375rem;
	font: inherit;
	font-size: 1rem;
}

.moola-calc__field input:focus-visible {
	outline: 2px solid var(--moola-brass);
	outline-offset: 1px;
	border-color: var(--moola-brass);
}

/* Results update as you type; the button is the explicit path for
   keyboard and screen-reader users (and makes Enter work). calc-rate.js
   cancels the submit, so it never reloads the page. */
.moola-calc__submit {
	margin-top: 1rem;
	padding: 0.55rem 1.1rem;
	border: 0;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.moola-calc__submit:focus-visible {
	outline: 2px solid var(--moola-brass);
	outline-offset: 2px;
}

.moola-calc__output:not(:empty) {
	margin-block: 1rem;
	border-top: 1px solid var(--moola-border);
}

.moola-calc__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.15rem 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--moola-border);
}

.moola-calc__row-label {
	font-size: 0.9375rem;
}

.moola-calc__row-value {
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.moola-calc__row-note {
	grid-column: 1 / -1;
	font-size: 0.75rem;
	color: var(--moola-indigo);
}

.moola-calc__empty {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--moola-indigo);
}

@media (min-width: 40rem) {
	.moola-calc__group {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1rem;
	}

	.moola-calc__group > legend {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   7.7. WINNERS / LOSERS TABLE
   Direction of effect is carried by a glyph and a word first, colour third.
   A reader printing in greyscale, or one who cannot separate red from green,
   loses nothing.
   ========================================================================= */

.moola-winners__mark {
	display: inline-block;
	white-space: nowrap;
	font-weight: 600;
	font-size: 0.875rem;
}

.moola-winners__mark--win { color: var(--moola-green); }
.moola-winners__mark--loss { color: #a03a2a; } /* 5.42:1 on cream */
.moola-winners__mark--flat { color: var(--moola-indigo); }
.moola-winners__mark--unclear { color: var(--moola-brass); }

/* On a narrow screen the table scrolls sideways (§7 sets overflow-x on
   .wp-block-table). Pinning the first column keeps the row's subject in
   view while the reader scrolls to the reason — position:sticky on a <td>
   is safe here, unlike the sticky <th> in a thead that was reverted in §7,
   because a row cell is not doing double duty as a layout box for the
   header row. */
@media (max-width: 48rem) {
	.moola-winners table th[scope="row"],
	.moola-winners tbody tr > *:first-child {
		position: sticky;
		left: 0;
		background: var(--moola-cream);
	}
}

/* =========================================================================
   7.8. CSS BAR CHART
   The table is the chart. Each row carries --value (0-100) and the bar is
   drawn from it, so the numbers stay readable to a screen reader, a
   crawler, and a printer. Colours come from theme.json's data-viz tokens.
   ========================================================================= */

.moola-chart {
	margin-block: var(--wp--preset--spacing--large, 2.5rem);
	overflow-x: auto;
}

.moola-chart table {
	width: 100%;
	border-collapse: collapse;
}

.moola-chart caption {
	margin-bottom: 0.75rem;
	text-align: left;
	font-size: 0.8125rem;
	color: var(--moola-indigo);
}

.moola-chart thead th {
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--wp--custom--moolabyte--chart--grid, #e4dfd6);
	text-align: left;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--moola-indigo);
}

.moola-chart tbody th[scope="row"] {
	width: 35%;
	padding: 0.55rem 0.75rem 0.55rem 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: 0.875rem;
	font-weight: 400;
	vertical-align: middle;
}

.moola-chart tbody td {
	padding: 0.55rem 0;
	vertical-align: middle;
}

.moola-chart__bar {
	display: inline-block;
	width: calc(var(--value, 0) * 1%);
	max-width: calc(100% - 3.5rem);
	height: 0.85rem;
	margin-right: 0.5rem;
	background: var(--wp--custom--moolabyte--chart--series, #0f7a4a);
	border-radius: 2px;
	vertical-align: middle;
}

.moola-chart tr.is-highlight .moola-chart__bar {
	background: var(--wp--custom--moolabyte--chart--highlight, #8a6220);
}

.moola-chart tr.is-negative .moola-chart__bar {
	background: var(--wp--custom--moolabyte--chart--negative, #a03a2a);
}

.moola-chart tr.is-comparison .moola-chart__bar {
	background: var(--wp--custom--moolabyte--chart--comparison, #5b5a72);
}

.moola-chart__figure {
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.moola-chart__bar {
			animation: moola-chart-grow var(--moola-dur-slow) var(--moola-ease-soft) both;
			animation-timeline: view();
			animation-range: entry 10% cover 25%;
		}

		@keyframes moola-chart-grow {
			from { transform: scaleX(0); }
			to { transform: scaleX(1); }
		}
	}
}

.moola-chart__bar {
	transform-origin: left center;
}

/* =========================================================================
   8. TABLE OF CONTENTS
   The TOC is already cached server-side (includes/Content/TableOfContents.php),
   which renders <nav class="moolabyte-toc"> — matching that real class name,
   not a "moola-toc" that was never actually emitted anywhere. Sticky within
   the content column on wide screens; a native <details>/<summary> makes it
   collapsible everywhere, including mobile, with zero JavaScript.
   A true side-rail placement (TOC beside the article, not just pinned above
   it) would need templates/single.html restructured into a two-column
   layout — deferred; this is a sticky-in-column improvement, not that.
   ========================================================================= */

.moolabyte-toc {
	background: var(--moola-surface);
	border: 1px solid var(--moola-border);
	border-radius: var(--moola-radius);
	padding: 1rem 1.25rem;
	font-size: 0.9375rem;
}

.moolabyte-toc__title {
	cursor: pointer;
	list-style: none;
}

.moolabyte-toc__title::-webkit-details-marker {
	display: none;
}

.moolabyte-toc__title::after {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.5em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.15em);
	transition: transform var(--moola-dur-tap) var(--moola-ease-out);
}

.moolabyte-toc[open] .moolabyte-toc__title::after {
	transform: rotate(-135deg) translateY(0.1em);
}

.moolabyte-toc ul {
	margin-top: 0.5rem;
	list-style: none;
	padding-left: 0;
}

@media (min-width: 1100px) {
	.moolabyte-toc {
		position: sticky;
		top: 5.5rem; /* clears the condensed sticky header */
		max-height: calc(100vh - 7rem);
		overflow-y: auto;
	}
}

.moolabyte-toc a {
	display: block;
	padding: 0.28rem 0 0.28rem 0.75rem;
	border-left: 2px solid transparent;
	color: var(--moola-indigo);
	text-decoration: none;
	transition:
		border-color var(--moola-dur-tap) var(--moola-ease-out),
		color var(--moola-dur-tap) var(--moola-ease-out),
		padding-left var(--moola-dur) var(--moola-ease-soft);
}

.moolabyte-toc a:hover,
.moolabyte-toc a:focus-visible {
	color: var(--moola-ink);
	border-left-color: var(--moola-brass);
	padding-left: 1rem;
}

/* Active section, matching the Investopedia/TIME "highlight where you are"
   pattern (see UI-UX-MASTER-PLAN.md §A). Set by the IntersectionObserver in
   assets/js/moola-motion.js — deliberately JS, not animation-timeline:
   view(), because Firefox still ships scroll-driven CSS animations behind
   a pref (as of Jan 2026) while IntersectionObserver has near-universal
   support. No JS present? .is-current never appears; the link list above
   still works with no active state. */
.moolabyte-toc a.is-current {
	color: var(--moola-ink);
	border-left-color: var(--moola-brass);
	font-weight: 600;
}

/* Anchor targets must clear the sticky header. */
.entry-content :is(h2, h3, h4)[id] {
	scroll-margin-top: 5rem;
}

html {
	scroll-behavior: smooth;
}

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

/* =========================================================================
   8.5. ARTICLE LAYOUT — TOC side rail
   The TOC (rendered separately via the [moolabyte_toc] shortcode — see
   includes/Content/TableOfContents.php — specifically so it isn't stuck
   inside the_content's output string) sits beside the article on wide
   screens instead of just sticky-above it. Below 1100px it's a normal
   stacked block — TOC first, then the article — matching the original
   sticky-in-column behavior exactly, no separate mobile CSS needed.

   .moola-article-layout is deliberately given no theme.json "layout" type
   in the template (see templates/single.html) — a constrained/flow layout
   would fight the custom grid here. wp:post-content keeps its own inner
   constrained layout regardless of which column width it ends up in, so
   the article text still centers to the 45rem measure inside whichever
   column width the grid gives it — no extra CSS needed for that part.
   ========================================================================= */

@media (min-width: 1100px) {
	.moola-article-layout {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--large, 2.5rem);
		align-items: start;
	}

	/* No TOC (fewer than TableOfContents::MIN_HEADINGS headings): without
	   this, the article auto-places into the 260px rail column. */
	.moola-article-layout:not(:has(.moolabyte-toc)) {
		display: block;
	}
}

/* =========================================================================
   8.6. NEXT POST MODULE
   Rendered by the [moolabyte_next_post] shortcode (see
   includes/Content/NextPost.php) at the end of every single post — lifts
   pages/session and gives core's speculation-rules prefetch a concrete
   link to target. Text-only by design: most posts have no real featured
   image yet (see UI-UX-SYSTEM.md's featured-image note), so the card
   leans on the same typographic confidence as the generated covers
   instead of reserving space for an image that usually isn't there.
   ========================================================================= */

.moolabyte-next-post {
	margin-block: var(--wp--preset--spacing--large, 2.5rem);
}

.moolabyte-next-post__link {
	display: block;
	background: var(--moola-surface);
	border: 1px solid var(--moola-border);
	border-radius: var(--moola-radius);
	padding: 1.25rem 1.5rem;
	text-decoration: none;
	transition:
		transform var(--moola-dur) var(--moola-ease-soft),
		box-shadow var(--moola-dur) var(--moola-ease-soft),
		border-color var(--moola-dur) var(--moola-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
	.moolabyte-next-post__link:hover {
		transform: translateY(-2px);
		border-color: var(--moola-brass);
		box-shadow: var(--moola-lift-2);
	}
}

.moolabyte-next-post__link:focus-visible {
	border-color: var(--moola-brass);
	box-shadow: var(--moola-lift-2);
}

.moolabyte-next-post__eyebrow {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--moola-indigo); /* 5.71:1 on surface — verified AA, same pairing as card dates */
	margin-bottom: 0.35rem;
}

.moolabyte-next-post__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	color: var(--moola-ink);
	line-height: 1.3;
	text-wrap: balance;
}

/* =========================================================================
   9. AD SLOTS
   Space is reserved in CSS before any ad script runs. Google's own guidance
   is that reserving space with min-height on the container is the only
   reliable CLS fix; min-height (not height) so a taller creative can still
   fill without being cropped.
   ========================================================================= */

.moola-ad {
	display: block;
	margin-inline: auto;
	margin-block: var(--wp--preset--spacing--large, 2.5rem);
	contain: layout;
	text-align: center;
	background: var(--moola-surface);
	border-radius: 0.5rem;
}

/* Label the slot. Required by AdSense policy in spirit, and it stops an
   unfilled slot from reading as a broken layout. */
.moola-ad::before {
	content: "Advertisement";
	display: block;
	padding-top: 0.4rem;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--moola-indigo);
}

.moola-ad--inline { min-height: 280px; } /* mobile in-content: 300x250 + label */
.moola-ad--rail   { min-height: 620px; } /* desktop sidebar: 300x600 */
.moola-ad--foot   { min-height: 120px; }

@media (min-width: 782px) {
	.moola-ad--inline { min-height: 130px; } /* desktop leaderboards run shorter */
}

/* An anchor/sticky unit is fixed-position and does not itself shift layout,
   but it must never sit on top of the last line of the article. */
body.single .wp-site-blocks {
	padding-bottom: env(safe-area-inset-bottom, 0);
}

body.moola-has-anchor-ad .wp-site-blocks > footer {
	padding-bottom: 90px;
}

/* =========================================================================
   10. DARK BAND / FOOTER
   The only place the site goes dark. Uses --moola-deep, never --moola-ink,
   and only the *-lit tokens for text — moola-indigo on ink is 2.82:1 and
   fails AA, which is exactly the trap a dark footer walks into.
   ========================================================================= */

.moola-band-deep,
.wp-site-blocks > footer {
	background: var(--moola-deep);
	color: var(--moola-cream);
	border-top: 3px solid var(--moola-brass);
}

.moola-band-deep :is(h1, h2, h3, h4, p, li),
.wp-site-blocks > footer :is(h1, h2, h3, h4, p, li) {
	color: var(--moola-cream);
}

.moola-band-deep a,
.wp-site-blocks > footer a {
	color: var(--wp--preset--color--moola-fern-lit);
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--moola-fern-lit) 45%, transparent);
	text-underline-offset: 0.18em;
}

.moola-band-deep a:hover,
.wp-site-blocks > footer a:hover {
	color: var(--wp--preset--color--moola-brass-lit);
}

.moola-band-deep .moola-eyebrow,
.wp-site-blocks > footer .moola-eyebrow {
	color: var(--wp--preset--color--moola-brass-lit);
}

.wp-site-blocks > footer .moola-fineprint {
	color: var(--wp--preset--color--moola-mist);
	font-size: 0.8125rem;
}

/* =========================================================================
   11. PAGE-TO-PAGE TRANSITIONS
   Cross-document view transitions: one at-rule, no router, no JavaScript.
   Chromium 126+ and Safari support it; Firefox ignores it and navigates
   normally. Header and footer are named so they hold still while the
   article content crossfades — the page feels continuous instead of blinking.
   ========================================================================= */

@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
	::view-transition-group(root) {
		animation-duration: var(--moola-dur-page);
		animation-timing-function: var(--moola-ease-out);
	}

	.wp-site-blocks > header { view-transition-name: moola-header; }
	.wp-site-blocks > footer { view-transition-name: moola-footer; }
}

/* =========================================================================
   11.5. COMMENTS
   The one visible piece of the page that was still entirely WordPress
   core's own default styling — a real gap, not a style-nitpick, since
   the comment form (parts/comments.html, core/post-comments-form) is what
   every visitor currently sees at the bottom of every post: this site has
   zero comments yet, so the form is the only part of this block anyone
   has actually looked at so far. Restyles inputs/textarea/submit to match
   the rest of the site's form treatment (search field, buttons) rather
   than leaving raw browser/WP defaults; the comment-list rules below are
   for whenever real comments exist.
   ========================================================================= */

.wp-block-comments,
.wp-block-post-comments-form {
	font-family: var(--wp--preset--font-family--body, inherit);
}

.comments-title,
.comment-reply-title {
	font-family: var(--wp--preset--font-family--heading, inherit);
}

/* The "required field" asterisk — real bug, caught by pa11y, not this
   theme's own color: Kadence's own comments.min.css (a *separate*
   stylesheet from kadence-global, so it isn't ordered by the dependency
   chain the rest of this file relies on) sets ".comment-form .required"
   to a red-orange at ~4.01:1 on cream, under the 4.5:1 AA threshold.
   That selector has the exact same specificity as a plain two-class
   selector here (two classes each), so which one wins came down to
   load order, not intent — confirmed by checking matched rules directly
   in the browser, not assumed. Using #commentform (an ID) makes this
   selector unconditionally win regardless of what order the two
   stylesheets print in. Brass reads as an on-brand "note" color without
   the alarm-red styling WCAG guidance itself cautions against
   over-relying on for meaning anyway (the asterisk + field labels
   already carry the "required" signal). */
#commentform .required {
	color: var(--moola-brass);
}

/* Inputs: match the header search field's treatment, not WP's plain
   1px #949494 default. */
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea,
.wp-block-comments input:not([type="submit"]):not([type="checkbox"]),
.wp-block-comments textarea {
	border: 1px solid var(--moola-border);
	border-radius: 0.5rem;
	background: var(--moola-cream);
	color: var(--moola-ink);
	transition: border-color var(--moola-dur-tap) var(--moola-ease-out);
}

.wp-block-post-comments-form input:not([type="submit"]):focus-visible,
.wp-block-post-comments-form textarea:focus-visible,
.wp-block-comments input:not([type="submit"]):focus-visible,
.wp-block-comments textarea:focus-visible {
	outline: 2px solid var(--moola-brass);
	outline-offset: 1px;
	border-color: var(--moola-brass);
}

/* Submit: WP renders this as a plain <input type="submit">, not a Gutenberg
   button, so theme.json's button styling never reaches it — same green/
   cream/hover treatment as every other button on the site, applied by hand. */
.wp-block-post-comments-form input[type="submit"],
.wp-block-comments input[type="submit"] {
	background: var(--moola-green);
	color: var(--moola-cream);
	border: 0;
	border-radius: 0.375rem;
	padding: 0.6em 1.4em;
	font-weight: 600;
	transition:
		background-color var(--moola-dur-tap) var(--moola-ease-out),
		box-shadow var(--moola-dur) var(--moola-ease-soft);
}

.wp-block-post-comments-form input[type="submit"]:hover,
.wp-block-comments input[type="submit"]:hover {
	background: var(--moola-ink);
	box-shadow: var(--moola-lift-2);
}

/* Kadence's own "float-label" pattern (parts/comments.html renders it,
   but this class isn't defined anywhere in this child theme — it's
   parent-theme CSS) genuinely overlaps the label text on top of the
   field instead of floating it clear, confirmed live 2026-08-21 via
   document.elementFromPoint(): the <label> paints directly over the
   textarea's typing area and never moves on :focus (before/after
   getBoundingClientRect() were identical). A real visitor typing a
   comment would see "Comment *" sitting on top of what they type.
   Root cause not chased further — likely Kadence's transform offset
   assumes its own default textarea padding, which this file's own
   §11.5 input styling above changes.
   Three fix attempts before this one, each reverted after failing
   direct getBoundingClientRect() re-verification rather than trusting
   the CSSOM alone: (1) flex-direction:column-reverse on the wrapper —
   computed display:flex correctly but did not actually reorder the
   rendered boxes; (2) bottom:100% on the label — hit a genuine CSS
   over-constraint bug, Kadence's own rule *also* sets an explicit top
   (computed -29.4px), and per the CSS2.1 absolute-positioning
   resolution algorithm, when top/bottom/height are all non-auto the
   box is over-constrained and bottom is the one silently ignored, so
   Kadence's top kept winning; (3) top:0 + bottom:auto +
   translateY(-100%) — this won on position/top/bottom (confirmed via
   computed style), but Kadence's own `transform` declaration turned
   out to have higher specificity and kept winning independently
   (computed transform stayed Kadence's small translate matrix, not
   mine) — a *different* property losing to Kadence than the one that
   lost the previous round, i.e. this is Kadence fighting back
   property-by-property, not one clean override point. Rather than
   keep reverse-engineering Kadence's exact selector specificity,
   settled it with !important on every positioning property here —
   a justified, narrow use: this is a child theme overriding a parent
   theme's layered rule, not this theme fighting itself. */
.wp-block-post-comments-form .comment-form-float-label,
.wp-block-comments .comment-form-float-label {
	position: relative;
	margin-top: 1.5rem; /* room for the label now sitting above the field */
}

.wp-block-post-comments-form .float-label,
.wp-block-comments .float-label {
	position: absolute !important;
	top: 0 !important;
	bottom: auto !important;
	left: 0 !important;
	transform: translateY(-100%) translateY(-0.35rem) !important;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--moola-ink);
}

/* Comment list — dormant until real comments exist, styled the same day
   as the form rather than left for whenever that happens. */
.wp-block-comments .comment-author cite,
.wp-block-comments .comment-author .fn {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-style: normal;
	font-weight: 600;
}

.wp-block-comments .comment-meta,
.wp-block-comments .comment-meta a {
	color: var(--moola-indigo);
}

.wp-block-comments .comment-author .avatar {
	border-radius: 9999px;
}

.wp-block-comments .commentlist > .comment {
	border-top: 1px solid var(--moola-border);
	padding-top: var(--wp--preset--spacing--small, 1rem);
	margin-top: var(--wp--preset--spacing--small, 1rem);
}

.wp-block-comments .commentlist > .comment:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.wp-block-comments .reply a {
	color: var(--moola-brass);
	font-weight: 600;
}

/* =========================================================================
   12. FLOOR — focus, motion, print
   site.css already ships :focus-visible and prefers-reduced-motion guards.
   These only cover what this file adds.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-template > li,
	.wp-block-post-template .wp-block-post-title a,
	.wp-block-navigation .wp-block-navigation-item__content::after,
	.moolabyte-toc a {
		transition: none;
	}

	.wp-block-post-template > li:hover {
		transform: none;
	}
}

:where(.moolabyte-toc, .wp-block-post-template) a:focus-visible {
	outline: 2px solid var(--moola-brass);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Search field focus ring — real bug, found via a keyboard tab-order pass,
   not eyeballed: Kadence's own all.min.css ships
   `input[type=search]:focus { outline: 0; ... }`, specificity (0,0,2,1),
   which silently wins over site.css's global `:focus-visible { outline: ... }`
   (0,0,1,0) — so the header search field (and the search-page/404 search
   block, same markup, no distinguishing wrapper class) tabs to with zero
   visible focus indicator. Confirmed live: computed outline-style was
   literally "none". Same class of bug as the comment-form float-label fix
   above — a child theme overriding a parent theme's layered rule — so the
   fix is the same shape: out-specify Kadence's selector rather than fight
   load order. (0,0,3,1) beats Kadence's (0,0,2,1). */
input[type="search"].wp-block-search__input:focus-visible {
	outline: 2px solid var(--moola-brass);
	outline-offset: 1px;
	border-color: var(--moola-brass);
}

@media print {
	.wp-site-blocks > header,
	.moola-ad,
	.moolabyte-toc {
		display: none !important;
	}
}

/* ── Dataset pages (templates/page-dataset.html, patterns/dataset-page.php) ── */

.moola-dataset__facts-list {
	list-style: none;
	padding-left: 0;
}

.moola-dataset__facts-list li {
	padding-block: 0.3rem;
	border-bottom: 1px solid var(--moola-border);
}

.moola-dataset__download {
	margin-top: 1rem;
}

/* The citation is meant to be copied whole, so it wraps rather than
   scrolling sideways, and keeps a readable size. */
.moola-dataset__cite {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	padding: 1rem;
	background: var(--moola-surface);
	border-left: 3px solid var(--moola-brass);
	font-size: 0.9375rem;
}

/* ── Breadcrumbs ([moolabyte_breadcrumbs] → Rank Math) ── */

.rank-math-breadcrumb {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	color: var(--moola-indigo);
}

.rank-math-breadcrumb p {
	margin: 0;
}

.rank-math-breadcrumb a {
	color: inherit;
	text-decoration-color: var(--moola-border);
	text-underline-offset: 0.2em;
}

.rank-math-breadcrumb a:hover {
	color: var(--moola-green);
}

.rank-math-breadcrumb .separator {
	margin-inline: 0.35rem;
	color: inherit;
}