/* ============================================================================
FILE         : errors.css
FILE PATH    : /public/css/errors.css
VERSION      : 1.0.0
AUTHOR       : Oluwasegun Dayo Ogunsola
CREATED      : 2025-10-18
DESCRIPTION  : Stylesheet for error pages – 404, 500, 403, asset load, and compile errors.
               Friendly UX with expressive icons, soft animations, and diagnostic clarity.
STRUCTURE    :
  - Base error container
  - Icon and heading styles
  - Diagnostic block
  - Responsive layout
  - Button styling
USAGE        : Linked in layout.php or injected via error router
============================================================================ */

/* ------------------ BASE CONTAINER ------------------ */
.error-page {
  max-width: 720px;
  margin: 4rem auto;
  padding: 2rem;
  background: #fff8f8;
  border: 2px dashed #f5c2c2;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.05);
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  text-align: center;
  animation: fadeIn 0.6s ease-in-out;
}

/* ------------------ HEADING & ICON ------------------ */
.error-page h1 {
  font-size: 2.5rem;
  color: #d33;
  margin-bottom: 0.5rem;
  position: relative;
}

.error-page h1::before {
  content: "😵";
  font-size: 2.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.error-404 h1::before { content: "🔍"; }
.error-500 h1::before { content: "💥"; }
.error-403 h1::before { content: "🚫"; }
.error-assets h1::before { content: "🧩"; }
.error-compile h1::before { content: "🛠️"; }

/* ------------------ PARAGRAPH ------------------ */
.error-page p {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 1.5rem;
}

/* ------------------ DIAGNOSTIC BLOCK ------------------ */
.error-diagnostics {
  background: #fff0f0;
  border-left: 4px solid #d33;
  padding: 1rem 1.5rem;
  text-align: left;
  margin-bottom: 2rem;
  border-radius: 8px;
}

.error-diagnostics h3 {
  margin-top: 0;
  font-size: 1.2rem;
  color: #b00;
}

.error-diagnostics ul {
  list-style: none;
  padding-left: 0;
}

.error-diagnostics li {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
  position: relative;
  font-size: 0.95rem;
  color: #333;
}

.error-diagnostics li::before {
  content: "⚙️";
  position: absolute;
  left: 0;
}

/* ------------------ BUTTON ------------------ */
.btn.primary {
  display: inline-block;
  background: #d33;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn.primary:hover {
  background: #b00;
}

/* ------------------ ANIMATION ------------------ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------ RESPONSIVE ------------------ */
@media (max-width: 600px) {
  .error-page {
    margin: 2rem 1rem;
    padding: 1.5rem;
  }

  .error-page h1 {
    font-size: 2rem;
  }

  .error-diagnostics {
    font-size: 0.9rem;
  }
}