/* Legal document (page-templates/privacy.php, prototype polityka()): loaded on the privacy policy only, after main.css,
   in its layer "components". A reading column of about 70 characters with headings in the document's own scale (not
   the display H2 of the sections), and the table of contents: above the text on smaller screens, a sticky column
   beside it from 1024 px. */
@layer components {
  .legal {
    /* H2 of the document 28 to 34 px (320 to 1440 px), H3 19 px */
    --zc-legal-h2: clamp(1.75rem, 1.643rem + 0.536vw, 2.125rem);
    --zc-legal-h3: 1.1875rem;
  }
  /* a link of the contents puts its heading just under the sticky header: the page's scroll padding alone (the
     general :target margin would double the distance) */
  .legal [id] { scroll-margin-top: 0; }
  .legal__layout { display: grid; gap: var(--zc-space-7); align-items: start; }
  .legal__body { display: grid; gap: var(--zc-space-8); min-width: 0; }

  /* Table of contents */
  .legal__toc { padding: var(--zc-space-5); border: 1px solid var(--zc-line); border-radius: var(--zc-radius-card); background: var(--zc-white); }
  .legal__toc-title {
    margin-bottom: var(--zc-space-3);
    color: var(--zc-muted);
    font-family: var(--zc-font-body);
    font-size: var(--zc-text-label);
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .legal__toc-list { display: grid; list-style: none; font-size: var(--zc-text-small); line-height: 1.4; }
  .legal__toc-list a {
    display: block;
    padding: var(--zc-space-2) 0;
    border-top: 1px solid var(--zc-line);
    color: var(--zc-forest);
    text-decoration: none;
  }
  .legal__toc-list li:first-child a { border-top: 0; }
  .legal__toc-list a:hover { color: var(--zc-amber-deep); text-decoration: underline; }

  /* Text of the document */
  .prose--legal { gap: var(--zc-space-4); max-width: 36rem; font-size: var(--zc-text-body); line-height: 1.65; }
  .prose--legal h2 {
    margin-top: var(--zc-space-7);
    font-size: var(--zc-legal-h2);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .prose--legal > h2:first-child, .legal__consent > h2 { margin-top: 0; }
  .prose--legal h3 {
    margin-top: var(--zc-space-4);
    color: var(--zc-ink);
    font-family: var(--zc-font-body);
    font-size: var(--zc-legal-h3);
    font-weight: 600;
    line-height: 1.35;
  }
  .prose--legal h2 + h3 { margin-top: 0; }
  .prose--legal ul, .prose--legal ol { display: grid; gap: var(--zc-space-2); padding-left: 1.1em; }
  .prose--legal li { padding-left: 0.15em; }
  .prose--legal li::marker { color: var(--zc-amber-deep); }
  .prose--legal strong { color: var(--zc-forest); font-weight: 600; }
  .prose--legal code {
    padding: 0.1em 0.35em;
    border-radius: var(--zc-radius-small);
    background: var(--zc-sand);
    color: var(--zc-forest);
    font-family: var(--zc-font-body);
    font-size: 0.9em;
    overflow-wrap: anywhere;
  }
  .prose--legal a { overflow-wrap: anywhere; }
  .legal__consent { padding-top: var(--zc-space-7); border-top: 1px solid var(--zc-line-strong); }

  /* narrow phones: 16 px text and the list markers hanging in the margin, so that list items keep their measure */
  @media (max-width: 22.49em) {
    .prose--legal { font-size: 1rem; }
    .prose--legal ul, .prose--legal ol, .prose--legal li { padding-left: 0; }
  }
  @media (min-width: 64em) {
    .legal__layout { grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); }
    .legal__toc {
      position: sticky;
      top: calc(var(--zc-header-height) + var(--zc-space-5));
      max-height: calc(100vh - var(--zc-header-height) - var(--zc-space-7));
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }
}