/**
 * FILE: backend/public/static/css/legal.css
 * PURPOSE: The legal documents: /privacy, /terms, /accessibility
 * DESCRIPTION: Loaded after landing-agents.css, whose --dv-* tokens, sticky
 *              nav, wordmark and skip link these pages reuse. One reading
 *              column of about 72 characters, system fonts, headings in
 *              order, a plain-language summary before the binding text.
 *              Pink means a link or "you are here", nothing else.
 */

/* ------------------------------------------------------------------ */
/* Header: the wordmark and the document switcher                      */
/* ------------------------------------------------------------------ */

.lg-nav .dv-nav-inner {
  flex-wrap: wrap;
  row-gap: 6px;
}

.lg-docs {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.lg-docs a {
  display: inline-block;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  color: var(--dv-slate);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.lg-docs a:hover {
  color: var(--dv-snow);
}

.lg-docs a[aria-current="page"] {
  color: var(--dv-snow);
  border-bottom-color: var(--dv-iris);
}

/* The landing's shared ring is a 15% tint; a document meant to be read with
   a keyboard gets a solid one. */
.lg-docs a:focus-visible,
.lg-nav .dv-wordmark:focus-visible,
.lg-doc a:focus-visible {
  outline: 2px solid var(--dv-iris);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* The document                                                        */
/* ------------------------------------------------------------------ */

.lg-doc {
  max-width: calc(72ch + 48px);
  margin: 0 auto;
  padding: 64px 24px 96px;
  color: var(--dv-slate);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.lg-doc:focus {
  outline: none;
}

.lg-doc h1 {
  color: var(--dv-snow);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.lg-updated {
  margin-top: 12px;
  color: var(--dv-muted);
  font-size: 0.9375rem;
}

.lg-doc .lg-lede {
  margin-top: 28px;
  color: var(--dv-snow);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.lg-doc h2 {
  margin-top: 2.75em;
  color: var(--dv-snow);
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: 96px;
}

.lg-doc h3 {
  margin-top: 1.9em;
  color: var(--dv-snow);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.lg-doc p,
.lg-doc ul,
.lg-doc ol,
.lg-doc dl {
  margin-top: 1em;
}

.lg-doc h2 + p,
.lg-doc h2 + ul,
.lg-doc h3 + p,
.lg-doc h3 + ul {
  margin-top: 0.6em;
}

.lg-doc ul,
.lg-doc ol {
  padding-left: 1.3em;
}

.lg-doc li + li {
  margin-top: 0.45em;
}

.lg-doc li::marker {
  color: var(--dv-muted);
}

.lg-doc strong {
  color: var(--dv-snow);
  font-weight: 600;
}

.lg-doc a {
  color: var(--dv-snow);
  text-decoration: underline;
  text-decoration-color: var(--dv-iris);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.lg-doc a:hover {
  text-decoration-thickness: 2px;
}

.lg-doc code {
  font-family: var(--dv-font-mono);
  font-size: 0.875em;
  color: var(--dv-snow);
}

/* The short version: the plain answers, set apart from the binding text. */
.lg-short {
  margin-top: 40px;
  padding: 24px 28px;
  background: var(--dv-panel);
  border-radius: var(--dv-radius);
}

.lg-doc .lg-short h2 {
  margin-top: 0;
  font-size: 1.125rem;
}

/* Contents: the numbered sections, which the text refers to by number. */
.lg-toc {
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid var(--dv-line);
  border-bottom: 1px solid var(--dv-line);
  font-size: 0.9375rem;
}

.lg-doc .lg-toc ol {
  margin-top: 0;
  columns: 2 15rem;
  column-gap: 40px;
}

.lg-toc li {
  break-inside: avoid;
}

.lg-doc .lg-toc li + li {
  margin-top: 0.3em;
}

.lg-doc .lg-toc a {
  color: var(--dv-slate);
}

.lg-doc .lg-toc a:hover {
  color: var(--dv-snow);
}

/* Name and description pairs: providers, cookies. */
.lg-defs > div {
  padding: 14px 0;
  border-top: 1px solid var(--dv-line);
}

.lg-defs > div:last-child {
  border-bottom: 1px solid var(--dv-line);
}

.lg-defs dt {
  color: var(--dv-snow);
  font-weight: 600;
}

.lg-defs dd {
  margin-top: 2px;
}

.lg-reviewed {
  color: var(--dv-muted);
  font-size: 0.9375rem;
}

.lg-doc .lg-reviewed {
  margin-top: 3em;
}

@media (max-width: 720px) {
  .lg-doc {
    padding: 40px 18px 72px;
    font-size: 1rem;
  }

  .lg-short {
    padding: 20px;
  }

  .lg-docs {
    margin-left: 0;
    gap: 0 16px;
  }
}