<!--
  ============================================================================
  @docmd/template-summer  —  404.ejs

  Summer-themed 404 page. Standalone HTML so it renders correctly even when
  the regular layout can't be resolved (e.g. broken template install).
  Loads assets/css/summer.css (priority 25, set by src/index.ts) and
  falls back to the project's theme colour overlay if present.
  ============================================================================
-->
<!DOCTYPE html>
<html lang="<%= (locals.activeLocale && locals.activeLocale.id) ? locals.activeLocale.id : 'en' %>"
  <%= (locals.activeLocale && locals.activeLocale.dir && locals.activeLocale.dir !== 'ltr') ? ' dir="' + locals.activeLocale.dir + '"' : '' %>>
<head>
  <meta charset="UTF-8">
  <meta name="generator" content="docmd template-summer v0.8.7">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="theme-color" content="#fbfaf6" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#13110d" media="(prefers-color-scheme: dark)">
  <title>404 · <%= siteTitle || 'docmd' %></title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/summer.css?v=<%= buildHash %>">

  <% if (theme && theme.name && theme.name !== 'default') { %>
    <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-theme-<%= theme.name %>.css?v=<%= buildHash %>">
  <% } %>

  <% (customCssFiles || []).forEach(cssFile => {
    const cleanPath = cssFile.startsWith('/') ? cssFile.substring(1) : cssFile;
  %>
    <link rel="stylesheet" href="<%= relativePathToRoot %><%= cleanPath %>?v=<%= buildHash %>">
  <% }); %>

  <%- themeInitScript %>

  <style>
    .summer-404 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      text-align: center;
      padding: 24px;
      position: relative;
      overflow: hidden;
    }
    .summer-404::before {
      content: "";
      position: absolute;
      top: -30%;
      left: 50%;
      transform: translateX(-50%);
      width: 720px;
      height: 720px;
      max-width: 140vw;
      background: radial-gradient(circle at center, var(--summer-halo, rgba(255, 196, 84, 0.18)) 0%, transparent 65%);
      filter: blur(20px);
      pointer-events: none;
      z-index: 0;
    }
    .summer-404__card {
      position: relative;
      z-index: 1;
      max-width: 520px;
      padding: 40px 32px;
      border-radius: 20px;
      background: var(--summer-card-bg, rgba(255, 255, 255, 0.6));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--summer-border, rgba(0, 0, 0, 0.06));
      box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.12);
    }
    .summer-404__code {
      font-size: 7rem;
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.04em;
      margin: 0 0 8px;
      background: linear-gradient(135deg, #ffb347 0%, #ff6b6b 50%, #c084fc 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    .summer-404__title {
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 8px;
      color: var(--text-color, #1a1a1a);
    }
    .summer-404__msg {
      font-size: 1rem;
      line-height: 1.6;
      color: var(--text-muted, #6b6b6b);
      margin: 0 0 28px;
    }
    .summer-404__actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .summer-404__btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 20px;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 500;
      text-decoration: none;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .summer-404__btn--primary {
      background: linear-gradient(135deg, #ffb347 0%, #ff8c5a 100%);
      color: #fff;
      box-shadow: 0 4px 14px -4px rgba(255, 140, 90, 0.5);
    }
    .summer-404__btn--primary:hover { transform: translateY(-1px); }
    .summer-404__btn--ghost {
      background: transparent;
      color: var(--text-color, #1a1a1a);
      border: 1px solid var(--summer-border, rgba(0, 0, 0, 0.12));
    }
    .summer-404__btn--ghost:hover { background: rgba(0, 0, 0, 0.04); }
    :root[data-theme="dark"] .summer-404__card,
    :root[data-theme="dark"] .summer-404__btn--ghost:hover {
      background: rgba(30, 28, 24, 0.7);
    }
  </style>
</head>
<body>
  <main class="summer-404" role="main">
    <div class="summer-404__card">
      <div class="summer-404__code" aria-hidden="true">404</div>
      <h1 class="summer-404__title"><%= typeof t === 'function' ? t('pageNotFound') : 'Page not found' %></h1>
      <p class="summer-404__msg"><%= content || (typeof t === 'function' ? t('pageNotFoundMsg') : 'The page you’re looking for doesn’t exist or has moved.') %></p>
      <div class="summer-404__actions">
        <a href="<%= relativePathToRoot %>" class="summer-404__btn summer-404__btn--primary">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-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>
          <%= typeof t === 'function' ? t('returnHome') : 'Return home' %>
        </a>
        <a href="javascript:history.length > 1 ? history.back() : (location.href = '<%= relativePathToRoot %>')" class="summer-404__btn summer-404__btn--ghost">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M12 19l-7-7 7-7"></path></svg>
          <%= typeof t === 'function' ? t('goBack') : 'Go back' %>
        </a>
      </div>
    </div>
  </main>
</body>
</html>