/*
Theme Name: Cognivale
Theme URI: https://cognivale.com
Author: Cognivale
Description: Editorial block theme for a Digital Adoption Platform consultancy. Direction A — "Technical Broadsheet". Text-first, no photography, LCP is always an H1.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cognivale
Tags: block-theme, editorial, accessibility-ready, full-site-editing
*/

/* ===================================================================
   1. THEME — three states
   theme.json emits the light palette as --wp--preset--color--*.
   Dark is defined twice: once for system preference (guarded so an
   explicit light choice wins) and once for the explicit toggle.
   =================================================================== */

/* Legacy auto-dark block removed: dark is now opt-in via the toggle only.
   Its :root:not([data-theme="light"]) selector (0,2,0) also outranked the
   light defaults (0,1,0), so it won regardless of source order. */

:root[data-theme="dark"] {
	--wp--preset--color--paper: #14110F;
	--wp--preset--color--surface: #1C1917;
	--wp--preset--color--surface-alt: #221E1B;
	--wp--preset--color--ink: #F2EFEA;
	--wp--preset--color--ink-muted: #A39C92;
	--wp--preset--color--rule: #332E2A;
	--wp--preset--color--accent: #D07A70;
	--wp--preset--color--accent-hover: #D67E74;
	--wp--preset--color--accent-wash: #2A1E1C;
}

:root {
	--cog-rule: 1px solid var(--wp--preset--color--rule);
	--cog-measure: 42rem;
	--cog-nav-h: 4.5rem;
	color-scheme: light dark;

	/* Buttons carry their own tokens rather than reusing --accent.
	   The accent has to serve two jobs with opposite requirements: link text
	   on the page ground, and a button *background* behind its own text. In
	   dark mode the accent is lightened for legible link text (#C4645A), which
	   left white button text at 3.84:1 — below AA, on the primary CTA. Split
	   into separate tokens so each can be tuned for its own contrast job. */
	--cog-btn-bg: var(--wp--preset--color--accent);
	--cog-btn-text: #FCFCFA;          /* 8.6:1 on #7C2D26 */
	--cog-btn-bg-hover: var(--wp--preset--color--accent-hover);
}

:root[data-theme="dark"] {
	--cog-btn-bg: #CB6E63;
	--cog-btn-text: #14110F;
	--cog-btn-bg-hover: #D9857B;
}

/* Applies to core buttons and the header CTA alike. */
.wp-block-button__link,
.wp-element-button,
.cog-cta {
	background-color: var(--cog-btn-bg) !important;
	color: var(--cog-btn-text) !important;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.cog-cta:hover {
	background-color: var(--cog-btn-bg-hover) !important;
}

/* Outline variant: accent text on the page ground, which already passes. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--ink);
}

html {
	/* Never 100vh anywhere — iOS Safari's collapsing toolbar overflows it. */
	min-height: 100dvh;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--cog-nav-h) + 1rem);
}

body {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	/* No overflow-x guard here: `clip` on body breaks position:sticky for
	   descendants (the header), because the nearest scroll ancestor becomes a
	   non-scrolling box. The drawer that used to overflow is now contained at
	   source, and wide content (tables, pre, diagrams) scrolls inside its own
	   container — so nothing needs clipping here. */
}

/* ===================================================================
   2. TYPOGRAPHY REFINEMENTS
   =================================================================== */

.entry-content > * + * { margin-block-start: 1.5rem; }
.entry-content h2 { margin-block-start: 3rem; }
.entry-content h3 { margin-block-start: 2rem; }

/* Optical sizing is the reason Source Serif was chosen; let it work. */
h1, h2, h3, h4 { font-optical-sizing: auto; }

.cog-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--ink-muted);
	margin-block-end: 1rem;
}

.cog-standfirst {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.45;
	color: var(--wp--preset--color--ink-muted);
	max-width: 36rem;
}

/* ===================================================================
   3. SKIP LINK + FOCUS
   =================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 1px;
}

/* ===================================================================
   4. HEADER + NAVIGATION
   =================================================================== */

.cog-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-block-end: var(--cog-rule);
	padding-block: 0.875rem;
	padding-inline: max(1.5rem, env(safe-area-inset-left));
}

