/* UMU Blog — single article template. Matches Figma "官网 2026" file
   (0SFWQshDzOQ3cfJBYeCbF7), node 26830:8079. The category-count sidebar seen
   in the reference screenshot is T2 scope — only the TOC nav is built here.
   On mobile, T2's version of that sidebar becomes a section BELOW the
   article body (not a hidden/collapsed sidebar) — see the max-width:900px
   media query further down. The TOC itself (this file's actual scope) is
   PC-only in both T1 and T2 — never shown on mobile. */

/* Same twentytwentyfive theme.json global body { font-weight: 300 } reset as
   umu-dictionary/style.css — see that file's comment for why it leaks in
   here despite this template bypassing the theme's own page templates. T2's
   future migrated-article archive/category templates will need the same
   reset once they exist. */
body.umu-blog-single {
  font-weight: 400;
}

:root {
  --umu-blog-font:
    'PingFang SC', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  --umu-blog-title: #0a1f24;
  --umu-blog-text1: #222222;
  --umu-blog-text2: #666666;
  --umu-blog-body: #333333;
  --umu-blog-accent: #1e6ee6;
  --umu-blog-border: #e0e0e0;
}

.umu-blog-main {
  padding: 40px 24px;
  font-family: var(--umu-blog-font);
}

@media (min-width: 901px) {
  /* Purely cosmetic floor — keeps short articles (little content below the
     AI summary box) from looking oddly sparse. Independent of the fixed
     sidebar below. */
  .umu-blog-main {
    min-height: 1300px;
  }

  /* left/width/top are all set inline by the script in
     single-template-render.php — left/width resolved once from the
     sidebar's own natural (pre-fixed) position via getBoundingClientRect()
     (this container is horizontally centered, so the fixed value depends
     on viewport width); top recomputed continuously on scroll, clamped
     between the pin offset and the container's bottom edge, emulating
     position: sticky's own behavior manually. Stays position: fixed the
     whole time — never switches to position: absolute — see that script's
     comment for why (an earlier version that did switch had a real
     coordinate-system bug: fixed's `left` is viewport-relative, absolute's
     is container-relative, and reusing one value for both made the sidebar
     jump into the article once the footer scrolled into view). Doesn't use
     CSS position: sticky at all because that's broken sitewide — a
     third-party header/footer bundle leaves body with an inline
     overflow:auto, and any ancestor with non-visible overflow breaks sticky
     for every descendant. */
  .umu-blog-toc.umu-blog-toc--fixed {
    position: fixed;
  }

  /* Compensates for .umu-blog-toc leaving flow when fixed — 213px sidebar
     width + 32px gap. Without this the article would expand leftward to
     fill the vacated space (a real regression from an earlier attempt). */
  .umu-blog-article.umu-blog-article--shifted {
    margin-left: 245px;
  }
}

/* Sidebar 245px (Figma "Aside" component) + 32px gap (measured directly off
   the Figma canvas) + 855px article content (Figma Layout panel: Width Fill
   855px) = 1132px. 855px is the PC design width only — .umu-blog-article
   below uses max-width (not a fixed width) so it shrinks fluidly on
   narrower viewports instead of forcing horizontal overflow. */
.umu-blog-container {
  max-width: 1132px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
}

.umu-blog-toc {
  position: relative;
  flex: 0 0 213px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.umu-blog-toc-title {
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  color: var(--umu-blog-text1);
  margin: 0;
}

/* 370px max-height (not counting the "目录" title above it) reserves room
   below for T2's future 文章分类 (category list + counts) section — the
   list scrolls internally once it's taller than that, rather than pushing
   the reserved space down. */
.umu-blog-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 370px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--umu-blog-border) transparent;
}

.umu-blog-toc-list::-webkit-scrollbar {
  width: 6px;
}

.umu-blog-toc-list::-webkit-scrollbar-track {
  background: transparent;
}

.umu-blog-toc-list::-webkit-scrollbar-thumb {
  background-color: var(--umu-blog-border);
  border-radius: 3px;
}

.umu-blog-toc-item a {
  display: block;
  font-size: 18px;
  line-height: 26px;
  color: var(--umu-blog-text1);
  text-decoration: none;
}

