/* ================================================================
   global.css — 全局样式（提取自 header.htm）
   包含：字体、联系弹窗、CTA按钮、导航下拉、锚点导航
   ================================================================ */

body {
  font-family: 'IBM Plex Sans', 'Noto Sans SC', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}
/* 标题衬线体 */
h1, h2, h3 {
  font-family: 'EB Garamond', 'Noto Serif SC', '思源宋体', Georgia, serif;
  font-weight: 500;
}
.font-serif-sc {
  font-family: 'EB Garamond', 'Noto Serif SC', '思源宋体', Georgia, serif;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Contact Modal ===== */
.contact-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center;
  padding: 16px; animation: cmFadeIn 0.2s ease;
}
.contact-modal-overlay.active { display: flex; }
.contact-modal {
  background: #fff; border-radius: 20px; width: 100%; max-width: 520px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18); padding: 32px 28px 28px;
  position: relative; animation: cmSlideUp 0.25s ease;
}
.contact-modal .cm-close {
  position: absolute; top: 16px; right: 20px; font-size: 28px; line-height: 1;
  color: #999; cursor: pointer; background: none; border: none; padding: 0;
  transition: color 0.2s;
}
.contact-modal .cm-close:hover { color: #333; }
.contact-modal .cm-title { font-size: 22px; font-weight: 700; color: #1E1E2A; margin-bottom: 6px; }
.contact-modal .cm-subtitle { font-size: 14px; color: #888780; margin-bottom: 28px; }
.contact-modal .cm-field { margin-bottom: 20px; }
.contact-modal .cm-field label {
  display: block; font-size: 14px; font-weight: 500; color: #2C2C2A; margin-bottom: 8px;
}
.contact-modal .cm-field label .required { color: #C94F7C; }
.contact-modal .cm-field input,
.contact-modal .cm-field textarea {
  width: 100%; padding: 12px 16px; border: 1px solid #E6E4DC;
  border-radius: 12px; background: #FCFCFA; font-size: 14px; color: #1E1E2A;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit;
}
.contact-modal .cm-field input:focus,
.contact-modal .cm-field textarea:focus {
  border-color: #6F63D9; box-shadow: 0 0 0 3px rgba(111,99,217,0.12);
}
.contact-modal .cm-field input::placeholder,
.contact-modal .cm-field textarea::placeholder { color: #B8B4AC; }
.contact-modal .cm-field textarea { resize: none; }
.contact-modal .cm-submit {
  width: 100%; padding: 14px; border: none; border-radius: 60px;
  background: linear-gradient(135deg, #3C3489 0%, #6F63D9 100%);
  color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s; font-family: inherit;
}
.contact-modal .cm-submit:hover { opacity: 0.92; }
.contact-modal .cm-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.contact-modal .cm-footer {
  text-align: center; margin-top: 16px; font-size: 13px; color: #A89880;
}
.contact-modal .cm-success {
  text-align: center; padding: 20px 0;
}
.contact-modal .cm-success .cm-icon { font-size: 48px; margin-bottom: 12px; }
.contact-modal .cm-success .cm-ok { font-size: 17px; font-weight: 600; color: #1E1E2A; margin-bottom: 6px; }
.contact-modal .cm-success .cm-note { font-size: 14px; color: #888780; }
@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Unified CTA Buttons ===== */
.btn-primary {
  background: linear-gradient(135deg, #3C3489 0%, #6F63D9 100%);
  color: #fff; border: none; border-radius: 9999px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(60,52,137,0.3); }
.btn-secondary {
  background: transparent; color: #3C3489;
  border: 2px solid #3C3489; border-radius: 9999px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  text-decoration: none; display: inline-block;
}
.btn-secondary:hover { background: #EEEDFE; }
.btn-secondary-light {
  background: transparent; color: #fff;
  border: 2px solid #fff; border-radius: 9999px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  text-decoration: none; display: inline-block;
}
.btn-secondary-light:hover { background: rgba(255,255,255,0.1); }
.btn-accent {
  background: #C9AD7A; color: #fff; border: none; border-radius: 9999px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  text-decoration: none; display: inline-block;
}
.btn-accent:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(201,173,122,0.3); }
.btn-white {
  background: #fff; color: #3C3489; border: none; border-radius: 9999px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  text-decoration: none; display: inline-block;
}
.btn-white:hover { opacity: 0.9; }

/* ===== Nav dropdown ===== */
.nav-dropdown:hover .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown:hover > a svg {
  transform: rotate(180deg);
}
.dropdown-menu a {
  transition: background 0.15s, color 0.15s;
}

/* ===== Sticky nav scroll shadow ===== */
.site-header.scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ===== Anchor nav links (homepage only) ===== */
.anchor-nav { display: none; }
body.homepage .anchor-nav { display: inline-flex; }
.anchor-nav a {
  font-size: 12px; padding: 4px 10px; border-radius: 9999px;
  color: #5F5E5A; text-decoration: none; transition: all 0.15s;
  border: 1px solid transparent;
}
.anchor-nav a:hover, .anchor-nav a.active {
  color: #3C3489; background: #EEEDFE; border-color: #E0DCF5;
}

/* ===== Footer: Back to Top & Reading Progress (global) ===== */
#backToTop:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(60,52,137,0.4); }
details[open] .details-arrow { transform: rotate(180deg); }
#readingProgress { background: linear-gradient(90deg, #3C3489, #6F63D9) !important; }
#backToTop { background: linear-gradient(135deg, #3C3489, #6F63D9) !important; color: #fff !important; }