/*
Theme Name: Bailing Fresh
Theme URI: https://bailing.wang
Author: Bailing Team
Author URI: https://bailing.wang
Description: 百灵外语 · 清新亮丽风格子主题 — 云白 × 学院蓝 × 活力橙，明亮通透的营销体验。父主题：bailing-marketing。
Template: bailing-marketing
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bailing-fresh
Tags: education, marketing, one-page, responsive, custom-colors, light, fresh
*/

/* ============================================
   百灵外语 · 清新亮丽子主题
   美学方向：云白通透 × 学院活力
   主色：明亮学院蓝 #2563EB
   强调：活力暖橙 #F97316
   ============================================ */

/* ---------- 1. 设计令牌全量覆盖 ---------- */
:root {
  /* 色彩系统 — 清新亮丽 */
  --c-midnight: #0F172A;        /* 深炭灰（用于深色文字，不再是主背景） */
  --c-navy: #1E3A8A;            /* 深学院蓝（用于 footer / mobile-menu） */
  --c-navy-soft: #2563EB;       /* 学院蓝 */
  --c-gold: #F97316;            /* 活力橙（替代暖金作为强调色） */
  --c-gold-light: #FB923C;      /* 浅活力橙 */
  --c-gold-deep: #EA580C;       /* 深活力橙 */
  --c-cream: #F7FAFC;           /* 云白（主背景） */
  --c-cream-warm: #FFFFFF;      /* 纯白（次背景） */
  --c-fog: #64748B;             /* 灰蓝（次要文字） */
  --c-fog-light: #94A3B8;       /* 浅灰蓝 */
  --c-white: #FFFFFF;           /* 纯白 */
  --c-line: rgba(37, 99, 235, 0.14);
  --c-line-soft: rgba(100, 116, 139, 0.16);
  --c-line-dark: rgba(15, 23, 42, 0.08);

  /* 语义色 — 反转：背景变浅，文字变深 */
  --bg-primary: var(--c-cream);          /* 主背景：云白 */
  --bg-secondary: var(--c-cream-warm);   /* 次背景：纯白 */
  --bg-light: var(--c-cream-warm);       /* 浅背景：纯白 */
  --bg-light-warm: var(--c-cream);       /* 暖浅背景：云白 */
  --text-on-dark: var(--c-midnight);     /* 原暗区文字 → 改为深色（因为暗区变浅了） */
  --text-on-dark-soft: var(--c-fog);     /* 原暗区次要文字 → 灰蓝 */
  --text-on-light: var(--c-midnight);    /* 浅区主文字 */
  --text-on-light-soft: var(--c-fog);    /* 浅区次要文字 */
  --accent: var(--c-gold);               /* 强调色：活力橙 */
  --accent-light: var(--c-gold-light);

  /* 阴影 — 更轻盈通透 */
  --shadow-soft: 0 4px 24px rgba(37, 99, 235, 0.06);
  --shadow-mid: 0 8px 40px rgba(37, 99, 235, 0.08);
  --shadow-deep: 0 20px 60px rgba(37, 99, 235, 0.12);
  --shadow-gold: 0 8px 32px rgba(249, 115, 22, 0.22);
}

/* ---------- 2. 基础背景 ---------- */
body {
  background: var(--c-cream);
  color: var(--c-midnight);
}

