/* Lynux 布局样式 */

/* 外壳（html/body 高度 + flex 三段排布）定义在 base.css：
 * 后台布局不加载本文件，外壳必须落在两边都加载的 base.css 里。
 */

.container {
    max-width: var(--container-shell);
    margin: 0 auto;
    padding: 0 var(--space-4);
    width: 100%;
}

/* 文章正文容器：单独使用 .prose 类才生效，不影响首页/列表 */
.prose {
    max-width: var(--container-max);
    margin: 0 auto;
}

.site-header {
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    flex: 0 0 auto;     /* 固定：不参与伸缩，也不被压缩 */
    /* margin-bottom 已移除：页眉现在固定在顶部，这 32px 会变成页眉下方的死白。
       与内容之间的间距改由 .site-main 的 padding-top 提供（随内容滚动）。 */
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.site-title {
    font-family: var(--font-rules-expanded);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text);
    mix-blend-mode: plus-lighter;
}

.site-nav {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.site-nav a {
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.site-nav a:hover { color: var(--color-link); text-decoration: none; }

/* ── 页眉导航（导航子系统 M4，2026-10-04）──────────────────────────
 * 标记出处：views/partials/nav.php。容器 .site-nav-wrap 由 partial 包一层，
 * 内层 .site-nav 复用上面已有的 flex/gap（那是页眉导航原本就有的样式，没删）。 */
.site-nav-wrap { display: flex; align-items: center; }
.site-nav { list-style: none; margin: 0; padding: 0; }
.site-nav__item { display: flex; }
.site-nav--sub { gap: var(--space-3); padding-left: var(--space-3); }
.site-nav__item.is-active > .site-nav__link { color: var(--color-link); }

/* ── 滚动区 ──────────────────────────────────────────────────────
 * 全宽滚动（滚动条贴窗口右缘，而不是缩在 1400px 外壳内侧），
 * 限宽交给内层 .container —— 所以 <main> 不再同时是 .container。
 */
.site-main {
    flex: 1 1 auto;
    min-height: 0;                  /* 关键：默认 auto 会让内容撑破外壳 */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;   /* 滚到底不回弹外层（背景不跟着动） */
    padding: var(--space-8) 0 var(--space-12);
    position: relative;
    z-index: 10;                    /* 浮在 backdrop 的 4 层之上 */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-6) 0;
    flex: 0 0 auto;     /* 固定：不参与伸缩，也不被压缩 */
    /* margin-top 已移除：间距改由 .site-main 的 padding-bottom 提供 */
    color: var(--color-text-tertiary);
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
}

@media (max-width: 640px) {
    .site-header .container {
        flex-direction: column;
        align-items: flex-start;
    }
    .site-nav { font-size: 0.8125rem; }
}

/* ── 错误页 ──────────────────────────────────────────────────────
 * 定义在本文件而非 list.css：errors/layout.php 只加载 base + fonts + layout，
 * 原来放在 list.css 时错误页根本取不到这些规则（页面呈现为无样式）。
 */
.error-page {
    text-align: center;
    padding: var(--space-12) 0;
}

.error-code {
    font-family: var(--font-rules-expanded);
    font-size: 4rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.error-message {
    color: var(--color-text);
    margin-bottom: var(--space-6);
}

/* 打印：固定外壳会把超出首屏的内容裁掉（overflow:hidden 的已知副作用）。
 * 打印时还原成普通文档流，让整篇文章完整出现在纸上。 */
@media print {
    html,
    body {
        height: auto;
        max-height: none;
        overflow: visible;
        display: block;
    }
    .site-header,
    .site-footer {
        position: static;
        flex: none;
    }
    .site-main {
        overflow: visible;
        height: auto;
        padding: 0;
    }
    .bg-filler,
    .bg-glow,
    .bg-noise { display: none; }
}