/* Legal pages: privacy policy, terms and conditions.
   Extends the Masterminds design system in the same idiom as trust-centre.css.
   Brand tokens only: navy #003469, teal #00abb6, mist #f4f7fa.

   These are long reference documents, read under pressure by someone hunting
   for one clause. So the horizontal space goes to navigation rather than to
   empty margins: a sticky contents list beside the text on a wide screen, and
   the same list as a scrolling bar above it on a narrow one. The text column
   itself stays at a readable measure. */

.legal-page {
  --legal-line: #dce5ed;
  --legal-mist: #f4f7fa;
  --legal-muted: #5a6b7d;
}

/* ---------- Sticky in-page nav ---------- */

/* The same bar the Trust Centre uses, in the same place and with the same
   values. Page stylesheets in this repo are self-contained, so the rules are
   repeated here rather than shared; trust-centre.css is the original. */

.legal-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--legal-line);
}

.legal-nav__list {
  display: flex;
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.legal-nav__list::-webkit-scrollbar { display: none; }

.legal-nav__list a {
  display: block;
  padding: 1.8rem 0;
  font-size: var(--font-size--xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5a6672;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.legal-nav__list a:hover,
.legal-nav__list a:focus-visible {
  color: #003469;
  border-bottom-color: #00abb6;
}

/* ---------- Document column ---------- */

/* One centred column. Running text stays at a readable measure; tables are
   exempt so they get the full width they need. */
.legal-main {
  max-width: 82rem;
  margin: 0 auto;
}

.legal-impressum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 3.2rem;
  margin-bottom: 4rem;
  padding: clamp(2rem, 4vw, 3.2rem);
  background: var(--legal-mist);
  border: 1px solid var(--legal-line);
  border-left: 4px solid var(--color-primary);
  border-radius: .6rem;
}

.legal-impressum.legal-body > h2,
.legal-impressum.legal-body > p {
  margin: 0;
}

.legal-impressum > h2,
.legal-impressum > p:last-child {
  grid-column: 1 / -1;
}

.legal-impressum > p {
  overflow-wrap: anywhere;
}

.legal-impressum #impressum {
  scroll-margin-top: 20rem;
}

@media (max-width: 600px) {
  .legal-impressum { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Summary panel ---------- */

/* A plain-language lead so a reader knows what the document covers before
   committing to it. */
.legal-summary {
  background: var(--legal-mist);
  border-left: 4px solid var(--color-secondary);
  padding: 2.4rem 2.8rem;
  margin-bottom: 4rem;
}

.legal-summary p { margin: 0; line-height: 1.6; }

/* ---------- Document body ---------- */

.legal-body h2 {
  margin: 3.2rem 0 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--legal-line);
  font-size: var(--font-size--m);
  /* Long documents scroll to an anchor, so keep the heading clear of the
     sticky header above it. */
  scroll-margin-top: 8rem;
}

.legal-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-body h3 {
  margin: 3.2rem 0 1.2rem;
  font-size: var(--font-size--s);
  text-transform: none;
  scroll-margin-top: 8rem;
}

.legal-body p,
.legal-body li {
  line-height: 1.6;
}

.legal-body p { margin: 0 0 1.6rem; }

.legal-body ul,
.legal-body ol {
  margin: 0 0 1.6rem;
  padding-left: 2.4rem;
}

.legal-body li { margin-bottom: .8rem; }

/* Markdown wraps every item of a list in a paragraph as soon as one item has
   two, so an item's paragraphs keep the item's spacing, not a paragraph's. */
.legal-body li > p { margin: 0 0 .8rem; }
.legal-body li > p:last-child { margin-bottom: 0; }

.legal-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.legal-body a:hover { color: var(--color-secondary); }

/* The bold lead of a definition carries the term itself. */
.legal-body li > strong:first-child {
  color: var(--color-primary);
}

/* ---------- Tables ---------- */

/* Wide tables scroll inside their own container rather than pushing the page
   sideways on a phone. */
.legal-body figure,
.legal-body .wp-block-table {
  margin: 0 0 2.4rem;
  overflow-x: auto;
}

.legal-body table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: var(--font-size--xs);
}

.legal-body th,
.legal-body td {
  padding: 1.2rem 1.4rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--legal-line);
}

.legal-body thead th {
  background: var(--legal-mist);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--font-size--xxs);
}

.legal-body tbody tr:last-child td { border-bottom: 0; }

/* ---------- Questions ---------- */

.legal-contact {
  margin-top: 4rem;
  padding: 2.8rem;
  background: var(--color-primary);
  color: #fff;
}

.legal-contact h2 {
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: var(--font-size--m);
}

.legal-contact p { margin: 0; line-height: 1.6; }

.legal-contact a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.legal-contact a:hover { color: var(--color-secondary); }