/* Стили юридических страниц. Наследуют токены из site.css — здесь только типографика
   длинного текста: узкая колонка, нумерованные разделы, заметные пропуски реквизитов. */

.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.legal-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 28px;
}
/* Внутри .legal-nav отступ снизу задаёт сам контейнер — иначе ссылки
   разъезжаются по вертикали и получается двойной зазор. */
.legal-nav .legal-back { margin-bottom: 0; }
.legal-back:hover { color: var(--accent); }

.legal-wrap h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
  text-wrap: balance;
}

.legal-updated {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--outline);
}

.legal-wrap h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  margin: 34px 0 10px;
  letter-spacing: -0.2px;
}

.legal-wrap h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 22px 0 8px;
  color: var(--text);
}

.legal-wrap p { margin: 10px 0; color: var(--text-muted); line-height: 1.7; }
.legal-wrap ul, .legal-wrap ol { margin: 10px 0; padding-left: 22px; color: var(--text-muted); line-height: 1.7; }
.legal-wrap li { margin-bottom: 7px; }
.legal-wrap strong { color: var(--text); font-weight: 700; }

/* Незаполненные реквизиты — намеренно бросаются в глаза, чтобы документ
   нельзя было случайно опубликовать с пропусками. */
.fill {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px dashed var(--warning);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 0.92em;
  font-weight: 600;
  white-space: nowrap;
}

.legal-notice {
  background: var(--warning-soft);
  border-left: 3px solid var(--warning);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
}
.legal-notice b { color: var(--warning); }

.legal-contacts {
  margin-top: 40px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.legal-contacts a { color: var(--accent); }

.legal-index { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.legal-index a {
  display: block;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}
.legal-index a:hover { border-color: var(--accent); }
.legal-index .li-title { font-weight: 700; font-family: var(--font-display); margin-bottom: 3px; }
.legal-index .li-desc { font-size: 13px; color: var(--text-faint); }