/* --- 变量定义 --- */
:root {
    --color-bg-sidebar: #dceeff; /* 浅蓝色背景 */
    --color-bg-main: #fdfaf5;   /* 米白色背景 */
    --color-text-dark: #2c2c2c;
    --color-text-light: #5a5a5a;
    --color-brand-blue: #0055ff;
    --color-card-bg: #ffffff;

    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Calibri', serif;
}

/* --- 基础重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    background-color: var(--color-bg-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- 页面整体布局 (桌面端) --- */
.page-wrapper {
    display: grid;
    grid-template-columns: 380px 1fr; /* 左侧固定宽度，右侧自适应 */
    min-height: 100vh;
}

/* --- 主信息区 (左侧) --- */
.main-header {
    background-color: var(--color-bg-sidebar);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: sticky;
    top: 0;
    height: 100vh;
}

.top-nav {
    background-color: #ffffff;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    display: flex;
    gap: 1.5rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 3rem;
}

.top-nav a {
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.top-nav a:hover, .top-nav a.active {
    color: var(--color-text-dark);
    font-weight: 700;
}

.branding {
    margin-bottom: auto; /* 将当前位置推到底部 */
}

.site-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-brand-blue);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.site-logo {
    width: 80px;
    height: auto;
    margin-bottom: 1rem;
}

.site-description {
    font-size: 1rem;
    color: var(--color-text-dark);
    max-width: 280px;
    margin: 0 auto;
}

/*.current-location {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-top: 2rem;
}

.current-location strong {
    color: var(--color-brand-blue);
    font-weight: 500;
}*/

/* --- 响应式设计 (移动端) --- */
@media (max-width: 768px) {
    html, body {
        /* 强制禁止横向滚动，防止跳转瞬间的布局抖动 */
        overflow-x: hidden; 
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .page-wrapper {
        /* 移动端取消 grid 布局，改用块级布局，防止 380px 的固定列宽溢出 */
        display: block; 
        width: 100%;
        max-width: 100vw;
    }

    .main-header {
        /* 1. 将高度改为自适应内容 */
        height: auto; 
        
        /* 2. 取消固定定位，让它随页面滚动（或者根据需求保留 sticky 但高度要小） */
        position: static; 
        
        /* 3. 调整内边距，让它看起来更像一个顶栏 */
        padding: 1.5rem 1rem; 
        
        /* 4. 确保宽度占满 */
        width: 100% !important;

        /* 添加这一行来强制保持背景色 */
        background-color: var(--color-bg-sidebar) !important; 

        box-sizing: border-box;
    }

    .branding {
        margin-bottom: 2rem;
    }

    /*.current-location {
        margin-top: 1rem;
    }

    .content-area {
        padding: 2rem 1.5rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .stories-grid {
        grid-template-columns: 1fr; 
    } */
}

/*滚动地标*/
/* =========================================
   1. 基础容器：负责布局和占位
   ========================================= */
.current-location {
    margin-top: auto; /* 桌面端保持在底部 */
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    
    /* 确保背景色覆盖，防止透明导致的视觉混乱 */
    /*background-color: #f8f9fa; */
}

.location-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

/* =========================================
   2. 滚动窗口：核心修复点 (遮罩)
   ========================================= */
.ticker-window {
    position: relative;
    width: 100%;
    height: 24px; /* 固定高度，防止抖动 */
    overflow: hidden; /* 【关键】切断所有溢出的内容 */
    white-space: nowrap;
    
    /* 可选：添加左右渐变遮罩，让文字消失得更自然 */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* =========================================
   3. 滚动轨道：负责移动
   ========================================= */
.ticker-track {
    display: inline-block;
    white-space: nowrap;
    /* 这里的动画根据你的需求调整，这里假设是一个无限循环 */
    animation: scroll-left 20s linear infinite;
}

/* 鼠标悬停时暂停滚动，提升体验 */
/*.ticker-window:hover .ticker-track {
    animation-play-state: paused;
}*/

/* 定义动画 */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 移动一半的距离，配合HTML里的重复内容实现无缝 */
}

.ticker-item {
    display: inline-block;
    padding-right: 2rem; /* 内容之间的间距 */
    font-size: 0.9rem;
    color: #333;
}

/* =========================================
   4. 移动端专属适配 (Mobile Fixes)
   ========================================= */
@media (max-width: 768px) {
    .current-location {
        /* 移动端重置边距，使其更紧凑 */
        margin-top: 0;
        padding: 15px 20px;
        background-color: transparent; /* 移动端通常不需要背景块，跟随大背景 */
        /*border-bottom: 1px solid rgba(0,0,0,0.05);*/ /* 加一条淡淡的分割线 */
    }

    .location-label {
        /* 移动端空间宝贵，建议隐藏 "Currently in" 标签，只保留地点 */
        display: none; 
    }

    .ticker-window {
        /* 确保移动端窗口也是全宽的 */
        width: 100%; /* 强制视口宽度 */
        max-width: 100%;
        left: 0;
        margin-left: 0;
    }
}