/* =============================================================================
   GC Commune — custom display serif, served locally from /assets/fonts/.
   Replaces Fraunces as the primary display face; Fraunces remains in the
   font-family stack as a CDN fallback while the local woff2 loads.
   Single weight / no variable axes — font-variation-settings rules elsewhere
   are silently ignored on this static face (intentional, no breakage).        */
@font-face {
	font-family: 'GC Commune';
	src: url('../fonts/gc-commune.woff2') format('woff2'),
	     url('../fonts/gc-commune.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* =============================================================================
   Sustainable Ply — Global Stylesheet
   Source of truth: theme.json auto-generates --wp--preset--* variables for
   colours, font-sizes, font-families, spacing. This file declares short-name
   :root aliases (e.g. --color-bg → var(--wp--preset--color--bg)) so other
   modular CSS files can use the shorter form without duplicating values.

   Modular CSS layering — global.css is the FIRST stylesheet enqueued after
   the Google Fonts CDN. typography.css, header.css, footer.css, buttons.css,
   cards.css, motion.css and blocks.css all declare sp-global as their only
   dependency and load in that order (see functions.php).

   Per plan 02-02 — keep this file lean: tokens, base reset, body smoothing,
   65ch reading-line cap, sp-divider, and the cross-cutting utility classes
   referenced by Wave-3 blocks (sp-cma-disclaimer, sp-missing-evidence,
   sp-block-empty, sp-logo-grayscale).
   ============================================================================= */

/* --------------------------------------------------------------------------- */
/* Token aliases — short names → theme.json preset vars                         */
/* --------------------------------------------------------------------------- */

:root {
	/* Colours — alias the WordPress preset variables so theme.json stays the
	   single source of truth for hex values. Renames forbidden; only additions. */
	--color-bg:          var(--wp--preset--color--bg);          /* #F7F7F1 */
	--color-surface:     var(--wp--preset--color--surface);     /* #EDE7DB */
	--color-accent:      var(--wp--preset--color--accent);      /* #5A6B7A deep slate — editorial accent on LIGHT bg */
	--color-accent-bright: var(--wp--preset--color--accent-bright); /* #FFEB85 — italic / eyebrow accent on DARK bg */
	--color-accent-tech: var(--wp--preset--color--accent-tech); /* #4A7A7C */
	--color-saffron:     var(--wp--preset--color--saffron);     /* #B8884A — single-use chip */
	--color-peach:       var(--wp--preset--color--peach);       /* #F4C9A8 — pastel peach, used on primary conversion CTA */
	--color-text:        var(--wp--preset--color--text);        /* #1C1A17 */
	--color-text-muted:  var(--wp--preset--color--text-muted);  /* #6B6560 */
	--color-border:      var(--wp--preset--color--border);      /* #D8D0C4 */
	--color-white:       var(--wp--preset--color--white);       /* #FFFFFF */
	--color-destructive: var(--wp--preset--color--destructive); /* #C0392B */

	/* Spacing aliases */
	--sp-xs:  var(--wp--preset--spacing--xs);   /*  4px */
	--sp-sm:  var(--wp--preset--spacing--sm);   /*  8px */
	--sp-md:  var(--wp--preset--spacing--md);   /* 16px */
	--sp-lg:  var(--wp--preset--spacing--lg);   /* 24px */
	--sp-xl:  var(--wp--preset--spacing--xl);   /* 32px */
	--sp-2xl: var(--wp--preset--spacing--2-xl);  /* 48px */
	--sp-3xl: var(--wp--preset--spacing--3-xl);  /* 64px */
	--sp-4xl: var(--wp--preset--spacing--4-xl);  /* 96px */

	/* WP kebab-cases digit-prefix spacing slugs (2xl → --2-xl) when it defines
	   the preset variables, but its own auto-generated layout CSS references
	   the un-dashed slug (var(--wp--preset--spacing--2xl)) — which then
	   resolves to nothing, so the block-gap between every sibling block on
	   every page silently collapses to 0. These three aliases restore the
	   un-dashed names so WP's layout CSS finds a value.                    */
	--wp--preset--spacing--2xl: var(--wp--preset--spacing--2-xl);
	--wp--preset--spacing--3xl: var(--wp--preset--spacing--3-xl);
	--wp--preset--spacing--4xl: var(--wp--preset--spacing--4-xl);

	/* Layout */
	--layout-content-size: 1200px;
	--layout-wide-size:    1600px;
	--layout-frame-pad:    clamp(16px, 3vw, 48px); /* outer cream margin around framed sections */

	/* Bento radius scale */
	--radius-lg: 20px; /* hero, large cards, section containers */
	--radius-md: 12px; /* buttons, smaller cards, inputs */
	--radius-sm: 8px;  /* chips, badges, micro-controls */
}

/* --------------------------------------------------------------------------- */
/* Base reset — minimal, additive to WP / browser defaults                     */
/* --------------------------------------------------------------------------- */

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

body {
	/* Cardboard texture colorized to the brand cream — a tinted gradient layer
	   sits over the texture PNG, recolouring the fibre into a warm cream tone
	   that matches --color-bg. Single background shorthand keeps it composable:
	   tint layer (top) → texture tile (middle) → solid bg-color (bottom).      */
	background:
		linear-gradient(rgba(247, 247, 241, 0.55), rgba(247, 247, 241, 0.55)),
		url("/wp-content/themes/sustainable-ply/images/texture-cardboard.avif") repeat fixed,
		var(--color-bg);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Inter OpenType features — stylistic alternates, tabular nums, no calt
	   ligatures (they soften the technical/engineering feel).                  */
	font-feature-settings: "ss01", "ss03", "cv11", "tnum";
	font-variation-settings: normal;
	position: relative;
}

/* Numbered prefixes and tabular data — always tabular numerals.               */
.sp-circular-network__num,
.sp-applications-grid__num,
.sp-card__num,
[data-numeric],
.has-tabular-nums {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* Fraunces variable display utility — used for H1/H2 with optical-size and
   softness axes. Italic variant available for chapter numerals, pull-quotes,
   and selective word-level italicization in headlines.                         */
.font-display,
.font-display-italic {
	font-family: var(--wp--preset--font-family--fraunces);
	font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
}

.font-display-italic {
	font-style: italic;
}

/* Chapter numeral utility — large background-layer mark behind sections.
   R4 Move T: numerals fade in from 0 to their final ~10% opacity as the
   parent section enters the viewport via sp-animate. Default at 0; the
   `.is-visible` state on the parent triggers the reveal.
   NB: hidden sitewide per client feedback 2026-06-29. Rules preserved in
   case they're re-enabled later. Markup stays in render.php so restoration
   is a one-line CSS toggle.                                                  */
/* Hide the ::before pseudo-numerals on audience-split (05),
   testimonial-row (06), and quote-cta (08). Client's rule: numerals stay
   only on the stacking-cards process-flow section (revised 2026-07-10). */
.sp-audience-split::before,
.sp-testimonial-row::before,
.sp-quote-cta::before {
	content: none !important;
	display: none !important;
}
.sp-chapter-numeral {
	display: none !important;
}
.sp-chapter-numeral {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 300;
	font-variation-settings: 'opsz' 144, 'SOFT' 70, 'wght' 300;
	font-size: clamp(160px, 22vw, 320px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--color-accent);
	opacity: 0;
	pointer-events: none;
	user-select: none;
	font-variant-numeric: lining-nums;
	transform: translateY(20px);
}

/* When the parent sp-animate section becomes visible, numeral fades in.       */
@media (prefers-reduced-motion: no-preference) {
	.sp-chapter-numeral {
		transition:
			opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
			transform 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
	}
	html.sp-anim-active .sp-animate.is-visible .sp-chapter-numeral,
	.sp-animate.is-visible .sp-chapter-numeral,
	.sp-hero-home .sp-chapter-numeral {
		opacity: 0.1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-chapter-numeral {
		opacity: 0.1;
		transform: none;
	}
}

/* Decorative Lucide SVG watermarks — replace chapter numerals on most homepage
   sections. The stacking-cards section (sp-spec-stack) keeps its numeral.
   Animation mirrors .sp-chapter-numeral: opacity 0 → 0.08 on scroll entry.   */
.sp-section-icon {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	transform: translateY(20px);
}

@media (prefers-reduced-motion: no-preference) {
	.sp-section-icon {
		transition:
			opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
			transform 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
	}
	html.sp-anim-active .sp-animate.is-visible .sp-section-icon,
	.sp-animate.is-visible .sp-section-icon {
		opacity: 0.08;
		transform: translateY(0);
	}
	/* Hero loads without a scroll trigger — fade in with hero copy delay. */
	.sp-hero-home .sp-section-icon {
		opacity: 0.08;
		transform: translateY(0);
		transition-delay: 1100ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-section-icon {
		opacity: 0.08;
		transform: none;
	}
}

/* Eyebrow label — small caps with em-dash prefix in accent.                    */
.sp-eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 var(--sp-md) 0;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
}

.sp-eyebrow::before {
	content: '——';
	letter-spacing: -0.1em;
	color: var(--color-accent);
	font-weight: 400;
}

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

/* --------------------------------------------------------------------------- */
/* Reading-line cap per D2-08 — body text never wider than 65ch.                */
/* --------------------------------------------------------------------------- */

.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
	max-width: 65ch;
}

/* --------------------------------------------------------------------------- */
/* Skip link — keyboard accessibility, hidden until focus.                      */
/* --------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-md);
	background: var(--color-text);
	color: var(--color-white);
	padding: var(--sp-sm) var(--sp-md);
	z-index: 9999;
}

.skip-link:focus,
.skip-link:focus-visible {
	top: var(--sp-md);
}

/* --------------------------------------------------------------------------- */
/* Hairline dividers — UI-SPEC §Hairline Border Tokens (lines 109-135).         */
/* --------------------------------------------------------------------------- */

.sp-divider {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin-block: var(--sp-2xl);
}

/* --------------------------------------------------------------------------- */
/* Cross-cutting utility classes referenced by Wave-3 blocks                    */
/* --------------------------------------------------------------------------- */

/* CMA disclaimer — used by embodied-carbon-comparison render.php (D2-11).      */
.sp-cma-disclaimer {
	font-size: var(--wp--preset--font-size--xs); /* 13px */
	color: var(--color-text-muted);
	line-height: 1.5;
	font-style: italic;
	border-top: 1px solid var(--color-border);
	padding-block-start: var(--sp-sm);
	margin-block-start: var(--sp-md);
}

/* Missing-evidence warning — used by sustainability-claim render.php when     */
/* `evidence` attribute is blank (UK CMA Green Claims Code).                    */
.sp-missing-evidence {
	font-size: var(--wp--preset--font-size--sm); /* 14px */
	color: var(--color-destructive);
	padding: var(--sp-md);
	border: 1px solid var(--color-destructive);
	font-style: italic;
}

/* Empty-state placeholder — used by circular-network, spec-table, and the     */
/* applications-grid empty branches.                                            */
.sp-block-empty {
	font-size: var(--wp--preset--font-size--sm); /* 14px */
	color: var(--color-text-muted);
	font-style: italic;
	padding: var(--sp-md);
	border: 1px dashed var(--color-border);
}

/* Grayscale logo treatment for logo-bar pattern (D2 named contributors).      */
.sp-logo-grayscale {
	filter: grayscale(100%);
	max-height: 48px;
	width: auto;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------- */
/* Block library tweaks that span multiple components                          */
/* --------------------------------------------------------------------------- */

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--color-border);
}