/* Centralized typography setup */
/* Google Fonts: Inter with italic support */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Base font across the site */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Prevent browser from faking bold/italic and stabilize rendering */
/* ВАЖНО: Разрешаем font-synthesis-style для контента статей */
html, body, * {
  font-synthesis-weight: none;
  font-synthesis-style: auto;
  font-optical-sizing: auto;
}

/* Footer: keep normal by default */
footer[data-global-footer] { font-weight: 400; }
footer[data-global-footer] a { font-weight: 400; }
footer[data-global-footer] h4 { font-weight: 500; }

/* Keep article title in XCharter on article pages */
body[data-article-page] .article-title,
body[data-article-page] h1.article-title {
  font-family: 'XCharter', serif !important;
}

/* Responsive media inside article content */
.article-content iframe,
.article-text iframe,
.article-content video,
.article-text video {
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}


/* Заголовки статей: размеры */
/* На мобильных: 32px */
@media (max-width: 767px) {
  body[data-article-page] .article-title,
  body[data-article-page] h1.article-title,
  .article-content h1.article-title,
  .article-text h1.article-title,
  h1.article-title {
    font-size: 32px !important;
    line-height: 1.25 !important;
  }
}

/* На странице статьи (>=768px): 32px */
@media (min-width: 768px) {
  body[data-article-page] .article-title,
  body[data-article-page] h1.article-title,
  .article-content h1.article-title,
  .article-text h1.article-title,
  h1.article-title {
    font-size: 32px !important;
    line-height: 1.25 !important;
  }
}

/* Заголовок карточки статьи: 24px на всех устройствах */
.article-card .article-title {
  font-size: 28px !important;
  line-height: 1.1 !important;
}

/* Стили для ссылок в тексте статей */
.article-text a,
.article-content a {
  color: #3182ce;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.article-text a:hover,
.article-content a:hover {
  color: #2c5282;
}

/* Стили для выравнивания текста (Quill классы) */
.article-text .ql-align-center,
.article-content .ql-align-center {
  text-align: center;
}

.article-text .ql-align-right,
.article-content .ql-align-right {
  text-align: right;
}

.article-text .ql-align-left,
.article-content .ql-align-left {
  text-align: left;
}

.article-text .ql-align-justify,
.article-content .ql-align-justify {
  text-align: justify;
}

/* Стили для форматирования текста */
/* Жирный текст */
.article-text strong,
.article-text b,
.article-content strong,
.article-content b {
  font-weight: 700 !important;
}

/* Курсив */
.article-text em,
.article-text i,
.article-content em,
.article-content i {
  font-style: italic !important;
}

/* Подчеркнутый */
.article-text u,
.article-content u {
  text-decoration: underline !important;
}

/* Зачеркнутый */
.article-text s,
.article-text strike,
.article-content s,
.article-content strike {
  text-decoration: line-through !important;
}

/* Списки - переопределяем сброс Tailwind */
/* Маркированный список */
.article-text ul,
.article-content ul {
  list-style-type: disc !important;
  margin-bottom: 16px !important;
  padding-left: 32px !important;
}

/* Нумерованный список */
.article-text ol,
.article-content ol {
  list-style-type: decimal !important;
  margin-bottom: 16px !important;
  padding-left: 32px !important;
}

/* Элементы списков */
.article-text li,
.article-content li {
  margin-bottom: 8px !important;
  display: list-item !important;
}

/* Цитаты */
.article-text blockquote,
.article-content blockquote {
  border-left: 4px solid #e5e7eb !important;
  padding-left: 16px !important;
  margin: 16px 0 !important;
  font-style: italic !important;
  color: #6b7280 !important;
  background: #f9fafb !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
}