<!DOCTYPE html>
<html lang="{{ app.request.locale }}">
<head>
    <meta charset="UTF-8">
    <title>{{ 'error_page.not_found.title'|trans }}</title>
    <meta name="robots" content="noindex,follow">
    <meta name="description" content="{{ 'error_page.not_found.description'|trans }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#141414">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;300;400&family=Roboto:ital,wght@0,100;0,400;0,500;0,700;1,400&display=swap">
    <link rel="stylesheet" href="https://use.typekit.net/wup2esi.css">

    {% set theme_entry = viti_theme().name %}
    {% if app.environment == 'dev' %}
        {{ encore_entry_link_tags('app', null, 'front') }}
        {{ encore_entry_link_tags(theme_entry, null, 'front') }}
        {{ encore_entry_script_tags('app', null, 'front') }}
        {{ encore_entry_script_tags(theme_entry, null, 'front') }}
    {% else %}
        {% set scriptNonce = csp_nonce('script') %}
        {% set styleNonce = csp_nonce('style') %}
        {{ encore_entry_link_tags('app', null, 'front', { nonce: styleNonce }) }}
        {{ encore_entry_link_tags(theme_entry, null, 'front', { nonce: styleNonce }) }}
        <meta name="csp-nonce" content="{{ scriptNonce }}">
        {{ encore_entry_script_tags('app', null, 'front', { nonce: scriptNonce }) }}
        {{ encore_entry_script_tags(theme_entry, null, 'front', { nonce: scriptNonce }) }}
    {% endif %}
</head>
<body class="theme-error-page min-h-dvh bg-theme-black font-sans text-theme-white">
    <main class="theme-error-page__main flex min-h-dvh items-center justify-center px-4 py-16 sm:px-6">
        <section
            aria-labelledby="error-title"
            class="theme-error-page__panel w-full max-w-2xl border border-[rgba(211,173,116,0.55)] border-l-4 border-l-theme-gold bg-theme-dark px-6 py-12 text-center shadow-[0_32px_90px_rgba(0,0,0,0.62)] sm:px-12 sm:py-16"
        >
            <p class="theme-error-page__code font-serif text-sm font-bold uppercase tracking-[0.32em] text-theme-gold">404</p>
            <h1 id="error-title" class="theme-error-page__title mt-4 font-serif text-4xl font-light text-theme-white sm:text-5xl">
                {{ 'error_page.not_found.title'|trans }}
            </h1>
            <p class="theme-error-page__description mx-auto mt-6 max-w-xl text-base leading-7 text-white/75">
                {{ 'error_page.not_found.description'|trans }}
            </p>
            <a
                href="{{ path('homepage') }}"
                class="theme-error-page__action theme-button-fill mt-8 min-h-11 px-6 py-3 font-serif font-bold uppercase focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-theme-gold"
            >
                {{ 'error_page.not_found.back_home'|trans }}
            </a>
        </section>
    </main>
</body>
</html>
