/* Стили для страниц статей - Dreamview SEO Template */

/* Основные стили для страницы статьи - только для com_content с blog-article */
.com-content-article.item-page:has(.blog-article) {
  font-family: "Assistant", sans-serif;
  direction: rtl;
  background-color: #f9fafb;
  padding: 5rem 0;
}

/* Обертка для контента */
.com-content-article .blog-article {
  max-width: 1550px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Заголовок статьи */
.com-content-article .blog-article .article-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Дата статьи */
.com-content-article .blog-article .article-date {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 2rem;
  text-align: center;
}

.com-content-article .blog-article .article-date .icon-calendar {
  margin-left: 0.5rem;
}

/* Стили для времени с itemprop */
.com-content-article .blog-article .article-date time {
  font-size: 1.125rem;
  color: #6b7280;
}

/* Картинка статьи */
.com-content-article .blog-article .article-image {
  margin-bottom: 2.5rem;
  text-align: center;
}

.com-content-article .blog-article .article-image img {
  max-width: 100%;
  max-height: 600px;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: block;
  margin: 0 auto;
}

/* Основной контент статьи - только для настоящих статей блога */
.com-content-article:has(.blog-article) .com-content-article__body {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #374151;
  text-align: right;
  margin-top: 2rem;
}
.com-content-article:has(.blog-article) .com-content-article__body code {
  background: #ffecc3;
  color: #4d5872;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 20px;
  font-family: "Assistant Regular", sans-serif;
}
.com-content-article:has(.blog-article) .com-content-article__body h2 {
  color: #232b38;

  font-size: 2.5rem;
  font-family: "Assistant Bold";
  margin-bottom: 1.5rem;
  margin-top: 4rem;
}
.com-content-article:has(.blog-article) .com-content-article__body p {
  font-size: 20px;
}

.com-content-article:has(.blog-article) .com-content-article__body ul,
.com-content-article:has(.blog-article) .com-content-article__body ol {
  font-size: 20px;
  list-style-position: outside;
  margin: 15px 0 !important;
  padding-right: 1.5em;
}
.com-content-article:has(.blog-article) .com-content-article__body a {
  color: #f97316;
}
.com-content-article:has(.blog-article) .com-content-article__body ul,
.com-content-article:has(.blog-article) .com-content-article__body ol {
  list-style-type: disc;
}
.com-content-article:has(.blog-article) .com-content-article__body strong {
  font-family: "Assistant SemiBold";
  color: #232b38;
}
.com-content-article:has(.blog-article) .com-content-article__body a strong {
  color: #f97316;
}
.com-content-article:has(.blog-article) .com-content-article__body h3 {
  color: #232b38;
  font-size: 1.875rem;
  font-family: "Assistant Bold";
  margin-bottom: 1.5rem;
  margin-top: 4rem;
}

.com-content-article:has(.blog-article) .com-content-article__body li {
  margin-bottom: 0.5em;
  padding-inline-start: 0.5em;
}

/* Стили для изображений с классом float-none внутри контента */
.com-content-article:has(.blog-article)
  .com-content-article__body
  img.float-none {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Таблицы в статьях блога */
.com-content-article:has(.blog-article) .com-content-article__body table {
  width: 100%;
  margin: 1rem 0 2.5rem;
  border-collapse: collapse;
  border-spacing: 0;
  direction: rtl;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #374151;
  background-color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
}

.com-content-article:has(.blog-article) .com-content-article__body h3 + table {
  margin-top: 0.75rem;
}

.com-content-article:has(.blog-article) .com-content-article__body table thead th {
  background-color: #f0f4ff;
  color: #232b38;
  font-family: "Assistant Bold", "Assistant", sans-serif;
  font-weight: 700;
  text-align: right;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid #e5e7eb;
}

.com-content-article:has(.blog-article) .com-content-article__body table tbody td {
  text-align: right;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

.com-content-article:has(.blog-article)
  .com-content-article__body
  table
  tbody
  tr:last-child
  td {
  border-bottom: none;
}

.com-content-article:has(.blog-article)
  .com-content-article__body
  table
  tbody
  tr:nth-child(odd) {
  background-color: #fff;
}

.com-content-article:has(.blog-article)
  .com-content-article__body
  table
  tbody
  tr:nth-child(even) {
  background-color: #f9fafb;
}

.com-content-article:has(.blog-article)
  .com-content-article__body
  table
  tbody
  tr:hover {
  background-color: #f3f4f6;
}

.com-content-article:has(.blog-article) .com-content-article__body blockquote {
  background: #f0f1f1;
  border-right: 4px solid #f59e0b;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  font-style: italic;
  color: #4a5568;
  font-size: 1.125rem;
  line-height: 1.6;
}
.com-content-article:has(.blog-article)
  .com-content-article__body
  table
  tbody
  td
  strong {
  color: #232b38;
  font-weight: 600;
}

/* Адаптивность для таблиц */
@media (max-width: 1200px) {
  .com-content-article:has(.blog-article) .com-content-article__body table {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  /* Не даём таблице раздувать всю страницу — скролл только у неё */
  .com-content-article:has(.blog-article) .com-content-article__body {
    overflow-x: hidden;
  }

  .com-content-article:has(.blog-article) .com-content-article__body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    font-size: 0.9375rem;
    margin: 1rem 0 2rem;
  }

  .com-content-article:has(.blog-article) .com-content-article__body table thead,
  .com-content-article:has(.blog-article) .com-content-article__body table tbody {
    display: table;
    width: 100%;
    min-width: 520px;
  }

  .com-content-article:has(.blog-article) .com-content-article__body table thead th,
  .com-content-article:has(.blog-article) .com-content-article__body table tbody td {
    padding: 10px 12px;
    word-wrap: break-word;
    hyphens: auto;
  }
}

@media (max-width: 480px) {
  .com-content-article:has(.blog-article) .com-content-article__body table {
    font-size: 0.875rem;
    margin: 1rem 0 1.5rem;
  }

  .com-content-article:has(.blog-article) .com-content-article__body table thead,
  .com-content-article:has(.blog-article) .com-content-article__body table tbody {
    min-width: 480px;
  }

  .com-content-article:has(.blog-article) .com-content-article__body table thead th,
  .com-content-article:has(.blog-article) .com-content-article__body table tbody td {
    padding: 8px 10px;
    line-height: 1.45;
  }
}

/* Адаптивность */
@media (max-width: 768px) {
  .com-content-article.item-page:has(.blog-article) {
    padding: 2rem 0;
  }

  .com-content-article .blog-article .article-title {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }

  .com-content-article .blog-article .article-date {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .com-content-article .blog-article .article-image {
    margin-bottom: 2rem;
  }

  .com-content-article .blog-article .article-image img {
    border-radius: 0.5rem;
  }

  /* Адаптивность размеров шрифтов для основного контента */
  .com-content-article:has(.blog-article) .com-content-article__body {
    font-size: 1rem;
  }

  .com-content-article:has(.blog-article) .com-content-article__body p {
    font-size: 18px;
  }

  .com-content-article:has(.blog-article) .com-content-article__body h2 {
    font-size: 2rem;
  }

  .com-content-article:has(.blog-article) .com-content-article__body h3 {
    font-size: 1.5rem;
  }

  .com-content-article:has(.blog-article) .com-content-article__body code {
    font-size: 18px;
  }

  .com-content-article:has(.blog-article) .com-content-article__body ul,
  .com-content-article:has(.blog-article) .com-content-article__body ol {
    font-size: 18px;
  }

  .com-content-article:has(.blog-article)
    .com-content-article__body
    blockquote {
    font-size: 1rem;
  }

  .com-content-article:has(.blog-article)
    .com-content-article__body
    img.float-none {
    margin: 1rem auto;
    border-radius: 0.375rem;
  }
}

@media (max-width: 480px) {
  /* Адаптивность размеров шрифтов для основного контента на маленьких экранах */
  .com-content-article:has(.blog-article) .com-content-article__body {
    font-size: 0.9375rem;
  }

  .com-content-article:has(.blog-article) .com-content-article__body p {
    font-size: 16px;
  }

  .com-content-article:has(.blog-article) .com-content-article__body h2 {
    font-size: 1.75rem;
  }

  .com-content-article:has(.blog-article) .com-content-article__body h3 {
    font-size: 1.375rem;
  }

  .com-content-article:has(.blog-article) .com-content-article__body code {
    font-size: 16px;
  }

  .com-content-article:has(.blog-article) .com-content-article__body ul,
  .com-content-article:has(.blog-article) .com-content-article__body ol {
    font-size: 16px;
  }

  .com-content-article:has(.blog-article)
    .com-content-article__body
    blockquote {
    font-size: 0.9375rem;
    padding: 1rem;
  }
}

/* Editorial reading layout */
.com-content-article .blog-article{max-width:1120px;padding:0 24px}
.com-content-article.item-page:has(.blog-article){padding:48px 0;background:#f7f8fa}
.com-content-article .blog-article .article-title{max-width:920px;margin:0 auto 24px;font-size:clamp(30px,4vw,48px);line-height:1.25;text-wrap:balance}
.com-content-article:has(.blog-article) .com-content-article__body{max-width:800px;margin:32px auto;background:#fff;padding:clamp(20px,4vw,48px);border:1px solid #e5e7eb;border-radius:20px;box-shadow:0 8px 30px #11182706;overflow-wrap:anywhere}
.com-content-article:has(.blog-article) .com-content-article__body p{font-size:20px;line-height:1.9;margin:0 0 1.2em}
.com-content-article:has(.blog-article) .com-content-article__body h2{font-size:clamp(25px,3vw,32px);line-height:1.4;margin:2em 0 .8em;scroll-margin-top:110px}
.com-content-article:has(.blog-article) .com-content-article__body h3{font-size:24px;line-height:1.45;margin:1.6em 0 .7em;scroll-margin-top:110px}
.com-content-article:has(.blog-article) .com-content-article__body ol{list-style-type:decimal}
.com-content-article:has(.blog-article) .com-content-article__body a{color:#a84208;text-decoration:underline;text-underline-offset:4px}
.dream-reading-toc{background:#fff7ed;border:1px solid #fed7aa;border-inline-start:4px solid #f97316;border-radius:12px;padding:22px;margin-bottom:32px}
.dream-reading-toc strong{font-size:22px}.dream-reading-toc ol{display:grid;gap:8px;margin-top:14px!important}.dream-reading-toc a{font-size:17px;line-height:1.6}
.com-content-article:has(.blog-article) .com-content-article__body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:24px 0;font-size:17px}
.com-content-article:has(.blog-article) .com-content-article__body th,.com-content-article:has(.blog-article) .com-content-article__body td{padding:14px;border:1px solid #e5e7eb;min-width:120px;line-height:1.6;text-align:right}
.com-content-article:has(.blog-article) .com-content-article__body th{background:#f3f4f6;color:#111827}
.com-content-article:has(.blog-article) .com-content-article__body blockquote{margin:24px 0;padding:20px;border-inline-start:4px solid #f97316;background:#fafafa}
.com-content-article:has(.blog-article) a:focus-visible{outline:3px solid #f97316;outline-offset:4px}
@media(max-width:600px){.com-content-article .blog-article{padding:0 12px}.com-content-article.item-page:has(.blog-article){padding:28px 0}.com-content-article:has(.blog-article) .com-content-article__body{padding:20px 16px;border-radius:12px}.dream-reading-toc{padding:16px}}