/* Privacy e cookie v2: titolo, indice appiccicato a sinistra e testo lungo (.prose) a destra; sul telefono l'indice
   sta sopra il testo. */

@layer pages {
  .legal { padding-top: clamp(24px, 3vw, 40px); padding-bottom: var(--section); }

  .legal-head {
    margin-top: clamp(28px, 4vw, 56px);
    max-width: 60rem;

    & h1 { margin-top: 10px; font-size: var(--step-hero); max-width: 18ch; }
    & .soft { margin-top: 18px; font-size: var(--step-small); }
  }
  .legal-actions { margin-top: 24px; }

  .legal-draft {
    margin-top: 32px;
    max-width: 68ch;
    padding: 16px 20px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    font-size: var(--step-small);
  }

  .legal-body {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    column-gap: clamp(40px, 7vw, 128px);
    align-items: start;
    margin-top: clamp(48px, 6vw, 88px);
  }

  .legal-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    font-size: var(--step-small);

    & strong { display: block; margin-bottom: 12px; font-weight: 600; }
    & ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
    & a {
      display: block;
      padding: 7px 0;
      color: var(--ink-soft);
      text-decoration: none;
      transition: color var(--dur-fast) var(--ease);
    }
    & a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
  }

  @media (max-width: 960px) {
    .legal-body { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
    .legal-toc {
      position: static;
      max-height: none;
      padding: 20px;
      border-radius: var(--r-md);
      background: var(--tint);

      & a { padding: 6px 0; }
    }
  }
}