/* ============================================================
 * 独立阅读页（关于我们 / 侵权处理）
 * ------------------------------------------------------------
 * 适用：body.page-single 的页面（app/view/page/site_info.html，承载 /about 与 /copyright）
 * 作用：
 *   ① 隐藏全站左栏（.app-side-col），主区退化为**居中单栏**
 *   ② 提供一套「单页阅读」排版：hero 标题区 + 正文排版 + 信息卡 + 编号步骤
 * 调用：由页面模板在 $__head 槽位引入（改本文件须 bump 模板里的 ?v=）
 * 依赖：variables.css / style.css 的 CSS 变量
 * ⛔ 禁止 Bootstrap 栅格（row/col）；布局一律 flex/grid + 变量
 * ============================================================ */

/* ------------------------------------------------------------
 * ① 单栏化：隐藏左栏 + 取消侧栏折叠带来的位移
 * ------------------------------------------------------------
 * 直接打开本页时，服务端**根本不下发**左栏 DOM（site_info.html 置 $__no_side，见 base.html），
 * 这条规则只承担两个兜底：
 *   a) pjax 从别的页面局部换页进入本页时，旧左栏留在原地不被重建（里面有音乐播放器，
 *      重建会断音）→ 靠这条隐藏；
 *   b) 折叠态位移必须显式清掉：base.html 有一段带 !important 的内联样式
 *      `html.sidebar-collapsed .app-main-inner { transform: translateX(-side-w/2) }`，
 *      单栏页没有左栏可抵消，留着会把整块内容左移半个侧栏宽。
 *      故选择器写到 (0,3,2) 特异性（html.sidebar-collapsed body.page-single .app-main-inner）
 *      才压得过那段内联规则，且必须带 !important。公告条（.app-notice）在 .app-shell 之外，
 *      同理单独覆盖。
 * ⚠️ 左栏缺席时栅格不会塌：.app-shell 是 grid: auto minmax(0,1fr)，第 1 列 auto 无内容收为 0，
 *    .app-main 与 .app-footer 的 grid-column: 2 照旧成立。
 * ------------------------------------------------------------ */
.page-single .app-side-col {
    display: none;
}

body.page-single .app-main-inner,
html.sidebar-collapsed body.page-single .app-main-inner {
    transform: none !important;
}

body.page-single .app-notice-inner,
html.sidebar-collapsed body.page-single .app-notice-inner {
    transform: none !important;
}

/* ------------------------------------------------------------
 * ② 版式：左侧「网站信息」菜单 + 右侧正文
 * ------------------------------------------------------------
 * 左右内边距由本容器自管（父级 .app-main-inner 在窄屏会收成 `padding: 12px 0`，
 * 即左右为 0 —— 那是给带自身内边距的列表卡片页用的；本页没有卡片，
 * 若不自带内边距，正文会直接顶到屏幕边缘、汉字贴边被裁）。
 * 因此这里显式把父级左右内边距归零，再由 .info-layout 统一给 20/16px，
 * 各断点只改一处，不会出现「桌面 32 + 20 = 52px 双份」的问题。
 * ------------------------------------------------------------ */
.page-single .app-main-inner {
    padding-left: 0;
    padding-right: 0;
}

.info-layout {
    display: grid;
    grid-template-columns: 178px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    width: 100%;
    max-width: 1020px;   /* 178 菜单 + 40 gap + 约 780 正文（单行 38–42 汉字） */
    margin: 0 auto;
    padding: 8px 20px 56px;
}

