/*
 * Telegram 官方博客风格文章详情页
 * 优化版：合并重复规则，避免正文样式覆盖 FAQ 插件。
 *
 * 仅在 single.php 中加载，不影响首页和分类页。
 */

/* =========================================================
   基础变量
   ========================================================= */

body.single {
  --tg-single-text: #333;
  --tg-single-link: #2e87ca;
  --tg-single-accent: #0088cc;
  --tg-single-muted: #777;
  --tg-single-content-width: 700px;
  --tg-single-news-width: 235px;
  --tg-single-column-gap: 28px;
}

/* =========================================================
   页面布局
   ========================================================= */

body.single .telegram-single-container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

body.single .telegram-single-page {
  box-sizing: border-box;
  width: 100%;
  padding: 50px 15px 70px;
  font-family:
    "Lucida Grande",
    "Lucida Sans Unicode",
    Arial,
    Helvetica,
    Verdana,
    sans-serif;
  letter-spacing: 0;
}

body.single .telegram-single-page *,
body.single .telegram-single-page *::before,
body.single .telegram-single-page *::after {
  box-sizing: border-box;
}

body.single .telegram-single-layout {
  display: grid;
  grid-template-columns:
    175px
    minmax(0, var(--tg-single-content-width))
    var(--tg-single-news-width);
  align-items: start;
  justify-content: center;
  column-gap: var(--tg-single-column-gap);
}

body.single .telegram-single-icon-column {
  grid-column: 1;
  min-height: 1px;
  padding-top: 1px;
}

body.single .telegram-single-side-icon {
  display: block;
  width: 160px;
  height: 160px;
  margin-inline: auto;
  border-radius: 10px;
  object-fit: cover;
}

body.single .telegram-single-article {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  margin: 0;
}

body.single .telegram-single-news {
  grid-column: 3;
  width: var(--tg-single-news-width);
  margin: 0;
  padding-top: 2px;
}

/* =========================================================
   文章标题与特色图片
   ========================================================= */

body.single .telegram-single-header {
  margin: 0 0 27px;
}

body.single .telegram-single-title {
  margin: 0;
  color: var(--tg-single-text);
  font-size: 31px !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  text-align: left;
  text-wrap: balance;
}

body.single .telegram-single-cover {
  width: 100%;
  margin: 0 0 31px;
}

body.single .telegram-single-cover-image {
  display: block;
  width: 100%;
  max-width: var(--tg-single-content-width);
  height: auto;
  margin-inline: auto;
}

/* =========================================================
   正文基础排版
   只控制正文直接元素，避免覆盖 FAQ 等插件组件
   ========================================================= */

