/* ──────────────────────────────────────────────────────────────
   legal.css — shared chrome and typography for Crocodata legal
   pages (privacy, impressum, terms, accessibility, licences,
   security, regional privacy). Loads after styles.css and reuses
   its design tokens, so these pages match the main site exactly.
   ────────────────────────────────────────────────────────────── */

/* ── Page shell ── */
.legal-main {
  padding: 140px 0 40px;
}

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

/* ── Breadcrumb / back link ── */
.legal-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color var(--transition);
}

.legal-crumb:hover { color: var(--color-accent); }

/* ── Title block ── */
.legal-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.legal-wrap h1 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--color-text);
}

.legal-version {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.legal-lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 8px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

/* ── Body typography ── */
.legal-wrap h2 {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 48px 0 14px;
  padding-top: 4px;
  scroll-margin-top: 100px;
}

.legal-wrap h2::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-bottom: 14px;
}

.legal-wrap h3 {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 28px 0 8px;
}

.legal-wrap p,
.legal-wrap li {
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: 12px;
}

.legal-wrap ul,
.legal-wrap ol {
  padding-left: 22px;
  margin-bottom: 18px;
}

.legal-wrap li::marker { color: var(--color-accent); }

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

.legal-wrap a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.legal-wrap a:hover { border-bottom-color: var(--color-accent); }

.legal-wrap code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--color-surface, rgba(255,255,255,0.05));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1px 6px;
}

/* ── Tables ── */
.legal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 20px 0 26px;
  font-size: 0.92rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.legal-table th,
.legal-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.legal-table thead th {
  background: var(--color-accent-dim);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.legal-table tr:last-child th,
.legal-table tr:last-child td { border-bottom: none; }

/* Two-column key/value variant (Impressum) */
.legal-table.kv td:first-child {
  color: var(--color-text);
  font-weight: 600;
  width: 210px;
}

.legal-table-scroll { overflow-x: auto; }

/* ── Callouts ── */
.legal-note {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 20px 0;
}

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

.legal-note.warn {
  border-left-color: #e2725b;
  background: rgba(226, 114, 91, 0.08);
}

/* ── Footer of the legal page ── */
.legal-foot {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.legal-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 16px;
}

.legal-foot-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.legal-foot-links a:hover { color: var(--color-accent); }

/* ── Mobile ── */
@media (max-width: 720px) {
  .legal-main { padding: 110px 0 24px; }
  .legal-wrap h2 { margin-top: 38px; }
  .legal-table { font-size: 0.86rem; }
  .legal-table th, .legal-table td { padding: 10px; }
  .legal-table.kv td:first-child { width: auto; }
}