/**
 * 改进的系统缩放调整样式
 * 使用更自然的方式处理系统缩放，避免transform带来的问题
 */

// 基础缩放变量
:root {
  --scale-factor: 1;
  --inverse-scale: 1;
  --base-font-size: 16px;
  --base-line-height: 1.5;
}

// 针对不同缩放比例的精确调整
body[data-scale="125"] {
  --scale-factor: 1.25;
  --inverse-scale: 0.8;
  --base-font-size: 15px;
  --base-line-height: 1.4;

  // 调整基础尺寸
  font-size: var(--base-font-size);
  // line-height: var(--base-line-height);

  // 调整容器和间距
  .container {
    max-width: calc(1600px * var(--inverse-scale));
    padding-left: calc(20px * var(--inverse-scale));
    padding-right: calc(20px * var(--inverse-scale));
  }

  // 调整按钮尺寸
  .btn {
    padding: calc(12px * var(--inverse-scale)) calc(24px * var(--inverse-scale));
    font-size: calc(14px * var(--inverse-scale));
    border-radius: calc(8px * var(--inverse-scale));
  }

  // 调整标题尺寸
  .section-title {
    font-size: calc(32px * var(--inverse-scale));
    margin-bottom: calc(16px * var(--inverse-scale));
  }

  .section-subtitle {
    font-size: calc(16px * var(--inverse-scale));
    margin-bottom: calc(48px * var(--inverse-scale));
  }
}

body[data-scale="150"] {
  --scale-factor: 1.5;
  --inverse-scale: 0.67;
  --base-font-size: 14px;
  --base-line-height: 1.35;

  font-size: var(--base-font-size);
  // line-height: var(--base-line-height);

  .container {
    max-width: calc(1600px * var(--inverse-scale));
    padding-left: calc(20px * var(--inverse-scale));
    padding-right: calc(20px * var(--inverse-scale));
  }

  .btn {
    padding: calc(12px * var(--inverse-scale)) calc(24px * var(--inverse-scale));
    font-size: calc(14px * var(--inverse-scale));
    border-radius: calc(8px * var(--inverse-scale));
  }

  .section-title {
    font-size: calc(32px * var(--inverse-scale));
    margin-bottom: calc(16px * var(--inverse-scale));
  }

  .section-subtitle {
    font-size: calc(16px * var(--inverse-scale));
    margin-bottom: calc(48px * var(--inverse-scale));
  }
}

body[data-scale="175"] {
  --scale-factor: 1.75;
  --inverse-scale: 0.57;
  --base-font-size: 13px;
  --base-line-height: 1.3;

  font-size: var(--base-font-size);
  line-height: var(--base-line-height);

  .container {
    max-width: calc(1600px * var(--inverse-scale));
    padding-left: calc(20px * var(--inverse-scale));
    padding-right: calc(20px * var(--inverse-scale));
  }

  .btn {
    padding: calc(12px * var(--inverse-scale)) calc(24px * var(--inverse-scale));
    font-size: calc(14px * var(--inverse-scale));
    border-radius: calc(8px * var(--inverse-scale));
  }

  .section-title {
    font-size: calc(32px * var(--inverse-scale));
    margin-bottom: calc(16px * var(--inverse-scale));
  }

  .section-subtitle {
    font-size: calc(16px * var(--inverse-scale));
    margin-bottom: calc(48px * var(--inverse-scale));
  }
}

body[data-scale="200"] {
  --scale-factor: 2;
  --inverse-scale: 0.5;
  --base-font-size: 12px;
  --base-line-height: 1.25;

  font-size: var(--base-font-size);
  // line-height: var(--base-line-height);

  .container {
    max-width: calc(1600px * var(--inverse-scale));
    padding-left: calc(20px * var(--inverse-scale));
    padding-right: calc(20px * var(--inverse-scale));
  }

  .btn {
    padding: calc(12px * var(--inverse-scale)) calc(24px * var(--inverse-scale));
    font-size: calc(14px * var(--inverse-scale));
    border-radius: calc(8px * var(--inverse-scale));
  }

  .section-title {
    font-size: calc(32px * var(--inverse-scale));
    margin-bottom: calc(16px * var(--inverse-scale));
  }

  .section-subtitle {
    font-size: calc(16px * var(--inverse-scale));
    margin-bottom: calc(48px * var(--inverse-scale));
  }
}

// 高DPI显示器优化
@media screen and (-webkit-min-device-pixel-ratio: 1.25) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img,
  svg {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  // 菜单导航
  .header-content{
    height: 80px!important;
  }
  .nav{
    .nav-link{
      font-size: 20px!important;
      height: 80px!important;
      line-height: 80px!important;
    }
  }
  // 首页
  .products-section{
    .products-nav{
      flex: 0 0 18%!important;
    }
  }
  .about-section{
    .content-left{
      flex: 0 600px!important;
      max-width: 600px!important;
    }
  }
  //产品中心
  .advantages-section{
     .advantage-image {
      img{width: 108px!important;;height: auto!important;}
     }
  }
  
}

// 卡片组件的缩放调整
body[data-scale] {
  .card {
    border-radius: calc(12px * var(--inverse-scale));
    box-shadow: 0 calc(4px * var(--inverse-scale)) calc(16px * var(--inverse-scale)) rgba(0, 0, 0, 0.1);

    &:hover {
      transform: translateY(calc(-4px * var(--inverse-scale)));
      box-shadow: 0 calc(8px * var(--inverse-scale)) calc(24px * var(--inverse-scale)) rgba(0, 0, 0, 0.15);
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  body[data-scale] {
    .container {
      padding-left: calc(16px * var(--inverse-scale));
      padding-right: calc(16px * var(--inverse-scale));
    }

    .section-title {
      font-size: calc(24px * var(--inverse-scale));
    }

    .btn {
      padding: calc(10px * var(--inverse-scale)) calc(20px * var(--inverse-scale));
      font-size: calc(13px * var(--inverse-scale));
    }
  }
}

// 调试信息样式
.scale-debug-info {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px;
  border-radius: 6px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  z-index: 9999;
  min-width: 160px;

  &.hidden {
    opacity: 0.3;
  }
}