/*
 * MEC Timing 404 page (templates/404.html). Night band with the ski game from mec-404.js.
 * Tokens from mec-tokens.css; buttons share mec-buttons.css.
 */
body.error404 .mec-404 {
	max-width: none;
	margin: 0;
	padding: var(--mec-space-24) var(--mec-space-8);
	background: var(--mec-night);
	color: var(--mec-night-text);
	font-family: var(--mec-font-sans);
	position: relative;
	overflow: hidden;
}
body.error404 .mec-404::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 38%;
	height: 100%;
	background: var(--mec-orange);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	pointer-events: none;
	opacity: .9;
}
body.error404 .mec-404__inner {
	position: relative;
	z-index: 1;
	max-width: var(--mec-content-width);
	margin-inline: auto;
}
body.error404 .mec-404__inner > * { max-width: 640px; margin-inline: 0; }
body.error404 .mec-404__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mec-mint);
}
body.error404 .mec-404__title {
	margin: var(--mec-space-3) 0 var(--mec-space-4);
	font-family: var(--mec-font-display);
	font-size: clamp(40px, 7vw, 76px);
	font-weight: 700;
	line-height: 1.04;
	text-transform: uppercase;
	color: var(--mec-on-night);
}
body.error404 .mec-404__lead { margin: 0 0 var(--mec-space-6); font-size: 19px; line-height: 1.55; }

/* Search */
body.error404 .mec-404__search { margin-bottom: var(--mec-space-6); }
body.error404 .mec-404__search .wp-block-search__inside-wrapper { display: flex; gap: var(--mec-space-3); width: 100% !important; }
body.error404 .mec-404__search .wp-block-search__input {
	flex: 1;
	min-height: 48px;
	padding: 0 var(--mec-space-4);
	border: 1px solid var(--mec-ink-muted);
	border-radius: var(--mec-radius-lg);
	background: var(--mec-surface-raised);
	font: 400 16px/1.5 var(--mec-font-sans);
	color: var(--mec-ink);
}
body.error404 .mec-404__search .wp-block-search__input:focus-visible { outline: 3px solid var(--mec-orange); outline-offset: 2px; }
body.error404 .mec-404__search .wp-block-search__button {
	min-height: 48px;
	padding: 0 var(--mec-space-6);
	border: 0;
	border-radius: var(--mec-radius-lg);
	background: var(--mec-orange);
	color: var(--mec-night);
	font: 700 16px/1.2 var(--mec-font-sans);
	cursor: pointer;
}
body.error404 .mec-404__search .wp-block-search__button:hover { background: var(--mec-orange-hover); }

/* Link buttons: primary + ghost on the night band */
body.error404 .mec-404__links { display: flex; flex-wrap: wrap; gap: var(--mec-space-3); margin: 0 0 var(--mec-space-14); }
body.error404 .mec-404__links .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--mec-space-6);
	border-radius: var(--mec-radius-lg);
	font: 700 16px/1.2 var(--mec-font-sans);
	text-decoration: none;
}
body.error404 .mec-404__links .mec-btn--primary .wp-block-button__link { background: var(--mec-orange); color: var(--mec-night); border: 0; }
body.error404 .mec-404__links .mec-btn--primary .wp-block-button__link:hover { background: var(--mec-orange-hover); }
body.error404 .mec-404__links .is-style-outline .wp-block-button__link { border: 1.5px solid var(--mec-on-night); background: transparent; color: var(--mec-on-night); }
body.error404 .mec-404__links .is-style-outline .wp-block-button__link:hover { background: var(--mec-on-night); color: var(--mec-night); }

/* Ski game */
body.error404 .mec-ski { max-width: 640px; }
body.error404 .mec-ski[hidden] { display: none; }
body.error404 .mec-ski canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 640 / 420;
	border: 1px solid var(--mec-ink-muted);
	border-radius: var(--mec-radius-2xl);
	box-shadow: 0 0 0 6px rgb(0 0 0 / .12);
	background: var(--mec-surface-raised);
	cursor: crosshair;
}
body.error404 .mec-ski canvas:focus-visible { outline: 3px solid var(--mec-orange); outline-offset: 4px; }
body.error404 .mec-ski__hint { margin: var(--mec-space-4) 0 0; font-size: 14px; color: var(--mec-night-muted); }
body.error404 .mec-ski__result { min-height: 1.6em; margin: var(--mec-space-2) 0 0; font-size: 16px; color: var(--mec-on-night); }

@media (max-width: 640px) {
	body.error404 .mec-404 { padding: var(--mec-space-16) var(--mec-space-4); }
	body.error404 .mec-404::after { width: 55%; height: 72px; }
	body.error404 .mec-404__search .wp-block-search__inside-wrapper { flex-direction: column; }
}