/* Published legal documents: the privacy policy and the sub-processor list.
   Mobile-first. Both documents are mostly prose and tables, and a table is the
   one thing that reliably breaks a narrow layout, so it scrolls inside its own
   box rather than pushing the page sideways. */

.legal-page {
  max-width: 900px;
  margin: 2rem auto 4rem;
  padding: 0 1rem;
}

.legal-page-header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

.legal-document-meta {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: var(--neutral-dark, #666);
}

.legal-document-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark, #222);
  /* Long provider URLs and email addresses must not widen the page. */
  overflow-wrap: break-word;
}

.legal-document-body h2 {
  margin: 2rem 0 0.6rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.legal-document-body h2:first-child {
  margin-top: 0;
}

.legal-document-body h3 {
  margin: 1.5rem 0 0.4rem;
  font-size: 1.05rem;
}

.legal-document-body p {
  margin: 0 0 1rem;
}

.legal-document-body ul,
.legal-document-body ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.legal-document-body li {
  margin-bottom: 0.4rem;
}

.legal-document-body hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--neutral-mid, #ddd);
}

/* A markdown table has no wrapper element to scroll, so the table itself is
   the scroll container. display:block is what makes overflow-x apply to it. */
.legal-document-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  /* Enough that the columns stay readable rather than wrapping to one word
     per line; below this width the box scrolls instead. */
  white-space: normal;
}

.legal-document-body th,
.legal-document-body td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--neutral-mid, #ddd);
  min-width: 8rem;
}

.legal-document-body th {
  background: var(--neutral-light, #f5f5f5);
  font-weight: 600;
}

.legal-page-back {
  margin-top: 2.5rem;
  /* 44px tap target on the one link at the bottom of a long page. */
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media (min-width: 48em) {
  .legal-page {
    padding: 0 2rem;
  }

  .legal-page-header h1 {
    font-size: 2.25rem;
  }
}