.cog-nav__list {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.cog-nav__link {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	/* 44px minimum tap target (WCAG 2.5.8 / Apple HIG) */
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
}
.cog-nav__link:hover { color: var(--wp--preset--color--accent); }
.cog-nav__link[aria-current="page"] { color: var(--wp--preset--color--accent); }

.cog-nav__toggle {
	display: none;
	min-inline-size: 44px;
	min-block-size: 44px;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* --- Mobile drawer ------------------------------------------------ */
@media (max-width: 899px) {
	.cog-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }

	.cog-nav {
		position: fixed;
		inset: var(--cog-nav-h) 0 0 0;
		background: var(--wp--preset--color--paper);
		padding: 1.5rem max(1.5rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 220ms ease, visibility 220ms;
	}
	.cog-nav[data-open="true"] { transform: translateX(0); visibility: visible; }

	.cog-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.cog-nav__list > li { border-block-end: var(--cog-rule); }
	.cog-nav__link { padding-block: 1rem; font-size: var(--wp--preset--font-size--lg); }
}

/* ===================================================================
   5. PROOF STRIP — replaces the client logo wall
   Text credentials only. Vendor logos are banned (Phase 2 §1):
   individual certifications are not organisational partner status.
   =================================================================== */

.cog-proof {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-block: var(--cog-rule);
}

.cog-proof__item {
	padding: 2rem 1.5rem;
	border-inline-end: var(--cog-rule);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}
.cog-proof__item:last-child { border-inline-end: 0; }
.cog-proof__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--ink-muted);
	margin-block-end: 0.5rem;
}

@media (max-width: 599px) {
	.cog-proof { grid-template-columns: 1fr; }
	.cog-proof__item {
		border-inline-end: 0;
		border-block-end: var(--cog-rule);
		padding-block: 1.5rem;
	}
	.cog-proof__item:last-child { border-block-end: 0; }
}

/* ===================================================================
   6. TWO PRACTICES — WalkMe | Whatfix, visually identical weight.
   Asymmetry here would undo the co-equal decision, so the grid is
   locked to equal fractions rather than auto-sizing to content.
   =================================================================== */

.cog-practices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border: var(--cog-rule);
}
.cog-practices__col { padding: 2.5rem; }
.cog-practices__col + .cog-practices__col { border-inline-start: var(--cog-rule); }

@media (max-width: 899px) {
	.cog-practices { grid-template-columns: 1fr; }
	.cog-practices__col + .cog-practices__col {
		border-inline-start: 0;
		border-block-start: var(--cog-rule);
	}
}

/* ===================================================================
   7. COMPARISON TABLE -> STACKED CARDS
   A wide feature table is the worst mobile pattern there is. Below
   900px the same DOM restructures into one card per feature row —
   no horizontal scroll, no duplicated markup, so crawlers and LLMs
   extract identical content at every width.
   =================================================================== */

.cog-compare { inline-size: 100%; border-collapse: collapse; }
.cog-compare th, .cog-compare td {
	padding: 1rem;
	border-block-end: var(--cog-rule);
	text-align: start;
	vertical-align: top;
}
.cog-compare thead th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--ink-muted);
}

@media (max-width: 899px) {
	.cog-compare, .cog-compare tbody, .cog-compare tr, .cog-compare td { display: block; inline-size: 100%; }
	.cog-compare thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
	.cog-compare tr {
		border: var(--cog-rule);
		margin-block-end: 1rem;
		padding: 1rem;
	}
	.cog-compare td { border-block-end: 0; padding: 0.5rem 0; }
	.cog-compare td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--xs);
		text-transform: uppercase;
		letter-spacing: 0.09em;
		color: var(--wp--preset--color--ink-muted);
		margin-block-end: 0.25rem;
	}
}

/* ===================================================================
   8. ARCHITECTURE DIAGRAMS
   One SVG carries both layouts; the switch happens inside the SVG via
   its own <style>. No image swap, no second request.
   =================================================================== */

.cog-diagram {
	inline-size: 100%;
	block-size: auto;
	margin-block: 2.5rem;
	color: var(--wp--preset--color--accent);
}
.cog-diagram text { fill: var(--wp--preset--color--ink); font-size: 13px; }
.cog-diagram .cog-diagram__line { stroke: var(--wp--preset--color--rule); }

/* ===================================================================
   9. EVIDENCE / AT-A-GLANCE PANELS
   =================================================================== */

