{% extends "base.html" %}

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

{% block content %}
<div class="error-page" style="min-height: 60dvh; display: flex; align-items: center; justify-content: center;">
    <div class="error-content" style="max-width: 48ch; text-align: center; padding: 2rem;">
        <div class="error-code" style="font-size: clamp(4rem, 12vw, 8rem); font-weight: 700; line-height: 1; color: var(--accent-color); margin-bottom: 1rem; font-family: var(--font-mono);">
            404
        </div>
        
        <h1 class="error-title" style="font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 600; margin-bottom: 1rem; color: var(--text-color);">
            Page Not Found
        </h1>
        
        <p class="error-description" style="font-size: 1.05rem; color: var(--text-muted); margin-bottom: 2.5rem; line-height: 1.6;">
            The page you're looking for doesn't exist or has been moved. Let's get you back on track.
        </p>
        
        <div class="error-actions" style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
            <a href="{{ get_url(path="") }}" class="button-primary hover-scale" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background-color: var(--accent-color); color: var(--bg-color); border-radius: 0.375rem; font-weight: 500; text-decoration: none; transition: transform 0.2s ease;">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                <span>Go Home</span>
            </a>
            
            <a href="{{ get_url(path="/posts") }}" class="button-secondary hover-scale" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 1px solid var(--border-color); color: var(--text-color); border-radius: 0.375rem; font-weight: 500; text-decoration: none; transition: transform 0.2s ease;">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
                <span>Browse Posts</span>
            </a>
        </div>
    </div>
</div>
{% endblock content %}