/* ==========================================================================
   Legal pages — Terms, Privacy Policy
   Long documents nobody wants to read. The job is legibility: a comfortable
   measure, clear section breaks, and headings you can scan for.
   ========================================================================== */

.bl-legalpage { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--bl-section-y); }

.bl-legalpage .bl-shell { max-width: 48rem; }

.bl-legalpage__header { margin-bottom: var(--bl-space-8); }
.bl-legalpage__header h1 { margin-bottom: var(--bl-space-3); }

.bl-legalpage__body { font-size: var(--bl-size-body); line-height: 1.7; }

.bl-legalpage__body > * + * { margin-top: var(--bl-space-4); }

.bl-legalpage__body h2 {
  margin-top: var(--bl-space-9);
  padding-top: var(--bl-space-5);
  border-top: 1px solid var(--bl-border);
  font-size: var(--bl-size-h3);
  font-weight: var(--bl-weight-black);
  line-height: 1.25;
  letter-spacing: var(--bl-track-heading);
  scroll-margin-top: 7rem;
}

.bl-legalpage__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.bl-legalpage__body h3 {
  margin-top: var(--bl-space-6);
  font-size: 1.125rem;
  font-weight: var(--bl-weight-bold);
  letter-spacing: var(--bl-track-heading);
}

.bl-legalpage__body ul,
.bl-legalpage__body ol { padding-left: 1.375rem; list-style: disc; }
.bl-legalpage__body ol { list-style: decimal; }
.bl-legalpage__body li + li { margin-top: var(--bl-space-3); }
.bl-legalpage__body li::marker { color: var(--bl-gray-400); }

.bl-legalpage__body a {
  color: var(--bl-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bl-legalpage__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bl-size-sm);
}

.bl-legalpage__body th,
.bl-legalpage__body td {
  padding: var(--bl-space-3) var(--bl-space-4);
  border: 1px solid var(--bl-border);
  text-align: left;
  vertical-align: top;
}

.bl-legalpage__body th { background: var(--bl-gray-100); font-weight: var(--bl-weight-bold); }

.legal-updated {
  display: inline-block;
  padding: var(--bl-space-2) var(--bl-space-4);
  border-radius: var(--bl-radius-pill);
  background: var(--bl-surface-sunken);
  font-size: var(--bl-size-sm);
  color: var(--bl-text-muted);
}

/* Draft banner — only ever rendered behind the staging gate. */
.bl-legalpage__draft {
  padding: var(--bl-space-4) var(--bl-space-5);
  border: 1px solid rgba(217, 119, 59, 0.35);
  border-radius: var(--bl-radius-md);
  background: rgba(217, 119, 59, 0.1);
  font-size: var(--bl-size-sm);
  line-height: 1.6;
  color: #8a4413;
}

/* -------------------------------------------------------------------------
   Cookie choice

   Set apart from the policy text on purpose. It is the one part of this page
   that DOES something, and a control that looks like another paragraph is a
   control nobody presses.
   ------------------------------------------------------------------------- */

.bl-legalpage__cookies {
  margin-top: var(--bl-space-8);
  padding: var(--bl-space-6);
  border: 1px solid var(--bl-border-strong);
  border-radius: var(--bl-radius-lg);
  background: var(--bl-surface-raised);
}

.bl-legalpage__cookies > :first-child { margin-top: 0; }

/* Arriving from the footer link jumps here. Without this the heading lands
   under the fixed menubar, which reads as the wrong place on the page. */
.bl-legalpage__cookies { scroll-margin-top: var(--bl-space-8); }

/* It takes focus on arrival so a screen reader announces where the jump
   landed, but it was never tabbed to, so the ring would read as a glitch.
   :focus-visible still draws one for anybody navigating by keyboard. */
.bl-legalpage__cookies:focus { outline: none; }

.bl-legalpage__cookies:focus-visible {
  outline: 3px solid var(--bl-blue);
  outline-offset: 4px;
}

.bl-legalpage__cookiestate { margin: var(--bl-space-3) 0 0; }

.bl-legalpage__cookiehelp {
  margin: var(--bl-space-2) 0 0;
  color: var(--bl-text-muted);
  font-size: var(--bl-size-sm);
}

.bl-legalpage__cookieform {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bl-space-3);
  margin-top: var(--bl-space-5);
}

@media (max-width: 34rem) {
  .bl-legalpage__cookieform { flex-direction: column; }
  .bl-legalpage__cookieform .bl-btn { width: 100%; }
}


/* Conspicuous notices --------------------------------------------------------

   Warranty disclaimers and liability limits are conventionally set in all
   caps. The convention exists to make them "conspicuous" — hard to miss — but
   caps is a poor way to do it: a block of capitals removes the word shapes
   readers actually read by, and this site is written for people who find
   dense technology intimidating. So the text is sentence case and the
   conspicuousness is carried by the frame instead: heavier weight, a rule down
   the side, and a panel that separates it from the paragraphs around it.
   More noticeable than caps, and legible. */

.bl-legalpage__body .bl-legal-notice {
  padding: var(--bl-space-5) var(--bl-space-6);
  border-inline-start: 3px solid currentColor;
  border-radius: 0 var(--bl-radius-md) var(--bl-radius-md) 0;
  background: rgba(0, 0, 0, 0.04);
  font-weight: var(--bl-weight-medium);
}

@media (prefers-color-scheme: dark) {
  .bl-legalpage__body .bl-legal-notice { background: rgba(255, 255, 255, 0.06); }
}