/* ============================================================
   BYR 404 — "Not the Zebra" Styles (v3)
   ============================================================
   WPCode: CSS Snippet | Site Wide Header | Priority: 13

   v3 CHANGES:
   - Hero is now a clean text hero (no donkey image). The
     aurora/starfield deep-space background shows through.
   - Donkey appears in its own pillarbox showcase section
     below the hero: blurred scaled-up background layer +
     sharp centered portrait + edge vignettes. Same technique
     as the Contact page hero video.
   - Rainbow "404" pushed down with padding-top so the header
     doesn't clip it.
   - Hero height reduced to ~55vh since there's no image to fill.

   TABLE OF CONTENTS:
   1.  Astra 404 Override
   2.  Astra Container Reset
   3.  Hero Section (clean, no image)
   4.  Hero Content
   5.  404 Code Number (Rainbow)
   6.  Hero Title & Subtitle
   7.  Hero Actions
   8.  Pillarbox Donkey Frame
   9.  Pillarbox Layers (blur, sharp, vignette)
   10. Donkey Caption
   11. Body Wrapper
   12. Section Titles
   13. Search Bar
   14. Message Panel
   15. Navigation Card Grid
   16. Individual Cards
   17. Donkey Footnote
   18. Light Mode Overrides
   19. Responsive — Tablet
   20. Responsive — Mobile
   21. Reduced Motion
   ============================================================ */


/* ============================================================
   1. ASTRA 404 OVERRIDE
   ============================================================ */
.error404 #primary > article,
.error404 .ast-404-layout-1,
.error404 .entry-content.page-content,
.error404 .page-content,
.error404 .entry-header {
	display: none !important;
}


/* ============================================================
   2. ASTRA CONTAINER RESET
   ============================================================ */
.error404 .ast-container {
	max-width: 1200px;
	padding-left: 0;
	padding-right: 0;
}

.error404 #primary {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0 auto;
}

.error404 #primary > .ast-row {
	margin: 0;
	padding: 0;
}


/* ============================================================
   3. HERO SECTION (clean, no image)
   ============================================================
   No background image — the BYR aurora/starfield/gradient
   shows through naturally. The hero just provides vertical
   space for the "404" number and title text.
   Padding-top accounts for the fixed header so the "404"
   sits clearly below it, not behind it.
   ============================================================ */
.byr-404-hero {
	position: relative;
	width: 100%;
	min-height: 50vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-top: 100px;
	margin-bottom: 0;
}


/* ============================================================
   4. HERO CONTENT
   ============================================================ */
.byr-404-hero__content {
	position: relative;
	z-index: var(--z-content, 1);
	text-align: center;
	width: 100%;
	max-width: 750px;
	padding: 1rem 1.5rem 2.5rem;
}


/* ============================================================
   5. 404 CODE NUMBER (RAINBOW)
   ============================================================
   Big rainbow "404" with a slow color drift animation.
   Against the dark BYR background, it reads clearly at
   0.40 opacity with a cyan glow.
   ============================================================ */
.byr-404-hero__code {
	font-size: clamp(6rem, 18vw, 13rem);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.04em;
	margin: 0 0 -0.25em 0;
	opacity: 0.40;

	background: linear-gradient(
		135deg,
		#FF6B6B 0%,
		#FFB347 15%,
		#FFFF66 30%,
		#66FF66 45%,
		#66CCFF 60%,
		#9966FF 75%,
		#FF66CC 90%,
		#FF6B6B 100%
	);
	background-size: 200% 200%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;

	filter: drop-shadow(0 0 40px rgba(102, 204, 255, 0.30));

	animation: byr-404-rainbow-drift 8s ease infinite;

	user-select: none;
	pointer-events: none;
}

@keyframes byr-404-rainbow-drift {
	0%, 100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}


/* ============================================================
   6. HERO TITLE & SUBTITLE
   ============================================================ */
.byr-404-hero__title {
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-weight: 800;
	line-height: var(--leading-tight, 1.15);
	color: var(--color-heading);
	margin: 0 0 0.85rem 0;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.50);
}