/* ---- 菜单（桌面左侧竖排，吸顶跟随滚动）---- */
.info-menu {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-menu-title {
    margin: 0 0 8px 12px;
    color: var(--color-text-dim);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.info-menu-link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 8px);
    color: var(--color-text-secondary);
    font-size: 13.5px;
    line-height: 1.5;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.info-menu-link:hover {
    color: var(--color-text-title);
    background: var(--color-bg-card-2);
}

/* 当前项：淡色底 + 强调色文字，不用左边框（与站内其他选中态一致） */
.info-menu-link.is-active {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    font-weight: 600;
}

.info-main {
    min-width: 0;   /* 防长英文/链接把 grid 列撑破 */
}

/* ------------------------------------------------------------
 * ③ Hero 标题区
 * ------------------------------------------------------------ */
.legal-hero {
    padding-bottom: 22px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
}

.legal-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.legal-title {
    margin: 0;
    color: var(--color-text-title);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.legal-lead {
    margin: 12px 0 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.8;
}

/* 站点标语（lead 下方单独一行）：用强调色与略宽字距区分于正文，
   与顶栏/页脚的品牌语气一致；不加大字号，避免与 h1 抢视觉重心。 */
.legal-lead-slogan {
    margin: 10px 0 0;
    color: var(--color-accent);
    font-size: 13.5px;
    line-height: 1.8;
    letter-spacing: .04em;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 16px;
    color: var(--color-text-dim);
    font-size: 12px;
}

/* ------------------------------------------------------------
 * ④ 正文排版
 * ------------------------------------------------------------ */
.legal-body {
    color: var(--color-text-primary);
    font-size: 14.5px;
    line-height: 1.95;
}

.legal-body p {
    margin: 0 0 14px;
}

.legal-body p:last-child {
    margin-bottom: 0;
}

.legal-body h2 {
    position: relative;
    margin: 34px 0 12px;
    padding-left: 12px;
    color: var(--color-text-title);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

/* 标题左侧竖条：唯一装饰，比下划线更安静 */
.legal-body h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.32em;
    bottom: 0.32em;
    width: 3px;
    border-radius: 2px;
    background: var(--color-accent);
}

.legal-body h3 {
    margin: 22px 0 8px;
    color: var(--color-text-title);
    font-size: 14.5px;
    font-weight: 600;
}

.legal-body ul,
.legal-body ol {
    margin: 0 0 14px;
    padding-left: 1.35em;
}

.legal-body li {
    margin-bottom: 7px;
}

.legal-body li::marker {
    color: var(--color-text-dim);
}

.legal-body a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent-soft);
    transition: border-color 0.2s;
}

.legal-body a:hover {
    border-bottom-color: var(--color-accent);
}

.legal-body strong {
    color: var(--color-text-title);
    font-weight: 600;
}

/* ---- 提示块（浅色底 + 左侧强调线）---- */
.legal-note {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
    background: var(--color-accent-soft);
    color: var(--color-text-primary);
    font-size: 13.5px;
    line-height: 1.8;
}

/* ---- 编号步骤（处理流程）---- */
.legal-steps {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    counter-reset: legal-step;
}

.legal-steps li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 34px;
    counter-increment: legal-step;
}

.legal-steps li::before {
    content: counter(legal-step);
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* ---- 信息卡（联系方式 / 关键说明）---- */
.legal-card {
    margin: 16px 0 18px;
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-card-2);
}

.legal-card-title {
    margin: 0 0 10px;
    color: var(--color-text-title);
    font-size: 14px;
    font-weight: 700;
}

.legal-card .legal-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.7;
}

.legal-card .legal-card-row:last-child {
    margin-bottom: 0;
}

.legal-card-label {
    min-width: 5em;
    color: var(--color-text-dim);
    font-size: 13px;
}

.legal-card-value {
    color: var(--color-text-primary);
}

/* 锚点定位留出顶栏高度，避免 #contact 跳转后被吸顶栏压住 */
.legal-anchor-target {
    scroll-margin-top: 96px;
}

/* ------------------------------------------------------------
 * ⑤ 页尾返回
 * ------------------------------------------------------------ */
.legal-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.legal-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.legal-foot-link:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* ------------------------------------------------------------
 * ⑥ 响应式
 * ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* 窄屏：菜单由左侧竖排改为顶部横排胶囊，正文回到单列 */
    .info-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 8px 16px 40px;
    }

    .info-menu {
        position: static;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .info-menu-title {
        display: none;   /* 窄屏省掉小标题，菜单本身已足够自明 */
    }

    .info-menu-link {
        flex: 0 0 auto;
        padding: 6px 14px;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        font-size: 13px;
    }

    .info-menu-link.is-active {
        border-color: transparent;
    }

    .legal-title {
        font-size: 24px;
    }

    .legal-lead {
        font-size: 13.5px;
    }

    .legal-body {
        font-size: 14px;
        line-height: 1.9;
    }

    .legal-body h2 {
        margin-top: 28px;
        font-size: 16px;
    }

    .legal-card {
        padding: 15px 16px;
    }

    .legal-card .legal-card-row {
        display: block;
    }

    .legal-card-label {
        display: block;
        margin-bottom: 2px;
    }
}