/* styles/sections/legal-prose.css
 * Privacy policy and terms of service: long-form legal text on the editorial prose
 * (.article--centered.prose.prose--centered). Headings take the editorial board's h2 and h3
 * roles unchanged. The text sits left on a 1152px page block with paragraphs on a 700px
 * measure; headings, lists and tables run the block's width and the end rule takes the paragraph measure. Tables, lists and inline
 * marks come from editorial.css and editorial-blocks.css. */
@layer sections {
  .legal-prose {
    --legal-measure: 700px;

    max-width: calc(1152px + 2 * var(--page-gutter));
    padding-block: var(--space-48) var(--space-80);
  }

  /* editorial.css centers every child on its own measure; the sections layer sets the
     left-aligned legal measure. */
  .legal-prose > * {
    max-width: var(--legal-measure);
    margin-inline: 0;
  }

  .legal-prose > :is(h1, h2, h3, ul, ol, .table-scroll) {
    max-width: none;
  }

  /* The end rule is the editorial component sized to the paragraph measure. */
  .legal-prose > .prose-end {
    width: min(var(--legal-measure), 100%);
    max-width: none;
  }

  /* Effective Date and Last Updated sit close together under the title. */
  .legal-prose > h1 + p + p {
    margin-top: calc(var(--space-16) - var(--ed-gap));
  }

  .legal-prose h1 {
    color: var(--ink);
    text-wrap: balance;
  }

  /* Subprocessor tables carry six columns; the editorial table's first-column width
     would crowd them, so columns share the width equally. */
  .legal-prose table {
    table-layout: auto;
  }

  .legal-prose tr > :first-child {
    width: auto;
  }

  /* The cookie preferences control sits inside a sentence and reads as a link. Its 44px hit
     area comes from ::before so the line keeps its height. */
  .legal-prose .footer-cookie-preferences {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fern);
    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }

  .legal-prose .footer-cookie-preferences::before {
    content: "";
    position: absolute;
    inset: calc((1lh - 44px) / 2) -4px;
  }

  .legal-prose .footer-cookie-preferences:hover {
    background: var(--mist);
  }

  @media (min-width: 900px) {
    .legal-prose {
      padding-block: var(--space-64) var(--space-96);
    }
  }
}