/* ============================================================
   HOWAR MIRROR — Pagine legali (Termini, Privacy). Documento leggibile,
   header brandizzato navy + corpo su fondo chiaro. Print-friendly.
   ============================================================ */
:root{ --lg-green:#57A035; --lg-navy:#1B2E47; --lg-ink:#2b2f36; --lg-muted:#5b6472; --lg-line:#e5e9ee; }
*{ box-sizing:border-box; }
body.legal-page{
  margin:0; background:#f4f6f8; color:var(--lg-ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif; line-height:1.65;
}
/* header */
.legal-top{
  background:var(--lg-navy);
  background-image:radial-gradient(circle at 8% 10%, rgba(87,160,53,.30), transparent 46%),
                   linear-gradient(200deg,#22405F 0%,#1B2E47 60%,#16253A 100%);
  color:#fff; padding:34px 24px 30px; text-align:center;
}
.legal-brand{ display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; }
.legal-brand img{ height:26px; width:auto; display:block; }
.legal-brand span{ font-size:1.4rem; font-weight:800; letter-spacing:3px; color:var(--lg-green);
  padding-left:12px; border-left:1px solid rgba(255,255,255,.25); line-height:26px; }
.legal-top h1{ margin:0 0 6px; font-size:1.9rem; font-weight:800; letter-spacing:-.4px; }
.legal-sub{ margin:0; font-size:.85rem; color:#b8c8d8; }
/* corpo */
.legal-doc{
  max-width:820px; margin:-18px auto 60px; background:#fff; border:1px solid var(--lg-line);
  border-radius:14px; padding:34px 40px 40px; box-shadow:0 4px 18px rgba(27,46,71,.07);
}
.legal-intro{ font-size:1rem; color:#3a3f47; background:#f7f9fb; border-left:3px solid var(--lg-green);
  border-radius:0 8px 8px 0; padding:14px 18px; margin:0 0 26px; }
.legal-doc h2{ font-size:1.12rem; color:var(--lg-navy); margin:28px 0 10px; padding-top:14px; border-top:1px solid var(--lg-line); }
.legal-doc h2:first-of-type{ border-top:0; padding-top:0; margin-top:6px; }
.legal-doc h3{ font-size:1rem; color:var(--lg-navy); margin:0 0 8px; }
.legal-doc p{ margin:0 0 12px; font-size:.94rem; }
.legal-doc ul{ margin:0 0 14px; padding-left:22px; }
.legal-doc li{ margin-bottom:7px; font-size:.94rem; }
.legal-doc a{ color:#2D4B9A; }
/* tabella trattamenti */
.legal-tab{ width:100%; border-collapse:collapse; margin:6px 0 16px; font-size:.86rem; }
.legal-tab th{ text-align:left; background:#f4f6f8; color:var(--lg-navy); font-size:.74rem;
  text-transform:uppercase; letter-spacing:.5px; padding:9px 10px; border-bottom:2px solid var(--lg-line); }
.legal-tab td{ padding:9px 10px; border-bottom:1px solid #f0f2f5; vertical-align:top; }
.legal-tab tr:last-child td{ border-bottom:0; }
/* riquadri */
.legal-box{ background:#f7f9fb; border:1px solid var(--lg-line); border-radius:10px; padding:16px 18px; margin:22px 0; }
.legal-box p{ margin:0; font-size:.9rem; }
.legal-box-green{ background:rgba(87,160,53,.07); border-color:rgba(87,160,53,.28); }
/* --- documento a due parti: Parte I generale, Parte II schede di servizio --- */
/* Il titolo di parte deve staccarsi dagli articoli, non sembrarne uno. */
.legal-doc h2.legal-parte{ font-size:1.3rem; color:#fff; background:var(--lg-navy);
  border:0; border-radius:8px; padding:12px 16px; margin:38px 0 20px; letter-spacing:.2px; }
.legal-doc h2.legal-parte:first-of-type{ margin-top:6px; }
/* Ogni scheda e' un blocco chiuso: si vede dove finisce un servizio e ne inizia un altro. */
.legal-scheda{ border:1px solid var(--lg-line); border-left:3px solid var(--lg-green);
  border-radius:0 10px 10px 0; padding:18px 20px 6px; margin:0 0 20px; background:#fcfdfe; }
.legal-scheda h3{ font-size:1.06rem; margin:0 0 10px; }

/* Avviso in testa a una versione archiviata: deve essere impossibile scambiarla
   per il documento in vigore, quindi giallo d'allerta e non lo stile del testo. */
.legal-storico{ background:#fdf6e3; border:1px solid #e0c98a; border-left:4px solid #d9a441;
  border-radius:8px; padding:14px 18px; margin:0 0 24px; }
.legal-storico p{ margin:0 0 8px; font-size:.9rem; color:#6b5111; }
.legal-storico p:last-child{ margin-bottom:0; }
.legal-storico a{ color:#8a6414; }

/* Elenco delle versioni superate, in coda al documento in vigore: informativo,
   quindi discreto — non deve competere con le clausole. */
.legal-versioni{ margin:26px 0 0; padding-top:16px; border-top:1px solid var(--lg-line); }
.legal-versioni h3{ font-size:.9rem; text-transform:uppercase; letter-spacing:.5px;
  color:var(--lg-muted); margin:0 0 8px; }
.legal-versioni p, .legal-versioni li{ font-size:.85rem; color:var(--lg-muted); }
.legal-versioni ul{ margin:0; }

.legal-small{ font-size:.85rem; color:var(--lg-muted); }
.legal-note{ font-size:.82rem; color:#8a6414; background:#fdf6e3; border:1px dashed #e0c98a;
  border-radius:8px; padding:12px 14px; margin-top:26px; }
.legal-back{ margin-top:26px; padding-top:16px; border-top:1px solid var(--lg-line); font-size:.9rem; }
@media (max-width:640px){
  .legal-doc{ padding:22px 18px 28px; margin:-12px 12px 40px; }
  .legal-top h1{ font-size:1.45rem; }
  .legal-tab{ font-size:.8rem; }
  .legal-tab th, .legal-tab td{ padding:7px 6px; }
  /* su schermo stretto il titolo di parte andrebbe a capo largo: si rimpicciolisce. */
  .legal-doc h2.legal-parte{ font-size:1.12rem; padding:11px 14px; margin:30px 0 16px; }
  .legal-scheda{ padding:16px 15px 5px; }
}
@media print{
  body.legal-page{ background:#fff; }
  .legal-top{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .legal-doc{ box-shadow:none; border:0; margin:0; max-width:100%; padding:0; }
  .legal-note, .legal-back{ display:none; }
}