/**
 * Legal document body.
 *
 * The three legal nodes carry around 900 inline styles pasted from Word, plus a
 * Bootstrap `col-10` whose stylesheet no longer loads on brochure pages. The
 * markup is neutralised here rather than rewritten: it is legal text under
 * approval, in four languages, and editing it by script would be a change to the
 * content rather than to the presentation.
 *
 * `!important` is unavoidable — an inline style beats any selector.
 */

/* Centred on the same 820px measure as the title band above, so the copy lines
   up with the heading rather than hugging the page edge. */
.dc-legal-body {
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin: 0 auto;
  /* padding: 32px var(--space-5) 64px; */
  color: var(--fg-primary);
  font-family: var(--font-brand);
  padding: 0 10px;
}

/* The pasted wrappers carry their own width and gutters (`width: 700`,
   `margin: auto 20%`), which would indent the text inside an already narrow
   column. The measure belongs to the wrapper above.
   Lists are excluded from the padding reset: their left padding is what holds
   the markers, and flattening it hides the numbering. */
.dc-legal-body [style] {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-family: var(--font-brand) !important;
  background: none !important;
}

.dc-legal-body [style]:not(ol):not(ul) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Word leaves colours and sizes on individual runs; the brand palette wins. */
.dc-legal-body [style] {
  color: inherit !important;
  font-size: inherit !important;
}

.dc-legal-body h1,
.dc-legal-body h2 {
  margin: var(--space-8) 0 var(--space-3);
  color: var(--fg-primary);
  font-size: 19px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-headline);
  line-height: 1.2;
}

.dc-legal-body h3,
.dc-legal-body h4,
.dc-legal-body h5 {
  margin: var(--space-6) 0 var(--space-2);
  color: var(--fg-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.dc-legal-body p,
.dc-legal-body li,
.dc-legal-body td,
.dc-legal-body th {
  color: var(--fg-primary);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.7;
}

.dc-legal-body p {
  margin: 0 0 var(--space-3);
}

/* The documents number their clauses with nested `<ol>`s, some carrying a
   `start` attribute so the numbering continues across separate lists. Nothing
   here resets a counter: that would renumber legal clauses. */
.dc-legal-body ul,
.dc-legal-body ol {
  margin: 0 0 var(--space-4);
  padding-left: 0
}

.dc-legal-body li {
  margin-bottom: var(--space-2);
  padding-left: var(--space-1);
}

.dc-legal-body ul >li {
  position: relative;
  left: 15px;
}

/* The marker takes the brand red, the way the prototype numbers its sections. */
.dc-legal-body li::marker {
  color: var(--digicel-red);
  font-weight: var(--weight-bold);
}

/* Nested lists step in, and drop the outer list's bottom margin. */
.dc-legal-body li > ol,
.dc-legal-body li > ul {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* Two of the three documents mark their section headings with a bold run rather
   than a heading element, and Word buried it under nested spans:
   `<p><span><span><span><b>Who we are</b></span></span></span></p>`.
   `:has()` matches the paragraph whose only content is that bold run, whatever
   the nesting, and gives it the spacing a heading would have. */
.dc-legal-body p:has(> b:only-child),
.dc-legal-body p:has(> strong:only-child),
.dc-legal-body p:has(> span:only-child > b:only-child),
.dc-legal-body p:has(> span:only-child > span:only-child > b:only-child),
.dc-legal-body p:has(> span:only-child > span:only-child > span:only-child > b:only-child) {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.dc-legal-body p:has(> span:only-child > span:only-child > span:only-child > b:only-child) b,
.dc-legal-body p:has(> span:only-child > span:only-child > b:only-child) b,
.dc-legal-body p:has(> span:only-child > b:only-child) b,
.dc-legal-body p > b:only-child,
.dc-legal-body p > strong:only-child {
  color: var(--fg-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-body);
}

.dc-legal-body a {
  color: var(--digicel-red);
  font-weight: var(--weight-bold);
}

.dc-legal-body strong,
.dc-legal-body b {
  font-weight: var(--weight-bold);
}

/* Some documents hold wide comparison tables. They scroll inside their own box
   so they cannot widen the page. */
.dc-legal-body table {
  display: block;
  width: 100% !important;
  margin: 0 0 var(--space-5);
  overflow-x: auto;
  border-collapse: collapse;
}

.dc-legal-body td,
.dc-legal-body th {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  text-align: left;
}

.dc-legal-body img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .dc-legal-body {
    padding: 48px var(--space-8) 96px;
  }

  .dc-legal-body h1,
  .dc-legal-body h2 {
    font-size: 22px;
  }

  .dc-legal-body p,
  .dc-legal-body li,
  .dc-legal-body td,
  .dc-legal-body th {
    font-size: var(--text-base);
  }
}