/* The legal page (LegalScreen.js): the terms and the privacy policy on one page, a sticky table
   of contents beside the article on a wide screen and above it on a narrow one. */

.legalScreen {
  padding: 3.5rem 0 2rem;
}

.legalHead {
  margin-bottom: 2.5rem;
}

/* A further document on the page (the privacy policy under the terms) opens like the page does,
   its rule 3rem from the sections on either side: the article's grid gap (2.5rem, below), which no
   margin collapses into, and this margin above it, the padding below. */

.legalPart {
  margin-top: 0.5rem;
  padding-top: 3rem;
  border-top: 0.0625rem solid var(--line);
  scroll-margin-top: 5.75rem;
}

.legalLayout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 68ch);
  gap: 4rem;
  align-items: start;
}

.legalTocOther {
  margin-top: 1.75rem;
}

/* Article: the sections sit at one repeated distance, so the article spaces
   them itself instead of every child carrying the same bottom margin. */

.legalArticle {
  display: grid;
  gap: 2.5rem;
}

.legalSection {
  padding: 0;
  scroll-margin-top: 5.75rem;
}

/* The gap above sets the distance between sections; a trailing margin inside one would add to it. */

.legalSection > :last-child {
  margin-bottom: 0;
}

.legalSection h2 {
  font: var(--md-sys-typescale-headline-small);
  margin-bottom: 1rem;
}

.legalSection h3 {
  font: var(--md-sys-typescale-title-medium);
  margin: 1.5rem 0 0.5rem;
}

.legalSection p {
  font: var(--md-sys-typescale-body-large);
  margin-bottom: 0.75rem;
}

.legalSection ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  display: grid;
  gap: 0.5rem;
  font: var(--md-sys-typescale-body-large);
}

@media (max-width: 56.25rem) {
  .legalLayout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}