/*
 * Shared styling for the legal documents (/privacy, /terms, /legal) — devify-me-site#32.
 *
 * G&P
 *   Goal:    long-form legal text that is comfortable to READ and unmistakably part of devify.me.
 *   Purpose: a legal page nobody can read is a legal page nobody has been given. Measure column,
 *            generous leading, real heading hierarchy. Tokens only — no raw colour or spacing
 *            literals — so these pages follow the brand theme like every other surface.
 *
 * Deliberately NOT a funnel page: these carry real navigation back to the site, because a
 * visitor looking for their rights must never be funnel-trapped. That is the one place the
 * no-nav chum convention is correctly overridden.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--dvfy-font-sans);
  background: var(--dvfy-surface-page);
  color: var(--dvfy-text-primary);
  line-height: var(--dvfy-leading-relaxed);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dvfy-space-4);
  flex-wrap: wrap;
  padding: var(--dvfy-space-5) var(--dvfy-space-6);
  border-bottom: var(--dvfy-border-1) solid var(--dvfy-border-muted);
  background: var(--dvfy-surface-raised);
}
.legal-header img { height: 2rem; width: auto; }
.legal-header nav { display: flex; gap: var(--dvfy-space-5); flex-wrap: wrap; }
.legal-header nav a {
  color: var(--dvfy-text-link);
  text-decoration: none;
  font-size: var(--dvfy-text-sm);
  font-weight: var(--dvfy-weight-medium);
}
.legal-header nav a:hover { text-decoration: underline; }

/* ── Document ───────────────────────────────────────────────────────────── */
.legal-doc {
  max-width: 46rem;                      /* ~75 characters — the readable measure */
  margin: 0 auto;
  padding: var(--dvfy-space-10) var(--dvfy-space-6) var(--dvfy-space-16);
}

.legal-doc h1 {
  font-family: var(--dvfy-font-brand);
  font-size: var(--dvfy-text-fluid-2xl);
  line-height: var(--dvfy-leading-tight);
  margin: 0 0 var(--dvfy-space-2);
}
.legal-doc h2 {
  font-family: var(--dvfy-font-brand);
  font-size: var(--dvfy-text-xl);
  line-height: var(--dvfy-leading-snug);
  margin: var(--dvfy-space-10) 0 var(--dvfy-space-3);
  padding-top: var(--dvfy-space-4);
  border-top: var(--dvfy-border-1) solid var(--dvfy-border-muted);
}
.legal-doc h3 {
  font-family: var(--dvfy-font-brand);
  font-size: var(--dvfy-text-base);
  margin: var(--dvfy-space-6) 0 var(--dvfy-space-2);
}

.legal-doc p, .legal-doc li { color: var(--dvfy-text-secondary); }
.legal-doc li { margin-bottom: var(--dvfy-space-2); }
.legal-doc ul, .legal-doc ol { padding-left: var(--dvfy-space-6); }

.legal-doc a { color: var(--dvfy-text-link); text-decoration: underline; }
.legal-doc a:hover { color: var(--dvfy-text-link-hover); }

.legal-updated {
  color: var(--dvfy-text-muted);
  font-size: var(--dvfy-text-sm);
  margin: 0 0 var(--dvfy-space-8);
}

/* ── The DRAFT banner ───────────────────────────────────────────────────────
   Loud on purpose. rueda published the literal string "PENDIENTE" to a live page
   (rueda#108): a placeholder that ships is worse than an obvious hole. This must be
   impossible to mistake for finished copy at a glance. */
.legal-draft {
  border: var(--dvfy-border-2) solid var(--dvfy-danger-border);
  background: var(--dvfy-danger-bg-subtle);
  color: var(--dvfy-danger-text);
  border-radius: var(--dvfy-radius-lg);
  padding: var(--dvfy-space-4) var(--dvfy-space-5);
  margin-bottom: var(--dvfy-space-8);
  font-size: var(--dvfy-text-sm);
}
.legal-draft > strong:first-child { display: block; margin-bottom: var(--dvfy-space-2); }
.legal-draft p { color: inherit; margin: 0 0 var(--dvfy-space-2); }
.legal-draft p:last-child { margin-bottom: 0; }

/* A single unresolved value inside the body text. Same reasoning as the banner: it has to
   read as a hole, not as content. */
.legal-pending {
  display: inline-block;
  border: var(--dvfy-border-1) dashed var(--dvfy-danger-border);
  background: var(--dvfy-danger-bg-subtle);
  color: var(--dvfy-danger-text);
  border-radius: var(--dvfy-radius-sm);
  padding: 0 var(--dvfy-space-2);
  font-weight: var(--dvfy-weight-semibold);
}

/* ── Data table (the field-by-field disclosure) ─────────────────────────── */
.legal-table-wrap { overflow-x: auto; margin: var(--dvfy-space-4) 0; }
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dvfy-text-sm);
}
.legal-doc th, .legal-doc td {
  text-align: left;
  vertical-align: top;
  padding: var(--dvfy-space-2) var(--dvfy-space-3);
  border-bottom: var(--dvfy-border-1) solid var(--dvfy-border-muted);
  color: var(--dvfy-text-secondary);
}
.legal-doc th { color: var(--dvfy-text-primary); font-weight: var(--dvfy-weight-semibold); }
.legal-doc td code, .legal-doc p code, .legal-doc li code {
  font-size: 0.9em;
  color: var(--dvfy-accent-text);
  background: var(--dvfy-surface-sunken);
  border-radius: var(--dvfy-radius-xs);
  padding: 0 var(--dvfy-space-1);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.legal-footer {
  border-top: var(--dvfy-border-1) solid var(--dvfy-border-muted);
  background: var(--dvfy-surface-raised);
  padding: var(--dvfy-space-6);
  text-align: center;
  font-size: var(--dvfy-text-sm);
  color: var(--dvfy-text-muted);
}
.legal-footer nav {
  display: flex;
  gap: var(--dvfy-space-5);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--dvfy-space-3);
}
.legal-footer a { color: var(--dvfy-text-link); text-decoration: none; }
.legal-footer a:hover { text-decoration: underline; }