/* ==========================================================================
   Tech4TIME — pages/legal.css
   Long-form prose: the privacy policy, and anything else of that shape.

   Styled by element inside .legal__body rather than by class on every
   paragraph. Legal text gets edited by whoever needs it changed, and a rule
   that only works if the author remembers a class is a rule that stops
   working.
   ========================================================================== */

.legal__body {
  /* Around 70 characters. Long prose read at full container width is what
     makes people give up on a policy page. */
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.legal__updated {
  padding-block-end: var(--space-md);
  margin-block-end: var(--space-lg);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  border-block-end: var(--border-width) solid var(--border-subtle);
}

.legal__heading {
  margin-block-start: var(--space-2xl);
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-2xs);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  border-block-end: var(--border-width) solid var(--border-subtle);
}

.legal__body > .legal__heading:first-of-type {
  margin-block-start: 0;
}

.legal__subheading {
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-2xs);
  font-size: var(--text-lg);
  color: var(--accent-text);
}

.legal__body p {
  margin-block-end: var(--space-sm);
}

.legal__body strong {
  font-weight: 700;
  color: var(--text-primary);
}

.legal__list {
  display: grid;
  gap: var(--space-3xs);
  padding-inline-start: var(--space-md);
  margin-block-end: var(--space-sm);
}

.legal__list li::marker {
  color: var(--silver-accent-mid);
}

/* The controller's details are the one block on the page anyone actually
   needs to find, so it is set apart rather than left as another paragraph. */
.legal__address {
  padding: var(--space-md) var(--space-lg);
  margin-block-end: var(--space-sm);
  font-style: normal;
  line-height: var(--leading-normal);
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-inline-start: 4px solid var(--silver-accent-mid);
  border-radius: var(--radius);
}

.legal__body a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.legal__body a:hover {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Summary box, the prominent notice, and the retention table
   -------------------------------------------------------------------------- */

/* Most people read the top of a privacy policy and nothing else. Putting the
   plain-English summary in a box at the top is not decoration — it is where
   the information actually reaches anyone. */
.legal__callout {
  padding: var(--space-lg);
  margin-block-end: var(--space-2xl);
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.legal__callout-title {
  margin-block-end: var(--space-sm);
  font-size: var(--text-xl);
  color: var(--text-primary);
}

.legal__callout-note {
  margin-block-end: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* One disclosure on this page is the one an applicant most needs to see
   before they act: that a CV may reach a client company. It gets weight
   through the bar and the fill, not through colour, since the palette has
   none to spend and a colour-only signal reaches nobody who cannot see it. */
.legal__notice {
  padding: var(--space-md) var(--space-lg);
  margin-block: var(--space-md);
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-inline-start: 4px solid var(--silver-accent-mid);
  border-radius: var(--radius);
}

/* A table is wider than the prose measure at small sizes, so it scrolls
   inside its own box rather than pushing the page sideways. */
.legal__table-wrap {
  overflow-x: auto;
  margin-block-end: var(--space-sm);
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: start;
}

.legal__table th,
.legal__table td {
  padding: var(--space-2xs) var(--space-sm);
  vertical-align: top;
  text-align: start;
  border-block-end: var(--border-width) solid var(--border-subtle);
}

.legal__table thead th {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  border-block-end-color: var(--border-strong);
}

.legal__table tbody th {
  width: 34%;
  font-weight: 600;
  color: var(--text-primary);
}

.legal__body em {
  font-style: italic;
}