/*
 * The three legal documents. Light register, no new components.
 *
 * WHAT THIS FILE IS ALLOWED TO DO. It sets a reading measure for long prose,
 * gives ordered and unordered lists a style the marketing page never needed,
 * and pins the nav solid. Everything else -- colour, type scale, spacing,
 * hairlines, radii -- comes from the tokens the rest of the site already uses.
 *
 * THE NAV IS PINNED SOLID FROM A BODY CLASS, not from a change to the nav.
 * The bar is transparent until main.js adds .scrolled past 80px, and these
 * pages deliberately do not load main.js: it drives the waveform, two call
 * state machines, the rail and the queue, none of which exist here. Left
 * transparent over a Linen page the nav links would be Ink Mist on cream at
 * 3.12:1, which ruling T forbids, and the wordmark would render its dark
 * variant on a light ground. Driving it from `body.page-legal` keeps the nav
 * MARKUP byte-identical across all four pages, which is what makes
 * tools-shared-blocks.py able to detect drift at all.
 */

body.page-legal .nav {
  background: var(--color-ink);
  border-bottom-color: var(--color-ink-line);
  /* It never changes state on these pages, so it has nothing to transition. */
  transition: none;
}

.legal {
  /* Clears the fixed bar: 20px + a 50px control + 20px + its 1px hairline. */
  padding-top: calc(91px + var(--spacing-64));
  padding-bottom: var(--spacing-96);
}

/* Long statutory prose needs a measure. 68ch is the token the system already
   uses for reading text; the marketing bands never hit it because none of
   them runs more than a paragraph. */
.legal-inner { max-width: var(--content-max-width); }

.legal h1 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
  max-width: var(--headline-max-width);
  margin: 0;
}

.legal-version {
  color: var(--color-ink-slate);
  margin: 16px 0 0;
}

/* The English aside. Linen Sunken is the system's recessed surface on light;
   this is that surface, not a new component. It sits above the Turkish text
   so an English reader is never dead-ended, and says plainly which text
   governs -- the documents are Turkish because a Turkish statutory text
   translated into English creates ambiguity about which version counts. */
.legal-note {
  margin: var(--spacing-32) 0 0;
  padding: var(--card-padding);
  background: var(--color-linen-sunken);
  border: 1px solid var(--color-linen-line);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ink-slate);
}
.legal-note a { color: var(--color-ink); }

.legal section {
  margin-top: var(--spacing-48);
  padding-top: var(--spacing-32);
  border-top: 1px solid var(--color-linen-line);
}
.legal section h2 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  max-width: none;
  margin: 0 0 var(--spacing-16);
}
.legal section h3 {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  max-width: none;
  margin: var(--spacing-24) 0 var(--spacing-8);
}

.legal p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-slate);
  margin: 0 0 var(--spacing-16);
}
.legal p:last-child { margin-bottom: 0; }
.legal strong { color: var(--color-ink); font-weight: var(--weight-medium); }
.legal a { color: var(--color-ink); }

/* Lists. The one addition the marketing page never needed: the KVKK Article 11
   rights are statutorily a list of seven, and the FAQ is built from divs. */
.legal ol,
.legal ul {
  margin: 0 0 var(--spacing-16);
  padding-left: var(--spacing-24);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-slate);
}
.legal li { margin-bottom: var(--spacing-8); }
.legal li:last-child { margin-bottom: 0; }
.legal li::marker { color: var(--color-ink-slate); }

/* A definition row for the identity block: label in the machine face because
   a registry field is metadata, value in prose. */
.legal-facts { margin: 0; }
.legal-facts > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--spacing-16);
  padding: var(--spacing-12) 0;
  border-bottom: 1px solid var(--color-linen-line);
}
.legal-facts > div:first-child { border-top: 1px solid var(--color-linen-line); }
.legal-facts dt { color: var(--color-ink-slate); }
.legal-facts dd {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.legal-back {
  display: inline-block;
  margin-top: var(--spacing-48);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-ink-slate);
}
.legal-back:hover { color: var(--color-ink); }

@media (max-width: 640px) {
  .legal-facts > div { grid-template-columns: 1fr; gap: var(--spacing-4); }
}