---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/cover

### PAGE CONFIG ###
suggested_pages:
  - title: "Home"
    description: "Return to our homepage"
    icon: "house"
    link: "/"
  - title: "Pricing"
    description: "View our plans and pricing"
    icon: "tag"
    link: "/pricing"
  - title: "Contact"
    description: "Get in touch with us"
    icon: "envelope"
    link: "/contact"
  - title: "Team"
    description: "Meet our amazing team"
    icon: "users"
    link: "/team"
---

{% comment %}
  NEWSFLASH 404
  A correction notice from the desk: rotated "Correction" chip, oversized
  stroked 404 numerals, the requested URL in a framed notice, and the
  suggested_pages contract rendered as pill links.
{% endcomment %}

<section class="col-12 col-md-10 col-lg-8 col-xl-6 mw-md">
  <div class="card shadow position-relative">
    <span class="badge bg-body-tertiary error-stamp">Correction</span>
    <div class="card-body p-3 p-md-5">
      <!-- Header -->
      <div class="text-center mb-4">
        <h1 class="error-code mb-3">404</h1>
        <p class="text-body-secondary mb-0">
          This page never went to print. It may have been moved, retracted, or it never existed — our editors regret the error.
        </p>
      </div>

      <!-- URL Display -->
      <div class="alert alert-warning text-center mb-4" role="alert">
        <small class="text-body">
          <strong>Requested URL:</strong> <span id="page-url" class="text-break">{{ page.canonical.url }}</span>
        </small>
      </div>

      <!-- Primary Actions -->
      <div class="d-grid gap-2 d-sm-block text-center mb-4">
        <a href="{{ site.url }}" class="btn btn-adaptive btn-lg mb-2 mb-sm-0 me-sm-2">
          {% uj_icon "house", "me-2" %}
          Back to home
        </a>
        <button class="btn btn-outline-dark btn-lg mb-2 mb-sm-0" onclick="window.history.back()">
          {% uj_icon "arrow-left", "me-2" %}
          Go back
        </button>
      </div>

      <!-- Suggested pages -->
      {% iftruthy page.resolved.suggested_pages %}
        <div class="text-center mb-4">
          {% for suggestion in page.resolved.suggested_pages %}
            <a href="{{ suggestion.link }}" class="btn btn-outline-dark btn-sm me-1 mb-2" title="{{ suggestion.description }}">
              {% uj_icon suggestion.icon, "me-1" %}{{ suggestion.title }}
            </a>
          {% endfor %}
        </div>
      {% endiftruthy %}

      <!-- Help Section -->
      <div class="text-center pt-4 border-top">
        <p class="text-body-secondary mb-0">
          Still can't find what you're looking for?
          <a href="/contact" class="text-decoration-none fw-semibold">Contact our support team</a>
          and we'll help you out!
        </p>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}