/**
 * FIRST Metrology — shared presentation layer.
 *
 * Loaded on the front end AND inside the editor canvas (see functions.php).
 * Every visual decision lives here, never in PHP and never in JS, so a design
 * change is a single-file change that both contexts pick up at once.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
	--first-blue-050: #e9f4fa;
	--first-blue-100: #cce6f4;
	--first-blue-200: #99cde9;
	--first-blue-300: #4fa8d8;
	--first-blue: #0080c8;
	--first-blue-700: #0068a6;
	--first-blue-800: #00527f;
	--first-blue-900: #003a5a;

	--indigo: #023878;
	--indigo-900: #011e45;

	--ink: #111318;
	--white: #ffffff;

	/*
	 * The neutral ramp and the semantic aliases built on it are NOT
	 * redeclared here any more.
	 *
	 * This file loads after tokens.css, so its own older copies of
	 * `--gray-*`/`--text-secondary`/`--border`/`--surface-*` silently won every
	 * cascade — and they were a Tailwind-slate ramp, not the design system's.
	 * The result was that every grey paragraph, hairline and card border on
	 * every page rendered a cooler, lighter blue-grey than the mockup
	 * (`--text-secondary` #566372 instead of #4C555F, `--border` #e2e8f0
	 * instead of #DDE3EA), which is impossible to spot in isolation and shows
	 * up everywhere in a side-by-side.
	 *
	 * tokens.css transcribes those values verbatim from the design system's
	 * own tokens/colors.css, so it is the single source of truth. The `fm-*`
	 * rules below reference the same custom property names and now resolve
	 * against it.
	 */

	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	--fm-container: 1280px;
	--fm-gutter: 24px;
}

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

.fm-container {
	max-width: var(--fm-container);
	margin: 0 auto;
	padding-left: var(--fm-gutter);
	padding-right: var(--fm-gutter);
}

.fm-eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
}

.fm-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 54px;
	padding: 0 26px;
	border-radius: 6px;
	font-size: var(--fs-base);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.18s ease, background 0.18s ease;
}

.fm-btn--primary {
	background: var(--first-blue);
	color: #fff;
}

.fm-btn--ghost {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	backdrop-filter: blur(4px);
}

.fm-btn:hover {
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ hero -- */

.fm-hero {
	position: relative;
	background: var(--ink);
	overflow: hidden;
}

/*
 * Two selectors because the two approaches produce different elements for the same
 * thing: Approach A emits a bare <img>, core/image in Approach B wraps it in <figure>.
 * A small but telling difference — with core blocks you inherit core's DOM.
 */
.fm-hero__bg {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 30%;
}

figure.fm-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 30%;
}

.fm-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(1, 30, 69, 0.96) 0%,
		rgba(2, 56, 120, 0.82) 44%,
		rgba(17, 19, 24, 0.32) 100%
	);
}

.fm-hero--light .fm-hero__scrim {
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(246, 248, 250, 0.86) 46%,
		rgba(246, 248, 250, 0.4) 100%
	);
}

.fm-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
	padding-top: 108px;
	padding-bottom: 116px;
}

@media (min-width: 900px) {
	.fm-hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
	}

	/* The whole point of the mediaPosition attribute: one block, two layouts. */
	.fm-hero--media-left .fm-hero__copy {
		order: 2;
	}

	.fm-hero--media-left .fm-hero__visual {
		order: 1;
	}
}

.fm-hero__copy {
	max-width: 640px;
}

.fm-hero__eyebrow {
	color: var(--first-blue-300);
	margin-bottom: 22px;
}

.fm-hero--light .fm-hero__eyebrow {
	color: var(--first-blue-700);
}

.fm-hero__heading {
	color: #fff;
	font-size: var(--fs-display);
	font-weight: 800;
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-none);
	margin: 0 0 22px;
}

.fm-hero--light .fm-hero__heading {
	color: var(--ink);
}

.fm-hero__body {
	color: var(--text-on-dark-secondary);
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
	max-width: 560px;
	margin: 0 0 34px;
}

.fm-hero--light .fm-hero__body {
	color: var(--text-secondary);
}

.fm-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/*
 * REMOVED 2026-07-31 (LCP/FCP pass): the `.fm-hero__visual` / `.fm-panel*`
 * instrument-panel rules and their `fm-scan` / `fm-pulse` keyframes.
 *
 * They were dead — no template, pattern or block in this theme emits an
 * `fm-panel` class, confirmed against the rendered HTML of every page type —
 * but they still shipped on every request, because first.css is enqueued
 * globally. `fm-scan` also carried the same `top`-animation CLS bug that was
 * just fixed in its live counterpart, so leaving it would have left a trap for
 * whoever revived it.
 *
 * The live version of this visual is `.bd-scanpanel*` in
 * assets/css/blocks/hero.css, which was ported from these rules. The original
 * design remains in `sample/FIRST Metrology website design/`, and these exact
 * rules remain in git history.
 */

/* ------------------------------------------------------------- stat band -- */

.fm-stats {
	background: var(--surface-subtle);
	border-bottom: 1px solid var(--border);
}