::selection { background: var(--c-navy-soft); color: #FFFFFF; }

/* ---------- 3. 导航栏 ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--c-line);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 2px 20px rgba(37, 99, 235, 0.06);
}
.brand-link { color: var(--c-midnight); }
.brand-link:hover { color: var(--c-navy-soft); }
.brand-mark {
  background: linear-gradient(135deg, var(--c-navy-soft), var(--c-navy));
  color: #FFFFFF;
}
.brand-name { color: var(--c-midnight); }
.brand-slogan { color: var(--c-fog); }

.nav-menu a { color: var(--c-fog); }
.nav-menu a:hover { color: var(--c-navy-soft); }
.nav-menu a::after { background: var(--c-navy-soft); }

.nav-toggle-bar { background: var(--c-midnight); }

/* ---------- 4. Hero ---------- */
.hero {
  background: linear-gradient(180deg, #EFF6FF 0%, #F7FAFC 60%, #FFFFFF 100%);
}
.hero-grid {
  background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}
.hero-glow-1 {
  background: rgba(37, 99, 235, 0.18);
  width: 700px; height: 700px;
  top: -250px; right: -150px;
}
.hero-glow-2 {
  background: rgba(249, 115, 22, 0.14);
  width: 560px; height: 560px;
  bottom: -180px; left: -120px;
}
.hero-noise { opacity: 0.025; }

.hero-eyebrow { color: var(--c-fog); }
.hero-eyebrow .dot { background: var(--c-navy-soft); box-shadow: 0 0 12px rgba(37, 99, 235, 0.5); }
.hero-title { color: var(--c-midnight); }
.hero-subtitle { color: var(--c-fog); }
.hero-badges strong { color: var(--c-navy-soft); }

.hero-card {
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-mid);
  color: var(--c-midnight);
}
.hero-card-label { color: var(--c-fog); }
.hero-card-question { color: var(--c-midnight); }
.hero-card-dot { background: #10B981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }
.hero-card-meta { color: var(--c-fog); }

.hero-card-options li {
  background: #F8FAFC;
  border: 1px solid var(--c-line-soft);
  color: var(--text-on-light);
}
.hero-card-options li.is-correct {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--c-midnight);
}
.opt-key {
  background: #EFF6FF;
  color: var(--c-navy-soft);
}
.is-correct .opt-key {
  background: #10B981;
  color: #FFFFFF;
}
.opt-mark { color: #10B981; }

.hero-card-foot {
  border-top: 1px solid var(--c-line-soft);
}
.hero-card-source { color: var(--c-navy-soft); }
.hero-card-score { color: var(--c-gold); }

.hero-card-float {
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-mid);
}
.hero-card-float-title { color: var(--c-fog); }
.hero-card-float-value { color: var(--c-midnight); }
.hero-card-float-sub { color: var(--c-fog); }
.hero-card-icon-1 { background: linear-gradient(135deg, #2563EB, #60A5FA); color: #FFFFFF; }
.hero-card-icon-2 { background: linear-gradient(135deg, #F97316, #FB923C); color: #FFFFFF; }

/* ---------- 5. 多语种展示 ---------- */
.languages-section { background: #FFFFFF; }
.lang-card {
  background: #FFFFFF;
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-soft);
}
.lang-card:hover {
  border-color: var(--c-navy-soft);
  box-shadow: var(--shadow-mid);
  transform: translateY(-4px);
}
.lang-code {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  color: var(--c-navy-soft);
  border: 1px solid var(--c-line);
}
.lang-tag { color: var(--c-fog); }
.lang-name { color: var(--c-midnight); }
.lang-desc { color: var(--c-fog); }
.lang-points li { color: var(--text-on-light); }
.lang-points li::before { color: var(--c-navy-soft); }
.lang-link { color: var(--c-navy-soft); }
.lang-link:hover { color: var(--c-gold); }

/* ---------- 6. AI 能力区（清新浅蓝渐变） ---------- */
.ai-section {
  background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%);
  color: var(--c-midnight);
}
.ai-section .section-title { color: var(--c-midnight); }
.ai-section .section-desc { color: var(--c-fog); }
.ai-section .section-eyebrow { color: var(--c-navy-soft); }

.ai-card {
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-soft);
  color: var(--c-midnight);
}
.ai-card-large {
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-mid);
}
.ai-card:hover {
  background: #FFFFFF;
  border-color: var(--c-navy-soft);
  box-shadow: var(--shadow-mid);
  transform: translateY(-4px);
}
.ai-card-large:hover {
  border-color: var(--c-navy-soft);
}
.ai-card-glow {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent 70%);
}
.ai-card-num { color: var(--c-line-soft); }
.ai-card-icon {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.04));
  color: var(--c-navy-soft);
}
.ai-card-title { color: var(--c-midnight); }
.ai-card-desc { color: var(--c-fog); }
.ai-card-list li { color: var(--text-on-light); }
.ai-card-list li::before { color: var(--c-navy-soft); }

