doctype html
html(lang="en")
	head
		meta(charset="UTF-8")
		meta(name="viewport" content="width=device-width, initial-scale=1.0")
		meta(name="robots" content="noindex, nofollow")

		title 404 - Page Not Found - Mokhtar Ali

		meta(name="description" content="The page you're looking for doesn't exist.")

		link(rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png")
		link(rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png")

		//- Resource hints for external domains
		link(rel="preconnect" href="https://fonts.googleapis.com")
		link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)

		//- Main CSS
		link(rel="stylesheet" href="/main.css")
		style.
			.not-found-link-primary,
			.not-found-link-secondary {
				display: inline-block;
				padding: 0.75rem 1.5rem;
				text-decoration: none;
				font-weight: 500;
				font-family: 'Poppins', sans-serif;
				transition: all 0.3s;
			}

			.not-found-link-primary {
				background: #fff;
				color: #131313;
			}

			.not-found-link-primary:hover,
			.not-found-link-primary:focus-visible {
				opacity: 0.8;
			}

			.not-found-link-secondary {
				border: 1px solid #fff;
				color: #fff;
				background: transparent;
			}

			.not-found-link-secondary:hover,
			.not-found-link-secondary:focus-visible {
				background: #fff;
				color: #131313;
			}

		//- Font loading
		link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Oswald:wght@200;300;400;700&family=Poppins:wght@400;500;700&display=swap")
		noscript
			link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Oswald:wght@200;300;400;700&family=Poppins:wght@400;500;700&display=swap")

	body
		//- Main content with proper semantic structure (T073: No internal paths exposed)
		main#main-content.content(role="main" style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #131313; color: #fff;")
			.not-found-container(style="text-align: center; padding: 2rem;")
				header
					//- 404 status - no path or system information exposed
					h1.not-found-status(style="font-size: 8rem; font-weight: 700; margin: 0; font-family: 'Oswald', sans-serif; letter-spacing: 0.1em;") 404
					h2.not-found-title(style="font-size: 2rem; margin: 1rem 0; font-family: 'Major Mono Display', monospace; font-weight: 400;") Page Not Found

				section.not-found-message(style="margin: 2rem 0; max-width: 500px; margin-left: auto; margin-right: auto;")
					p(style="font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.5rem; font-family: 'Poppins', sans-serif;")
						| The page you're looking for doesn't exist or has been moved to a new location.

					p(style="font-size: 1rem; opacity: 0.7; font-family: 'Poppins', sans-serif;")
						| Please check the URL or navigate to one of the pages below.

				nav.not-found-actions(style="margin-top: 3rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;")
					a(
						href="/"
						class="not-found-link-primary"
					) Home

					a(
						href="/about"
						class="not-found-link-secondary"
					) About

		//- Fallback: ensure content is visible when JS is disabled
		noscript
			style.
				.not-found-container { opacity: 1 !important; visibility: visible !important; }