/* ==========================================================================
   SML - Typography
   Файл: /wp-content/themes/sml/src/css/base/typography.css
   Версия: 1.0.0
   Author: NUVREN (https://nuvren.com)

   Назначение:
   - Базовая типографика сайта: заголовки, параграфы, ссылки;
   - Читаемость и современный визуальный ритм без ощущения "раздуто".
   ========================================================================== */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--line-height-normal);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

/* Сглаживание (чуть более "премиум" по виду на macOS) */
body,
button,
input,
textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------
   Утилиты типографики
   ------------------------------------------------------------ */
.kicker {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-2);
}

.text-small {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
}

/* ------------------------------------------------------------
   Заголовки: ясная иерархия, без "плакатности"
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
  margin: 0;
}

h1 {
  font-size: clamp(2.05rem, 3.2vw, 3.05rem);
  letter-spacing: -0.028em;
}

h2 {
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  letter-spacing: -0.022em;
}

h3 {
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: var(--line-height-snug);
  letter-spacing: -0.016em;
}

h4 {
  font-size: clamp(1.06rem, 1.1vw, 1.2rem);
  line-height: var(--line-height-snug);
  letter-spacing: -0.012em;
}

h5 {
  font-size: 1rem;
  line-height: var(--line-height-snug);
  letter-spacing: -0.01em;
}

h6 {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  letter-spacing: 0;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Текст: читабельность и спокойный контраст
   ------------------------------------------------------------ */
p {
  margin: 0;
  color: var(--color-text-2);
  line-height: var(--line-height-normal);
  font-size: inherit;
}

.text-muted {
  color: var(--color-muted);
}

small {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Ограничение ширины: только для длинных абзацев/описаний */
.prose p,
.section-head__text,
.hero__subtitle {
  max-width: 62ch;
}

/* Карточки и мелкие подписи НЕ ограничиваем */
.card__text,
.hero__media-text {
  max-width: none;
}

/* ------------------------------------------------------------
   Вертикальный ритм: компактно, но с ясным разделением
   ------------------------------------------------------------ */
h1 + p,
h2 + p,
h3 + p,
h4 + p {
  margin-top: var(--space-3);
}

p + p {
  margin-top: var(--space-4);
}

p + .btn,
p + .btn-row,
p + .grid,
p + .split {
  margin-top: var(--space-6);
}

/* ------------------------------------------------------------
   Ссылки: предсказуемо и аккуратно
   - В интерфейсе ссылки могут наследовать цвет (nav, card), поэтому базово без underline
   - В контенте (.prose) делаем ссылки всегда видимыми (underline)
   ------------------------------------------------------------ */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

a:hover {
  color: var(--color-link-hover);
}

a:active {
  opacity: 0.9;
}

a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.08em;
}

.prose a:hover {
  color: var(--color-link-hover);
}

/* ------------------------------------------------------------
   Выделение
   ------------------------------------------------------------ */
::selection {
  background: rgba(31, 122, 58, 0.18);
}

/* ------------------------------------------------------------
   Контентный поток (редактор/контентные блоки)
   ------------------------------------------------------------ */
.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: var(--space-3);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border-left: 4px solid rgba(31, 122, 58, 0.35);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  color: var(--color-text-2);
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-soft);
  padding: 0.12em 0.32em;
  border-radius: 8px;
}