<?php
/**
 * The template for displaying the 404 page content
 *
 * @package kadence-child
 */

namespace Kadence;

// Add any 404 page specific styling but keep the footer unchanged
add_action('wp_head', function() {
    ?>
    <style>
    /* Apply styles only to the main content area, not the footer */
    body.error404 .content-area {
        position: relative;
        z-index: 1;
    }
    
    /* Custom wrapper for the 404 content */
    .error-404-content-wrapper {
        min-height: 70vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    </style>
    <?php
});

get_header();

// Retrieve the specific page content
$page_id = 7822; // Your custom 404 page ID
$page = get_post($page_id);

if (!empty($page)) {
    // Process the content with all filters
    $content = apply_filters('the_content', $page->post_content);
    
    // Display with proper structure
    ?>
    <div id="primary" class="content-area">
        <div class="content-container site-container">
            <main id="main" class="site-main 404-custom-content" role="main">
                <?php echo $content; ?>
            </main>
        </div>
    </div>
    <?php
} else {
    // Fallback if the page doesn't exist
    ?>
    <div id="primary" class="content-area">
        <div class="content-container site-container">
            <main id="main" class="site-main" role="main">
                <div class="error-404-container">
                    <section class="error-404 not-found entry content-bg entry-content-wrap">
                        <header class="page-header">
                            <h1 class="page-title"><?php esc_html_e('Page Not Found', 'kadence'); ?></h1>
                        </header>
                        <div class="page-content">
                            <p><?php esc_html_e('The page you are looking for does not exist. Go back to the home page or contact us if you cannot find what you are looking for.', 'kadence'); ?></p>
                            <a class="button" href="<?php echo esc_url(home_url('/')); ?>"><?php esc_html_e('Go to Homepage', 'kadence'); ?></a>
                        </div>
                    </section>
                </div>
            </main>
        </div>
    </div>
    <?php
}

get_footer();