/* 
 * CSS优化文件 - 提高网站性能与响应式体验
 * 作用：
 * 1. 修复移动端显示问题
 * 2. 优化页面加载性能
 * 3. 添加一些现代化的效果
 * 4. 提升核心网页指标表现
 */

/* 全局优化 */
:root {
  --primary-color: #ff0000;
  --primary-hover: #e60000;
  --text-color: #333333;
  --bg-color: #ffffff;
  --secondary-bg: #f8f8f8;
}

html {
  scroll-behavior: smooth; /* 平滑滚动效果 */
  height: -webkit-fill-available; /* 修复移动Safari中的高度问题 */
}

body {
  text-rendering: optimizeSpeed; /* 优化文本渲染速度 */
  -webkit-font-smoothing: antialiased; /* 文字平滑 */
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden; /* 防止水平滚动条 */
  line-height: 1.5;
  color: var(--text-color);
}

/* 优化内容块布局稳定性 - 减少累积布局偏移(CLS) */
.post-classic-figure, 
.swiper-slide, 
.partner img {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
  display: block; /* 避免图片底部间隙 */
  contain: content; /* 提升渲染性能 */
}

/* 图片加载优化 */
img {
  max-width: 100%;
  height: auto; /* 保持图片比例 */
}

img[loading="lazy"] {
  transition: opacity 0.3s;
}

img[loading="lazy"]:not([src]) {
  opacity: 0;
}

/* 动画和过渡效果 */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 移动端优化 */
@media (max-width: 767px) {
  /* 调整文字大小，增强可读性 */
  body {
    font-size: 16px;
  }
  
  h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
  
  /* 修复移动端导航问题 */
  .rd-navbar-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* 改善移动端内容边距 */
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* 调整首页产品展示图片尺寸 */
  .post-classic-figure img {
    width: 100% !important;
    height: auto !important;
  }
  
  /* 调整荣誉资质图片在移动端的显示 */
  .partner img {
    max-width: 100%;
    height: auto;
  }
  
  /* 调整表格内容在移动端的显示 */
  .tabs-custom.tabs-vertical .nav-tabs {
    margin-bottom: 20px;
  }
  
  /* 页脚在移动端更紧凑 */
  .footer-classic {
    padding: 25px 0;
  }
  
  /* 修复业务板块标签在移动端的显示问题 */
  .tab-pane img {
    max-width: 100%;
    height: auto;
    margin-top: 15px;
  }
  
  /* 优化轮播图在移动端的显示 */
  .swiper-container {
    height: auto !important;
  }
  
  .swiper-slide {
    height: auto !important;
  }
  
  /* 触摸优化 - 增加可点击区域 */
  .button, 
  .rd-nav-link,
  .link-arrow,
  .nav-link,
  .rd-navbar-toggle {
    padding: 10px !important; /* 确保有足够大的触摸区域 */
    min-height: 44px; /* 苹果推荐的最小点击区域高度 */
    min-width: 44px; /* 苹果推荐的最小点击区域宽度 */
  }
}

/* 性能优化：减少重排重绘 */
.rd-navbar-static {
  will-change: transform;
  transform: translateZ(0); /* 启用GPU加速 */
}

.swiper-slide {
  will-change: transform;
  transform: translateZ(0);
}

/* 添加内容占位符，减少布局偏移 */
.post-classic-figure {
  background-color: #f0f0f0; /* 图片加载前的背景色 */
  position: relative;
  overflow: hidden;
}

/* 添加一些动画效果，提升用户体验 */
.post-classic {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-classic:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.button {
  transition: all 0.3s ease !important;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 打印样式优化 */
@media print {
  .rd-navbar,
  .footer-classic,
  .button,
  .swiper-container,
  .to-top {
    display: none !important;
  }
  
  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }
  
  a {
    text-decoration: none !important;
    color: #000 !important;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
  
  img {
    max-width: 500px;
    page-break-inside: avoid;
  }
  
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }
  
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
}

/* 暗色模式支持 - 针对系统设置了暗色模式的用户 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #f0f0f0;
    --bg-color: #121212;
    --secondary-bg: #1e1e1e;
  }
  
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  .bg-gray-100 {
    background-color: var(--secondary-bg) !important;
  }
  
  .bg-default {
    background-color: var(--bg-color) !important;
  }
  
  .rd-navbar-static.rd-navbar--is-stuck {
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    background-color: var(--secondary-bg) !important;
  }
  
  .post-classic-figure {
    background-color: #2c2c2c;
  }
  
  /* 优化暗模式下的图片显示 */
  img {
    filter: brightness(0.9);
  }
  
  /* 暗模式下的文本颜色调整 */
  .post-classic-title a,
  .nav-link,
  .rd-nav-link,
  h1, h2, h3, h4, h5, h6 {
    color: var(--text-color) !important;
  }
  
  /* 暗模式下的表格和标签页 */
  .tabs-custom .nav-tabs,
  .tab-content {
    background-color: var(--secondary-bg);
    border-color: #444;
  }
}

/* 提高页面可访问性 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 焦点样式增强 */
a:focus,
button:focus,
input:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 使用媒体查询优化不同设备类型 */
@media (pointer: coarse) {
  /* 触摸设备优化 */
  .button, 
  .rd-nav-link,
  .link-arrow {
    padding: 12px !important;
  }
}

@media (pointer: fine) {
  /* 鼠标设备优化 */
  .button:hover, 
  .rd-nav-link:hover,
  .link-arrow:hover {
    opacity: 0.85;
  }
}

/* 优化回到顶部按钮 */
.to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: none;
  cursor: pointer;
  border: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.to-top.active {
  display: block;
  opacity: 0.8;
}

.to-top:hover {
  opacity: 1;
  transform: translateY(-5px);
}