/*
 * landing/legal/legal.css — Static legal page styles.
 *
 * Layered on top of landing/styles.css (which is loaded first and provides
 * the design tokens). This file is intentionally self-contained and free of
 * any Angular / build-tool dependencies.
 *
 * Design mirrors frontend/src/app/features/legal/_legal-page.scss closely so
 * the pages look consistent whether viewed as static HTML or inside the SPA.
 */

/* ── Page layout ─────────────────────────────────────────────────────────────
   The atmospheric backdrop (page-backdrop, nebula) comes from styles.css.
   We only add the legal-specific layout layer here.
   ─────────────────────────────────────────────────────────────────────────── */

body {
  min-height: 100vh;
}

.legal-page {
  position: relative;
  z-index: 1;
  padding: var(--space-6) var(--space-4) calc(var(--space-6) * 2);
}

.legal-page__container {
  max-width: 780px;
  margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.legal-page__header {
  margin-bottom: var(--space-5);
}

.legal-page__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--accent-cool);
  text-decoration: none;
  margin-bottom: var(--space-4);
  transition: color 0.15s ease;
}

.legal-page__back-link:hover {
  color: var(--neon);
  text-decoration: none;
}

.legal-page__back-arrow {
  font-size: 1rem;
}

.legal-page__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--neon);
  letter-spacing: 0.03em;
  margin: 0 0 var(--space-2);
  text-shadow: 0 0 20px rgb(94 213 255 / 30%);
}

.legal-page__subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Data-controller meta block (Privacy page only) ──────────────────────── */

.legal-page__meta {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
}

.legal-page__entity-notice {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

.legal-page__entity-notice em {
  color: var(--accent-warm);
  font-style: normal;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.legal-page__body {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Footer nav ──────────────────────────────────────────────────────────── */

.legal-page__footer-nav {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.legal-page__link {
  color: var(--accent-cool);
  text-decoration: none;
}

.legal-page__link:hover {
  color: var(--neon);
  text-decoration: underline;
}

.legal-page__footer-sep {
  color: var(--text-muted);
}

/* ── Section block ────────────────────────────────────────────────────────── */

.legal-section {
  /* gap between sibling sections supplied by .legal-page__body flex gap */
}

.legal-section__heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--neon);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.legal-section__subheading {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--space-3) 0 var(--space-2);
}

.legal-section p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.legal-section p:last-child {
  margin-bottom: 0;
}

/* Crypto section: no visual accent — plain section same as others */
.legal-section--crypto {
}

.legal-section strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-section em {
  color: var(--accent-warm);
  font-style: normal;
}

/* ── List ────────────────────────────────────────────────────────────────── */

.legal-list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

.legal-list li {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.legal-list li:last-child {
  margin-bottom: 0;
}

.legal-list strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-list em {
  color: var(--accent-warm);
  font-style: normal;
}

/* ── Minimal nebula layers (subset of landing page backdrop) ─────────────── */

.nebula {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.nebula--primary {
  width: 70vw;
  height: 60vh;
  top: 20%;
  left: 10%;
  background: radial-gradient(
    ellipse at center,
    rgb(94 213 255 / 8%) 0%,
    transparent 70%
  );
  filter: blur(40px);
}

.nebula--secondary {
  width: 45vw;
  height: 40vh;
  top: 5%;
  right: 5%;
  background: radial-gradient(
    ellipse at center,
    rgb(255 215 0 / 5%) 0%,
    transparent 70%
  );
  filter: blur(50px);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .legal-page {
    padding: var(--space-4) var(--space-3) var(--space-6);
  }

  .legal-page__title {
    font-size: 1.375rem;
  }

  /* .legal-section--crypto has no border accent, nothing to override */
}

/* ── Motion preferences ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .nebula {
    animation: none;
  }
}