/* =========================================================
   TMF ENGINEERINGS — Legal / Policy pages
   Shared components for Privacy, Terms, Cookies, Disclaimer,
   Data Deletion, AUP, Security, Contact, Copyright,
   Accessibility and GDPR pages.
   ========================================================= */

/* ---------- Meta bar (Effective / Updated pills) ---------- */
.legal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}
.legal-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--f-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 100px;
}
.legal-pill strong{ color: var(--text); font-weight:600; }
.legal-pill svg{ width:14px; height:14px; color: var(--blue); flex:none; }

/* ---------- Layout: sticky TOC + content ---------- */
.legal-layout{
  display:grid;
  grid-template-columns: 260px minmax(0,1fr);
  gap: 56px;
  align-items:start;
}
.legal-toc{
  position: sticky;
  top: 108px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 22px;
  max-height: calc(100vh - 140px);
  overflow-y:auto;
}
.legal-toc-title{
  font-family: var(--f-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--text-faint);
  margin-bottom:14px;
}
.legal-toc ol{
  counter-reset: legal-toc-counter;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.legal-toc li{
  counter-increment: legal-toc-counter;
}
.legal-toc a{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:8px 10px;
  border-radius: var(--radius-s);
  font-size:.86rem;
  color: var(--text-dim);
  line-height:1.35;
  transition: background .2s ease, color .2s ease;
}
.legal-toc a::before{
  content: counter(legal-toc-counter);
  flex:none;
  font-family: var(--f-mono);
  font-size:.72rem;
  color: var(--text-faint);
  margin-top:1px;
}
.legal-toc a:hover,
.legal-toc a:focus-visible{
  background: var(--surface-2);
  color: var(--blue);
}
.legal-toc-divider{
  height:1px;
  background: var(--border);
  margin: 16px 0;
}
.legal-toc-more a{ color: var(--blue); font-weight:600; font-size:.84rem; }

/* ---------- Content typography ---------- */
.legal-content{ max-width: 760px; }
.legal-content h2{
  font-size: 1.5rem;
  scroll-margin-top: 110px;
  padding-top: 8px;
  margin-bottom:.6em;
}
.legal-content h2:not(:first-child){ margin-top: 52px; }
.legal-content h3{
  font-size: 1.08rem;
  margin: 26px 0 .6em;
}
.legal-content p,
.legal-content li{ color: var(--text-dim); }
.legal-content > section + section{ border-top: 1px solid var(--border); }
.legal-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:9px;
  background: rgba(14,99,255,0.08);
  border: 1px solid rgba(14,99,255,0.25);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size:.82rem;
  font-weight:600;
  margin-right:12px;
  flex:none;
}
.legal-h2-row{ display:flex; align-items:center; }

/* ---------- Checklist (uses the same visual language as benefit-list) ---------- */
.legal-checklist{ display:flex; flex-direction:column; gap:0; margin: 18px 0 28px; }
.legal-checklist li{
  display:flex;
  gap:14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size:.95rem;
}
.legal-checklist li:last-child{ border-bottom:none; }
.legal-checklist .legal-check-icon{
  flex:none;
  width: 30px; height:30px;
  border-radius: 8px;
  background: rgba(14,99,255,0.08);
  border: 1px solid rgba(14,99,255,0.25);
  color: var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.legal-checklist.no li .legal-check-icon{
  background: rgba(214,60,60,0.08);
  border-color: rgba(214,60,60,0.28);
  color: #C6403F;
}

/* ---------- Callouts ---------- */
.legal-callout{
  display:flex;
  gap:14px;
  padding: 18px 20px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin: 22px 0;
  font-size:.92rem;
}
.legal-callout svg{ flex:none; width:20px; height:20px; margin-top:2px; color: var(--blue); }
.legal-callout p{ margin:0; }
.legal-callout strong{ color: var(--text); }
.legal-callout.warn{
  background: rgba(214,150,30,0.08);
  border-color: rgba(214,150,30,0.28);
}
.legal-callout.warn svg{ color: #B9791F; }
.legal-callout.info{
  background: rgba(14,99,255,0.06);
  border-color: rgba(14,99,255,0.22);
}

/* ---------- Card grid (data collected / third-parties / rights) ---------- */
.legal-card-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
  margin: 18px 0 28px;
}
.legal-card-grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.legal-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  box-shadow: 0 10px 30px -22px rgba(15,35,70,0.16);
}
.legal-card .legal-card-icon{
  width: 38px; height:38px;
  border-radius:10px;
  background: rgba(14,99,255,0.08);
  border: 1px solid rgba(14,99,255,0.25);
  color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.legal-card h4{
  font-family: var(--f-display);
  font-size:1rem;
  font-weight:600;
  margin: 0 0 6px;
  color: var(--text);
}
.legal-card p{ font-size:.86rem; margin:0; }

/* ---------- Simple two-column table (rights / retention schedules) ---------- */
.legal-table{
  width:100%;
  border-collapse: collapse;
  margin: 18px 0 28px;
  font-size:.9rem;
}
.legal-table th,
.legal-table td{
  text-align:left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-table th{
  font-family: var(--f-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--text-faint);
  font-weight:600;
}
.legal-table td:first-child{ color: var(--text); font-weight:600; white-space:nowrap; }
.legal-table td{ color: var(--text-dim); }

/* ---------- Related policies grid (footer of every legal page) ---------- */
.legal-related{
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.legal-related-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.legal-related-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 16px 18px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size:.88rem;
  font-weight:600;
  color: var(--text);
  transition: border-color .2s ease, transform .2s ease;
}
.legal-related-card svg{ flex:none; width:16px; height:16px; color: var(--blue); }
.legal-related-card:hover{ border-color: var(--border-strong); transform: translateY(-2px); }
.legal-related-card.current{
  background: var(--surface-2);
  color: var(--text-faint);
  cursor:default;
}
.legal-related-card.current:hover{ transform:none; }

/* ---------- Contact strip reused inside legal content ---------- */
.legal-contact-card{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 24px 26px;
  margin: 18px 0 28px;
}
.legal-contact-card div strong{
  display:block;
  font-family: var(--f-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--text-faint);
  margin-bottom:6px;
  font-weight:600;
}
.legal-contact-card div a,
.legal-contact-card div span{ color: var(--text); font-weight:600; font-size:.95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .legal-layout{ grid-template-columns: minmax(0,1fr); gap:32px; }
  .legal-toc{
    position: static;
    max-height:none;
  }
  .legal-content{ max-width:none; }
  .legal-related-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .legal-card-grid,
  .legal-card-grid.cols-3{ grid-template-columns: minmax(0,1fr); }
  .legal-contact-card{ grid-template-columns: minmax(0,1fr); }
  .legal-related-grid{ grid-template-columns: minmax(0,1fr); }
  .legal-table{ font-size:.84rem; }
  .legal-table th,.legal-table td{ padding:10px 10px; }
}