body.single .telegram-single-content {
  width: 100%;
  color: var(--tg-single-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: break-word;
}

body.single .telegram-single-content > :first-child {
  margin-top: 0 !important;
}

body.single .telegram-single-content > :last-child {
  margin-bottom: 0 !important;
}

body.single .telegram-single-content > :is(
  p,
  ul,
  ol,
  blockquote,
  pre,
  figure,
  table
) {
  margin-top: 0;
  margin-bottom: 17px;
}

body.single .telegram-single-content > p,
body.single .telegram-single-content > ul > li,
body.single .telegram-single-content > ol > li,
body.single .telegram-single-content > table :is(td, th),
body.single .telegram-single-content > blockquote {
  color: var(--tg-single-text);
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* 正文标题 */

body.single .telegram-single-content > :is(h1, h2, h3, h4, h5, h6) {
  color: var(--tg-single-text);
  font-family: inherit !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  text-align: left;
}

body.single .telegram-single-content > h1 {
  margin: 34px 0 14px;
  font-size: 31px !important;
}

body.single .telegram-single-content > h2 {
  margin: 34px 0 14px;
  font-size: 25px !important;
}

body.single .telegram-single-content > h3 {
  margin: 29px 0 12px;
  font-size: 21px !important;
}

body.single .telegram-single-content > h4 {
  margin: 24px 0 10px;
  font-size: 15px !important;
}

body.single .telegram-single-content > h5 {
  margin: 18px 0 9px;
  font-size: 12px !important;
}

body.single .telegram-single-content > h6 {
  margin: 18px 0 9px;
  font-size: 11px !important;
}

/* 粗体与链接 */

body.single .telegram-single-content > :is(p, ul, ol, blockquote) :is(strong, b) {
  color: inherit;
  font-weight: bold !important;
}

body.single .telegram-single-content > :is(
  p,
  ul,
  ol,
  blockquote,
  h1,
  h2,
  h3,
  h4
) a {
  color: var(--tg-single-link);
  text-decoration: none;
}

body.single .telegram-single-content > :is(
  p,
  ul,
  ol,
  blockquote
) a:is(:hover, :focus) {
  color: var(--tg-single-link);
  text-decoration: underline;
}

/* 列表 */

body.single .telegram-single-content > :is(ul, ol) {
  padding-left: 15px;
}

body.single .telegram-single-content > :is(ul, ol) > li {
  margin-bottom: 4px;
}

body.single .telegram-single-content > ul > li::marker {
  color: var(--tg-single-accent);
  font-size: 0.82em;
}

body.single .telegram-single-content > :is(ul, ol) :is(ul, ol) {
  margin-top: 4px;
  margin-bottom: 0;
}

/* 图片与媒体 */

body.single .telegram-single-content > img,
body.single .telegram-single-content > figure img,
body.single .telegram-single-content > .wp-block-image img,
body.single .telegram-single-content > .wp-block-gallery img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

body.single .telegram-single-content > figure,
body.single .telegram-single-content > .wp-block-image,
body.single .telegram-single-content > .wp-block-gallery {
  max-width: 100%;
  margin-inline: auto;
}

body.single .telegram-single-content > figure figcaption,
body.single .telegram-single-content > .wp-block-image figcaption,
body.single .telegram-single-content > .wp-block-gallery figcaption {
  margin-top: 8px;
  color: var(--tg-single-muted);
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center;
}

body.single .telegram-single-content > iframe,
body.single .telegram-single-content > video,
body.single .telegram-single-content > figure :is(iframe, video) {
  max-width: 100%;
}

/* 引用 */

body.single .telegram-single-content > blockquote {
  margin-inline: 0;
  padding: 8.5px 17px;
  border-left: 5px solid #eee;
  background: transparent;
}

body.single .telegram-single-content > blockquote > :last-child {
  margin-bottom: 0;
}

/* 代码 */

body.single .telegram-single-content > pre {
  display: block;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #ecf3f8;
  color: #546172;
  font-size: 11px !important;
  line-height: 1.42857143 !important;
}

body.single .telegram-single-content > pre,
body.single .telegram-single-content > pre * {
  font-family:
    Menlo,
    Monaco,
    Consolas,
    "Courier New",
    monospace !important;
}

body.single .telegram-single-content > :is(p, ul, ol) code {
  padding: 2px 4px;
  border-radius: 4px;
  background: #feeae4;
  color: #c61717;
  font-size: 90% !important;
}

/* 表格 */

body.single .telegram-single-content > table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

body.single .telegram-single-content > table :is(th, td) {
  padding: 8px;
  border-top: 1px solid #eee;
  text-align: left;
  vertical-align: top;
}

body.single .telegram-single-pages {
  margin-top: 28px;
  text-align: center;
}

/* =========================================================
   FAQ 插件兼容
   保留插件原始尺寸和样式，只修正顶部及标题位置
   ========================================================= */

body.single .telegram-single-content :is(
  .faq-schema-ultimate,
  .faq-container,
  .schema-faq,
  [class*="faq-schema"],
  [class*="faq_schema"]
) {
  font-size: initial;
  line-height: normal;
}

body.single .telegram-single-content :is(
  .faq-schema-ultimate,
  .faq-container,
  .schema-faq,
  [class*="faq-schema"],
  [class*="faq_schema"]
) * {
  font-family: inherit;
}

/* FAQ 根容器保留正常顶部空间 */

body.single .telegram-single-content > :is(
  .faq-schema-ultimate,
  .faq-schema,
  .faq-container,
  .faq-wrapper,
  .faq-wrap,
  .faq-accordion,
  .schema-faq,
  [class*="faq-schema"],
  [class*="faq_schema"],
  [class*="faq-container"],
  [class*="faq_wrapper"],
  [itemscope][itemtype*="FAQPage"]
) {
  margin-top: 18px !important;
  padding-top: 18px !important;
}

body.single .telegram-single-content > :is(
  .faq-schema-ultimate,
  .faq-schema,
  .faq-container,
  .faq-wrapper,
  .faq-wrap,
  .faq-accordion,
  .schema-faq,
  [class*="faq-schema"],
  [class*="faq_schema"],
  [class*="faq-container"],
  [class*="faq_wrapper"],
  [itemscope][itemtype*="FAQPage"]
) > :first-child {
  margin-top: 0 !important;
}

/* FAQ 问题标题向上对齐 */

body.single .telegram-single-content :is(
  .faq-schema-ultimate,
  .faq-schema,
  .faq-container,
  .faq-wrapper,
  .faq-wrap,
  .faq-accordion,
  .schema-faq,
  [class*="faq-schema"],
  [class*="faq_schema"],
  [class*="faq-container"],
  [class*="faq_wrapper"],
  [itemscope][itemtype*="FAQPage"]
) :is(
  h3,
  .faq-question,
  .faq-title,
  .faq-header,
  .faq-accordion-title,
  .accordion-title,
  .accordion-header,
  [class*="faq-question"],
  [class*="faq_question"],
  [class*="faq-title"],
  [class*="faq_title"],
  [itemprop="name"]
) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.single .telegram-single-content :is(
  .faq-schema-ultimate,
  .faq-schema,
  .faq-container,
  .faq-wrapper,
  .faq-wrap,
  .faq-accordion,
  .schema-faq,
  [class*="faq-schema"],
  [class*="faq_schema"],
  [class*="faq-container"],
  [class*="faq_wrapper"],
  [itemscope][itemtype*="FAQPage"]
) :is(
  .faq-item,
  .faq-row,
  .faq-single,
  .faq-accordion-item,
  .accordion-item,
  .faq-question-wrap,
  .faq-title-wrap,
  [class*="faq-item"],
  [class*="faq_item"],
  [class*="question-wrap"],
  [class*="title-wrap"],
  [itemprop="mainEntity"],
  [itemscope][itemtype*="Question"]
) {
  padding-top: 18px !important;
}

body.single .telegram-single-content :is(
  .faq-schema-ultimate,
  .faq-schema,
  .faq-container,
  .faq-wrapper,
  .faq-wrap,
  .faq-accordion,
  .schema-faq,
  [class*="faq-schema"],
  [class*="faq_schema"],
  [class*="faq-container"],
  [class*="faq_wrapper"],
  [itemscope][itemtype*="FAQPage"]
) :is(div, section, header):has(> h3) {
  padding-top: 18px !important;
}

body.single .telegram-single-content :is(
  .faq-schema-ultimate,
  .faq-schema,
  .faq-container,
  .faq-wrapper,
  .faq-wrap,
  .faq-accordion,
  .schema-faq,
  [class*="faq-schema"],
  [class*="faq_schema"],
  [class*="faq-container"],
  [class*="faq_wrapper"],
  [itemscope][itemtype*="FAQPage"]
) h3 {
  margin-bottom: 12px !important;
}

/* =========================================================
   右侧最新消息
   ========================================================= */

body.single .telegram-single-news-inner {
  position: relative;
  width: 100%;
  padding-left: 22px;
}

body.single .telegram-single-news-inner::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: 2px;
  background: var(--tg-single-accent);
  content: "";
}

body.single .telegram-single-news-heading {
  display: block;
  margin: 0 0 18px;
  color: var(--tg-single-accent);
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-decoration: none;
}

body.single .telegram-single-news-heading:is(:hover, :focus) {
  color: var(--tg-single-accent);
  text-decoration: underline;
}

body.single .telegram-single-news-item {
  display: block;
  margin: 0 0 18px;
  text-decoration: none;
}

body.single .telegram-single-news-item:last-child {
  margin-bottom: 0;
}

body.single .telegram-single-news-date {
  display: block;
  margin: 0 0 3px;
  color: #111;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
}

body.single .telegram-single-news-title {
  display: block;
  color: var(--tg-single-accent);
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

body.single .telegram-single-news-item:is(:hover, :focus)
  .telegram-single-news-title {
  text-decoration: underline;
}

body.single .telegram-single-news-empty {
  color: var(--tg-single-muted);
  font-size: 12px !important;
}

/* =========================================================
   日期、作者和分享
   ========================================================= */

body.single .telegram-single-footer {
  width: 100%;
  margin: 34px 0 0;
}

body.single .telegram-single-meta {
  color: var(--tg-single-muted);
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.single .telegram-single-meta :is(time, .telegram-single-author) {
  display: block;
}

body.single .telegram-single-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: 16px;
}

body.single .telegram-single-share-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tg-single-link);
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-decoration: none;
}

