/*
 * Page-scoped rules for the 404 screens. Loaded only by the pages that own them.
 *
 * The first block is the inline <style> from 404.php, carried over as it was.
 * The second block is hand-written and is NOT produced by the extractor — the
 * original was a centred single column, and this rebuilds it as the two-column
 * layout with the illustration. Re-running
 * `node tools/php-port/extract-css.mjs` regenerates only the first block, so
 * keep the second when merging its output.
 */

/* ===== 1. From 404.php ===== */

.error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }

.error-content h1 { font-size: 120px; font-weight: 800; background: linear-gradient(135deg, #fa4e4e, #ff8a65); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; line-height: 1; }

.error-content h2 { font-size: 28px; color: #fff; margin-bottom: 20px; }

.error-content p { color: rgba(255,255,255,0.6); font-size: 16px; margin-bottom: 30px; max-width: 500px; margin-left: auto; margin-right: auto; }

.error-btn { display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, #fa4e4e, #ff6b6b); color: #fff; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s; }

.error-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(250,78,78,0.3); color: #fff; }

.error-links { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }

.error-links a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 14px; transition: color 0.3s; }

.error-links a:hover { color: #fa4e4e; }

/* ===== 2. Hand-written: two-column layout + illustration ===== */

.error-page .container {
	width: 100%;
}

/* Two columns on desktop, stacked on mobile. The art is the flexible track so
   the copy keeps a comfortable measure at every width. */
.error-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
}

/* Overrides the centred alignment .error-page sets for the single-column
   original — beside the illustration the copy needs a left edge to sit on. */
.error-shell .error-content {
	text-align: left;
}

.error-shell .error-content p {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 34px;
}

.error-eyebrow {
	display: inline-block;
	color: #ff7a70;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

/* 120px is right for a centred hero but crowds the two-column layout. */
.error-shell .error-content h1 {
	font-size: 96px;
	margin-bottom: 4px;
}

.error-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* Matches .error-btn's box exactly — same padding, radius and weight — so the
   pair reads as two buttons of equal weight rather than a button next to a
   stray link. The colour is set explicitly because the surrounding stylesheets
   give bare <a> the default link blue. */
.error-btn-ghost {
	display: inline-block;
	padding: 14px 32px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.5;
	transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.3s;
}

.error-btn-ghost:hover,
.error-btn-ghost:focus-visible {
	border-color: rgba(250, 78, 78, 0.7);
	background: rgba(250, 78, 78, 0.10);
	color: #fff;
	transform: translateY(-2px);
}

/* One box for all three variants side by side — <a class="error-btn">,
   <button class="error-btn"> and the ghost. They otherwise disagree by a pixel
   or two: the ghost carries a 1px border the solid one lacks, and a <button>
   takes its line-height from the UA rather than from the page. Equalised here
   rather than on the base .error-btn so the original centred 404 layout keeps
   the exact button it had. */
.error-actions .error-btn,
.error-actions .error-btn-ghost {
	border: 1px solid transparent;
	line-height: 1.5;
	font-size: 16px;
}

.error-actions .error-btn-ghost {
	border-color: rgba(255, 255, 255, 0.25);
}

.error-actions button.error-btn,
.error-actions button.error-btn-ghost {
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
}

.error-digest {
	margin-top: 26px;
	color: rgba(255, 255, 255, 0.35);
	font-size: 13px;
}

.error-digest code {
	color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.05);
	border-radius: 6px;
	padding: 2px 8px;
}

.error-links-wrap {
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* Pills, not a bare row of links: the originals ran together with no visual
   separation, which read as one long string of words. */
.error-shell .error-links {
	margin-top: 0;
	justify-content: flex-start;
	gap: 10px;
}

.error-shell .error-links a {
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.error-shell .error-links a:hover {
	border-color: rgba(250, 78, 78, 0.55);
	background: rgba(250, 78, 78, 0.08);
	color: #fa4e4e;
}

.error-art {
	display: flex;
	justify-content: center;
}

.error-art-svg {
	width: 100%;
	max-width: 440px;
	height: auto;
}

@media (max-width: 991px) {
	.error-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		text-align: center;
	}

	/* Illustration first on narrow screens would push the actual answer — the
	   heading and the way out — below the fold. */
	.error-art {
		order: 2;
	}

	.error-shell .error-content {
		text-align: center;
	}

	.error-shell .error-content p {
		margin-left: auto;
		margin-right: auto;
	}

	.error-actions,
	.error-shell .error-links {
		justify-content: center;
	}

	.error-art-svg {
		max-width: 360px;
	}
}

@media (max-width: 575px) {
	.error-shell .error-content h1 {
		font-size: 72px;
	}

	.error-content h2 {
		font-size: 23px;
	}

	.error-actions .error-btn,
	.error-actions .error-btn-ghost {
		width: 100%;
		text-align: center;
	}
}