/* ==========================================================================
   yanger blog · layout.css
   容器 / 头部 / 页脚 / 首页 hero / 文章页栅格 / 响应式
   ========================================================================== */

/* 短页面页脚贴底：body 撑满视口、main 弹性填充（避免页脚下方出现大片留白） */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
/* main 是纵向 flex 的子项，且 .container 带 margin-inline: auto —— 交叉轴上的 auto 外边距
   优先级高于 align-items: stretch，会让 main 不被拉伸、反而收缩到内容宽
   （骨架屏这类没有固有宽度的内容会塌成一条窄列）。显式 width: 100% 撑满，
   再由 max-width + auto 外边距居中。 */
main { flex: 1 0 auto; width: 100%; }

.container { max-width: 720px; margin-inline: auto; padding-inline: 24px; }
.container--wide { max-width: 1100px; }

/* ---------- 头部（所有页面，静态复制） ---------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex; align-items: center; gap: 20px;
  max-width: 1100px; height: var(--header-h);
  margin-inline: auto; padding-inline: 24px;
}
.site-title { text-decoration: none; }
.site-logo { display: block; height: 44px; width: auto; border-radius: 10px; }
/* 明暗两套 logo 随主题切换（data-theme 在首屏绘制前已就绪，无闪烁） */
.site-logo-dark { display: none; }
[data-theme="dark"] .site-logo-light { display: none; }
[data-theme="dark"] .site-logo-dark { display: block; }
.site-nav { display: flex; gap: 18px; margin-left: auto; }
.site-nav a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color .25s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

/* ---------- 页脚（各页统一：紧凑单行，随内容换行） ---------- */
.site-footer { border-top: 1px solid var(--rule); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; justify-content: space-between;
  max-width: 1100px; margin-inline: auto; padding: 16px 24px 18px;
  font-size: 13px; color: var(--faint);
}
.footer-inner a { color: var(--muted); text-decoration: none; transition: color .25s; }
.footer-inner a:hover { color: var(--ink); }
.footer-inner p { margin: 0; }
/* 备案信息固定在右下；窄屏换行时仍靠右 */
.footer-inner .footer-icp { margin-left: auto; }

/* 移动端：版权与备案同行居中；字号随宽度收缩，窄屏也保持一行 */
@media (max-width: 719px) {
  .footer-inner {
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 14px;
    padding-inline: 18px;
    font-size: clamp(10.5px, 3.3vw, 13px);
    text-align: center;
  }
  .footer-inner p { white-space: nowrap; }
  .footer-inner .footer-icp { margin-left: 0; }
}

/* ---------- 首页文章列表 ---------- */
.post-list { padding-top: 44px; padding-bottom: 48px; }
.section-title {
  margin: 0 0 24px;
  font-size: 13px; font-weight: 500; letter-spacing: .18em;
  color: var(--faint);
}

/* ---------- 一屏布局（全站）：页面本身不滚动，内容区内部滚动、滚动条隐藏 ---------- */
.screen { height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }
.screen main {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;                  /* 默认：main 自己滚（文章详情 / 关于 / 404） */
  overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 48px;
}
.screen main::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* 首页 / 归档 / 搜索：顶部（标题、筛选、搜索框）固定，列表单独滚 */
.screen--split main { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.screen--split .page-header { flex: none; padding: 28px 0 20px; }
.screen--split .archive-filters { flex: none; padding-bottom: 20px; }
.screen--split .search-box { flex: none; margin-bottom: 20px; }
.screen--split .post-list,
.screen--split #archive-list,
.screen--split #search-results {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 48px;
}
/* main 是 flex 容器：容器类的 auto 外边距会让它收缩到内容宽 */
.screen--split .post-list { width: 100%; }
.screen--split .post-list::-webkit-scrollbar,
.screen--split #archive-list::-webkit-scrollbar,
.screen--split #search-results::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* 页脚常驻底部：按钮抬到页脚上方，避免压住页脚文字（--footer-h 由 backtop.js 写入） */
.screen .back-to-top {
  bottom: calc(var(--footer-h, 56px) + 14px + env(safe-area-inset-bottom, 0px));
}

/* 文章详情：main 自身滚动（标题随内容滚走），锚点偏移与目录吸顶相应上移一档 */
.screen .post-body h2,
.screen .post-body h3,
.screen .post-body h4 { scroll-margin-top: 24px; }
@media (min-width: 1100px) {
  .screen .post-layout.has-toc .toc { top: 32px; max-height: calc(100svh - 190px); }
}

/* ---------- 内容页（归档 / 搜索 / 关于） ---------- */
.page { padding-top: 8px; padding-bottom: 96px; }
.page-header { padding: 48px 0 28px; }
.page-header h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
}
.page-sub { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- 文章页栅格 ---------- */
/* 正文列铺满容器：不再限宽居中（两侧留白归零），有目录时由下面的栅格分列 */
.post-layout {
  display: flex; flex-direction: column; gap: 40px;
  margin-inline: auto;
}
/* 没有目录的短文章：标题与正文收窄到适合阅读的行宽（两者左边缘仍然对齐） */
.post:not(:has(.post-layout.has-toc)) .post-header,
.post:not(:has(.post-layout.has-toc)) .post-main {
  max-width: 800px;
}
@media (min-width: 1100px) {
  .post-layout.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 44px;
    align-items: start;
  }
  .post-layout.has-toc .toc {
    order: 0;
    position: sticky; top: calc(var(--header-h) + 32px);
    max-height: calc(100svh - var(--header-h) - 64px);
    overflow: auto;
  }
}

/* ---------- 移动端头部收紧 ---------- */
@media (max-width: 719px) {
  :root { --header-h: 56px; }
  .header-inner { gap: 12px; padding-inline: 16px; }
  .site-nav { gap: 14px; }
  .container { padding-inline: 18px; }
  .theme-toggle { width: 32px; height: 32px; }
  .site-logo { height: 38px; border-radius: 8px; }
}