/* 文件路径: static/website/css/themes.css */
/* 全局主题变量 */
:root {
  --primary-color: #2c5282;      /* 主色 - 导航栏颜色 */
  --secondary-color: #2c5282;    /* 辅色 - 页脚颜色 */
  --accent-color: #63b3ed;       /* 强调色 - 悬停效果 */
  --accent-gold: #d4af37;        /* 🎯 金色强调色 - CTA按钮 */
  --background-color: #f8f9fa;   /* 背景色 - 页面背景 */
  --text-color: #333333;         /* 文字色 - 主要文字颜色 */
}

/* ===== 主题定义 ===== */

/* 蓝色商务主题 */
.theme-blue {
  --primary-color: #2c5282;      /* 深蓝色 - 导航栏 */
  --secondary-color: #2c5282;    /* 深蓝色 - 页脚与导航栏同色 */
  --accent-color: #63b3ed;       /* 浅蓝色 - 强调色 */
  --accent-gold: #d4af37;        /* 🎯 金色强调色 */
  --background-color: #f0f8ff;   /* 淡蓝色背景 */
  --text-color: #2d3748;         /* 深灰色文字 */
}

/* 绿色活力主题 */
.theme-green {
  --primary-color: #2f855a;      /* 深绿色 - 导航栏 */
  --secondary-color: #38a169;    /* 绿色 - 页脚 */
  --accent-color: #68d391;       /* 浅绿色 - 强调色 */
  --accent-gold: #d4af37;        /* 🎯 金色强调色 */
  --background-color: #f0fff4;   /* 淡绿色背景 */
  --text-color: #2d3748;         /* 深灰色文字 */
}

/* 橙色温暖主题 */
.theme-orange {
  --primary-color: #dd6b20;      /* 深橙色 - 导航栏 */
  --secondary-color: #ed8936;    /* 橙色 - 页脚 */
  --accent-color: #fbd38d;       /* 浅橙色 - 强调色 */
  --accent-gold: #d4af37;        /* 🎯 金色强调色 */
  --background-color: #fffaf0;   /* 淡橙色背景 */
  --text-color: #2d3748;         /* 深灰色文字 */
}

/* 紫色尊贵主题 */
.theme-purple {
  --primary-color: #6b46c1;      /* 深紫色 - 导航栏 */
  --secondary-color: #9f7aea;    /* 紫色 - 页脚 */
  --accent-color: #d6bcfa;       /* 浅紫色 - 强调色 */
  --accent-gold: #d4af37;        /* 🎯 金色强调色 */
  --background-color: #faf5ff;   /* 淡紫色背景 */
  --text-color: #2d3748;         /* 深灰色文字 */
}

/* ===== 🎯 核心组件样式 ===== */

/* 导航栏样式 */
.navbar.navbar-expand-lg.navbar-dark.fixed-top,
.navbar.navbar-expand-lg.navbar-dark,
.navbar.fixed-top,
.navbar {
    background-color: var(--primary-color) !important;  /* 使用主色作为导航栏背景 */
    background: var(--primary-color) !important;        /* 双重保障 */
    border-bottom: none !important;                     /* 移除底部边框 */
}

/* 导航栏品牌和链接颜色 */
.navbar-brand, 
.navbar-nav .nav-link {
    color: white !important;                            /* 白色文字 */
}

/* 导航栏链接悬停效果 */
.navbar-nav .nav-link:hover {
    color: var(--accent-color) !important;              /* 悬停时使用强调色 */
}

/* ===== 🎯 页脚样式 ===== */

/* 页脚背景色 */
.industrial-footer {
    background-color: var(--secondary-color) !important;  /* 使用辅色作为页脚背景 */
    background: var(--secondary-color) !important;        /* 双重保障 */
    border-top: 3px solid var(--primary-color) !important; /* 顶部边框使用主色 */
}

/* 页脚链接颜色 */
.industrial-footer a,
.industrial-footer .nav-link,
.industrial-footer .list-unstyled a {
    color: rgba(255, 255, 255, 0.9) !important;         /* 白色带透明度 */
    text-decoration: none !important;                   /* 移除下划线 */
}

/* 页脚链接悬停效果 */
.industrial-footer a:hover,
.industrial-footer .nav-link:hover,
.industrial-footer .list-unstyled a:hover {
    color: var(--accent-color) !important;              /* 悬停时使用强调色 */
    text-decoration: underline !important;              /* 添加下划线 */
}

/* 页脚图标颜色 */
.industrial-footer .fab,
.industrial-footer .fas {
    color: rgba(255, 255, 255, 0.9) !important;         /* 白色带透明度 */
}

/* 页脚图标悬停效果 */
.industrial-footer .fab:hover,
.industrial-footer .fas:hover {
    color: var(--accent-color) !important;              /* 悬停时使用强调色 */
}

/* 页脚标题样式 */
.industrial-footer h5 {
    color: white !important;                            /* 白色标题 */
    border-bottom: 2px solid var(--accent-color) !important; /* 底部边框使用强调色 */
    padding-bottom: 8px !important;                     /* 底部内边距 */
    margin-bottom: 15px !important;                     /* 底部外边距 */
    display: inline-block !important;                   /* 让边框只包裹文字宽度 */
    width: 320px !important;                            /* 固定宽度，可以调整这个值 */
}