.cog-panel {
	border: var(--cog-rule);
	background: var(--wp--preset--color--surface-alt);
	padding: 1.75rem;
}
.cog-panel--accent {
	background: var(--wp--preset--color--accent-wash);
	border-inline-start: 2px solid var(--wp--preset--color--accent);
}

.cog-glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--wp--preset--color--rule); border: var(--cog-rule); }
.cog-glance__cell { background: var(--wp--preset--color--paper); padding: 1.5rem; }
@media (max-width: 699px) { .cog-glance { grid-template-columns: 1fr; } }

.cog-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-muted);
	padding-block: 1rem;
	border-block: var(--cog-rule);
}

/* ===================================================================
   10. FILTER BAR — progressive enhancement.
   Renders as real links so it works with JS disabled; the script only
   upgrades it to instant client-side filtering.
   =================================================================== */

.cog-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 2rem; }
.cog-filter__chip {
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.5rem 0.875rem;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	border: var(--cog-rule);
	border-radius: 2px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
}
.cog-filter__chip[aria-pressed="true"],
.cog-filter__chip.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #FCFCFA;
}

/* ===================================================================
   11. FORMS — 16px minimum prevents iOS Safari auto-zoom on focus.
   =================================================================== */

input, select, textarea {
	font-size: max(16px, 1rem);
	font-family: inherit;
	padding: 0.75rem;
	min-block-size: 44px;
	border: var(--cog-rule);
	border-radius: 2px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	inline-size: 100%;
}

/* ===================================================================
   12. FOOTER
   =================================================================== */

.cog-footer {
	border-block-start: var(--cog-rule);
	padding-block: 4rem 2rem;
	padding-inline: max(1.5rem, env(safe-area-inset-left));
	padding-block-end: calc(2rem + env(safe-area-inset-bottom));
	font-size: var(--wp--preset--font-size--sm);
}
.cog-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 899px) { .cog-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .cog-footer__grid { grid-template-columns: 1fr; } }

/* ===================================================================
   13. WIDE CONTENT GUARD
   Anything that can exceed the measure scrolls inside itself, never
   pushing the body sideways.
   =================================================================== */

.entry-content :where(pre, table:not(.cog-compare)) {
	overflow-x: auto;
	max-inline-size: 100%;
}

/* ===================================================================
   14. MOTION
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===================================================================
   15. PRINT — enterprise buyers circulate PDFs internally.
   =================================================================== */

@media print {
	.cog-header, .cog-nav, .cog-filter, .wp-block-button { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ===================================================================
   16. FRONT-PAGE HERO GRID
   WP's constrained layout centres content at contentSize, which put the
   hero's left edge ~300px inside the viewport while the wordmark sat at
   24px. In an editorial layout that misalignment reads as accidental
   rather than composed. The hero keeps its 42rem measure but hangs from
   the same left axis as the header.
   =================================================================== */

/* Core emits, in global styles:
     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       { max-width: <contentSize>; margin-left: auto !important; margin-right: auto !important; }

   Rather than fight that !important with a more specific override, remove
   the space it has to work with: pad the hero's right edge until its content
   box is exactly the measure. `margin: auto` then resolves to zero on both
   sides and the children sit flush against the left padding — same optical
   axis as the wordmark, no specificity battle, and it degrades on its own
   at narrow widths because max() clamps to the normal gutter. */

.cog-hero {
	max-width: 1280px;
	margin-inline: auto;
	/* Pin the left gutter to the header's, rather than inheriting the
	   doubled global padding that alignfull picks up from its ancestors. */
	padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
	padding-right: max(1.5rem, calc(100% - 1.5rem - 42rem)) !important;
}

/* ===================================================================
   17. SECTION SYSTEM
   The page was rendering as one 672px column of undifferentiated text
   because every element inherited the reading measure. Prose stays at
   42rem — that is correct for reading — but structural elements need
   the full grid, and sections need to be visually separable from each
   other. These are the components Phase 2 specified.
   =================================================================== */

/* --- Bands: alternating ground gives the page vertical rhythm ------ */
.cog-band {
	padding-block: clamp(4rem, 9vw, 7.5rem);
	border-block-start: var(--cog-rule);
}
.cog-band--alt { background: var(--wp--preset--color--surface-alt); }
.cog-band__inner { max-width: 1280px; margin-inline: auto; padding-inline: max(1.5rem, env(safe-area-inset-left)); }

/* Section headers hang left; prose beneath keeps its measure. */
.cog-band h2 { max-width: 24ch; margin-block-end: 1rem; }
.cog-band__lede { max-width: 46ch; color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--lg); line-height: 1.5; }

/* --- Column grids -------------------------------------------------- */
.cog-cols { display: grid; gap: 0; margin-block-start: 3.5rem; border-block-start: var(--cog-rule); }
.cog-cols--3 { grid-template-columns: repeat(3, 1fr); }
.cog-cols--4 { grid-template-columns: repeat(4, 1fr); }
.cog-cols--2 { grid-template-columns: repeat(2, 1fr); }

.cog-col {
	padding: 2.25rem 2rem 2.25rem 0;
	border-inline-end: var(--cog-rule);
}
.cog-col:last-child { border-inline-end: 0; }
.cog-col > * + * { margin-block-start: 0.875rem; }
.cog-col p { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--sm); line-height: 1.6; }
.cog-col h3 { font-size: var(--wp--preset--font-size--lg); margin: 0; }
.cog-cols--3 .cog-col,
.cog-cols--4 .cog-col { padding-inline-start: 2rem; }
.cog-cols--3 .cog-col:first-child,
.cog-cols--4 .cog-col:first-child { padding-inline-start: 0; }

