/**
 * Template: 404  (PG8)
 *   templates/404.html  ·  .kd-404
 *
 * DERIVED — no Figma comp exists for this page (tracker: "— (derive)"; fidelity
 * target = apply-system, match the Gracie token system + gated patterns, not a
 * pixel comp). Replaces the stock NHC dark wp:cover 404 (hardcoded #6B7280/#FFFFFF
 * hex, font-weight:900 faux-bold on both the numeral and the <h1>, hiking-metaphor
 * copy, 3 buttons incl. a duplicate "Back to Home" + a broken /contact-us/ link)
 * with a LIGHT treatment on the page's own cream background (--kd-color-base,
 * no dark cover) — the lowest-risk, most on-brand option for a governance
 * consultancy site with no 404 design.
 *
 * Page-only partial (not a reusable pattern) — same convention as gg-portfolio.css
 * / gg-privacy.css (page-assembly CSS that isn't itself a `wp:pattern`). Namespace
 * .kd-404*, glob-enqueued (inc/enqueue.php), zero shared-file edits.
 *
 * Button geometry (height/padding/font/square radius) + the primary "Back to Home"
 * fill + the maroon :focus-visible ring are all INHERITED from the gated F3
 * (gg-buttons.css) — not re-declared. Only the "About" secondary needs new CSS: a
 * maroon-outline treatment (F3 has no secondary/outline variant designed; the only
 * outline precedent in the codebase is global.css's NHC-era red is-style-outline
 * rule, which this template overrides locally — same "beat it regardless of glob
 * load order" convention as P6/P7's white-on-maroon ghost buttons, mirrored here
 * as maroon-on-cream).
 */

/* ── <main> — vertically centers the 404 content, fills the viewport ─────────
   .wp-site-blocks > main is already `flex:1 0 auto` inside a `min-height:100vh`
   flex column (global.css), so main already stretches to fill the space between
   header and footer on every no-hero page; the flex column + justify-content
   here just centers THIS main's own content within that stretched box. The
   134px --kd-no-hero-top clearance (badge clearance, applied automatically via
   the .kd-main--no-hero / :not(:has(.kd-hero-*)) guard in global.css) still
   applies above this and is left alone — every other no-hero interior page gets
   the same clearance, so this stays consistent with the rest of the site rather
   than fighting it. min-height below is a defensive floor for short content on a
   tall viewport, not the primary fill mechanism. */
.kd-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-inline: var(--kd-edge-pad); /* site gutter — 112px desktop -> 20px <768 (tokens.css) */
	padding-block: var(--kd-space-xxl); /* 96px breathing room so content never crowds the header/footer */
	min-height: 60vh; /* floor, see note above */
}

/* ── Centered content column ──────────────────────────────────────────────── */
.kd-404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kd-space-md); /* 24px rhythm — number -> heading -> body -> buttons */
	max-width: var(--kd-measure); /* 640px — the theme's existing readability-measure token, caps the body copy line length */
}

/* Flex gap above is the only vertical rhythm — zero the blocks' own default
   margins (cta-band.css precedent, .kd-ctaband__content > *). */
.kd-404__inner > * {
	margin-block: 0;
}

/* ── "404" numeral — maroon, Public Sans, weight 600 (NOT 900 — no such face is
   self-hosted post-F2; this is the reconcile this PG8 row exists to make). ──── */
.kd-404__number {
	font-family: var(--kd-font-heading); /* Public Sans */
	font-weight: var(--kd-fw-heading); /* 600 SemiBold — real face */
	color: var(--kd-color-secondary); /* maroon #900000 */
	line-height: 1; /* tight numeral */
	letter-spacing: -0.02em; /* tight tracking at display size — cosmetic, derived */
	/* No token exists at this display scale (the type scale tops out at 36px/h1);
	   commented one-off, kept close to the stock template's original range. */
	font-size: clamp(5rem, 12vw, 9rem);
}

/* ── <h1> — weight override only. Color + size + the <768 28px derivation all
   inherit theme.json/tokens.css (theme.json h1 default is Medium 500 + black;
   bumped to SemiBold 600 here for a stronger 404 moment, same weight P2's
   hero-banner title uses). Zero-specificity :where(h1) from theme.json means a
   single class beats it regardless of print order. ─────────────────────────── */
.kd-404__heading {
	font-weight: var(--kd-fw-heading); /* 600 — was 900 (faux-bold) in the stock template */
}

/* ── Body paragraph — Inter/black/16/24 are already the site defaults; no
   override needed. Extra top padding on the button row only (padding, not
   margin, so it doesn't fight the `> * { margin-block:0 }` reset above). ───── */
.kd-404__buttons {
	padding-top: var(--kd-space-sm); /* 16px on top of the 24px flex gap = 40px body -> buttons */
}

/* ── "About" secondary — maroon-outline ghost. Scoped .kd-404 .is-style-outline
   is 4 classes (0,4,0), beating global.css's own
   `.wp-block-button.is-style-outline .wp-block-button__link` (0,3,0)
   deterministically regardless of glob-enqueue load order (P6/P7 convention).
   gg-buttons.css already EXCLUDES .is-style-outline from the F3 primary fill, so
   there's no conflict there; only global.css's red-outline rule needs beating.
   Geometry (49px height/30px pad/DM Sans 17/square radius) is inherited from
   gg-buttons.css's universal `.wp-block-button__link` rule (not scoped away from
   outline buttons) — not re-declared here. ──────────────────────────────────── */
.kd-404 .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--kd-color-secondary); /* maroon */
	border-color: var(--kd-color-secondary);
	border-width: 2px; /* the theme's recurring 2px border width (forms/F3-focus/P6/P7 ghost buttons) */
}

.kd-404 .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--kd-color-secondary);
	color: var(--kd-color-white);
	border-color: var(--kd-color-secondary);
}

.kd-404 .wp-block-button.is-style-outline .wp-block-button__link:active {
	background-color: var(--kd-color-maroon-active); /* #6b0000 — D2 active token */
	color: var(--kd-color-white);
	border-color: var(--kd-color-maroon-active);
}

/* :focus-visible is intentionally NOT overridden here — gg-buttons.css's
   universal `.wp-block-button__link:focus-visible` rule (maroon 2px ring, offset
   2px) already applies to every button including this one, and a maroon ring on
   the cream page background is high-contrast on its own. */

/* ── Mobile (<768) — trim the vertical padding/floor; the numeral clamp, the
   edge-pad gutter (20px fixed), and the h1 28px derivation are already
   responsive via tokens.css and need no override here. ──────────────────────── */
@media (max-width: 767.98px) {
	.kd-404 {
		padding-block: var(--kd-space-lg); /* 40px */
		min-height: 50vh;
	}
}