/*
 * The website theme for the Privacy Policy and Terms of Use.
 *
 * The documents come from the iOS app with its own light and dark styles. This
 * stylesheet is linked after them and css/site.css, which draws the header
 * and footer every page shares. It gives the documents the home page's look:
 * a dark page, the Akrobat typeface for headings and Ember accents. Body text
 * keeps the system font, which covers every language the documents are
 * translated into.
 */

/* Replaces the app's light and dark colors; the home page is always dark. */
:root {
  color-scheme: dark;
  --text-color: #d1d1d6;
  --heading-color: #fff;
  --background-color: #0d0d0d;
  --accent-color: #ff4f4f;
  --accent-hover-color: #d02f2f;
  --border-color: #333;
  --code-background-color: #1c1c1e;
  --display-font: "akrobat", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

@media screen {
  body {
    margin: 0;
    padding: 0;
  }
}

main.document {
  max-width: 46em;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

a:hover {
  color: var(--heading-color);
  background-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--display-font);
  letter-spacing: 0.05em;
}

h1 {
  font-size: 2.6em;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: normal;
  padding-bottom: 0.4em;
  border-bottom: 4px solid var(--accent-color);
}

h2 {
  font-size: 1.5em;
  color: var(--accent-color);
  text-transform: uppercase;
}

h3 {
  font-size: 1.25em;
}

blockquote {
  border-left-color: var(--accent-color);
  background-color: var(--code-background-color);
  padding: 1em 1.25em 0.1em;
  margin-bottom: 2em;
}

@media (max-width: 767px) {
  main.document {
    padding: 32px 20px 48px;
  }
  h1 {
    font-size: 1.7em;
    letter-spacing: 0.04em;
  }
}

/* Prints the document only, in black on white as the app's print styles intend. */
@media print {
  :root {
    color-scheme: light;
    --background-color: #fff;
    --border-color: #999;
    --code-background-color: #fff;
  }
  main.document {
    max-width: none;
    padding: 0;
  }
}