.ai-pipeline {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--c-line);
  backdrop-filter: blur(10px);
}
.ai-pipeline-node-label { color: var(--c-fog); }
.ai-pipeline-node-title { color: var(--c-midnight); }
.ai-pipeline-node-num {
  background: linear-gradient(135deg, var(--c-navy-soft), var(--c-navy));
  color: #FFFFFF;
}
.ai-pipeline-arrow { color: var(--c-fog-light); }

/* ---------- 7. 课程体系 ---------- */
.courses-section { background: #FFFFFF; }
.course-card {
  background: #FFFFFF;
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-soft);
}
.course-card:hover {
  border-color: var(--c-navy-soft);
  box-shadow: var(--shadow-mid);
  transform: translateY(-4px);
}
.course-card-featured {
  background: linear-gradient(180deg, #EFF6FF, #FFFFFF);
  border: 1px solid var(--c-navy-soft);
  box-shadow: var(--shadow-mid);
}
.course-card-badge {
  background: var(--c-navy-soft);
  color: #FFFFFF;
}
.course-level { color: var(--c-fog); }
.course-stage { color: var(--c-midnight); }
.course-price { color: var(--c-gold); }
.course-card ul li { color: var(--text-on-light); }
.course-card ul li::before { color: var(--c-navy-soft); }

/* ---------- 8. 学习数据（学院蓝实色） ---------- */
.stats-section {
  background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
  color: #FFFFFF;
}
.stats-section .section-title { color: #FFFFFF; }
.stats-section .section-desc { color: rgba(255, 255, 255, 0.85); }
.stats-section .section-eyebrow { color: var(--c-gold-light); }
.stats-section .section-eyebrow::before { background: var(--c-gold-light); }
.stat-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}
.stat-num { color: #FFFFFF; }
.stat-label { color: rgba(255, 255, 255, 0.9); }
.stat-sub { color: var(--c-gold-light); }

/* ---------- 9. 学员声音 ---------- */
.voices-section { background: var(--c-cream); }
.voice-card {
  background: #FFFFFF;
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-soft);
}
.voice-card:hover {
  box-shadow: var(--shadow-mid);
  transform: translateY(-4px);
}
.voice-quote { color: var(--text-on-light); }
.voice-quote::before { color: var(--c-gold); opacity: 0.4; }
.voice-author { color: var(--c-midnight); }
.voice-avatar {
  background: linear-gradient(135deg, var(--c-navy-soft), var(--c-gold));
  color: #FFFFFF;
}

/* ---------- 10. CTA 转化区 ---------- */
.cta-section {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  color: var(--c-midnight);
}
.cta-section .section-eyebrow { color: var(--c-gold-deep); }
.cta-section .section-eyebrow::before { background: var(--c-gold-deep); }
.cta-title { color: var(--c-midnight); }
.cta-desc { color: var(--c-fog); }
.cta-section .btn-outline {
  color: var(--c-midnight);
  border-color: var(--c-line-dark);
}
.cta-section .btn-outline:hover {
  color: var(--c-gold-deep);
  border-color: var(--c-gold);
}

/* ---------- 11. 最新文章 ---------- */
.posts-section { background: #FFFFFF; }
.post-card {
  background: #FFFFFF;
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-soft);
}
.post-card:hover {
  border-color: var(--c-navy-soft);
  box-shadow: var(--shadow-mid);
  transform: translateY(-4px);
}
.post-card-placeholder {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  color: var(--c-navy-soft);
}
.post-card-tag {
  background: rgba(37, 99, 235, 0.1);
  color: var(--c-navy-soft);
}
.post-card-title { color: var(--c-midnight); }
.post-card-meta { color: var(--c-fog); }
.post-card-excerpt { color: var(--c-fog); }
.post-card-more { color: var(--c-navy-soft); }
.post-card-more:hover { color: var(--c-gold); }

/* ---------- 12. 页脚（深学院蓝） ---------- */
.site-footer {
  background: linear-gradient(180deg, #1E3A8A 0%, #0F172A 100%);
  color: rgba(255, 255, 255, 0.75);
}
.footer-brand .brand-mark {
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-deep));
  color: #FFFFFF;
}
.footer-brand .brand-name { color: #FFFFFF; }
.footer-slogan { color: rgba(255, 255, 255, 0.85); }
.footer-desc { color: rgba(255, 255, 255, 0.65); }
.footer-title { color: #FFFFFF; }
.footer-col ul li a { color: rgba(255, 255, 255, 0.65); }
.footer-col ul li a:hover { color: var(--c-gold-light); }
.footer-social a {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}
.footer-social a:hover {
  background: var(--c-gold);
  color: #FFFFFF;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- 13. 移动端抽屉菜单 ---------- */
.mobile-menu {
  background: linear-gradient(180deg, #1E3A8A 0%, #0F172A 100%);
}
.mobile-nav-menu a {
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav-menu a:hover { color: var(--c-gold-light); }

/* ---------- 14. 博客列表/归档 ---------- */
.page-header {
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--c-line);
}
.archive-title { color: var(--c-midnight); }
.archive-desc { color: var(--c-fog); }
.posts-list { background: #FFFFFF; }
.post-row {
  border-bottom: 1px solid var(--c-line-soft);
}
.post-row:hover {
  background: #F8FAFC;
}
.post-card-media .post-card-placeholder {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
}
.post-row-title { color: var(--c-midnight); }
.post-row-meta { color: var(--c-fog); }
.post-row-excerpt { color: var(--c-fog); }

.pagination a, .pagination span {
  color: var(--c-fog);
  background: #FFFFFF;
  border: 1px solid var(--c-line-soft);
}
.pagination a:hover, .pagination .current {
  background: var(--c-navy-soft);
  color: #FFFFFF;
  border-color: var(--c-navy-soft);
}

/* ---------- 15. 文章详情 ---------- */
.single-article { background: #FFFFFF; }
.single-header { border-bottom: 1px solid var(--c-line-soft); }
.single-title { color: var(--c-midnight); }
.single-meta { color: var(--c-fog); }
.single-cover-wrap { background: #EFF6FF; }
.single-body { color: var(--text-on-light); }
.single-body h2, .single-body h3 { color: var(--c-midnight); }
.single-body a { color: var(--c-navy-soft); }
.single-body blockquote {
  background: #F8FAFC;
  border-left: 3px solid var(--c-navy-soft);
  color: var(--text-on-light-soft);
}
.single-body code {
  background: rgba(37, 99, 235, 0.08);
  color: var(--c-navy-soft);
}
.single-body pre {
  background: #0F172A;
  color: #E2E8F0;
}
.single-tags {
  color: var(--c-navy-soft);
  background: rgba(37, 99, 235, 0.08);
}
.single-nav {
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}
.single-nav a { color: var(--c-fog); }
.single-nav a:hover { color: var(--c-navy-soft); }

/* ---------- 16. 通用页面 ---------- */
.page-article { background: #FFFFFF; }
.page-header { border-bottom: 1px solid var(--c-line-soft); }
.page-title { color: var(--c-midnight); }
.page-cover-wrap { background: #EFF6FF; }
.page-body { color: var(--text-on-light); }

/* ---------- 17. 关于页 ---------- */
.about-hero {
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--c-line);
}
.about-hero h1 { color: var(--c-midnight); }
.about-hero p { color: var(--c-fog); }
.about-values-grid .value-card {
  background: #FFFFFF;
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-soft);
}
.value-card-icon {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(249, 115, 22, 0.08));
  color: var(--c-navy-soft);
}
.value-card h3 { color: var(--c-midnight); }
.value-card p { color: var(--c-fog); }

.timeline-item {
  border-left: 2px solid var(--c-line);
}
.timeline-year {
  background: var(--c-navy-soft);
  color: #FFFFFF;
}
.timeline-title { color: var(--c-midnight); }
.timeline-desc { color: var(--c-fog); }

/* ---------- 18. 联系页 ---------- */
.contact-hero {
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--c-line);
}
.contact-hero h1 { color: var(--c-midnight); }
.contact-info-item { color: var(--text-on-light); }
.contact-info-icon {
  background: rgba(37, 99, 235, 0.12);
  color: var(--c-navy-soft);
}
.contact-info-label { color: var(--c-fog); }
.contact-info-value { color: var(--c-midnight); }

.contact-form {
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-mid);
}
.form-label { color: var(--c-midnight); }
.form-input {
  background: #F8FAFC;
  border: 1px solid var(--c-line-soft);
  color: var(--c-midnight);
}
.form-input:focus {
  border-color: var(--c-navy-soft);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.form-feedback.is-success {
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
}
.form-feedback.is-error {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.08);
}

/* ---------- 19. 404 / 搜索 ---------- */
.error-404-section {
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
}
.error-404-code {
  background: linear-gradient(135deg, var(--c-navy-soft), var(--c-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-404-title { color: var(--c-midnight); }
.error-404-desc { color: var(--c-fog); }

.search-form-inner {
  background: #FFFFFF;
  border: 1px solid var(--c-line-soft);
}
.search-form-inner:focus-within {
  border-color: var(--c-navy-soft);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.error-404-search .search-form-inner {
  background: #FFFFFF;
  border-color: var(--c-line);
}

/* ---------- 20. 移动端固定 CTA 栏 ---------- */
.mobile-cta-bar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 20px rgba(37, 99, 235, 0.08);
}
.mcta-phone {
  background: #F8FAFC;
  color: var(--c-midnight);
  border: 1px solid var(--c-line-soft);
}
.mcta-trial {
  background: var(--c-gold);
  color: #FFFFFF;
}
.mcta-trial:hover { background: var(--c-gold-deep); }

/* ---------- 21. 按钮微调 ---------- */
.btn-primary { background: var(--c-gold); color: #FFFFFF; }
.btn-primary:hover {
  background: var(--c-gold-deep);
  color: #FFFFFF;
  box-shadow: var(--shadow-gold);
}
.btn-gold { background: var(--c-gold); color: #FFFFFF; }
.btn-gold:hover {
  background: var(--c-gold-deep);
  color: #FFFFFF;
  box-shadow: var(--shadow-gold);
}
.btn-ghost {
  color: var(--c-navy-soft);
  border-color: var(--c-navy-soft);
}
.btn-ghost:hover {
  background: var(--c-navy-soft);
  color: #FFFFFF;
}
.btn-outline {
  color: var(--c-midnight);
  border-color: var(--c-line-soft);
}
.btn-outline:hover {
  color: var(--c-navy-soft);
  border-color: var(--c-navy-soft);
}

/* ---------- 22. 滚动渐入（保持原动画） ---------- */
.reveal, .reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible, .reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 23. WordPress 原生对齐 ---------- */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }

.wp-caption { color: var(--c-fog); }
.wp-caption-text { color: var(--c-fog); }

/* 评论样式 */
.comment-list { background: #F8FAFC; padding: 1.5rem; border-radius: var(--radius-md); }
.comment-body { color: var(--text-on-light); }
.comment-author { color: var(--c-midnight); }
.comment-meta { color: var(--c-fog); }

/* ---------- 24. 响应式微调 ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-visual { max-width: 480px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .hero { padding-top: 80px; min-height: auto; padding-bottom: 3rem; }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-badges { gap: 1.2rem; }
  .hero-badges strong { font-size: 1.4rem; }

  .ai-grid { grid-template-columns: 1fr !important; }
  .ai-pipeline { padding: 1.5rem; }
  .ai-pipeline-node { padding: 0.8rem; }

  .stat-card { padding: 1.5rem; }
}