/* ============================================================================
   Mindward Collective — Design System
   ----------------------------------------------------------------------------
   Global design tokens, type scale, layout primitives, buttons, links and
   focus states. Loaded on every page.

   Brand tokens are fixed by BRAND-PRESERVATION-AUDIT.md §2–§4 and must not be
   substituted. Derived tints and shades are computed from them and are the only
   colours permitted beyond the core set.

   Every value a block or component needs is declared here as a custom property.
   Do not hard-code colours, spacing or type sizes into individual blocks — add
   a token here and reference it, so the system stays adjustable from one place.
   ========================================================================= */

:root {
	/* ---- Brand core (fixed — Audit §3) ------------------------------- */
	--mw-navy-900: #0B1F3B;
	--mw-navy-800: #142A4A;
	--mw-ink-900: #1C1F26;
	--mw-blue-500: #3A8DFF;
	--mw-slate-400: #A8B3C7;
	--mw-ice-50: #F7F9FC;
	--mw-white: #FFFFFF;

	/* ---- Derived tints and shades ------------------------------------ */
	--mw-navy-950: #06152B;
	--mw-navy-700: #1E3A63;
	--mw-blue-600: #2377EA;
	--mw-blue-700: #1C68D6; /* AA-safe brand blue for small text/links on light grounds */
	--mw-blue-300: #7FB8FF; /* AA-safe brand blue lifted for use on navy (8.01:1)      */
	--mw-blue-100: rgba(58, 141, 255, 0.10);
	--mw-blue-050: rgba(58, 141, 255, 0.05);
	--mw-slate-600: #5B6B85;

	/* Deep red for the "not this" glyph in the comparison band. Chosen over a
	   brighter alarm red so it still reads as a considered part of a navy-and-
	   blue palette rather than a system error: 6.2:1 on the ice card ground,
	   6.6:1 on white. Raise or lower it here — nothing else references it. */
	--mw-red-600: #B42318;

	/* ---- Semantic colour roles --------------------------------------- */
	--mw-bg-base: var(--mw-white);
	--mw-bg-alt: var(--mw-ice-50);
	--mw-bg-invert: var(--mw-navy-900);
	--mw-bg-invert-deep: var(--mw-navy-950);
	--mw-text-body: var(--mw-ink-900);
	--mw-text-heading: var(--mw-navy-900);
	--mw-text-muted: var(--mw-slate-600);
	--mw-text-on-invert: var(--mw-white);
	--mw-text-muted-on-invert: var(--mw-slate-400);
	--mw-accent: var(--mw-blue-500);
	--mw-link: var(--mw-blue-700);
	--mw-link-on-invert: var(--mw-blue-300);
	--mw-negative: var(--mw-red-600);

	/* ---- Lines, dots, shadows ---------------------------------------- */
	--mw-line: rgba(11, 31, 59, 0.08);
	--mw-line-strong: rgba(11, 31, 59, 0.22);
	--mw-dot-blue: rgba(58, 141, 255, 0.18);
	--mw-shadow-card: 0 2px 24px rgba(11, 31, 59, 0.06);
	--mw-shadow-lift: 0 1px 2px rgba(11, 31, 59, 0.04), 0 18px 48px rgba(11, 31, 59, 0.07);

	/* ---- Typography --------------------------------------------------- */
	--mw-font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mw-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--mw-weight-regular: 400;
	--mw-weight-medium: 500;
	--mw-weight-semibold: 600;
	--mw-weight-bold: 700;
	--mw-weight-black: 800;

	--mw-size-body: clamp(16px, 1vw + 12px, 17px);
	--mw-size-lead: clamp(18px, 1.4vw, 20px);
	--mw-size-small: 14px;
	--mw-size-display-xl: clamp(44px, 6.5vw, 88px);
	--mw-size-display-lg: clamp(34px, 4vw, 56px);
	--mw-size-display-md: clamp(26px, 2.6vw, 36px);
	--mw-size-eyebrow: clamp(13px, 1vw, 14px);

	--mw-leading-body: 1.65;
	--mw-leading-lead: 1.7;
	--mw-leading-display-xl: 1.04;
	--mw-leading-display-lg: 1.1;
	--mw-leading-display-md: 1.2;

	--mw-tracking-display-xl: -0.02em;
	--mw-tracking-display-lg: -0.015em;
	--mw-tracking-eyebrow: 0.14em;
	--mw-tracking-badge: 0.08em;

	/* ---- Measure and container widths --------------------------------- */
	--mw-w-content: 1200px;
	--mw-w-prose: 68ch;
	--mw-w-article: 66ch;
	--mw-w-narrow: 820px;
	--mw-w-wide: 900px;
	--mw-gutter: 24px;
	--mw-gutter-lg: 32px;

	/* ---- Section rhythm ------------------------------------------------ */
	/* Sized as HALF an intended boundary gap, because these are padding-block
	   and two neighbours always sum. At the old values a colour boundary cost
	   320-400px of empty ground. See components.css section 21. */
	--mw-section: clamp(72px, 8vw, 112px);
	--mw-section-tight: clamp(56px, 6vw, 88px);
	--mw-section-major: clamp(88px, 10vw, 144px);
	--mw-pad-card: clamp(24px, 3vw, 32px);
	--mw-pad-card-lg: clamp(32px, 4.5vw, 64px);
	--mw-gap: 24px;
	--mw-gap-lg: clamp(28px, 4vw, 64px);

	/* ---- Radii ---------------------------------------------------------- */
	--mw-radius-sm: 8px;
	--mw-radius-md: 12px;
	--mw-radius-lg: 16px;
	--mw-radius-xl: 20px;
	--mw-radius-2xl: 24px;
	--mw-radius-3xl: 28px;
	--mw-radius-pill: 999px;

	/* ---- Motion --------------------------------------------------------- */
	--mw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--mw-dur-fast: 0.2s;
	--mw-dur-base: 0.24s;
	--mw-dur-slow: 0.3s;
	--mw-dur-reveal: 0.5s;
	--mw-marquee-duration: 64s;

	/* ---- Layers --------------------------------------------------------- */
	--mw-z-nav-overlay: 90;
	--mw-z-header: 100;
	--mw-z-header-controls: 101;
	--mw-z-skip: 200;

	color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Base
   GeneratePress sets body typography from the Customizer. These rules pin the
   values the design system owns so the two cannot drift apart.
   ------------------------------------------------------------------------ */

/* GeneratePress sets border-box sizing, and so does GenerateBlocks. Declaring
   it here as well means the design system's padding and min-height values
   cannot be silently reinterpreted if either changes — a dependency worth not
   having, because it shifts section heights rather than producing an obvious
   break. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--mw-font-text);
	font-size: var(--mw-size-body);
	line-height: var(--mw-leading-body);
	color: var(--mw-text-body);
	background-color: var(--mw-bg-base);
}

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

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

/* ---------------------------------------------------------------------------
   Type scale
   ------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.mw-display-xl,
.mw-display-lg,
.mw-display-md {
	font-family: var(--mw-font-display);
	color: var(--mw-text-heading);
	text-wrap: balance;
}

.mw-display-xl {
	font-size: var(--mw-size-display-xl);
	font-weight: var(--mw-weight-black);
	line-height: var(--mw-leading-display-xl);
	letter-spacing: var(--mw-tracking-display-xl);
}

.mw-display-lg {
	font-size: var(--mw-size-display-lg);
	font-weight: var(--mw-weight-black);
	line-height: var(--mw-leading-display-lg);
	letter-spacing: var(--mw-tracking-display-lg);
}

.mw-display-md {
	font-size: var(--mw-size-display-md);
	font-weight: var(--mw-weight-bold);
	line-height: var(--mw-leading-display-md);
}

/* Eyebrow — short all-caps label above a heading.
   Always a paragraph or span, never a heading tag. See the heading-semantics
   rule in the project documentation. */
.mw-eyebrow {
	display: block;
	margin-bottom: 16px;
	font-family: var(--mw-font-display);
	font-size: var(--mw-size-eyebrow);
	font-weight: var(--mw-weight-bold);
	letter-spacing: var(--mw-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mw-link);
}

.mw-lead {
	font-size: var(--mw-size-lead);
	line-height: var(--mw-leading-lead);
}

.mw-small {
	font-size: var(--mw-size-small);
}

.mw-muted {
	color: var(--mw-text-muted);
}

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

/* Constrained measure for running copy. */
.mw-prose {
	max-width: var(--mw-w-prose);
}

.mw-prose p + p {
	margin-top: 1.2em;
}

.mw-center .mw-prose,
.mw-prose.mw-center-inline {
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------ */

.mw-container {
	max-width: var(--mw-w-content);
	margin-inline: auto;
	padding-inline: var(--mw-gutter);
}

@media (min-width: 768px) {
	.mw-container {
		padding-inline: var(--mw-gutter-lg);
	}
}

.mw-section {
	padding-block: var(--mw-section);
}

.mw-section-tight {
	padding-block: var(--mw-section-tight);
}

.mw-section-major {
	padding-block: var(--mw-section-major);
}

.mw-center {
	text-align: center;
}

.mw-align-left {
	text-align: left;
}

/* ---- Ground treatments ---- */

.mw-bg-ice {
	background-color: var(--mw-bg-alt);
}

.mw-bg-navy {
	background-color: var(--mw-bg-invert);
	color: var(--mw-text-on-invert);
}

.mw-bg-navy h1,
.mw-bg-navy h2,
.mw-bg-navy h3,
.mw-bg-navy h4,
.mw-bg-navy h5,
.mw-bg-navy h6,
.mw-bg-navy .mw-display-xl,
.mw-bg-navy .mw-display-lg,
.mw-bg-navy .mw-display-md {
	color: var(--mw-text-on-invert);
}

.mw-bg-navy .mw-eyebrow {
	color: var(--mw-link-on-invert);
}

.mw-bg-navy .mw-muted {
	color: var(--mw-text-muted-on-invert);
}

.mw-bg-dots {
	background-image: radial-gradient(var(--mw-dot-blue) 1.5px, transparent 1.5px);
	background-size: 26px 26px;
}

/* ---------------------------------------------------------------------------
   Links
   ------------------------------------------------------------------------ */

.mw-content-area a,
.entry-content a {
	color: var(--mw-link);
	text-decoration: none;
}

.mw-content-area a:hover,
.entry-content a:hover {
	text-decoration: underline;
}

.mw-bg-navy a {
	color: var(--mw-link-on-invert);
}

/* Arrow link — inline call to action with a nudging chevron. */
.mw-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	color: var(--mw-link);
	text-decoration: none;
}

.mw-arrow-link:hover {
	text-decoration: none;
}

.mw-arrow-link::after {
	content: "\2192"; /* → */
	display: inline-block;
	transition: transform var(--mw-dur-base) var(--mw-ease-out);
}

.mw-arrow-link:hover::after {
	transform: translateX(4px);
}

/* --mw-blue-700 is tuned for light grounds; on navy it measures 3.14:1.
   The lifted tint measures 8.01:1 and clears WCAG AA for normal text. */
.mw-bg-navy .mw-arrow-link {
	color: var(--mw-link-on-invert);
}

/* ---------------------------------------------------------------------------
   Buttons
   Applies to child-theme buttons, core button blocks carrying the class, and
   GenerateBlocks buttons that use the same class names.
   ------------------------------------------------------------------------ */

.mw-btn,
.wp-block-button.is-style-mw-primary .wp-block-button__link,
.wp-block-button.is-style-mw-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 13px 32px;
	border: 2px solid transparent;
	border-radius: var(--mw-radius-pill);
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	font-size: 19px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--mw-dur-base) var(--mw-ease-out),
		color var(--mw-dur-base) var(--mw-ease-out),
		border-color var(--mw-dur-base) var(--mw-ease-out),
		transform var(--mw-dur-base) var(--mw-ease-out);
}