/*
 * No vertical padding here. The section's own `bd-spacing-*` chrome class owns
 * it, and hardcoding 40px on top of that applied the band's padding TWICE:
 * Home (bd-spacing-compact, 40px) rendered an 80px band against the export's
 * 40px. Letting the chrome class own it also makes each page land on its own
 * export value with no per-page CSS — Home wants 40 (compact) and About wants
 * 64 (normal), which is exactly what those two classes already resolve to.
 */
.fm-stats__inner {
	padding-top: 0;
	padding-bottom: 0;
}

.fm-stats__grid {
	display: grid;
	/* 20px in both exports (index.dc.html `.fm-stat-grid`, about.dc.html
	   `.fm-stat4`). */
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.fm-stats__grid {
		grid-template-columns: repeat(var(--fm-stat-cols, 4), minmax(0, 1fr));
	}
}

.fm-stat__value {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.fm-stat__number {
	font-size: var(--fs-5xl);
	font-weight: 800;
	letter-spacing: var(--ls-snug);
	color: var(--ink);
	line-height: var(--lh-none);
}

.fm-stat__unit {
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--first-blue);
	/*
	 * The export's unit span inherits the body's 1.65 (29.04px). Left at
	 * `normal` it was 21px, and because the value row is baseline-aligned
	 * flex, the shorter line box made the whole row 1px short.
	 */
	line-height: var(--lh-relaxed);
}

.fm-stat__label {
	margin: 10px 0 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--text-secondary);
}

/* ------------------------------------------------------------- solutions -- */

.fm-solutions {
	background: #fff;
	padding: 96px 0;
}

.fm-solutions__eyebrow {
	color: var(--first-blue);
}

.fm-solutions__heading {
	font-size: var(--fs-4xl);
	font-weight: 800;
	letter-spacing: var(--ls-snug);
	margin: 14px 0 12px;
	max-width: 780px;
	color: var(--ink);
}

.fm-solutions__intro {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--text-secondary);
	max-width: 640px;
	margin: 0 0 44px;
}

.fm-solutions__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.fm-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgba(17, 19, 24, 0.45);
}

.fm-card__icon {
	display: inline-flex;
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--first-blue-050);
	color: var(--first-blue);
	font-size: var(--fs-xl);
}

.fm-card__thumb {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
}

.fm-card__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}

.fm-card__desc {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--text-secondary);
	margin: 0;
}

.fm-card__cta {
	margin-top: auto;
	padding-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--first-blue);
	font-weight: 600;
	font-size: var(--fs-sm);
}

.fm-card:hover .fm-card__cta {
	gap: 12px;
}

/* ------------------------------------------- core block reconciliation -- */

/*
 * Everything in this section exists only for Approach B.
 *
 * Approach A emits exactly the elements the design calls for, so none of it is needed
 * there. With core blocks you get core's DOM and core's stylesheet, and the theme has
 * to argue with both:
 *
 *   - className lands on core/button's wrapper <div>, but the thing that carries a
 *     background and a border-radius is the inner <a>. Styling the wrapper produces a
 *     button inside a button.
 *   - core/group emits a plain block-flow <div>; the grid and flex behaviour the
 *     design assumes has to be reasserted.
 *   - core's rounded-pill default has to be overridden rather than simply not written.
 *
 * None of it is hard. It is a standing tax, paid once per section, forever.
 */

.fm-btn.wp-block-button {
	background: none;
	border: 0;
	padding: 0;
	height: auto;
}

.fm-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 54px;
	padding: 0 26px;
	border-radius: 6px;
	font-size: var(--fs-base);
	font-weight: 600;
	text-decoration: none;
}

.fm-btn--primary .wp-block-button__link {
	background: var(--first-blue);
	color: #fff;
}

.fm-btn--ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	backdrop-filter: blur(4px);
}

.wp-block-group.fm-solutions__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-items: stretch;
}

.wp-block-group.fm-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wp-block-group.fm-card > * {
	margin-block: 0;
}

.fm-card__icon.wp-block-paragraph {
	margin: 0;
}

.wp-block-group.fm-hero__grid > .fm-hero__copy {
	margin: 0;
}

/* --------------------------------------------------------- empty states -- */

/*
 * A freshly inserted block has no content. Rather than collapsing to nothing in the
 * editor, render.php emits these so the client sees the shape they are filling in.
 */

.fm-placeholder {
	color: rgba(148, 163, 184, 0.9);
	font-style: italic;
}

.fm-hero--empty .fm-hero__bg {
	background: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.04),
		rgba(255, 255, 255, 0.04) 12px,
		transparent 12px,
		transparent 24px
	);
}

/* ------------------------------------------------------------------- 404 -- */

/*
 * The 404 template (templates/404.html). Deliberately plain — one centred
 * column, no search box, no suggested-content query. `.bd-btn--primary` is
 * tokens.css's shared button, so the CTA matches every other primary action
 * on the site without a second definition here.
 */

.bd-404 {
	padding-top: var(--space-24);
	padding-bottom: var(--space-24);
	text-align: center;
}

.bd-404__code {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-6xl);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-none);
	letter-spacing: -0.02em;
	color: var(--color-primary);
}

.bd-404__title {
	margin: 0 0 var(--space-4);
	font-size: var(--type-h2-size);
	font-weight: var(--type-heading-weight);
	line-height: var(--type-heading-lh);
}

.bd-404__text {
	margin: 0 0 var(--space-8);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--text-secondary);
}

.bd-404__actions {
	margin: 0;
}