@media (max-width: 899px) {
	.cog-cols--3, .cog-cols--4, .cog-cols--2 { grid-template-columns: 1fr; }
	.cog-col {
		border-inline-end: 0;
		border-block-end: var(--cog-rule);
		padding: 1.75rem 0;
	}
	.cog-cols--3 .cog-col, .cog-cols--4 .cog-col { padding-inline-start: 0; }
	.cog-col:last-child { border-block-end: 0; }
}

/* --- Step numerals: the ordinal carries the visual weight ---------- */
.cog-step__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.08em;
	display: block;
	margin-block-end: 0.75rem;
}

/* --- Figures: the numbers Phase 3 established, given presence ------ */
.cog-figures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: var(--cog-rule);
	margin-block-start: 3rem;
}
.cog-figure { padding: 2.5rem 2rem; border-inline-end: var(--cog-rule); }
.cog-figure:last-child { border-inline-end: 0; }
.cog-figure__value {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.03em;
	display: block;
	margin-block-end: 0.75rem;
}
.cog-figure__label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
	max-width: 26ch;
}
@media (max-width: 899px) {
	.cog-figures { grid-template-columns: 1fr; }
	.cog-figure { border-inline-end: 0; border-block-end: var(--cog-rule); padding: 1.75rem; }
	.cog-figure:last-child { border-block-end: 0; }
}

/* --- Practice split: must be side-by-side and visually equal ------- */
.cog-split { display: grid; grid-template-columns: 1fr 1fr; border: var(--cog-rule); margin-block-start: 3rem; }
.cog-split__col { padding: 2.5rem; }
.cog-split__col + .cog-split__col { border-inline-start: var(--cog-rule); }
.cog-split__col h3 {
	font-size: var(--wp--preset--font-size--2xl);
	margin: 0 0 1rem;
}
.cog-split__col p { color: var(--wp--preset--color--ink-muted); }
.cog-split__link {
	display: inline-block;
	margin-block-start: 1.25rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	border-block-end: 1px solid currentColor;
	padding-block-end: 2px;
}
@media (max-width: 899px) {
	.cog-split { grid-template-columns: 1fr; }
	.cog-split__col + .cog-split__col { border-inline-start: 0; border-block-start: var(--cog-rule); }
	.cog-split__col { padding: 2rem 1.5rem; }
}

/* --- Closing CTA band --------------------------------------------- */
.cog-cta-band { background: var(--wp--preset--color--accent-wash); border-block: var(--cog-rule); }
.cog-cta-band h2 { max-width: 20ch; }

