/**
 * CYBERTRON ALLOCATOR — CI FOUNDATION
 * v0.1.0
 *
 * Principles:
 * - Monochrome first.
 * - Warm off-white + black dominate.
 * - Red is a signal, not decoration.
 * - 45° geometry only where diagonals are used.
 * - CA Display = impact, CA Technical = system, Inter = reading.
 * - KISS: if removing it does not hurt meaning, remove it.
 */

:root {
	/* Core palette */
	--ca-black: #111111;
	--ca-signal-white: #F5F3ED;
	--ca-panel-white: #FBFAF7;
	--ca-section-alt: #ECE9E2;
	--ca-grey-200: #D8D5CD;
	--ca-grey-500: #8E8B84;
	--ca-grey-700: #56534E;
	--ca-red: #D71920;
	--ca-red-dark: #A91319;

	/* Optional contextual accents */
	--ca-autobot-blue: #2468A9;
	--ca-decepticon-purple: #6E3FA3;
	--ca-decepticon-teal: #25A6A6;

	/* Typography — fonts are intentionally not bundled. */
	--ca-font-display: "CA Display", "Eurostile Extended", "Arial Black", sans-serif;
	--ca-font-technical: "Eurostile Extended", "Eurostile", "Arial", sans-serif;
	--ca-font-text: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Layout */
	--ca-content-width: 1240px;
	--ca-reading-width: 760px;
	--ca-gutter: clamp(20px, 3vw, 48px);
	--ca-section-space: clamp(64px, 8vw, 128px);

	/* Consistent 45° cut dimensions: x and y are always identical. */
	--ca-cut-xs: 6px;
	--ca-cut-sm: 10px;
	--ca-cut-md: 16px;
	--ca-cut-lg: 28px;

	/* Borders and motion */
	--ca-border: 1px solid var(--ca-grey-200);
	--ca-transition: 160ms ease;
}

html {
	background: var(--ca-signal-white);
}

body {
	background: var(--ca-signal-white);
	color: var(--ca-black);
	font-family: var(--ca-font-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--ca-red);
	color: var(--ca-signal-white);
}

/* ---------- Typography roles ---------- */

.ca-display {
	font-family: var(--ca-font-display);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: 0;
	text-transform: uppercase;
}