.mw-btn:hover,
.mw-btn:focus,
.wp-block-button.is-style-mw-primary .wp-block-button__link:hover,
.wp-block-button.is-style-mw-outline .wp-block-button__link:hover {
	text-decoration: none;
}

.mw-btn-primary,
.wp-block-button.is-style-mw-primary .wp-block-button__link {
	background-color: var(--mw-accent);
	color: var(--mw-white);
}

.mw-btn-primary:hover,
.wp-block-button.is-style-mw-primary .wp-block-button__link:hover {
	background-color: var(--mw-blue-600);
	color: var(--mw-white);
	transform: translateY(-2px);
}

.mw-btn-outline,
.wp-block-button.is-style-mw-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--mw-navy-900);
	color: var(--mw-navy-900);
}

.mw-btn-outline:hover,
.wp-block-button.is-style-mw-outline .wp-block-button__link:hover {
	background-color: var(--mw-navy-900);
	color: var(--mw-white);
}

.mw-bg-navy .mw-btn-outline,
.mw-bg-navy .wp-block-button.is-style-mw-outline .wp-block-button__link {
	border-color: var(--mw-white);
	color: var(--mw-white);
}

.mw-bg-navy .mw-btn-outline:hover,
.mw-bg-navy .wp-block-button.is-style-mw-outline .wp-block-button__link:hover {
	background-color: var(--mw-white);
	color: var(--mw-navy-900);
}

/* ---------------------------------------------------------------------------
   Focus states and skip link
   GeneratePress ships a skip link; this restyles it rather than adding a second.
   ------------------------------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--mw-blue-500);
	outline-offset: 2px;
	border-radius: 4px;
}

.mw-bg-navy :focus-visible,
.site-header :focus-visible {
	outline-color: var(--mw-blue-300);
}

/* Base state for GeneratePress's skip link and any other screen-reader-only
   text. The parent theme supplies this too, but relying on it means the skip
   link becomes visible on the page if the parent's stylesheet is ever
   deregistered or load order changes — a visible artefact at the top of every
   page rather than a quiet failure. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal;
}

.screen-reader-text:focus,
a.screen-reader-text:focus {
	z-index: var(--mw-z-skip);
	background-color: var(--mw-navy-900);
	color: var(--mw-white);
	padding: 12px 20px;
	border-radius: 0 0 var(--mw-radius-md) 0;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-medium);
	clip: auto;
	clip-path: none;
	position: fixed;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	white-space: normal;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Utility: visually hidden but available to assistive technology
   ------------------------------------------------------------------------ */

.mw-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}