/* ============================================================
   VoltaVPN — legal pages compatibility layer (marketing surface)
   ------------------------------------------------------------
   The legal templates (terms, privacy, gdpr) carry long-form,
   legally reviewed prose with legacy class names. Rather than
   rewrite the text, this maps those classes onto the v2 token
   system so they render correctly on the light editorial surface.
   Loaded only on the legal pages via {% block extra_css %}.
   ============================================================ */

[data-surface="marketing"] .legal-content { max-width: 75ch; }
[data-surface="marketing"] .legal-meta {
  font: 400 var(--t-sm) var(--font-mono);
  color: var(--ink-500);
  margin-bottom: var(--s-10);
}

/* Headings / body inherit .prose; tighten utility-class spacing */
[data-surface="marketing"] .legal-content .mb-0 { margin-bottom: 0; }
[data-surface="marketing"] .legal-content .mb-1 { margin-bottom: var(--s-1); }
[data-surface="marketing"] .legal-content .mb-2 { margin-bottom: var(--s-2); }
[data-surface="marketing"] .legal-content .mb-3 { margin-bottom: var(--s-3); }
[data-surface="marketing"] .legal-content .mb-4 { margin-bottom: var(--s-6); }

/* Colour helpers → tokens */
[data-surface="marketing"] .text-volt-muted { color: var(--ink-500); }
[data-surface="marketing"] .text-amber { color: var(--signal-strong); font-weight: 600; }
[data-surface="marketing"] .text-volt-error { color: var(--danger); }

/* Tables → v2 look */
[data-surface="marketing"] .table-wrap {
  border: var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: var(--s-4) 0 var(--s-6);
}
[data-surface="marketing"] .legal-content .table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--t-base);
}
[data-surface="marketing"] .legal-content .table th {
  text-align: left;
  font: 500 var(--t-xs)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 12px 16px;
  border-bottom: 1px solid var(--paper-300);
}
[data-surface="marketing"] .legal-content .table td {
  padding: 12px 16px;
  border-bottom: var(--hairline);
  color: var(--ink-700);
  vertical-align: top;
  line-height: var(--lh-base);
}
[data-surface="marketing"] .legal-content .table tr:last-child td { border-bottom: 0; }

/* Cards / callouts */
[data-surface="marketing"] .legal-content .card {
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper-0);
  padding: var(--s-6);
  margin: var(--s-4) 0 var(--s-6);
}
[data-surface="marketing"] .legal-content .card ul { margin: 0; }

/* GDPR rights grid */
[data-surface="marketing"] .gdpr-rights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
@media (max-width: 768px) {
  [data-surface="marketing"] .gdpr-rights-grid { grid-template-columns: 1fr; }
}
[data-surface="marketing"] .gdpr-right {
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper-0);
  padding: var(--s-5);
}
[data-surface="marketing"] .gdpr-right h3 {
  font-size: var(--t-base);
  margin: 0 0 var(--s-2);
  border: 0;
  padding: 0;
}
[data-surface="marketing"] .gdpr-right p { font-size: var(--t-sm); margin: 0; }

/* Related links footer */
[data-surface="marketing"] .legal-related {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
}
[data-surface="marketing"] .legal-related a { color: var(--signal-strong); }

/* Kill list: no FontAwesome. The legal markup still references fa-* glyphs;
   the marketing surface never loads FontAwesome, so hide the empty <i>. */
[data-surface="marketing"] .legal-content i[class*="fa-"] { display: none; }