/* --- Architecture diagram: the signature device -------------------- */
.cog-arch { margin-block-start: 3rem; inline-size: 100%; block-size: auto; }
.cog-arch .lyr { fill: none; stroke: var(--wp--preset--color--rule); stroke-width: 1; }
.cog-arch .dap { stroke: var(--wp--preset--color--accent); }
.cog-arch .lbl { fill: var(--wp--preset--color--ink); font-size: 13px; font-family: ui-sans-serif, Inter, sans-serif; }
.cog-arch .lbl-mut { fill: var(--wp--preset--color--ink-muted); font-size: 11px; font-family: ui-monospace, monospace; letter-spacing: 0.06em; }
.cog-arch .cnx { stroke: var(--wp--preset--color--accent); stroke-width: 1; stroke-dasharray: 3 3; }
@media (max-width: 700px) { .cog-arch .wide-only { display: none; } }

/* Four columns only survive above ~1200px; below that the measure collapses
   to about 25 characters, which is a column of broken words rather than a
   card. Step down to 2x2 first, then to a single column. */
@media (min-width: 900px) and (max-width: 1199px) {
	.cog-cols--4 { grid-template-columns: repeat(2, 1fr); }
	.cog-cols--4 .cog-col:nth-child(2n) { border-inline-end: 0; }
	.cog-cols--4 .cog-col:nth-child(-n+2) { border-block-end: var(--cog-rule); }
	.cog-cols--4 .cog-col:nth-child(odd) { padding-inline-start: 0; }
}
@media (max-width: 899px) {
	.cog-cols--4 .cog-col:nth-child(n) { border-inline-end: 0; border-block-end: var(--cog-rule); padding-inline-start: 0; }
	.cog-cols--4 .cog-col:last-child { border-block-end: 0; }
}

/* Give the diagram room to read as a diagram rather than a strip. */
.cog-arch { max-width: 1000px; }

/* The standfirst is narrower than the measure (36rem inside 42rem), so core's
   auto margins centre it and it reads as an accidental indent against the H1.
   Hang it from the same left edge as everything else in the hero. */
.cog-hero .cog-standfirst,
.cog-hero .has-sm-font-size { margin-left: 0 !important; margin-right: auto !important; }

/* Diagram on small screens.
   Phase 2 specified a simplified vertical layout inside the same SVG; until
   that exists, the honest interim is to keep it legible and let it scroll
   inside its own container rather than shrink it to an unreadable strip.
   The body still never scrolls sideways. */
.cog-arch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block-start: 3rem; }
.cog-arch-scroll .cog-arch { margin-block-start: 0; }
@media (max-width: 780px) {
	.cog-arch-scroll .cog-arch { min-width: 720px; }
	.cog-arch-scroll::after {
		content: "Scroll to see the full estate →";
		display: block;
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--xs);
		color: var(--wp--preset--color--ink-muted);
		padding-block-start: 0.75rem;
	}
}

/* ===================================================================
   18. MOBILE DRAWER — closed state must not extend the scroll area
   The slide-in used transform: translateX(100%), which parks the closed
   drawer one full viewport to the right. Transforms contribute to
   scrollable overflow, and because the drawer is position:fixed it clips
   against the initial containing block — so overflow-x on <body> never
   contained it, and the page carried a viewport-wide horizontal scroll on
   every mobile view. Clipping on <html> did fix it, but `clip` there also
   killed the sticky header.
   Fix at source: fade rather than slide. The closed drawer now occupies
   its own bounds, so nothing overflows and the header stays sticky.
   =================================================================== */
@media (max-width: 899px) {
	.cog-nav {
		transform: none;
		opacity: 0;
		pointer-events: none;
		transition: opacity 180ms ease, visibility 180ms;
	}
	.cog-nav[data-open="true"] {
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}
}

/* ===================================================================
   19. STICKY HEADER — containing block
   position:sticky travels only within its containing block. WP wraps each
   template part in a <div class="wp-block-template-part">, and that wrapper
   is exactly as tall as the header inside it — so the header had zero range
   and scrolled away with its parent on every page.
   display:contents removes the wrapper from the box tree, making
   .wp-site-blocks (full page height) the containing block instead.
   =================================================================== */
.wp-site-blocks > .wp-block-template-part { display: contents; }

/* ===================================================================
   20. COLOUR SYSTEM v2 — light default, multi-hue
   The single-accent dark palette read as flat. Three changes:
   light is now the default (dark stays available via the toggle), the
   accent expands into a four-hue functional set, and surfaces gain
   gradient and depth. Hues are assigned meaning — indigo = WalkMe,
   teal = Whatfix, amber = problem states, brick = brand/CTA — so the
   colour is doing navigational work rather than decoration.
   =================================================================== */

