/* =========================================================
   GlobeWarn — legal.css

   A legal page is read under pressure: by someone deciding whether to buy,
   or by someone deciding whether to complain. It has to be findable and
   plain, which means a generous measure, real spacing between sections, and
   headings that can be scanned in one pass.

   Colours and type come from the site's own variables, so it changes with
   the theme like everything else. Type floor is 0.95rem here rather than
   0.84 — this is the one page nobody should have to squint at.
   ========================================================= */

#legal {
  box-sizing: border-box;
  max-width: 46rem;                /* a comfortable reading measure */
  margin: 0 auto;
  padding: 2rem var(--gutter, 1.1rem) 4rem;
}

#legal *,
#legal *::before,
#legal *::after { box-sizing: border-box; }

/* --- head ---------------------------------------------------------------- */

.legal-back {
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
}

.legal-back a { color: var(--ink-soft, #55606d); text-decoration: none; }
.legal-back a:hover { color: var(--accent, #D9480F); }

#legal h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.legal-lede {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft, #55606d);
  max-width: 40rem;
}

.legal-updated {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft, #55606d);
}

.legal-head {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line, #c9d2dc);
}

/* --- contents ------------------------------------------------------------ */

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 1.4rem 0 2.4rem;
}

.legal-toc a {
  font-size: 0.9rem;
  line-height: 1.2;
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--line, #c9d2dc);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.legal-toc a:hover { border-color: var(--accent, #D9480F); }

.legal-toc a:focus-visible {
  outline: 2px solid var(--accent, #D9480F);
  outline-offset: 2px;
}

/* --- sections ------------------------------------------------------------ */

#legal section {
  margin: 0 0 2.6rem;
  scroll-margin-top: calc(var(--bar-total, 5.5rem) + 14px);       /* clears the sticky header on the site */
}

#legal h2 {
  margin: 0 0 0.8rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

#legal p {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.68;
}

#legal ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

#legal li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.65rem;
  font-size: 0.98rem;
  line-height: 1.65;
}

#legal li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.72em;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--line-strong, #8c99a8);
}

#legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line, #c9d2dc);
}

#legal a:hover { border-bottom-color: var(--accent, #D9480F); }

#legal a:focus-visible {
  outline: 2px solid var(--accent, #D9480F);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The paragraphs a reader must not skim past: the disclaimer, the statutory
   carve-outs, the privacy promise. Marked by weight and a rule, not by
   shouting. */
.legal-weight {
  padding: 0.85rem 0 0.85rem 1rem;
  border-left: 3px solid var(--accent, #D9480F);
  font-weight: 500;
}

/* --- the facts list ------------------------------------------------------ */

.legal-facts {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.45rem 1.2rem;
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
}

.legal-facts dt {
  color: var(--ink-soft, #55606d);
}

.legal-facts dd {
  margin: 0;
}

@media (max-width: 34rem) {
  .legal-facts {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .legal-facts dd { margin-bottom: 0.7rem; }
  #legal h1 { font-size: 1.7rem; }
}

/* --- foot ---------------------------------------------------------------- */

.legal-foot {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line, #c9d2dc);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft, #55606d);
}

.legal-foot p { margin: 0 0 0.4rem; font-size: 0.9rem; }