/* 页脚分隔线 */
.industrial-footer hr {
    border-color: var(--primary-color) !important;      /* 分隔线使用主色 */
    opacity: 0.5 !important;                            /* 半透明效果 */
}

/* ===== 区块样式 ===== */

/* 所有主要区块的背景色和文字色 */
.hero-section,                    /* 英雄区块 */
.stats-section,                   /* 统计数据区块 */
.about-section,                   /* 关于我们区块 */
.services-section,                /* 服务区块 */
.partners-section,                /* 合作伙伴区块 */
.production-section,              /* 生产实力区块 */
.certifications-section,          /* 资质认证区块 */
.news-section,                    /* 新闻区块 */
.cta-section {                    /* CTA行动号召区块 */
  background-color: var(--background-color) !important;  /* 使用背景色变量 */
  color: var(--text-color) !important;                   /* 使用文字色变量 */
}

/* ===== 卡片样式 ===== */

/* 服务卡片和认证卡片样式 */
.services-section .feature-card.card,
.certifications-section .certification-card.card {
  background-color: var(--background-color) !important;           /* 卡片背景色 */
  background-image: linear-gradient(135deg, var(--background-color), #ffffff) !important; /* 渐变背景 */
  border: 2px solid var(--secondary-color) !important;            /* 边框使用辅色 */
  color: var(--text-color) !important;                            /* 文字颜色 */
}

/* 卡片悬停效果 */
.services-section .feature-card.card:hover,
.certifications-section .certification-card.card:hover {
  transform: translateY(-5px) !important;                        /* 上浮效果 */
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;            /* 阴影效果 */
  border-color: var(--primary-color) !important;                  /* 悬停时边框使用主色 */
}

/* ===== 按钮样式 ===== */

/* 主要按钮样式 */
.btn.btn-primary {
  background-color: var(--primary-color) !important;              /* 背景使用主色 */
  border-color: var(--primary-color) !important;                  /* 边框使用主色 */
  color: white !important;                                        /* 白色文字 */
}

/* 主要按钮悬停效果 */
.btn.btn-primary:hover {
  background-color: var(--secondary-color) !important;            /* 悬停背景使用辅色 */
  border-color: var(--secondary-color) !important;                /* 悬停边框使用辅色 */
}

/* 轮廓按钮样式 */
.btn.btn-outline-primary {
  color: var(--primary-color) !important;                         /* 文字使用主色 */
  border-color: var(--primary-color) !important;                  /* 边框使用主色 */
}

/* 轮廓按钮悬停效果 */
.btn.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;              /* 悬停背景使用主色 */
  border-color: var(--primary-color) !important;                  /* 悬停边框使用主色 */
  color: white !important;                                        /* 悬停文字白色 */
}

/* ===== 图标和标题颜色 ===== */

/* 图标颜色 */
.services-section .feature-icon i,
.certifications-section .certification-placeholder i,
/* 标题颜色 */
.services-section .section-title,
.services-section .card-title,
.certifications-section .section-title,
.certifications-section .certification-title,
/* 统计数据数字颜色 */
.stats-section .counter-item h3 {
  color: var(--primary-color) !important;                         /* 使用主色 */
}

/* ===== 特殊区域样式 ===== */

/* 合作伙伴区域背景 */
.partners-section {
  background: linear-gradient(135deg, var(--background-color), var(--secondary-color)) !important; /* 渐变背景 */
}

/* CTA行动号召区域背景 */
.cta-section {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important; /* 主色到辅色渐变 */
  color: white !important;                                        /* 白色文字 */
}

/* 🎯 CTA区域按钮样式 - 修正版 */
.cta-section .btn-warning {
  background-color: var(--accent-gold) !important;      /* 🎯 金色背景 - 立即咨询按钮 */
  border-color: var(--accent-gold) !important;          /* 🎯 金色边框 */
  color: #000 !important;                               /* 黑色文字 */
  font-weight: 600 !important;                          /* 粗体文字 */
}

.cta-section .btn-info {
  background-color: var(--primary-color) !important;    /* 🎯 修正：蓝色背景 - 查看产品按钮 */
  border-color: var(--primary-color) !important;        /* 🎯 蓝色边框 */
  color: white !important;                              /* 🎯 白色文字 */
}

/* 🎯 CTA区域按钮悬停效果 - 修正版 */
.cta-section .btn-warning:hover {
  background-color: #c19b2f !important;                 /* 深金色背景 */
  border-color: #c19b2f !important;                     /* 深金色边框 */
  transform: translateY(-2px) !important;               /* 上浮效果 */
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;  /* 金色阴影 */
}

.cta-section .btn-info:hover {
  background-color: var(--secondary-color) !important;  /* 🎯 修正：悬停时使用辅色 */
  border-color: var(--secondary-color) !important;      /* 🎯 辅色边框 */
  transform: translateY(-2px) !important;               /* 🎯 上浮效果 */
  box-shadow: 0 4px 12px rgba(44, 82, 130, 0.3) !important;  /* 🎯 蓝色阴影 */
}

/* 轮播图指示器 */
.carousel-indicators button {
  background-color: var(--secondary-color) !important;            /* 默认状态使用辅色 */
}

.carousel-indicators button.active {
  background-color: var(--primary-color) !important;              /* 激活状态使用主色 */
}