/*
Page-specific styles for /terms and /privacy, loaded after marketing.css via
content_for :page_stylesheet.

These pages render a Publication written in Markdown, so the styles have to
cover whatever the document contains rather than a known layout. The old
Tailwind design leaned on `prose` for this; Bootstrap has no equivalent, so
the typographic defaults live here.

The marketing heading scale is display-sized — an h2 reaches 2.25rem — which
is right for a landing page and far too loud inside a legal document. The
headings below step down to something a long document can repeat.
*/

/* A measure long enough to read a contract in, short enough to keep the eye
   from getting lost between lines. */
.legal-content {
  max-width: 44rem;
}

.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-content h5,
.legal-content h6 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.legal-content h2 { font-size: 1.5rem; }
.legal-content h3 { font-size: 1.25rem; }
.legal-content h4,
.legal-content h5,
.legal-content h6 { font-size: 1.05rem; }

/* Clauses are numbered and nested; the document's own structure carries the
   hierarchy, so lists only need room to breathe. */
.legal-content ul,
.legal-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.legal-content li {
  margin-bottom: 0.5rem;
}

.legal-content li > ul,
.legal-content li > ol {
  margin-top: 0.5rem;
}

.legal-content a {
  color: var(--tt-pink);
}

.legal-content a:hover {
  color: var(--tt-pink-hover);
}

/* Long documents often carry a table of definitions or fees. */
.legal-content table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.legal-content th,
.legal-content td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  text-align: left;
  vertical-align: top;
}