.umu-blog-toc-item a:hover {
  color: var(--umu-blog-accent);
}

.umu-blog-article {
  flex: 1 1 auto;
  max-width: 855px;
  min-width: 0;
}

.umu-blog-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 54px;
  letter-spacing: -0.4px;
  color: var(--umu-blog-title);
  margin: 0 0 16px;
}

.umu-blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 18px;
}

.umu-blog-date {
  font-size: 14px;
  line-height: 20px;
  color: var(--umu-blog-body);
  flex-shrink: 0;
}

/* flex-shrink:0 + white-space:nowrap keep each tag sized to its own text --
   without them, a narrow (mobile) container squeezes every tag down to fit
   one row instead of wrapping whole tags onto the next line, which breaks
   the pill's own text into 2-3 lines instead (looked broken with several
   category tags on a phone-width screen). */
.umu-blog-category-tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid var(--umu-blog-accent);
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--umu-blog-accent);
}

.umu-blog-ai-summary {
  background: rgba(30, 110, 230, 0.04);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
}

.umu-blog-ai-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.umu-blog-ai-summary-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--umu-blog-text1);
}

.umu-blog-ai-summary-title svg {
  flex-shrink: 0;
}

/* Blinking caret at the end of whichever bullet is currently being typed by
   the script in single-template-render.php -- removed from the DOM once the
   last bullet finishes, so nothing blinks once the reveal is done. */
.umu-blog-ai-summary-cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: umu-blog-ai-summary-cursor-blink 1s step-end infinite;
}

@keyframes umu-blog-ai-summary-cursor-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.umu-blog-ai-summary-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.umu-blog-ai-summary-list li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 24px;
  color: var(--umu-blog-text1);
}

/* Figma's bullet is a 6px accent-blue dot at 60% opacity, not the browser's
   default black disc marker. */
.umu-blog-ai-summary-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--umu-blog-accent);
  opacity: 0.6;
}

/* Not-yet-typed bullets: the dot above is a ::before on the <li> itself, so
   it (and the empty line's spacing) would otherwise show before that
   bullet's own turn to type even though its text is empty. */
.umu-blog-ai-summary-list li.umu-blog-ai-summary-line--pending {
  display: none;
}

.umu-blog-content {
  font-size: 18px;
  line-height: 28px;
  color: var(--umu-blog-body);
}

/* Uniform 28px gap between content blocks (paragraphs, images, the custom
   card block, lists) — matches Figma's measured spacing, and applies to any
   block type generically rather than enumerating each one. Headings keep
   their own distinct margin (more space before than after, to visually
   separate sections) so they're excluded here. */
.umu-blog-content > *:not(h2):not(h3) {
  margin: 0 0 28px;
}

.umu-blog-content > *:last-child {
  margin-bottom: 0;
}

.umu-blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.umu-blog-content h2 {
  font-size: 26px;
  font-weight: 600;
  margin: 1.6em 0 0.6em;
  color: var(--umu-blog-title);
  /* Reserves space above the target when the TOC's #anchor links jump here,
     so the heading doesn't land right under the fixed header. Same 100px
     (60px header + 40px spacing) as the sidebar's own pin offset. */
  scroll-margin-top: 100px;
}

.umu-blog-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 1.4em 0 0.5em;
  color: var(--umu-blog-title);
}

.umu-blog-anchor-link {
  color: var(--umu-blog-accent);
}

@media (max-width: 900px) {
  /* Intentional in both T1 (now) and T2 (future) — the TOC nav never shows
     on mobile, in either phase. T2's mobile design reserves the space this
     rule frees up for a category-list section placed BELOW the article
     body instead (replacing the PC-only left sidebar's category content,
     not just hiding it) — that section doesn't exist yet, this only
     documents where it goes so it isn't built as another sidebar variant. */
  .umu-blog-toc {
    display: none;
  }
}

@media (max-width: 600px) {
  .umu-blog-main {
    padding: 28px 16px 48px;
  }

  .umu-blog-title {
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: normal;
  }

  .umu-blog-content {
    font-size: 16px;
    line-height: 1.7;
  }
}