/* Shared look for the static legal pages (/legal/*.html). Matches the app's
   dark-slate brand: dark backdrop, white readable document card, purple accent.
   These pages are plain static HTML (no JS) so payment reviewers, parents and
   search engines can read them without loading the app bundle. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f172a;
  --card: #ffffff;
  --ink: #1e293b;
  --ink-soft: #475569;
  --accent: #7c3aed;
  --accent-soft: #ede9fe;
  --line: #e2e8f0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
}

.legal-logo {
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  letter-spacing: 0.2px;
}
.legal-logo span { color: #a78bfa; }

.legal-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.legal-nav a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(203, 213, 225, 0.25);
  border-radius: 999px;
  white-space: nowrap;
}
.legal-nav a:hover { color: #fff; border-color: #a78bfa; }
.legal-nav a.is-here { background: var(--accent); border-color: var(--accent); color: #fff; }

.legal-doc {
  background: var(--card);
  max-width: 860px;
  margin: 0.5rem auto 3rem;
  padding: clamp(1.4rem, 5vw, 3rem);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.5);
}

.legal-doc h1 {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  line-height: 1.25;
  margin-bottom: 0.35rem;
  color: #0f172a;
}

.legal-meta {
  color: var(--ink-soft);
  font-size: 0.9rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.6rem;
  border-bottom: 2px solid var(--accent-soft);
}

.legal-doc h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.6rem;
  color: #0f172a;
  scroll-margin-top: 1rem;
}
.legal-doc h2::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.55rem; background: var(--accent); border-radius: 3px; }

.legal-doc h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; color: #0f172a; }

.legal-doc p { margin: 0.6rem 0; }
.legal-doc ul, .legal-doc ol { margin: 0.6rem 0 0.6rem 1.4rem; }
.legal-doc li { margin: 0.35rem 0; }
.legal-doc a { color: var(--accent); }
.legal-doc strong { color: #0f172a; }

.legal-callout {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
}

.legal-callout.warn {
  background: #fef3c7;
  border-left-color: #d97706;
}

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0;
  font-size: 0.92rem;
}
.legal-doc th, .legal-doc td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  vertical-align: top;
}
.legal-doc th { background: #f8fafc; }

.legal-contact {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.legal-footer {
  text-align: center;
  color: #94a3b8;
  font-size: 0.85rem;
  padding: 0 1rem 2.5rem;
}
.legal-footer a { color: #cbd5e1; }

/* Small screens: let the table scroll instead of squashing. */
.legal-scroll { overflow-x: auto; }

@media print {
  body { background: #fff; }
  .legal-topbar, .legal-footer { display: none; }
  .legal-doc { box-shadow: none; margin: 0; padding: 0; max-width: none; }
}