/* ==========================================================================
   Typography
   Playfair Display (display) + Inter (body)
   ========================================================================== */

/* подключение через @font-face — локально для performance.
   Файлы будут лежать в /fonts. На HTML-этапе допустим Google Fonts. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  letter-spacing: 0;
}

/* Заголовки — Playfair, тонкий semibold (премиум-вид).
   У Marya/Shkaf-kupe именно лёгкий вес + большой размер, а не bold. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);     /* было bold (700) — теперь 600 */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1, .h1 { font-size: clamp(var(--fs-40), 5vw + 0.5rem, var(--fs-72)); }
h2, .h2 { font-size: clamp(var(--fs-32), 4vw + 0.25rem, var(--fs-56)); }
h3, .h3 { font-size: clamp(var(--fs-24), 2.5vw, var(--fs-32)); }
h4, .h4 { font-size: var(--fs-20); line-height: var(--lh-snug); }

/* Italic accent в заголовках — для эмоциональных подзаголовков */
.italic-accent { font-style: italic; font-weight: var(--fw-regular); color: var(--color-primary); }

h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  font-size: var(--fs-18);
  letter-spacing: 0;
}

p {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  max-width: 70ch;
}

.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 60ch;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  display: inline-block;
}

.caption {
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

a {
  color: var(--color-primary);
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

strong, b { font-weight: var(--fw-semibold); }

/* tabular numbers — для счётчиков, цен, таблиц */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* selection */
::selection {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* ==========================================================================
   Article body — стилизованные тексты страниц и статей
   Применяется к .page-content и .post-content (содержимое the_content() в WP)
   ========================================================================== */

.page-content,
.post-content {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  max-width: 720px;
}

.legal-container {
  max-width: 1080px;
}

.legal-content {
  max-width: none;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  box-shadow: var(--shadow-sm);
}

.legal-content p,
.legal-content ul,
.legal-content ol,
.legal-content table {
  max-width: none;
}

.legal-content h2,
.legal-content h3 {
  margin-top: var(--space-9);
}

.page-content > * + *,
.post-content > * + * {
  margin-top: var(--space-5);
}

.page-content p,
.post-content p {
  font-size: var(--fs-18);
  line-height: 1.7;
  color: var(--color-text);
  max-width: none;
}

/* Заголовки внутри статьи */
.page-content h2, .post-content h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-28), 3vw, var(--fs-40));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-12) !important;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.page-content h2:first-child,
.post-content h2:first-child { margin-top: 0 !important; }

.page-content h3, .post-content h3 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-20), 2vw, var(--fs-28));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin-top: var(--space-10) !important;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.page-content h4, .post-content h4 {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-8) !important;
  margin-bottom: var(--space-2);
}

/* Lists */
.page-content ul, .post-content ul,
.page-content ol, .post-content ol {
  padding-left: 1.5em;
  font-size: var(--fs-18);
  line-height: 1.7;
}
.page-content ul, .post-content ul { list-style: disc; }
.page-content ol, .post-content ol { list-style: decimal; }
.page-content li, .post-content li { margin-bottom: var(--space-2); padding-left: var(--space-2); }
.page-content li::marker, .post-content li::marker { color: var(--color-primary); }

/* Blockquote */
.page-content blockquote, .post-content blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-style: italic;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
}
.page-content blockquote p, .post-content blockquote p {
  font-size: inherit;
  font-style: inherit;
  margin: 0;
}

/* Картинки внутри статьи */
.page-content img, .post-content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-8) 0;
}
.page-content figure, .post-content figure {
  margin: var(--space-8) 0;
}
.page-content figcaption, .post-content figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  text-align: center;
}

/* Ссылки в статьях — подчёркивание (нагляднее в потоке текста) */
.page-content a, .post-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-200);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.page-content a:hover, .post-content a:hover {
  text-decoration-color: var(--color-primary);
}

/* Code / kbd */
.page-content code, .post-content code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  background: var(--color-bg-soft);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* Таблицы */
.page-content table, .post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--fs-16);
}
.page-content th, .post-content th,
.page-content td, .post-content td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.page-content th, .post-content th {
  background: var(--color-bg-soft);
  font-weight: var(--fw-semibold);
}

/* HR — разделитель между крупными мыслями */
.page-content hr, .post-content hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-12) 0;
}

/* «Лидовый» первый абзац — крупнее, выделенный */
.page-content > p:first-child,
.post-content > p:first-child {
  font-size: var(--fs-20);
  color: var(--color-text);
  line-height: 1.65;
}

/* ==========================================================================
   DEFENSIVE: глобальные отступы внутри any статья/страница где есть the_content().
   Срабатывает даже если контент НЕ обёрнут в .post-content / .page-content
   (например внутри стандартных WP-блоков на странице).
   ========================================================================== */

/* p после h2/h3/h4 — фолбэк если общие правила не применились */
main h2 + p, main h3 + p, main h4 + p { margin-top: 16px !important; }

/* h2 после p — большой отступ перед новым разделом */
main p + h2, main ul + h2, main ol + h2, main blockquote + h2 {
  margin-top: 48px !important;
  margin-bottom: 16px !important;
}
main p + h3, main ul + h3, main ol + h3 {
  margin-top: 32px !important;
  margin-bottom: 12px !important;
}
main p + h4 { margin-top: 24px !important; margin-bottom: 8px !important; }

/* Параграфы внутри any контента — minimal margin-bottom как фолбэк */
.page-content p, .post-content p, .entry-content p, article p {
  margin-bottom: 16px;
}
.page-content p:last-child, .post-content p:last-child,
.entry-content p:last-child, article p:last-child { margin-bottom: 0; }

/* h2, h3 ВНУТРИ .page-content/.post-content/article — обязательные отступы */
.page-content h2, .post-content h2, .entry-content h2,
article h2:not(.hero-slide__title):not(.hero__title) {
  margin-top: 48px;
  margin-bottom: 16px;
}
.page-content h3, .post-content h3, .entry-content h3, article h3 {
  margin-top: 32px;
  margin-bottom: 12px;
}
.page-content h2:first-child, .post-content h2:first-child,
.entry-content h2:first-child, article h2:first-child {
  margin-top: 0;
}

/* Списки внутри any content */
.page-content ul + p, .post-content ul + p, .entry-content ul + p,
.page-content ol + p, .post-content ol + p, .entry-content ol + p {
  margin-top: 16px;
}

/* Article-style headings — НЕ слишком большие
   (на скринах было видно что заголовки в статьях огромные) */
.page-content h2, .post-content h2 {
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem) !important;   /* 24-32px */
}
.page-content h3, .post-content h3 {
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem) !important;  /* 20-24px */
}