/* The privacy page's own layout, with the web app (privacy.py). Loaded after the app's stylesheet,
   which gives the fonts, the tokens and their dark values, the base focus ring and the footer; this
   file only lays out the page's header and text, in those tokens, as How it works does. No colour
   of its own. */

/* The header row, reduced to the app header's brand (Layout.tsx). */
.page-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.page-header .wrap {
  align-items: center;
  display: flex;
  height: 4rem;
  margin: 0 auto;
  max-width: 72rem;
  padding: 0 1rem;
}

.brand {
  align-items: center;
  border-radius: 0.5rem;
  color: var(--ink);
  display: flex;
  gap: 0.625rem;
  min-height: 2.75rem;
  text-decoration: none;
}

.brand-mark {
  background: var(--ink);
  border-radius: 0.5rem;
  color: var(--on-ink);
  display: grid;
  height: 1.75rem;
  place-items: center;
  width: 1.75rem;
}

/* The dotted band behind the title, full width under the header, as the app's (Layout.tsx): the
   app stylesheet's .hero-dots draws the dots; this places it (h-80, md:h-96). */
.page-dots {
  height: 20rem;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(4rem + 1px); /* under the header and its rule */
}

.brand-name {
  font-family: var(--font-sans); /* as the app header's */
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* The text: How it works' column (48rem, a 16 px gutter), headings and spacing. */
main.wrap {
  flex: 1 0 auto; /* the footer sits at the foot of the window */
  line-height: 1.625;
  margin: 0 auto;
  max-width: 48rem;
  overflow-wrap: break-word; /* a long host name or cookie name never scrolls the page sideways */
  padding: 2.5rem 1rem 0;
  position: relative; /* painted over the dotted band, which comes before it */
  width: 100%;
}

main.wrap h1 {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* the app's LEAD: 18 px, ink-2, 12 px under the title */
main.wrap .lede {
  color: var(--ink-2);
  font-size: 1.125rem;
  margin-top: 0.75rem;
}

main.wrap h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.375;
  margin-top: 3rem; /* 48 px between sections, as the app's */
}

/* body text in ink-2, as the app's text pages (BODY) */
main.wrap p,
main.wrap ul {
  color: var(--ink-2);
  margin-top: 0.75rem;
}

main.wrap ul {
  display: grid;
  gap: 0.75rem;
  list-style: disc;
  padding-left: 1.25rem;
}

main.wrap strong {
  font-weight: 600;
}

main.wrap code {
  background: var(--leaf);
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
  font-size: 0.875em;
  padding: 0 0.25rem;
}

main.wrap a {
  color: var(--lapis);
  text-decoration: underline;
  text-underline-offset: 4px;
}

main.wrap a:hover {
  color: var(--lapis-strong);
}

@media (min-width: 48rem) {
  .page-header .wrap {
    padding: 0 1.5rem;
  }

  main.wrap {
    padding-top: 4rem; /* the app's main (md:pt-16): every text page's title at the same height */
  }

  main.wrap h1 {
    font-size: 2.5rem;
  }

  .page-dots {
    height: 24rem;
  }
}