/* =========================================
   GOAT LAB STYLESHEET
   Version: 2.0 (Optimized)
   ========================================= */

/* --- 1. 全局设置 --- */
:root {
    --seu-green: #006937;
    --seu-green-hover: #00522b;
    --dark-blue: #0e1d34;
    --text-dark: #2c3e50;
    --text-light: #6c757d;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* 配合吸顶导航栏的偏移 */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: #f8f9fa; /* 统一浅灰背景 */
}

h1, h2, h3, h4, h5, .font-serif {
    font-family: 'Playfair Display', serif;
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
    transition: color 0.2s ease;
    color: var(--dark-blue);
}

a:hover {
    color: var(--seu-green);
}

/* --- 2. 工具类 --- */
.py-section { padding-top: 5rem; padding-bottom: 5rem; }
.ls-2 { letter-spacing: 2px; }
.divider { height: 3px; width: 60px; background-color: var(--seu-green); }
.object-fit-cover { object-fit: cover; }
.text-justify { text-align: justify; }

/* 颜色工具 */
.text-seu-green { color: var(--seu-green); }
.bg-seu-green { background-color: var(--seu-green); color: white; }
.text-dark-blue { color: var(--dark-blue); }
.bg-dark-blue { background-color: var(--dark-blue); color: white; }

/* 文本截断 */
.text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- 3. 导航栏 (Navbar) --- */
#mainNav {
    padding-top: 15px; padding-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* 增加权重以避免使用 !important */
#mainNav .navbar-brand {
    padding-left: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--dark-blue);
}

#mainNav .nav-logo {
    height: 50px; /* Logo 尺寸控制 */
    width: auto;
    margin-right: 10px;
}

#mainNav .nav-link {
    font-weight: 500;
    color: var(--dark-blue);
    margin-left: 15px;
    position: relative;
    padding-bottom: 4px; /* 稍微留出一点下划线的空隙 */
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active {
    color: var(--seu-green);
}

/* 新增：下划线基础样式 */
#mainNav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%; transform: translateX(-50%);
    background-color: var(--seu-green);
    transition: width 0.3s ease; /* 控制下划线展开的速度 */
}

/* 新增：鼠标悬浮及当前激活页面时，下划线展开向右延长至 100% */
#mainNav .nav-link:hover::after {
    width: 100%;
}

/* 按钮样式 */
.btn-seu-green {
    background-color: var(--seu-green);
    border-color: var(--seu-green);
    color: white;
}

.btn-seu-green:hover {
    background-color: var(--seu-green-hover);
    border-color: var(--seu-green-hover);
    color: white;
}

/* --- 4. 页头 (Page Header & Hero) --- */
.hero-section {
    height: 100vh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}

/* 终极版 Banner 容器设置 */
.page-header {
    position: relative;
    /* 新增这一行：用外边距把横幅往下推，避开导航栏的遮挡 */
    margin-top: 80px;
    height: 400px; 
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    background-color: var(--dark-blue);
}

/* 无缝融合的渐变遮罩 */
.page-header::before {
    display: none;
}

/* 确保文字始终位于最顶层 */
.page-header .container {
    position: relative;
    z-index: 2;
}

.banner-join { background-image: url('images/banner_join.png'); }
.banner-news { background-image: url('images/banner_news.png'); }
.banner-people { background-image: url('images/banner_people.png'); }
.banner-research { background-image: url('images/banner_research.png'); }
.banner-inventory { background-image: url('images/banner_inventory.png'); }
.banner-gallery { background-image: url('images/banner_gallery.png'); }
.banner-publications { background-image: url('images/banner_publications.png'); }

/* --- 5. 组件样式 --- */

/* 卡片特效 */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* 人员列表头像 */
.member-img-rect {
    width: 150px;
    height: 190px;
    object-fit: cover;
    object-position: top;
    border: 1px solid #eee;
}

