/* ============================================================
   GREY SHIELD — /legal/ shared stylesheet
   Loaded on top of the global styles.css. Used by all three
   legal pages so markup, spacing and behaviour stay in sync
   and only need to be fixed in one place.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.legal-hero {
  padding: clamp(5.5rem, 12vw, 7rem) clamp(1.25rem, 5vw, 2rem) 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.legal-hero-inner { max-width: 1040px; margin: 0 auto; }
.legal-hero .badge { display: inline-block; margin-bottom: 1.1rem; }
.legal-hero h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 800;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.legal-hero p.legal-sub {
  color: var(--grey-l, #8fa3b1);
  font-size: 0.95rem;
  margin: 0 0 1.75rem;
  max-width: 60ch;
}

/* ── Tabs: horizontal-scroll on narrow screens, no wrap-collapse ── */
.legal-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.legal-tabs::-webkit-scrollbar { display: none; }
.legal-tab {
  flex: 0 0 auto;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius, 6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--grey-l, #8fa3b1);
  font-size: 0.82rem;
  font-family: var(--mono, monospace);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.legal-tab:hover { border-color: var(--cyan, #00e5ff); color: #fff; }
.legal-tab.active {
  background: rgba(0, 229, 255, 0.1);
  border-color: var(--cyan, #00e5ff);
  color: var(--cyan, #00e5ff);
  font-weight: 700;
}

/* ── Layout: content + sticky "on this page" nav ─────────────── */
.legal-layout {
  max-width: 1040px;
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 5vw, 2rem) 6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .legal-toc { display: none; }
}

/* Grid items default to min-width: auto, which refuses to shrink below
   the width of their content (e.g. a wide table). Without this, any
   page with a .legal-table forces the whole column — and the page —
   wider than the viewport on mobile. */
.legal-layout > * { min-width: 0; }

.legal-panel h2.section-name { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.3rem; }
.legal-updated {
  font-size: 0.8rem;
  color: var(--cyan, #00e5ff);
  margin-bottom: 1.75rem;
  display: block;
  font-family: var(--mono, monospace);
}
.legal-panel p, .legal-panel li { color: var(--grey-l, #99aabc); line-height: 1.85; font-size: 0.95rem; }
.legal-panel h3 {
  font-size: 0.72rem;
  color: var(--cyan, #00e5ff);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2.5rem 0 0.6rem;
  scroll-margin-top: calc(var(--nav-h, 72px) + 1rem);
}
.legal-panel h4 { font-size: 1rem; color: #fff; margin: 1.5rem 0 0.4rem; }
.legal-panel ul { padding-left: 1.3rem; margin: 0.4rem 0 1rem; list-style: disc; }
.legal-panel li { margin-bottom: 0.35rem; }
.legal-panel a { color: var(--cyan, #00e5ff); text-decoration: underline; text-underline-offset: 2px; }
.legal-panel hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.07); margin: 2rem 0; }
.legal-panel strong.hl { color: #fff; }

/* ── On-this-page nav (desktop only) ─────────────────────────── */
.legal-toc {
  position: sticky;
  top: calc(var(--nav-h, 72px) + 2rem);
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
}
.legal-toc-label {
  color: var(--grey-m, #4a5568);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  margin-bottom: 0.75rem;
}
.legal-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.legal-toc a {
  color: var(--grey-l, #8fa3b1);
  text-decoration: none;
  display: block;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  padding-left: 0.75rem;
  transition: color 0.15s, border-color 0.15s;
}
.legal-toc a:hover { color: #fff; border-color: rgba(0, 229, 255, 0.4); }

/* Mobile: collapsible TOC as a <details> right under the hero */
.legal-toc-mobile { display: none; }
@media (max-width: 860px) {
  .legal-toc-mobile {
    display: block;
    margin: 0 clamp(1.25rem, 5vw, 2rem);
    margin-top: 1.5rem;
  }
  .legal-toc-mobile summary {
    cursor: pointer;
    font-family: var(--mono, monospace);
    font-size: 0.78rem;
    color: var(--cyan, #00e5ff);
    padding: 0.7rem 1rem;
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--radius, 6px);
    list-style: none;
  }
  .legal-toc-mobile summary::-webkit-details-marker { display: none; }
  .legal-toc-mobile[open] summary { border-radius: 6px 6px 0 0; }
  .legal-toc-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    border-radius: 0 0 var(--radius, 6px) var(--radius, 6px);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .legal-toc-mobile a { color: var(--grey-l, #99aabc); text-decoration: none; font-size: 0.85rem; }
  .legal-toc-mobile a:hover { color: var(--cyan, #00e5ff); }
}

/* ── Callout blocks ───────────────────────────────────────────── */
.policy-cta {
  margin: 1.5rem 0 2rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 10px;
  background: rgba(0, 229, 255, 0.05);
}
.policy-cta p { margin: 0 0 0.9rem; font-size: 0.9rem; }
.policy-cta a.btn-report {
  display: inline-block;
  background: var(--cyan, #00e5ff);
  color: #000;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.55rem 1.3rem;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.policy-cta a.btn-report:hover { opacity: 0.85; }

.safe-harbour {
  border-left: 3px solid var(--cyan, #00e5ff);
  padding: 0.85rem 1.25rem;
  margin: 1rem 0 1.5rem;
  background: rgba(0, 229, 255, 0.04);
  border-radius: 0 6px 6px 0;
}
.safe-harbour p { margin: 0; font-size: 0.93rem; }

.legal-note {
  border-left: 3px solid var(--grey-m, #4a5568);
  padding: 0.85rem 1.25rem;
  margin: 1rem 0 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 6px 6px 0;
}
.legal-note p { margin: 0; font-size: 0.86rem; color: var(--grey-l, #8fa3b1); }

.legal-warn {
  border-left: 3px solid var(--red, #ff3b55);
  padding: 0.85rem 1.25rem;
  margin: 1rem 0 1.5rem;
  background: rgba(255, 59, 85, 0.05);
  border-radius: 0 6px 6px 0;
}
.legal-warn p { margin: 0; font-size: 0.93rem; }

/* ── Simple responsive table (SLA / scope tables) ────────────── */
.legal-table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); }
table.legal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 480px; }
table.legal-table th, table.legal-table td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--grey-l, #99aabc);
}
table.legal-table th {
  color: var(--cyan, #00e5ff);
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.02);
}
table.legal-table tr:last-child td { border-bottom: none; }

/* ── Definition list (Terms §1) ───────────────────────────────── */
dl.legal-defs { margin: 0.5rem 0 1.5rem; }
dl.legal-defs dt { color: #fff; font-weight: 700; font-size: 0.9rem; margin-top: 1rem; }
dl.legal-defs dd { margin: 0.25rem 0 0; color: var(--grey-l, #99aabc); font-size: 0.92rem; line-height: 1.7; }

/* ── Grievance / contact officer card (Privacy §) ─────────────── */
.legal-contact-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0 1.5rem;
  background: var(--bg-2, #080c10);
}
.legal-contact-card h4 { margin-top: 0; }
.legal-contact-card p { margin: 0.2rem 0; font-size: 0.9rem; }

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  .navbar, footer, .legal-tabs, .legal-toc, .legal-toc-mobile, .policy-cta a.btn-report { display: none !important; }
  body { background: #fff; color: #000; }
  .legal-panel p, .legal-panel li { color: #111; }
}