/* =========================================================================
   24-legali.css, @layer legali
   Privacy, cookie e termini usano la pagina di lettura del blog (17-blog.css):
   colonna da 68ch, indice laterale, titoli Fraunces. Qui solo cio' che e'
   proprio dei documenti legali: il selettore fra i tre documenti, le schede
   (trattamenti, strumenti, cookie) e il riepilogo iniziale.
   Le schede non sono card: un filetto a sinistra e una griglia etichetta /
   valore, cosi' venti voci si scorrono senza diventare un muro di riquadri.
   ========================================================================= */
@layer legali {
  /* Selettore dei documenti: tre link in linea, quello aperto in ambra piena. */
  .c-legale .legal-docs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    font-size: var(--fs-caption);
  }
  .c-legale .legal-docs a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-block-end: 2px solid transparent;
    color: var(--ink-3);
    font-weight: 600;
    text-decoration: none;
  }
  .c-legale .legal-docs a[aria-current="page"] {
    border-block-end-color: var(--amber-deep);
    color: var(--ink-1);
  }
  @media (hover: hover) {
    .c-legale .legal-docs a:hover {
      color: var(--ink-1);
    }
  }

  .c-legale .legal-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--ink-2);
  }

  .c-legale .legal-breve {
    padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 1.1em);
    border-radius: var(--radius-md);
    background: var(--surface-l-100, var(--white));
  }

  .c-legale .legal-titolare {
    line-height: 1.7;
  }

  /* Titolo di categoria dentro un documento: piu' piccolo dell'h3 di
     articolo, perche' sotto ha una sequenza di schede. */
  .c-legale .blog-body h3.legal-cat {
    font-size: var(--fs-h4);
  }
  .c-legale .legal-cat-desc {
    color: var(--ink-2);
  }

  .c-legale .legal-voce {
    padding-inline-start: var(--s-5);
    border-inline-start: 2px solid var(--hair-l-2);
  }
  .c-legale .blog-body .legal-voce h3 {
    margin-block-start: 0;
    font-size: var(--fs-h4);
  }
  .c-legale .legal-voce h4 {
    margin: 0;
    font-family: var(--body);
    font-size: var(--fs-body-l);
    font-weight: 700;
    color: var(--ink-1);
  }
  .c-legale .legal-voce h4 code {
    font-size: .95em;
  }
  .c-legale .legal-voce-meta {
    margin: var(--s-1) 0 0;
    font-size: var(--fs-caption);
    color: var(--ink-3);
  }

  .c-legale .legal-scheda {
    display: grid;
    grid-template-columns: minmax(8.5rem, max-content) minmax(0, 1fr);
    gap: var(--s-2) var(--s-5);
    margin: var(--s-4) 0 0;
    font-size: var(--fs-body-s);
    line-height: 1.6;
  }
  .c-legale .legal-scheda dt {
    color: var(--ink-3);
    font-weight: 600;
  }
  .c-legale .legal-scheda dd {
    margin: 0;
    color: var(--ink-1);
  }

  .c-legale .legal-data {
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--hair-l-2);
    font-size: var(--fs-caption);
    color: var(--ink-3);
  }

  /* Il link-pulsante "Apri le preferenze" usa il .btn del sito: il colore dei
     link dell'articolo non deve sovrascriverlo. */
  .c-legale .blog-body a.btn {
    color: var(--accent-on, var(--ink));
    text-decoration: none;
  }

  @media (max-width: 560px) {
    .c-legale .legal-scheda {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
    .c-legale .legal-scheda dd + dt {
      margin-block-start: var(--s-3);
    }
    .c-legale .legal-voce {
      padding-inline-start: var(--s-4);
    }
  }
}