body.single .telegram-single-share-link:is(:hover, :focus) {
  color: var(--tg-single-link);
  text-decoration: underline;
}

body.single .telegram-single-share-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
}

body.single .telegram-single-share-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* =========================================================
   深色模式
   ========================================================= */

html[data-theme="dark"] body.single {
  --tg-single-text: var(--d-text);
  --tg-single-link: var(--d-accent-bright);
  --tg-single-accent: var(--d-accent-bright);
  --tg-single-muted: var(--d-text-muted);
}

html[data-theme="dark"] body.single .telegram-single-news-date {
  color: var(--d-text);
}

html[data-theme="dark"] body.single .telegram-single-content > pre {
  border-color: var(--d-border);
  background: var(--d-accent-soft);
  color: var(--d-text);
}

html[data-theme="dark"] body.single .telegram-single-content > blockquote {
  border-left-color: var(--d-border);
}

/* =========================================================
   响应式
   ========================================================= */

@media (max-width: 1199px) {
  body.single {
    --tg-single-content-width: 670px;
    --tg-single-news-width: 215px;
    --tg-single-column-gap: 24px;
  }

  body.single .telegram-single-container {
    max-width: 1040px;
  }

  body.single .telegram-single-layout {
    grid-template-columns:
      105px
      minmax(0, var(--tg-single-content-width))
      var(--tg-single-news-width);
  }

  body.single .telegram-single-side-icon {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 991px) {
  body.single .telegram-single-page {
    padding-top: 34px;
  }

  body.single .telegram-single-layout {
    display: block;
  }

  body.single .telegram-single-icon-column,
  body.single .telegram-single-news {
    display: none;
  }

  body.single .telegram-single-article {
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  body.single .telegram-single-page {
    padding: 26px 15px 50px;
  }

  body.single .telegram-single-header {
    margin-bottom: 21px;
  }

  body.single .telegram-single-title {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }

  body.single .telegram-single-cover {
    margin-bottom: 24px;
  }

  body.single .telegram-single-content,
  body.single .telegram-single-content > p,
  body.single .telegram-single-content > ul > li,
  body.single .telegram-single-content > ol > li,
  body.single .telegram-single-content > table :is(td, th),
  body.single .telegram-single-content > blockquote {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  body.single .telegram-single-content > h2 {
    font-size: 22px !important;
  }

  body.single .telegram-single-content > h3 {
    font-size: 19px !important;
  }

  body.single .telegram-single-content > h4 {
    font-size: 15px !important;
  }
}

@media (max-width: 420px) {
  body.single .telegram-single-page {
    padding-right: 12px;
    padding-left: 12px;
  }

  body.single .telegram-single-title {
    font-size: 23px !important;
  }
}