:root {
	--wp--preset--color--paper: #FBFAF7;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--surface-alt: #F4F1EA;
	--wp--preset--color--ink: #15120F;
	--wp--preset--color--ink-muted: #5A5349;
	--wp--preset--color--rule: #E2DDD2;

	--brand:    #B3402F;   /* brick — brand, CTA */
	--brand-dk: #8C2F22;
	--teal:     #0F766E;   /* Whatfix */
	--teal-dk:  #0B5B55;
	--indigo:   #4338CA;   /* WalkMe */
	--indigo-dk:#332BA0;
	--amber:    #B26206;   /* problem / attention */
	--amber-dk: #8A4B04;

	--wp--preset--color--accent: var(--brand);
	--wp--preset--color--accent-hover: var(--brand-dk);
	--wp--preset--color--accent-wash: #FBEFEC;

	--cog-btn-bg: var(--brand);
	--cog-btn-text: #FFFFFF;
	--cog-btn-bg-hover: var(--brand-dk);

	--shadow-sm: 0 1px 2px rgba(21,18,15,.05), 0 2px 8px rgba(21,18,15,.04);
	--shadow-md: 0 2px 6px rgba(21,18,15,.06), 0 12px 28px rgba(21,18,15,.08);
	--shadow-lg: 0 4px 12px rgba(21,18,15,.08), 0 24px 48px rgba(21,18,15,.12);
	color-scheme: light;
}

/* Dark is now opt-in only — it is no longer applied from system preference. */
:root[data-theme="dark"] {
	--wp--preset--color--paper: #14110F;
	--wp--preset--color--surface: #1C1917;
	--wp--preset--color--surface-alt: #221E1B;
	--wp--preset--color--ink: #F5F2EC;
	--wp--preset--color--ink-muted: #ADA599;
	--wp--preset--color--rule: #35302B;
	--brand: #E8836F; --brand-dk: #F09C8A;
	--teal: #5EC9BE; --indigo: #9A92F5; --amber: #E5A24D;
	--wp--preset--color--accent: var(--brand);
	--wp--preset--color--accent-wash: #2A1E1C;
	--cog-btn-bg: #E8836F; --cog-btn-text: #14110F; --cog-btn-bg-hover: #F09C8A;
	--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
	--shadow-md: 0 8px 24px rgba(0,0,0,.45);
	--shadow-lg: 0 24px 48px rgba(0,0,0,.5);
	color-scheme: dark;
}

