/* ---------------------------------------------------------------------------
 * legal.css — the shared policy-page layout, plus the contact page.
 *
 * Priority is long-form readability on a dark surface:
 *   - measure capped at 62ch (~80 rendered characters) so the eye can find the
 *     next line, inside a 3:1 reading-column-to-rail grid
 *   - generous line-height (1.75) — dark backgrounds need more than light ones
 *   - text-secondary for body copy, not text-primary: pure #F4F4F8 on #08080F
 *     is a harsh contrast for hundreds of words at a time
 *   - clear heading hierarchy with real space above each section
 * Tokens only.
 * ------------------------------------------------------------------------- */

/* ===========================================================================
   POLICY PAGE
   =========================================================================== */
.legal-hero {
  border-bottom: 1px solid var(--border-hairline);
  background: var(--surface-1);
  padding-block: clamp(var(--space-8), 6vw, var(--space-9));
}
.legal-hero h1 {
  margin: 0 0 var(--space-4);
  max-width: 20ch;
}

/* breadcrumb + version metadata */
.policy-meta__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--body-sm-size);
  margin-bottom: var(--space-3);
}
.policy-meta__crumbs a { color: var(--text-secondary); }
.policy-meta__crumbs a:hover { color: var(--text-primary); }
.policy-meta__sep { color: var(--text-muted); }
.policy-meta__current { color: var(--text-primary); font-weight: 600; }
.policy-meta__version {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.policy-meta__version strong {
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---- the reading column ---- */
.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
  padding-block: clamp(var(--space-8), 6vw, var(--space-9));
}
/* Client correction (6 Aug 2026): the reading column was too narrow against the
   rail. Columns are now a true 3:1 fractional split rather than a fluid column
   beside a fixed 260px rail, so the policy text keeps three quarters of the
   grid at every desktop width. minmax(0, …) on both tracks stops long URLs or
   wide tables from blowing the grid out. */
@media (min-width: 1040px) {
  .legal-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--space-9); }
  .legal-layout__aside { position: sticky; top: 100px; }
}

.legal-body {
  /* Space Grotesk's `ch` (the width of "0") is wide relative to its average
     lowercase glyph, so the cap reads about 1.3x its `ch` value in real
     characters per line. 58ch measured ~75 characters. The client asked for a
     wider reading column, so this is raised to 62ch, which measures ~80 —
     the top of the comfortable range, and no further. */
  max-width: 62ch;
  font-size: var(--body-size);
  line-height: 1.75;
  color: var(--text-secondary);
}

/* Headings: the old markup used <h2> for every section, so style h2/h3 and let
   the existing hierarchy stand. Generous top margin does the sectioning work —
   rules and boxes would fight the long text. */
.legal-body h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.3;
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
  color: var(--text-primary);
  margin: var(--space-9) 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}
.legal-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal-body h3 {
  font-family: var(--font-display);
  font-size: var(--body-lg-size);
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--space-7) 0 var(--space-3);
}

.legal-body p { margin: 0 0 var(--space-5); }
.legal-body strong { color: var(--text-primary); font-weight: 600; }

.legal-body ul,
.legal-body ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
}
.legal-body li { margin-bottom: var(--space-3); }
.legal-body li::marker { color: var(--text-muted); }

.legal-body a {
  color: var(--accent-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--accent-pink); }

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-5);
  font-size: var(--body-sm-size);
}
.legal-body th,
.legal-body td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}
.legal-body th { color: var(--text-primary); font-family: var(--font-display); font-weight: 600; }

/* ---- cross links ---- */
.policy-cross-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.policy-cross-links a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.policy-cross-links a:hover { border-color: var(--border-hairline-hover); color: var(--text-primary); }

.policy-foot {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---- sticky side rail ---- */
.legal-rail {
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.legal-rail__title {
  font-family: var(--font-display);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.legal-rail__links { display: flex; flex-direction: column; gap: var(--space-3); }
.legal-rail__links a { font-size: var(--body-sm-size); color: var(--text-secondary); }
.legal-rail__links a:hover { color: var(--text-primary); }
.legal-rail__links a[aria-current="page"] { color: var(--accent-purple); font-weight: 600; }

/* ===========================================================================
   CONTACT PAGE
   =========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 980px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); }
  .contact-layout__aside { position: sticky; top: 100px; }
}

.contact-panel {
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

/* Validation summary shown AT the form (the route anchors the visitor here, so
   a page-top flash would be off screen — see the comment in routes/legal.js). */
.form-alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--error-border);
  background: var(--error-tint);
  margin-bottom: var(--space-6);
}
.form-alert__body { min-width: 0; }
.form-alert__title {
  font-family: var(--font-display);
  font-size: var(--body-size);
  font-weight: 600;
  color: var(--error);
  margin-bottom: var(--space-2);
}
.form-alert ul { margin: 0; padding-left: var(--space-5); }
.form-alert li { font-size: var(--body-sm-size); color: var(--text-secondary); margin-bottom: var(--space-1); }

.form-success {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--success-border);
  background: var(--success-tint);
  margin-bottom: var(--space-6);
}
.form-success__icon { color: var(--success); flex-shrink: 0; }
.form-success__title {
  font-family: var(--font-display);
  font-size: var(--body-lg-size);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.form-success p { margin: 0; font-size: var(--body-sm-size); line-height: 1.6; color: var(--text-secondary); }
.form-success__ref {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

/* The honeypot must be reachable by a bot parsing the DOM but never seen or
   focusable by a person — hence off-screen rather than display:none. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-info { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-info__item { display: flex; gap: var(--space-4); }
.contact-info__icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--accent-purple);
  display: flex; align-items: center; justify-content: center;
}
.contact-info__label {
  font-family: var(--font-display);
  font-size: var(--body-sm-size);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.contact-info__value {
  font-size: var(--body-sm-size);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  overflow-wrap: anywhere;
}
.contact-note {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}