/* 论文列表 */
.pub-list li {
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.2s;
}
.pub-list li:hover {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.journal-name {
    font-weight: 600;
    color: var(--dark-blue);
}
/* 自动计数器 */
body { counter-reset: paper-counter; }
.pub-number::before {
    counter-increment: paper-counter;
    content: counter(paper-counter) ".";
    font-weight: 600;
    color: var(--seu-green);
    min-width: 25px;
    display: inline-block;
}

/* 新闻卡片 */
.news-card .date-badge-overlay {
    position: absolute; top: 15px; left: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 5px 10px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.date-badge-overlay .day { display: block; font-weight: 800; font-size: 1.2rem; line-height: 1; color: var(--dark-blue); }
.date-badge-overlay .month { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--seu-green); }

/* --- 6. 响应式适配 --- */
@media (max-width: 768px) {
    .display-3, .display-4 { font-size: 2.5rem; }
    
    /* 手机端人员列表居中 */
    .profile-row { text-align: center; }
    .profile-row .d-flex { flex-direction: column; align-items: center; }
    .member-img-rect { margin-bottom: 15px; margin-right: 0 !important; }
    
    /* 导航栏 */
    .navbar-brand .group-name { font-size: 1rem; }
    .nav-logo { height: 40px !important; }
}

/* --- 7. 加载动画 --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: white; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease;
}
.fade-out { opacity: 0; pointer-events: none; }
.loader-spinner {
    width: 40px; height: 40px;
    border: 3px solid #eee; border-top: 3px solid var(--seu-green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 4. 移动端响应式适配 */
@media (max-width: 768px) {
    /* 2. 首页 Hero 背景适配 */
    .hero-section {
        background-position: center center !important;
    }

    .hero-section .overlay {
        /* 手机端文字通常居中或全屏，遮罩层改回全局均匀变暗 */
        background: rgba(0, 0, 0, 0.2) !important;
    }

    /* 3. 子页面 Header 适配 */
    .page-header {
        margin-top: 70px;
        height: 240px; 
        background-position: 70% center;
    }
    .page-header::before {
        background: linear-gradient(90deg, 
                    rgba(14, 29, 52, 0.9) 0%, 
                    rgba(14, 29, 52, 0.75) 100%);
    }
}
/* ===================================================
   导航栏自定义调整：放大字体与两侧伸展
   =================================================== */

/* 1. 向两侧伸展导航栏（取消固定宽度限制） */
#mainNav .container {
    max-width: 100% !important; /* 突破 Bootstrap 默认的固定宽度限制 */
    padding-left: 4rem;         /* 伸展后，左侧留出适量边距（可根据视觉效果自行调整数值） */
    padding-right: 4rem;        /* 伸展后，右侧留出适量边距 */
}

/* 2. 放大右侧导航菜单的字体大小 */
#mainNav .nav-link {
    font-size: 1.15rem;         /* 原默认约 1rem (16px)，此处放大至 1.15rem */
    margin-left: 20px;          /* 适当加大菜单项之间的间距，配合大字体 */
}

/* 3. 放大左侧实验室名称的字体大小 */
#mainNav .navbar-brand {
    font-size: 1.45rem;         /* 原为 1.25rem，此处按比例放大 */
}

/* 4. 放大右侧“Join Us”特殊按钮的字体大小 */
#mainNav .btn-sm {
    font-size: 1rem;            /* 适当调大按钮内的文字，使其与普通菜单协调 */
    padding: 0.4rem 1.2rem;     /* 稍微加大按钮的内边距 */
}

/* ===================================================
   全站排版与字体优化（符合现代国际学术网站审美）
   =================================================== */

/* 1. 基础字号、行高与护眼颜色 */
body {
    /* 1.125rem 约等于 18px，是现代长文本阅读的黄金字号，减少视觉疲劳 */
    font-size: 1.125rem; 
    /* 使用柔和的深蓝灰色（Slate）代替纯黑，大幅减少屏幕眩光 */
    color: #334155;      
    /* 拉大行高，让文字有呼吸感，阅读不串行 */
    line-height: 1.7;    
}

/* 2. 段落和列表的呼吸感优化 */
p { 
    margin-bottom: 1.25rem; 
}
.pub-list li, .research-list li {
    margin-bottom: 1.5rem !important; /* 增加列表项之间的距离 */
}

/* 3. 标题层级重塑 (建立清晰的视觉主次) */
h1, .display-5 { 
    font-size: 2.75rem !important; 
    font-weight: 700; 
    color: #0f172a; /* 极深灰，用于大标题 */
}
h2 { 
    font-size: 2.1rem !important; 
    font-weight: 700; 
    color: #0f172a; 
}
h3 { 
    font-size: 1.5rem !important; 
    font-weight: 600; 
    color: #1e293b; 
}
h4 { 
    font-size: 1.25rem !important; 
    font-weight: 600; 
}
h5, .h5 { 
    font-size: 1.15rem !important; 
    font-weight: 600; 
}

/* 4. 辅助文本优化（避免辅助信息过小） */
.text-muted { 
    color: #64748b !important; /* 柔和的高级灰 */
}
.small, small { 
    font-size: 0.95rem !important; /* 辅助文字保持在约 15px，清晰可辨 */
    line-height: 1.6; 
}

/* 5. 导航栏字体适配 */
#mainNav .nav-link {
    font-size: 1.1rem;
    margin-left: 20px;
}
#mainNav .navbar-brand {
    font-size: 1.35rem;
}