/* ============================================
 * 全局样式（无法用 MDUI 类替代的部分）
 * ============================================ */
html {
  margin: 0;
  font-family: var(--app-font-stack);
  scroll-padding-top: var(--app-top-bar-offset);
  /* scroll-behavior: smooth; 已移除，防止首页自动下滑 */
}

body#top {
  margin: 0;
  font-family: inherit;
}

/*
 * 页面由 body 负责纵向滚动。MDUI layout 默认的 hidden/auto 会截断 position:sticky，
 * 放开这两层后，文章 TOC 才能相对视口吸附。
 */
mdui-layout,
mdui-layout-main {
  overflow: visible;
}

.mdui-prose {
  font-family: inherit;

  /* 长文不在 body 上开 optimizeLegibility；仅标题保留字距/连字观感 */
  & :is(h1, h2, h3) {
    text-rendering: optimizeLegibility;
  }

  /* 链接换行（MDUI 未提供） */
  & a {
    word-break: break-all;
    overflow-wrap: break-word;
  }

  /* 去掉鼠标点击后仅 :focus（非 :focus-visible）时 MDUI 残留的底边框/下划线 */
  & a:focus:not(:focus-visible) {
    border-bottom: none;
    text-decoration: none;
  }

  /* 仅悬停与键盘聚焦时显示下划线（替代 MDUI 的 border-bottom） */
  & a:hover,
  & a:focus-visible {
    border-bottom: none;
    text-decoration: underline;
    text-decoration-color: rgb(var(--mdui-color-primary));
    text-underline-offset: 0.08em;
    text-decoration-thickness: 0.0625rem;
  }
}

/* 图片响应式（MDUI 的 mdui-img-fluid 类已处理，但保留作为兜底） */
img {
  max-width: 100%;
  height: auto;
}

/* ============================================
 * 页面版心与两栏 Grid（主题自有 .app-container，避免占用 .mdui-* 命名空间）
 * ============================================ */
.app-container,
.app-container-fluid {
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
}

.app-container {
  width: min(calc(100% - var(--app-container-gutter) * 2), var(--app-container-max-width));
  max-width: none;
}

.app-container-fluid {
  width: min(calc(100% - var(--app-container-gutter) * 2), 100%);
}

/* 原无效 mdui-p-* 的等价间距（版心 gutter 见 --app-container-gutter） */
.page-shell--pad-index {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.page-shell--pad-list {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

.page-shell--pad-static-page {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
}

.page-grid--post {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.page-main--post,
.page-sidebar--post {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

.page-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 840px) {
  /* minmax(0, …) 避免子项 min-content（如超宽图）撑开整列；840px 与 MDUI --mdui-breakpoint-md 一致 */
  .page-grid:not(.page-grid--single) {
    grid-template-columns:
      minmax(0, var(--page-article-column-max-width))
      minmax(0, var(--page-toc-column-width));
    justify-content: center;
    align-items: start;
  }

  .page-grid--post:not(.page-grid--single) {
    column-gap: 2.25rem;
  }

  .page-grid--single {
    grid-template-columns: 1fr;
  }
}

.page-main {
  min-width: 0;
}

@media (min-width: 840px) {
  .page-grid:not(.page-grid--single) .page-main {
    max-width: var(--page-article-column-max-width);
    width: 100%;
  }

  .page-grid:not(.page-grid--single) .page-sidebar {
    width: var(--page-toc-column-width);
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  /* sticky 盒子必须完整落入 top/bottom 边界内，否则浏览器会让目录继续随页面滚走 */
  .page-sidebar--post {
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: var(--post-toc-viewport-bottom);
  }
}

/* ============================================
 * 粘性侧边栏：top 须含 --app-sticky-stack-gap，与 TOC max-height 共用 --app-sticky-offset
 * ============================================ */
.sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: var(--app-sticky-offset);
  z-index: 1;
}