/* --- Hero: gradient field ------------------------------------------ */
.cog-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.cog-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	block-size: 150%;
	z-index: -1;
	background:
		radial-gradient(60% 55% at 12% 18%, color-mix(in oklab, var(--brand) 22%, transparent) 0%, transparent 62%),
		radial-gradient(50% 50% at 82% 8%,  color-mix(in oklab, var(--indigo) 20%, transparent) 0%, transparent 60%),
		radial-gradient(55% 50% at 68% 72%, color-mix(in oklab, var(--teal) 16%, transparent) 0%, transparent 62%);
	filter: blur(8px);
	animation: cog-drift 22s ease-in-out infinite alternate;
}
@keyframes cog-drift {
	from { transform: translate3d(0,0,0) scale(1); }
	to   { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

/* Gradient rule under the hero, tying the hues together */
.cog-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3px;
	background: linear-gradient(90deg, var(--brand), var(--amber), var(--teal), var(--indigo));
}

/* --- Bands ---------------------------------------------------------- */
.cog-band--alt {
	background:
		linear-gradient(180deg, var(--wp--preset--color--surface-alt), color-mix(in oklab, var(--wp--preset--color--surface-alt) 70%, var(--wp--preset--color--paper)));
}
.cog-cta-band {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dk) 55%, #6E2418 100%);
	border-block: 0;
}
.cog-cta-band h2, .cog-cta-band .cog-band__lede { color: #FFF6F3; }
.cog-cta-band .cog-band__lede { opacity: .92; }
.cog-cta-band .cog-cta {
	background: #FFFFFF !important;
	color: var(--brand-dk) !important;
	box-shadow: var(--shadow-md);
}
.cog-cta-band .cog-cta:hover { background: #FFF6F3 !important; }

/* --- Cards: lift, colour rail, hover -------------------------------- */
.cog-col, .cog-split__col, .cog-figure {
	background: var(--wp--preset--color--surface);
	position: relative;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.cog-cols { gap: 1.25rem; border-block-start: 0; }
.cog-col {
	border: var(--cog-rule);
	border-radius: 10px;
	padding: 2rem 1.75rem !important;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.cog-col::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 4px;
	background: var(--rail, var(--brand));
}
.cog-col:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cog-col:nth-child(1) { --rail: var(--brand); }
.cog-col:nth-child(2) { --rail: var(--amber); }
.cog-col:nth-child(3) { --rail: var(--teal); }
.cog-col:nth-child(4) { --rail: var(--indigo); }
.cog-step__num { color: var(--rail, var(--brand)); font-weight: 600; font-size: 1rem; }

/* --- Practice split: hue-coded -------------------------------------- */
.cog-split { border: 0; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.cog-split__col {
	border: var(--cog-rule);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	border-block-start: 4px solid var(--rail);
}
.cog-split__col + .cog-split__col { border-inline-start: var(--cog-rule); }
.cog-split__col:nth-child(1) { --rail: var(--indigo); }
.cog-split__col:nth-child(2) { --rail: var(--teal); }
.cog-split__col:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cog-split__col h3 { color: var(--rail); }
.cog-split__link { color: var(--rail); }

/* --- Figures: gradient numerals ------------------------------------- */
.cog-figures { border: 0; gap: 1.25rem; }
.cog-figure {
	border: var(--cog-rule);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	border-inline-end: var(--cog-rule) !important;
}
.cog-figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cog-figure__value {
	background: linear-gradient(135deg, var(--brand), var(--amber));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cog-figure:nth-child(2) .cog-figure__value { background: linear-gradient(135deg, var(--teal), var(--indigo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cog-figure:nth-child(3) .cog-figure__value { background: linear-gradient(135deg, var(--indigo), var(--brand)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* --- Proof strip ---------------------------------------------------- */
.cog-proof {
	border: var(--cog-rule);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--shadow-md);
	margin-block-start: -3.5rem;
	position: relative;
	z-index: 2;
	overflow: hidden;
}
.cog-proof__item { padding: 1.75rem 1.5rem; }
.cog-proof__label { color: var(--brand); font-weight: 600; }

/* --- Icons ---------------------------------------------------------- */
.cog-icon { inline-size: 28px; block-size: 28px; display: block; margin-block-end: 1rem; color: var(--rail, var(--brand)); }

/* --- Scroll reveal -------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 620ms cubic-bezier(.16,1,.3,1), transform 620ms cubic-bezier(.16,1,.3,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.cog-hero::before { animation: none !important; }
	.cog-col:hover, .cog-split__col:hover, .cog-figure:hover { transform: none !important; }
}

/* ===================================================================
   21. INNER PAGES
   The ten prose pages were still flat text. Styling here rather than in
   each page's content, so all of them pick it up without their copy
   being touched.
   =================================================================== */

.cog-pagehead {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
	background:
		radial-gradient(70% 120% at 8% 0%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 60%),
		radial-gradient(50% 100% at 88% 10%, color-mix(in oklab, var(--indigo) 12%, transparent), transparent 60%);
	border-block-end: 1px solid var(--wp--preset--color--rule);
	margin-block-end: clamp(2.5rem, 5vw, 4rem);
}
.cog-pagehead::after {
	content: "";
	position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 3px;
	background: linear-gradient(90deg, var(--brand), var(--amber), var(--teal), var(--indigo));
}
.cog-pagehead h1 { max-width: 20ch; }

/* Eyebrow sits at the top of content on inner pages — make it a label. */
.cog-prose > .cog-eyebrow:first-child {
	display: inline-block;
	background: var(--wp--preset--color--accent-wash);
	color: var(--brand);
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	font-weight: 600;
	margin-block-end: 1.5rem;
}

/* H2 sections get a coloured marker so the page has scannable structure. */
.cog-prose h2 {
	position: relative;
	padding-block-start: 1.75rem;
	margin-block-start: 3.5rem;
	border-block-start: 1px solid var(--wp--preset--color--rule);
}
.cog-prose h2::before {
	content: "";
	position: absolute; inset-block-start: -1px; inset-inline-start: 0;
	inline-size: 56px; block-size: 3px;
	background: linear-gradient(90deg, var(--brand), var(--amber));
}

.cog-prose h3 { color: var(--brand); }

/* Lists with coloured markers */
.cog-prose ul { list-style: none; padding-inline-start: 0; }
.cog-prose ul > li { position: relative; padding-inline-start: 1.6rem; margin-block-end: 0.75rem; }
.cog-prose ul > li::before {
	content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em;
	inline-size: 7px; block-size: 7px; border-radius: 2px;
	background: var(--brand);
}

/* Comparison tables: coloured header, zebra, rounded frame */
.cog-compare {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	background: var(--wp--preset--color--surface);
}
.cog-compare thead th {
	background: linear-gradient(180deg, var(--wp--preset--color--surface-alt), var(--wp--preset--color--surface));
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	border-block-end: 2px solid var(--wp--preset--color--rule);
}
.cog-compare thead th:nth-child(2) { color: var(--indigo); }
.cog-compare thead th:nth-child(3) { color: var(--teal); }
.cog-compare tbody tr:nth-child(even) { background: color-mix(in oklab, var(--wp--preset--color--surface-alt) 55%, transparent); }
.cog-compare tbody tr:hover { background: var(--wp--preset--color--accent-wash); }

@media (max-width: 899px) {
	.cog-compare { border-radius: 0; border: 0; box-shadow: none; background: transparent; }
	.cog-compare tr {
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 10px;
		background: var(--wp--preset--color--surface);
		box-shadow: var(--shadow-sm);
		padding: 1.25rem;
	}
}

/* Emphasised standfirst on inner pages */
.cog-prose > .cog-standfirst { font-size: var(--wp--preset--font-size--xl); color: var(--wp--preset--color--ink); max-width: 34ch; }

.cog-prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Inner pages hang from the same left axis as the wordmark, matching the
   homepage hero. Same technique: pad the right edge until the content box
   equals the measure, so core's `margin: auto !important` resolves to zero
   rather than centring the column in the middle of a 1440px screen. */
@media (min-width: 900px) {
	/* .cog-prose intentionally left full-width: its children carry the
	   offset instead (see below), so percentages resolve against the
	   viewport rather than an already-narrowed container. */
	/* The pagehead's gradient must still span the viewport, so the band and
	   its inner alignment are separated. */
	.cog-pagehead { max-width: none; }
	.cog-pagehead h1 { max-width: 20ch; margin-inline: 0 auto !important; }
}
.cog-pagehead h1 { font-size: var(--wp--preset--font-size--3xl); }

/* The page title hangs left at every width, not only desktop — the ≥900px
   rule above left it centred on mobile, where the constrained parent plus a
   20ch max-width still leaves room to centre in. */
.cog-pagehead h1 { margin-inline: 0 auto !important; }

/* Pagehead background spans the viewport, but its text must sit on the same
   left axis as the prose below it. Centring the content inside a 1280 track
   via padding keeps the gradient full-bleed while aligning the title. */
.cog-pagehead {
	padding-inline: max(1.5rem, calc((100% - 1280px) / 2)) !important;
}
.cog-pagehead h1 {
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -0.025em;
}

/* Every direct child of the prose column starts on the same axis as the page
   title. Setting the offset per child rather than on the container avoids
   fighting core's constrained-layout auto margins, which resolve differently
   for block, inline-block (the eyebrow pill) and max-width'd elements — which
   is why the eyebrow, standfirst and title were landing at 24px, 66px and
   104px respectively. */
@media (min-width: 900px) {
	.cog-prose > * {
		margin-left: max(1.5rem, calc((100% - 1280px) / 2)) !important;
		margin-right: auto !important;
	}
	.cog-prose > .alignfull,
	.cog-prose > .cog-band,
	.cog-prose > .wp-block-group.alignfull {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Hero joins the same 1280-track axis as the header, bands and inner pages.
   Right padding still collapses the content box to the measure so core's
   auto margins resolve to zero and the text hangs left. */
.cog-hero {
	padding-left: max(1.5rem, calc((100% - 1280px) / 2)) !important;
	padding-right: max(1.5rem, calc(100% - max(1.5rem, calc((100% - 1280px) / 2)) - 42rem)) !important;
}