<?php

/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package e-TDR
 */

get_header();
?>

<main id="primary" class="site-main error-404-page py-5">
	<section class="container py-5">
		<div class="row justify-content-center text-center">
			<div class="col-lg-8 py-5">

				<div class="error-icon-wrap mb-4">
					<div class="error-icon d-inline-flex align-items-center justify-content-center" style="width: 120px; height: 120px; background: rgba(220, 53, 69, 0.1); border-radius: 50%; color: #dc3545; font-size: 4rem;">
						<i class="bi bi-exclamation-circle"></i>
					</div>
				</div>

				<div class="sec-label text-uppercase fw-semibold mb-3" style="color: #dc3545; letter-spacing: 2px;"><?php esc_html_e('Error 404', 'e-tdr'); ?></div>

				<h1 class="sec-title mb-3 fw-bold" style="font-size: 3rem;"><?php esc_html_e('Oops! Page not found.', 'e-tdr'); ?></h1>

				<div class="sec-sub mx-auto mb-5 text-muted" style="font-size: 1.125rem;">
					<p><?php esc_html_e('It looks like nothing was found at this location. The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.', 'e-tdr'); ?></p>
				</div>

				<div class="cta-actions d-flex flex-wrap align-items-center justify-content-center gap-3">
					<a href="<?php echo esc_url(home_url('/')); ?>" class="btn btn-hero-primary px-4 py-2">
						<?php esc_html_e('Back to Homepage', 'e-tdr'); ?>
					</a>
				</div>

			</div>
		</div>
	</section><!-- .container -->
</main><!-- #main -->

<?php
get_footer();