.byr-404-hero__sub {
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	line-height: var(--leading-relaxed, 1.7);
	color: var(--color-text-secondary, #C7C7D8);
	margin: 0 0 1.75rem 0;
	max-width: 580px;
	margin-left: auto;
	margin-right: auto;
}


/* ============================================================
   7. HERO ACTIONS
   ============================================================ */
.byr-404-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
}


/* ============================================================
   8. PILLARBOX DONKEY FRAME
   ============================================================
   A contained showcase for the donkey portrait. The frame
   is a fixed-aspect-ratio container (16:9-ish) that holds
   the two-layer pillarbox system. Since the donkey photo
   is portrait-orientation, the sharp image is narrower
   than the frame, and the blurred version fills the sides.
   ============================================================ */
.byr-404__donkey {
	max-width: 800px;
	margin: 0 auto var(--space-xl);
	padding: 0 var(--space-md);
}

.byr-404__donkey-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	overflow: hidden;

	border: 1px solid rgba(0, 102, 204, 0.18);
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.5),
		0 12px 40px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


/* ============================================================
   9. PILLARBOX LAYERS
   ============================================================
   Layer 1 (blur): Fills the entire frame, heavily blurred
     and dimmed. Provides ambient color fill on the sides.
   Layer 2 (sharp): Centered, constrained to portrait width.
     object-fit: contain keeps the full donkey visible.
   Vignette: Darkens left/right edges to smooth the seam
     between blurred background and sharp foreground.
   ============================================================ */

/* Layer 1 — blurred background fill */
.byr-404__donkey-blur {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	filter: blur(40px) saturate(1.3) brightness(0.45);
	transform: scale(1.2);
	z-index: 0;
	display: block;
}

/* Layer 2 — sharp centered portrait */
.byr-404__donkey-sharp {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	z-index: 1;
	display: block;
}

/* Edge vignettes */
.byr-404__donkey-vignette {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(to right, rgba(2, 6, 23, 0.60) 0%, transparent 22%),
		linear-gradient(to left,  rgba(2, 6, 23, 0.60) 0%, transparent 22%);
	pointer-events: none;
}


/* ============================================================
   10. DONKEY CAPTION
   ============================================================ */
.byr-404__donkey-caption {
	text-align: center;
	font-size: var(--text-sm, 0.875rem);
	color: var(--color-text-muted, #8A8A9A);
	font-style: italic;
	margin: var(--space-xs) 0 0 0;
	line-height: var(--leading-normal, 1.5);
}


/* ============================================================
   11. BODY WRAPPER
   ============================================================ */
.byr-404 {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--space-md) var(--space-2xl);
}


/* ============================================================
   12. SECTION TITLES
   ============================================================ */
