/* The legal pages (/conditions, /confidentialite, /terms, /privacy): long reading on the homepage's
   colours and fonts (home.css, loaded first), in one narrow column that phones can read. */

.legal-lang {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.legal-lang:hover { border-color: var(--teal); }

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px var(--gutter) 64px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.legal h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.02em; margin: 16px 0 12px; }
.legal h2 { font-size: 24px; line-height: 1.25; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid var(--plum-2); }
.legal h3 { font-size: 18px; margin: 28px 0 8px; color: var(--apricot); }
.legal p { margin: 10px 0; }
.legal ul, .legal ol { margin: 8px 0; padding-left: 22px; list-style: disc; }
.legal ol { list-style: decimal; }
.legal li > ul { list-style: circle; }
.legal li { margin: 4px 0; }
.legal li > ul { margin: 4px 0; }
.legal strong { color: #fff; }
.legal a { color: var(--teal); }
.legal blockquote { margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--teal); background: var(--plum-2); border-radius: 0 10px 10px 0; }
.legal hr { border: 0; border-top: 1px solid var(--plum-2); margin: 32px 0; }
.legal code { font-family: 'DM Mono', Menlo, monospace; font-size: 14px; }

/* Tables scroll sideways inside their box on a phone, instead of widening the page. */
.table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--plum-2); border-radius: 12px; }
.legal table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; line-height: 1.45; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--plum-2); }
.legal th { background: var(--plum-2); color: var(--ink); font-weight: 700; }
.legal tr:last-child td { border-bottom: 0; }

@media (max-width: 600px) {
  .legal h1 { font-size: 30px; }
  .legal h2 { font-size: 21px; }
}