/* -----------------------------------------------------------------------
   Legal pages — privacy policy, cookie policy, terms and conditions.
   -----------------------------------------------------------------------
   Loaded after landing-preview.css, which supplies the shell: the light
   band, container gutters, brand tokens and the shared entrance roles.
   Everything here is document typography.

   The documents themselves (core/templates/core/legal/*.html) are classless
   semantic HTML — h2/h3/p/ul/li/strong — so all of this is element styling.
   Nothing below depends on the wording, which means the legal text can be
   revised by whoever owns it without touching CSS, and equally that a
   restyle can never quietly alter a clause.
   ----------------------------------------------------------------------- */

.lp-legal {
  /* One column edge for the whole document. Defined once so the heading
     block's rule lands exactly on the text measure below it rather than
     overhanging it. */
  --legal-measure: 52ch;

  /* The navbar is fixed and glass-backed; without this the eyebrow starts
     underneath it. */
  padding-top: calc(var(--nav-h, 72px) + clamp(24px, 4vw, 48px));
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* -----------------------------
   Title composition
   ----------------------------- */
.lp-legal__head {
  max-width: var(--legal-measure);
  margin-bottom: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(24px, 3vw, 32px);
  border-bottom: 1px solid rgba(11, 21, 33, 0.12);
}

.lp-legal__title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--lp-light-ink);
}

.lp-legal__subtitle {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--lp-light-muted);
}

.lp-legal__code {
  display: inline-flex;
  margin: 18px 0 0;
  padding: 5px 8px;
  border: 1px solid rgba(11, 21, 33, 0.16);
  border-radius: 4px;
  color: var(--lp-light-muted);
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* -----------------------------
   Document body
   -----------------------------
   Measure is the whole game on a page like this. The previous implementation
   ran the text to the full container width — around 110 characters per line
   at 1440px, well past the point where the eye reliably finds the start of
   the next line. 68 characters is the conventional comfortable maximum for
   continuous prose. Note that ch is the width of the "0" glyph, which in Public
   Sans is appreciably wider than the average letter — 68ch measured out at ~88
   real characters, so the value below is set from what actually renders rather
   than from the nominal number. It still tracks the root font size, which this
   site scales with the viewport. */
.lp-legal__body {
  max-width: var(--legal-measure);
  color: var(--lp-light-ink);
  font-size: 1rem;
  line-height: 1.75;
}

/* Headings carry the hierarchy on their own — size, weight and the space
   above them. No rules, no numbering, no colour accents: the documents
   already number their own clauses, and a legal page should read quietly. */
.lp-legal__body h2 {
  margin: clamp(36px, 5vw, 52px) 0 14px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--lp-light-ink);
}

.lp-legal__body h3 {
  margin: 28px 0 10px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lp-light-ink);
}

/* The first heading follows the head block's own bottom margin, so it does
   not need the full inter-section gap on top of it as well. */
.lp-legal__body > :first-child { margin-top: 0; }

.lp-legal__body p { margin: 0 0 16px; }

.lp-legal__body ul,
.lp-legal__body ol {
  margin: 0 0 16px;
  padding-left: 1.35em;
}

.lp-legal__body li { margin-bottom: 8px; }
.lp-legal__body li:last-child { margin-bottom: 0; }

.lp-legal__body strong { font-weight: 700; }

.lp-legal__body a {
  color: var(--lp-light-accent);
  text-underline-offset: 2px;
}
/* Hover darkens rather than brightens: the old hover went to --brand
   (#38bdf8), lower contrast than the resting state — the one moment the link
   was hardest to read was while you were pointing at it. */
.lp-legal__body a:hover { color: var(--lp-light-accent-strong); }

/* Long URLs and email addresses in a privacy policy are a common source of
   horizontal overflow on a 360px screen. */
.lp-legal__body a { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
  .lp-legal__body { font-size: 0.97rem; }
  .lp-legal__body h2 { font-size: 1.18rem; }
}

/* Review date, where one is recorded. Quiet: it is provenance, not content. */
.lp-legal__updated {
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid rgba(11, 21, 33, 0.12);
  font-size: 0.9rem;
  color: var(--lp-light-muted);
}

/* The cookie inventory is tabular data, not prose, so it is allowed out of the
   reading measure that governs the paragraphs around it — five columns inside
   52ch would be unreadable. It scrolls inside its own box on a phone rather
   than pushing the page sideways. */
.lp-legal__table {
  /* Explicit width so it is not clamped by the parent's reading measure, and
     a viewport-relative cap so it never pushes the page sideways. */
  width: 880px;
  max-width: calc(100vw - (var(--cme-section-gx) * 2));
  margin-inline: 0;
  overflow-x: auto;
}
.lp-legal__table:focus-visible {
  outline: 2px solid var(--lp-light-accent);
  outline-offset: 4px;
}

.lp-legal__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 0.92rem;
}
.lp-legal__body caption {
  /* Bootstrap sets caption-side: bottom, which put the table's own title
     underneath it and read as a stray sentence. */
  caption-side: top;
  text-align: left;
  padding-bottom: 8px;
  font-weight: 700;
  color: var(--lp-light-ink);
}
.lp-legal__body :is(th, td) {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid rgba(11, 21, 33, 0.12);
}
.lp-legal__body th { font-weight: 700; color: var(--lp-light-ink); }
.lp-legal__body code {
  font-size: 0.92em;
  overflow-wrap: anywhere;
  /* Bootstrap colours <code> pink by default, which is off-palette here and
     lands at a weak ratio on the light band. */
  color: var(--lp-light-ink);
  background: rgba(11, 21, 33, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
}