/* Blog-specific CSS - only loaded on blog pages */

:root {
  --blog-detail-text-color: #000;
}

.detailDataBlogContent {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detailDataBlogContent p,
.detailDataBlogContent li {
  font-weight: 400;
  font-size: 18px;
  color: var(--blog-detail-text-color);
}

.detailDataBlogContent h2 {
  margin-top: 18px;
  margin-bottom: -5px;
  font-weight: 600;
  font-size: 26px;
  color: var(--blog-detail-text-color);
}

.detailDataBlogContent h3 {
  margin-top: 18px;
  margin-bottom: -5px;
  font-weight: 500;
  font-size: 22px;
  color: var(--blog-detail-text-color);
}

.detailDataBlogContent h4 {
  margin-top: 5px;
  margin-bottom: -5px;
  font-weight: 600;
  font-size: 20px;
  color: var(--blog-detail-text-color);
}

.detailDataBlogContent h5 {
  margin-top: 5px;
  margin-bottom: -5px;
  font-weight: 600;
  font-size: 18px;
  color: var(--blog-detail-text-color);
}

.detailDataBlogContent ol {
  list-style: auto;
  margin-left: 48px;
}

.detailDataBlogContent ul {
  list-style: disc;
  margin-left: 48px;
}

.detailDataBlogContent iframe {
  width: 100%;
  height: 400px;
}

.detailDataBlogContent a {
  background: linear-gradient(-135deg, #ff732d, #ff0044, #9900ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}

.detailDataBlogContent p > img {
  height: auto !important;
  width: 100% !important;
}

.detailDataBlogContent ol,
.detailDataBlogContent ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detailDataBlogContent table {
  width: 100%;
}

.detailDataBlogContent h2,
.detailDataBlogContent h3,
.detailDataBlogContent h4,
.detailDataBlogContent h5 {
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

@media (max-width: 767px) {
  .detailDataBlogContent table {
    min-width: 300px;
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

.detailDataBlogContent table > tbody > tr > td {
  padding: 8px;
}

@media (max-width: 576px) {
  .detailDataBlogContent h2 {
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 24px;
    line-height: 32px;
  }

  .detailDataBlogContent h3 {
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 22px;
    line-height: 28px;
  }

  .detailDataBlogContent h4 {
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 18px;
    line-height: 28px;
  }

  .detailDataBlogContent pre {
    white-space: pre-wrap;
  }
}