/* ==========================================================================
   Signal8 Games -- Supporting Page Styles (pages.css)
   ==========================================================================
   Styles for the 404 error page and privacy policy page.
   Relies on css/base.css for design tokens, reset, and typography.
   Relies on css/home.css for nav and footer styles.

   Decisions referenced:
     D-01: Full nav + footer on 404 page
     D-03: 404 page includes home.css for consistent styling
     D-04: Comprehensive privacy policy with standard sections
     D-05: Full nav + footer on privacy page
     D-06: Privacy page at privacy/index.html
   ========================================================================== */

/* ==========================================================================
   Section 1: 404 Error Page (.error-page)
   --------------------------------------------------------------------------
   Vertically and horizontally centered error content. Flexbox column layout
   fills remaining viewport height after the fixed nav (64px).
   ========================================================================== */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - 64px);
  padding: 32px 16px;
  text-align: center;
}

.error-page h1 {
  margin-bottom: 16px;
}

.error-page p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 480px;
  margin-bottom: 32px;
}

.error-page__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 16px 32px;
  background-color: var(--color-primary);
  color: var(--color-bg);
  text-decoration: none;
  border-radius: 8px;
  font-size: var(--text-base);
  font-weight: 700;
}

.error-page__cta:hover {
  background-color: var(--color-primary-hover);
}

.error-page__cta:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .error-page__cta {
    transition: background-color 0.2s ease;
  }
}

/* ==========================================================================
   Section 2: Legal Pages (.privacy, .legal)
   --------------------------------------------------------------------------
   Single-column legal content, centered at 720px max-width.
   Mobile-first padding with desktop override at 768px breakpoint.
   ========================================================================== */

.privacy,
.legal {
  max-width: 720px;
  margin-inline: auto;
  padding: 112px 16px 48px;
  scroll-margin-top: 80px;
}

.privacy h1,
.legal h1 {
  margin-bottom: 8px;
}

.privacy__updated,
.legal__updated {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: 32px;
}

.privacy section,
.legal section {
  margin-bottom: 32px;
}

.privacy section h2,
.legal section h2 {
  margin-top: 0;
  margin-bottom: 16px;
}

.privacy section p,
.legal section p {
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.6;
}

.privacy section ul,
.legal section ul {
  margin-top: 0;
  margin-bottom: 16px;
  padding-inline-start: 24px;
  line-height: 1.6;
}

.privacy section li,
.legal section li {
  margin-bottom: 8px;
}

.privacy a,
.legal a {
  color: var(--color-primary);
  text-decoration: underline;
}

.privacy a:hover,
.legal a:hover {
  color: var(--color-primary-hover);
}

.privacy a:focus-visible,
.legal a:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .privacy,
  .legal {
    padding: 128px 32px 64px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .privacy a,
  .legal a {
    transition: color 0.2s ease;
  }
}