/* =========================================
           3. 页面主体内容
           ========================================= */
.page-wrapper { padding-top: 70px; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* Hero */
.advocate-hero {
    background: linear-gradient(rgba(26, 58, 89, 0.9), rgba(26, 58, 89, 0.8)),
    url('https://images.unsplash.com/photo-1455849318743-b2233052fcff?q=80&w=2669&auto=format&fit=crop');
    background-size: cover; background-position: center;
    height: 450px; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    position: relative; overflow: hidden;
}
.hero-badge {
    background: linear-gradient(45deg, var(--accent-gold), #F0E68C);
    color: var(--primary-blue); padding: 6px 20px; border-radius: 30px; font-weight: bold;
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}
.advocate-hero h1 { font-family: "Times New Roman", serif; font-size: 3.2rem; margin-bottom: 15px; font-weight: bold; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.advocate-hero p { font-size: 1.2rem; max-width: 700px; opacity: 0.95; margin-bottom: 30px; font-weight: 300; }

/* 倡议书板块 */
.manifesto-section { padding: 80px 20px; background: white; position: relative; }
.manifesto-paper {
    max-width: 800px; margin: 0 auto; background: #FFFDF5; padding: 60px; border: 1px solid #E0D8C0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); position: relative;
}
/* 纸张纹理效果 */
.manifesto-paper::before {
    content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 2px solid var(--primary-blue); pointer-events: none; opacity: 0.1;
}

.manifesto-title { text-align: center; font-family: "Times New Roman", serif; font-size: 2rem; color: var(--primary-blue); margin-bottom: 40px; font-weight: bold; }

.manifesto-content p { font-size: 1.1rem; color: #444; line-height: 2; margin-bottom: 30px; text-align: justify; }
.manifesto-content strong { color: var(--primary-green); }

.points-list { margin-bottom: 40px; }
.point-item { display: flex; gap: 15px; margin-bottom: 20px; }
.point-icon { font-size: 1.5rem; color: var(--accent-gold); }
.point-text h4 { font-size: 1.1rem; color: var(--primary-blue); margin-bottom: 5px; font-weight: bold; }
.point-text p { font-size: 0.95rem; color: #666; }

/* 签署区域 (修改版) */
.sign-section { margin-top: 60px; text-align: center; border-top: 1px dashed #ccc; padding-top: 40px; }

.contact-box {
    background: #F4F6F8; padding: 20px; border-radius: 8px; display: inline-block;
    margin-bottom: 30px; border-left: 4px solid var(--primary-green);
    text-align: left;
}
.contact-title { font-weight: bold; color: var(--primary-blue); margin-bottom: 5px; display: block; }
.contact-detail { font-size: 0.95rem; color: #555; }

.sign-form { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.form-input { padding: 15px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; font-family: inherit; }

.btn-sign {
    background: var(--primary-blue); color: white; padding: 15px; border: none; border-radius: 6px;
    font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: 0.3s; box-shadow: 0 5px 15px rgba(26, 58, 89, 0.2);
}
.btn-sign:hover { background: var(--primary-green); transform: translateY(-2px); }
.form-note { font-size: 0.85rem; color: #999; margin-top: 10px; }

/* 证书预览板块 */
.preview-section { padding: 80px 20px; background: #FAFBFC; text-align: center; }
.section-title { font-size: 2rem; color: var(--primary-blue); margin-bottom: 10px; font-weight: bold; }
.section-desc { color: #666; margin-bottom: 50px; }

.cert-mockup {
    max-width: 700px; margin: 0 auto; position: relative;

}
.cert-mockup:hover { }

/* 计数器 */
.counter-box { margin-top: 60px; display: flex; justify-content: center; gap: 50px; }
.counter-item { text-align: center; }
.counter-num { font-size: 3rem; font-weight: bold; color: var(--primary-green); line-height: 1; }
.counter-label { font-size: 0.9rem; color: #888; text-transform: uppercase; margin-top: 10px; letter-spacing: 1px; }
/* =========================================
          4. 倡议书板块 & 侧边栏布局 (Sticky Layout)
          ========================================= */
.manifesto-section { padding: 80px 20px; background: white; position: relative; }

/* 1. 核心容器：宽度固定，用来定位侧边栏 */
.manifesto-inner-wrapper {
    position: relative;
    width: 800px;
    margin: 0 auto;
    /* 确保高度包含侧边栏，以便 rail 计算高度 */
    min-height: 100%;
}

/* 2. 倡议书正文：保持原样 */
.manifesto-paper {
    width: 100%;
    background: #FFFDF5;
    padding: 60px;
    border: 1px solid #E0D8C0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
}
.manifesto-paper::before {
    content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 2px solid var(--primary-blue); pointer-events: none; opacity: 0.1;
}

/* 3. 侧边栏轨道 (Sidebar Rail)
   - 绝对定位在 Wrapper 的右侧
   - 高度 100% 确保 sticky 有空间移动
*/
.sidebar-rail {
    position: absolute;
    top: 0; /* 初始位置：与 wrapper (即倡议书) 顶部平齐 */
    right: -250px; /* 移出 wrapper 范围：220px 宽度 + 30px 间距 */
    width: 220px;
    height: 150%; /* 高度跟随父容器 */
    z-index: 2;
}

/* 4. 侧边栏小部件 (Sidebar Widget)
   - 使用 sticky 定位
   - 当页面滚动超过 header 后，它会固定在 top: 100px 的位置
*/
.sidebar-widget {
    position: sticky;
    top: 100px; /* 吸顶距离 */

    width: 100%;
    background: white;
    border: 2px solid var(--accent-gold);
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.sidebar-header {
    background-color: var(--primary-blue);
    color: var(--accent-gold);
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--accent-gold);
}

.sidebar-content-window {
    height: 400px; /* 列表可视高度 */
    overflow: hidden;
    background: #fff;
    position: relative;
}

/* 遮罩层 */
.sidebar-content-window::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px;
    background: linear-gradient(to bottom, #fff, transparent); z-index: 2;
}
.sidebar-content-window::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
    background: linear-gradient(to top, #fff, transparent); z-index: 2;
}

.scrolling-list {
    /* 100个名字，滚动时间设置长一些，保证可读性 */
    animation: scrollUp 240s linear infinite;
}
.sidebar-widget:hover .scrolling-list {
    animation-play-state: paused;
}

.signer-row {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px dashed #eee;
    font-size: 0.85rem;
    color: #555;
    transition: 0.2s;
}
.signer-row:hover {
    background-color: #f9f9f9;
}
.signer-flag { font-size: 0.1rem; margin-right: 8px; width: 20px; text-align: center; }
.signer-name { font-weight: bold; color: var(--primary-blue); margin-right: auto; }
.signer-loc { color: #888; font-size: 0.8rem; }

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* =========================================
       5. 响应式调整 (Mobile Fix) - 核心修复
       ========================================= */
@media screen and (max-width: 1350px) {
    /* 1. 容器改为弹性列布局，确保顺序 */
    .manifesto-inner-wrapper {
        display: flex;
        flex-direction: column;
        width: 100% !important; /* 强制占满，不使用固定像素 */
    }

    /* 2. 倡议书：占满屏幕，清除两侧留白 */
    .manifesto-paper {
        width: 100% !important;
        order: 1; /* 排在第一位 */
        padding: 40px 20px; /* 减小手机端内边距 */
    }

    /* 3. 侧边栏轨道：彻底取消绝对定位，变回普通块级元素 */
    .sidebar-rail {
        position: static !important; /* 关键：静态定位 */
        width: 100%;
        height: auto;
        margin-top: 40px; /* 与上方正文拉开距离 */
        order: 2; /* 排在正文下方 */
        right: auto;
        top: auto;
    }

    /* 4. 侧边栏部件：取消粘性定位，居中显示 */
    .sidebar-widget {
        position: static !important; /* 关键：静态定位 */
        top: auto;
        margin: 0 auto;
        width: 100%;
        max-width: 100%; /* 占满容器 */
        box-shadow: none; /* 手机端去掉阴影，融入背景 */
        border: 1px solid #ddd; /* 简化边框 */
    }

    .sidebar-content-window {
        height: 300px; /* 手机端稍微矮一点 */
    }
}

@media screen and (max-width: 768px) {
    .advocate-hero h1 { font-size: 1.5rem; }
    .manifesto-title { font-size: 1.5rem; }
    .section-title { font-size: 1.5rem; }
    .btn-sign { font-size: 1rem; }
    .hero h1 { font-size: 1.5rem; }
    .manifesto-section { padding: 40px 15px; } /* 减少外边距 */
    .advocate-hero p {font-size: 1rem;}
}
img { pointer-events: none; }