.byr-404__section-title {
	text-align: center;
	font-size: var(--text-xl, 1.375rem);
	font-weight: 700;
	color: var(--color-heading, #FFFFFF);
	margin: 0 0 1.25rem 0;
	line-height: var(--leading-snug, 1.3);
}


/* ============================================================
   13. SEARCH BAR
   ============================================================ */
.byr-404__search {
	margin-bottom: 2.5rem;
	scroll-margin-top: 100px;
}

.byr-404__search-form {
	display: flex;
	gap: var(--space-xs);
	padding: 1.25rem 1.5rem;

	background: linear-gradient(135deg,
		rgba(0, 102, 204, 0.12) 0%,
		rgba(0, 102, 204, 0.06) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 102, 204, 0.22);
	border-radius: var(--radius-lg);

	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.5),
		0 8px 28px rgba(0, 0, 0, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.byr-404__search-input {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 1.1rem;
	min-height: 44px;
	box-sizing: border-box;

	font-size: var(--text-md, 1rem);
	font-family: inherit;
	line-height: 1.4;

	background-color: rgba(10, 5, 30, 0.85) !important;
	color: var(--color-text-secondary) !important;
	border: 1px solid rgba(120, 60, 228, 0.25) !important;
	border-radius: var(--radius-md) !important;

	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}

.byr-404__search-input::placeholder {
	color: rgba(200, 190, 220, 0.5) !important;
}

.byr-404__search-input:focus {
	border-color: rgba(120, 60, 228, 0.6) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(120, 60, 228, 0.15) !important;
}

.byr-404__search-btn {
	flex-shrink: 0;
	white-space: nowrap;
}


/* ============================================================
   14. MESSAGE PANEL
   ============================================================ */
.byr-404__message {
	max-width: 780px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.byr-404__message-text {
	font-size: var(--text-md, 1rem);
	line-height: var(--leading-relaxed, 1.7);
	color: var(--color-text-secondary, #C7C7D8);
	margin: 0;
}

.byr-404__message-text strong {
	color: var(--color-text-primary, #F5F5F8);
}


/* ============================================================
   15. NAVIGATION CARD GRID
   ============================================================ */
.byr-404__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}


/* ============================================================
   16. INDIVIDUAL CARDS
   ============================================================ */
.byr-404__card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.3rem !important;
	text-decoration: none !important;
	color: inherit !important;
	cursor: pointer !important;
	border-left: 3px solid transparent !important;
	transition:
		transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.3s ease !important;
}

.byr-404__card:hover {
	border-left-color: var(--color-accent-primary, #22D3EE) !important;
}

.byr-404__card-icon {
	font-size: 1.6rem;
	line-height: 1;
	margin-bottom: 0.15rem;
}

.byr-404__card-title {
	font-size: var(--text-lg, 1.125rem);
	font-weight: 700;
	color: var(--color-accent-primary, #22D3EE);
	line-height: var(--leading-snug, 1.3);
}

.byr-404__card-desc {
	font-size: var(--text-sm, 0.875rem);
	line-height: var(--leading-normal, 1.5);
	color: var(--color-text-secondary, #C7C7D8);
}

.byr-404__card:focus-visible {
	outline: 2px solid var(--color-accent-primary, #22D3EE) !important;
	outline-offset: 3px !important;
}


/* ============================================================
   17. DONKEY FOOTNOTE
   ============================================================ */
.byr-404__footnote {
	text-align: center;
	max-width: 660px;
	margin: 0 auto;
	padding: var(--space-md) var(--space-lg);
	font-size: var(--text-sm, 0.875rem);
	line-height: var(--leading-relaxed, 1.7);
	color: var(--color-text-muted, #8A8A9A);
	font-style: italic;

	background: linear-gradient(135deg,
		rgba(0, 102, 204, 0.06) 0%,
		rgba(0, 102, 204, 0.03) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(148, 163, 184, 0.12);
	border-radius: var(--radius-lg);
}

.byr-404__footnote strong {
	color: var(--color-accent-primary, #22D3EE);
	font-style: normal;
}


/* ============================================================
   18. LIGHT MODE OVERRIDES
   ============================================================
   REPLACE THE ENTIRE SECTION 18 IN YOUR EXISTING CSS WITH THIS.

   The BYR light mode uses soft pastel backgrounds, so the
   hero needs dark text and a more saturated 404 number.
   The secondary (ghost) button also needs visible text.
   ============================================================ */

/* ─── Hero 404 number: darker, more saturated ─── */
.mode-light .byr-404-hero__code {
	opacity: 0.50;
	filter: drop-shadow(0 0 25px rgba(120, 60, 228, 0.20));
	background: linear-gradient(
		135deg,
		#D93025 0%,
		#E67E22 15%,
		#B8860B 30%,
		#1B8C3D 45%,
		#0066CC 60%,
		#6B21A8 75%,
		#C2185B 90%,
		#D93025 100%
	);
	background-size: 200% 200%;
	background-clip: text;
	-webkit-background-clip: text;
}

/* ─── Hero title: dark text ─── */
.mode-light .byr-404-hero__title {
	color: var(--color-heading-light, #111827);
	text-shadow: none;
}

/* ─── Hero subtitle: dark text ─── */
.mode-light .byr-404-hero__sub {
	color: var(--color-text-secondary-light, #3B425C);
}

/* ─── Secondary button: visible border and text ─── */
.mode-light .byr-404-hero__actions .byr-hero-cta-secondary {
	color: var(--color-text-primary-light, #0B1530) !important;
	border-color: rgba(0, 0, 0, 0.25) !important;
}

.mode-light .byr-404-hero__actions .byr-hero-cta-secondary:hover {
	border-color: rgba(0, 0, 0, 0.45) !important;
	background: rgba(0, 0, 0, 0.05) !important;
}

/* ─── Pillarbox donkey frame ─── */
.mode-light .byr-404__donkey-frame {
	border-color: rgba(0, 0, 0, 0.10);
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.10),
		0 12px 40px rgba(0, 0, 0, 0.08);
}

.mode-light .byr-404__donkey-blur {
	filter: blur(40px) saturate(1.2) brightness(0.65);
}

.mode-light .byr-404__donkey-vignette {
	background:
		linear-gradient(to right, rgba(248, 248, 252, 0.50) 0%, transparent 22%),
		linear-gradient(to left,  rgba(248, 248, 252, 0.50) 0%, transparent 22%);
}

.mode-light .byr-404__donkey-caption {
	color: var(--color-text-muted-light, #6B7280);
}

/* ─── Search form ─── */
.mode-light .byr-404__search-form {
	background: linear-gradient(135deg,
		rgba(120, 110, 100, 0.10) 0%,
		rgba(140, 130, 120, 0.07) 100%);
	border-color: rgba(100, 90, 80, 0.18);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.08),
		0 8px 24px rgba(0, 0, 0, 0.06);
}

.mode-light .byr-404__search-input {
	background-color: rgba(255, 255, 255, 0.92) !important;
	color: var(--color-text-primary-light) !important;
	border-color: rgba(0, 0, 0, 0.12) !important;
}

.mode-light .byr-404__search-input::placeholder {
	color: rgba(100, 100, 120, 0.6) !important;
}

.mode-light .byr-404__search-input:focus {
	border-color: var(--color-accent-primary, #22D3EE) !important;
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
}

/* ─── Footnote ─── */
.mode-light .byr-404__footnote {
	background: linear-gradient(135deg,
		rgba(120, 110, 100, 0.06) 0%,
		rgba(140, 130, 120, 0.03) 100%);
	border-color: rgba(0, 0, 0, 0.08);
}

.mode-light .byr-404__footnote strong {
	color: var(--color-accent-primary);
}
/* ============================================================
   19. RESPONSIVE — TABLET (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
	.byr-404-hero {
		min-height: 45vh;
		padding-top: 80px;
	}

	.byr-404__donkey-frame {
		aspect-ratio: 16 / 11;
		border-radius: var(--radius-lg);
	}

	.byr-404__donkey-blur {
		filter: blur(30px) saturate(1.2) brightness(0.4);
	}

	.byr-404__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-xs);
	}

	.byr-404__footnote {
		padding: 1.25rem 1.5rem;
	}
}


/* ============================================================
   20. RESPONSIVE — MOBILE (max-width: 600px)
   ============================================================ */
@media (max-width: 600px) {
	.byr-404-hero {
		min-height: 40vh;
		padding-top: 72px;
	}

	.byr-404-hero__code {
		font-size: clamp(4rem, 20vw, 6rem);
	}

	.byr-404__donkey {
		padding: 0 var(--space-sm);
	}

	.byr-404__donkey-frame {
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-md);
	}

	.byr-404__donkey-blur {
		filter: blur(20px) saturate(1.1) brightness(0.4);
	}

	.byr-404 {
		padding: 0 var(--space-sm) var(--space-xl);
	}

	.byr-404__search-form {
		flex-direction: column;
		padding: var(--space-sm);
	}

	.byr-404__search-input {
		width: 100%;
	}

	.byr-404__search-btn {
		width: 100%;
		text-align: center;
	}

	.byr-404__grid {
		grid-template-columns: 1fr;
	}

	.byr-404-hero__actions {
		flex-direction: column;
		align-items: center;
	}

	.byr-404__card {
		border-left-width: 2px !important;
	}
}


/* ============================================================
   21. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.byr-404__card.byr-hero:hover {
		transform: none !important;
	}

	.byr-404-hero__code {
		animation: none;
	}
}