.ca-technical {
	font-family: var(--ca-font-technical);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.ca-technical--light {
	font-family: var(--ca-font-technical);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.ca-text {
	font-family: var(--ca-font-text);
}

.ca-eyebrow {
	font-family: var(--ca-font-technical);
	font-size: clamp(0.72rem, 0.66rem + 0.2vw, 0.88rem);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ca-meta {
	color: var(--ca-grey-500);
	font-family: var(--ca-font-technical);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.045em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* ---------- Layout helpers ---------- */

.ca-container {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--ca-content-width);
	padding-inline: var(--ca-gutter);
	width: 100%;
}

.ca-reading-width {
	max-width: var(--ca-reading-width);
}

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

.ca-section--alt {
	background: var(--ca-section-alt);
}

.ca-section--dark {
	background: var(--ca-black);
	color: var(--ca-signal-white);
}

/* ---------- 45° geometry ---------- */

.ca-angle-panel {
	background: var(--ca-panel-white);
	clip-path: polygon(
		var(--ca-cut-md) 0,
		100% 0,
		100% calc(100% - var(--ca-cut-md)),
		calc(100% - var(--ca-cut-md)) 100%,
		0 100%,
		0 var(--ca-cut-md)
	);
}

.ca-angle-panel--right {
	clip-path: polygon(
		0 0,
		calc(100% - var(--ca-cut-lg)) 0,
		100% var(--ca-cut-lg),
		100% 100%,
		0 100%
	);
}

.ca-angle-panel--left {
	clip-path: polygon(
		var(--ca-cut-lg) 0,
		100% 0,
		100% 100%,
		0 100%,
		0 var(--ca-cut-lg)
	);
}

.ca-signal-slash {
	background: var(--ca-red);
	clip-path: polygon(var(--ca-cut-sm) 0, 100% 0, calc(100% - var(--ca-cut-sm)) 100%, 0 100%);
	display: inline-block;
	height: 1em;
	width: 0.32em;
}

/* ---------- Buttons ---------- */

.ca-btn,
.wp-block-button.ca-btn > .wp-block-button__link {
	align-items: center;
	border: 1px solid var(--ca-black);
	border-radius: 0;
	box-sizing: border-box;
	clip-path: polygon(
		0 0,
		calc(100% - var(--ca-cut-sm)) 0,
		100% var(--ca-cut-sm),
		100% calc(100% - var(--ca-cut-sm)),
		calc(100% - var(--ca-cut-sm)) 100%,
		0 100%
	);
	display: inline-flex;
	font-family: var(--ca-font-technical);
	font-size: 0.92rem;
	font-weight: 500;
	gap: 0.65em;
	justify-content: center;
	letter-spacing: 0.045em;
	line-height: 1;
	min-height: 46px;
	padding: 0.9rem 1.3rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--ca-transition), color var(--ca-transition), border-color var(--ca-transition);
}

.ca-btn--primary,
.wp-block-button.ca-btn--primary > .wp-block-button__link {
	background: var(--ca-red);
	border-color: var(--ca-red);
	color: var(--ca-signal-white);
}

.ca-btn--primary:hover,
.ca-btn--primary:focus-visible,
.wp-block-button.ca-btn--primary > .wp-block-button__link:hover,
.wp-block-button.ca-btn--primary > .wp-block-button__link:focus-visible {
	background: var(--ca-red-dark);
	border-color: var(--ca-red-dark);
	color: var(--ca-signal-white);
}

.ca-btn--secondary,
.wp-block-button.ca-btn--secondary > .wp-block-button__link {
	background: transparent;
	border-color: var(--ca-black);
	color: var(--ca-black);
}

.ca-btn--secondary:hover,
.ca-btn--secondary:focus-visible,
.wp-block-button.ca-btn--secondary > .wp-block-button__link:hover,
.wp-block-button.ca-btn--secondary > .wp-block-button__link:focus-visible {
	background: var(--ca-black);
	color: var(--ca-signal-white);
}

/* ---------- Status language ---------- */

.ca-status {
	align-items: center;
	display: inline-flex;
	font-family: var(--ca-font-display);
	font-weight: 700;
	gap: 0.45em;
	line-height: 1;
	text-transform: uppercase;
}

.ca-status::before {
	background: currentColor;
	content: "";
	display: block;
	height: 0.48em;
	width: 0.48em;
}

.ca-status--active {
	color: var(--ca-red);
}

.ca-status--complete {
	color: var(--ca-black);
}

.ca-status--inactive {
	color: var(--ca-grey-500);
}

.ca-section--dark .ca-status--complete {
	color: var(--ca-signal-white);
}

/* ---------- Cards ---------- */

.ca-card {
	background: var(--ca-panel-white);
	border: var(--ca-border);
	box-shadow: none;
	padding: clamp(20px, 2.4vw, 32px);
}

.ca-find-card {
	background: var(--ca-panel-white);
	border: var(--ca-border);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.ca-find-card__image {
	aspect-ratio: 4 / 3;
	background: var(--ca-section-alt);
	overflow: hidden;
}

.ca-find-card__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.ca-find-card__body {
	display: grid;
	gap: 0.75rem;
	padding: clamp(18px, 2vw, 26px);
}

/* ---------- Subtle technical grid ---------- */

.ca-grid-bg {
	background-color: var(--ca-signal-white);
	background-image:
		linear-gradient(rgba(17, 17, 17, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(17, 17, 17, 0.045) 1px, transparent 1px);
	background-size: 32px 32px;
}

/* ---------- Brand process / journey ---------- */

.ca-process-line {
	font-family: var(--ca-font-technical);
	font-weight: 500;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.ca-journey {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ca-journey__step {
	background: var(--ca-panel-white);
	border: var(--ca-border);
	padding: 18px;
}

.ca-journey__step.is-active {
	border-color: var(--ca-red);
}

/* ---------- Links and focus ---------- */

a {
	text-underline-offset: 0.16em;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--ca-red);
	outline-offset: 3px;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	:root {
		--ca-section-space: clamp(48px, 12vw, 72px);
		--ca-cut-lg: 20px;
	}

	.ca-journey {
		grid-template-columns: 1fr;
	}
}

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