/* ==========================================================================
   CVR — privacy.css
   "Privacy and cookies policy". Loads after base.css, which carries the tokens,
   the shared chrome and .page-ground. Only the policy column is here.
   ========================================================================== */

.policy {
  padding-block: calc(var(--space-12) + var(--space-9)) var(--space-13);
}

.policy__col {
  grid-column: 1 / -1;
}

/* The mockup centres the title over the column and leaves the copy ranged
   left under it. */
.policy__title {
  color: var(--color-lime);
  text-transform: uppercase;
  text-align: center;
  margin-block: -0.22em 0;
}

.policy__body {
  margin-top: var(--space-11);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--size-body-02);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

/* Legal copy runs long, so paragraphs are separated by a full blank line
   rather than base.css's 16px. */
.policy__body > p + p,
.policy__body > ul + p {
  margin-top: var(--space-6);
}

/* The opening statement is set in green, a step above the body copy */
.policy__lead {
  color: var(--color-green);
  font-size: var(--size-body-01);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-7);
}

.policy__body h2 {
  color: var(--color-green);
  font-family: var(--font-body);
  font-size: var(--size-h03);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-transform: none;
  margin: var(--space-10) 0 var(--space-4);
}

/* Browser names inside "How to enable or disable cookies" — same colour, one
   step down, and tighter to the list they head. */
.policy__body h3 {
  color: var(--color-green);
  font-family: var(--font-body);
  font-size: var(--size-body-01);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-transform: none;
  margin: var(--space-7) 0 var(--space-3);
}

.policy__body ul {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-6);
  list-style: disc;
}

.policy__body li {
  margin-top: var(--space-1);
  padding-left: var(--space-2);
}

.policy__body li::marker {
  color: rgba(255, 255, 255, 0.6);
}

.policy__body a {
  color: var(--color-lime);
}

@media (min-width: 1024px) {
  .policy {
    padding-block: calc(var(--space-12) * 1.8) calc(var(--space-12) * 1.6);
  }
  /* Columns 3 to 10 — the same well the president's letter and the search
     results sit in. */
  .policy__col {
    grid-column: 3 / 11;
  }
  .policy__body {
    margin-top: var(--space-12);
  }
}