/* ================================================================
   common.css — 巴斯克维尔学院三部曲 公共样式
   全站共享：基础重置、CSS 变量、导航栏、页脚、动画、响应式
   ================================================================ */

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

/* ====== CSS 变量 ====== */
:root {
    --color-primary: #1a3a5c;       /* 深蓝 - 学院主色 */
    --color-primary-light: #2c5f8a;
    --color-accent: #e8a838;        /* 暖金黄 - 冒险点缀 */
    --color-accent-warm: #d4691e;   /* 暖橙 - 少年活力 */
    --color-bg: #f5efe1;            /* 羊皮纸暖白 */
    --color-bg-dark: #0f1e2e;       /* 深夜蓝 - 悬念暗调 */
    --color-text: #2c2418;          /* 深棕 - 正文 */
    --color-text-light: #6b5d4f;
    --color-paper: #fdf8eb;
    --color-success: #2c8a5a;
    --shadow-soft: 0 8px 32px rgba(26, 58, 92, 0.12);
    --shadow-deep: 0 16px 48px rgba(15, 30, 46, 0.25);
    --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Noto Sans SC', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.8;
    overflow-x: hidden;
}

/* ====== 导航栏 ====== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(15, 30, 46, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.875rem 2rem;
    border-bottom: 1px solid rgba(232, 168, 56, 0.2);
    transition: var(--transition);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--color-paper);
}

.nav-logo-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-warm));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: var(--color-bg-dark);
    font-size: 1.1rem;
    box-shadow: 0 0 16px rgba(232, 168, 56, 0.4);
}

.nav-logo-text {
    font-family: 'Noto Serif SC', serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    color: rgba(253, 248, 235, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 400;
    transition: var(--transition);
    position: relative;
    padding: 0.25rem 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--color-accent);
    transition: var(--transition);
}

.nav-links a:hover { color: var(--color-accent); }
.nav-links a:hover::after { width: 100%; }

.nav-links a.active { color: var(--color-accent); }
.nav-links a.active::after { width: 100%; }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

.nav-toggle span {
    width: 24px; height: 2px;
    background: var(--color-paper);
    transition: var(--transition);
    border-radius: 2px;
}

/* ====== 页脚 ====== */
.footer {
    background: var(--color-bg-dark);
    color: rgba(253, 248, 235, 0.6);
    padding: 3rem 2rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(232, 168, 56, 0.15);
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.footer-nav a {
    color: rgba(253, 248, 235, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-nav a:hover { color: var(--color-accent); }

.footer-copy {
    font-size: 0.8rem;
    color: rgba(253, 248, 235, 0.4);
}

/* ====== 滚动渐入动画 ====== */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ====== 通用区块标题 ====== */
.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title h2 {
    font-family: 'Noto Serif SC', serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--color-primary);
    font-weight: 900;
    margin-bottom: 0.75rem;
}

.section-title .divider {
    width: 60px; height: 3px;
    background: var(--color-accent);
    margin: 0 auto 1rem;
    border-radius: 2px;
}

.section-title p {
    color: var(--color-text-light);
    font-size: 1rem;
}

/* ====== 响应式 ====== */
@media (max-width: 900px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: rgba(15, 30, 46, 0.97);
        flex-direction: column;
        padding: 1rem 2rem;
        gap: 1rem;
        border-top: 1px solid rgba(232, 168, 56, 0.2);
    }
    .nav-links.active { display: flex; }
    .nav-toggle { display: flex; }
}

/* ====== 导航栏 JS（移动端菜单切换 + 滚动动画） ====== */
/* 各页面自行初始化，或使用下方通用代码：
   const navToggle = document.getElementById('navToggle');
   const navLinks = document.getElementById('navLinks');
   navToggle.addEventListener('click', () => navLinks.classList.toggle('active'));
   const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
   }, { threshold: 0.15 });
   document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
*/