{% extends "base.html" %}

{% block title %}Page Not Found - {{ site.config.title }}{% endblock %}

{% block meta %}
  <meta name="robots" content="noindex, nofollow">
{% endblock %}

{% block content %}
<div class="container">
  <div class="error-page">
    <div class="error-code">404</div>
    <h1 class="error-title">Page Not Found</h1>
    <p class="error-message">
      Sorry, the page you're looking for doesn't exist or has been moved.
    </p>

    <div class="error-actions">
      <a href="/" class="btn btn-primary">Go Home</a>
      <a href="/posts/" class="btn btn-secondary">View Posts</a>
    </div>

    <div class="error-suggestions">
      <h2>You might want to:</h2>
      <ul>
        <li><a href="/">Visit the homepage</a></li>
        <li><a href="/posts/">Browse all posts</a></li>
        <li><a href="/tags/">Explore by tags</a></li>
        <li>Use the navigation menu above</li>
      </ul>
    </div>
  </div>
</div>

<style>
/* 404 Page Specific Styles */
.error-page {
  text-align: center;
  max-width: 600px;
  margin: var(--space-20) auto;
  padding: var(--space-8);
}

.error-code {
  font-size: 120px;
  font-weight: var(--font-extrabold);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.2;
  margin-bottom: var(--space-4);
}

.error-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

.error-message {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-8) 0;
  line-height: var(--leading-relaxed);
}

.error-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

.error-suggestions {
  text-align: left;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-10);
}

.error-suggestions h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text-primary);
}

.error-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.error-suggestions li {
  padding: var(--space-2) 0;
  color: var(--color-text-secondary);
}

.error-suggestions li::before {
  content: '→';
  margin-right: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--font-bold);
}

.error-suggestions a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-out);
}

.error-suggestions a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .error-code {
    font-size: 80px;
  }

  .error-title {
    font-size: var(--text-2xl);
  }

  .error-message {
    font-size: var(--text-base);
  }

  .error-actions {
    flex-direction: column;
  }

  .error-actions .btn {
    width: 100%;
  }
}
</style>
{% endblock %}