/**
 * 全局响应式缩放样式
 * Web端：多个分辨率方案（媒体查询）
 * 移动端：专用布局方案
 * 设计基准宽度：1920px
 */

/* ==================== CSS变量定义 ==================== */
:root {
  --base-width: 1920;
  --base-font-size: 16;
  --scale-factor: 1;
  --viewport-width: 1920px;
}

/* ==================== 基础样式 ==================== */
html {
  font-size: 16px; /* 基准字体大小 */
  overflow-x: hidden;
  /* zoom 属性由 JavaScript 动态设置 */
}

body {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ==================== Web端分辨率方案 ==================== */
/* 使用更稳定的缩放比例，保持布局大小相对固定 */

/* Web端方案1: 超大屏 (2560px+) - 1.1x 缩放（轻微放大） */
@media (min-width: 2560px) {
  :root {
    --scale-factor: 1.1;
  }
  html {
    font-size: 17.6px; /* 16 * 1.1 */
  }
}

/* Web端方案2: 大屏桌面 (1920px - 2559px) - 1.0x 缩放（基准，保持原大小） */
@media (min-width: 1920px) and (max-width: 2559px) {
  :root {
    --scale-factor: 1.0;
  }
  html {
    font-size: 16px; /* 基准大小 */
  }
}

/* Web端方案3: 标准桌面 (1440px - 1919px) - 0.95x 缩放（轻微缩小） */
@media (min-width: 1440px) and (max-width: 1919px) {
  :root {
    --scale-factor: 0.95;
  }
  html {
    font-size: 15.2px; /* 16 * 0.95 */
  }
}

/* Web端方案4: 小桌面 (1280px - 1439px) - 0.9x 缩放 */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root {
    --scale-factor: 0.9;
  }
  html {
    font-size: 14.4px; /* 16 * 0.9 */
  }
}

/* Web端方案5: 笔记本 (1024px - 1279px) - 0.85x 缩放 */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --scale-factor: 0.85;
  }
  html {
    font-size: 13.6px; /* 16 * 0.85 */
  }
}

/* ==================== 移动端专用布局方案 ==================== */

/* 中间尺寸优化: 小笔记本/大平板 (900px - 1023px) - 提高缩放比例，避免内容太窄 */
@media (min-width: 900px) and (max-width: 1023px) {
  :root {
    --scale-factor: 0.9;
  }
  html {
    font-size: 14.4px; /* 16 * 0.9 */
  }
  
  /* 容器宽度优化 */
  .container {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* 导航栏优化 - 提前显示移动端菜单 */
  header nav .hidden.md\:flex {
    display: none !important;
  }
  
  header nav #menu-toggle {
    display: block !important;
  }
  
  /* 导航栏布局优化 */
  header nav {
    padding: 0.5rem 1rem;
    flex-wrap: nowrap;
  }
  
  /* Logo文字大小调整 */
  header nav .font-tech {
    font-size: 1.25rem !important;
    white-space: nowrap;
  }
}

/* 移动端方案: 平板横屏 (768px - 899px) */
@media (min-width: 768px) and (max-width: 899px) {
  :root {
    --scale-factor: 0.85;
  }
  html {
    font-size: 13.6px; /* 16 * 0.85 */
  }
  
  /* 移动端布局优化 */
  body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* 容器宽度调整 */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* 导航栏移动端优化 */
  header nav {
    padding: 0.5rem 1rem;
    flex-wrap: nowrap;
  }
  
  /* 确保移动端菜单按钮显示 */
  header nav .hidden.md\:flex {
    display: none !important;
  }
  
  header nav #menu-toggle {
    display: block !important;
  }
  
  /* Logo文字大小调整 */
  header nav .font-tech {
    font-size: 1.125rem !important;
    white-space: nowrap;
  }
  
  /* 图片自适应 */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* 移动端方案: 手机竖屏 (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --scale-factor: 0.75;
  }
  html {
    font-size: 14px; /* 提高字体大小，提升可读性 */
  }
  
  /* 移动端布局优化 */
  body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 1rem;
  }
  
  /* 容器宽度调整 */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* 导航栏移动端优化 */
  header nav {
    padding: 0.5rem 0.75rem;
    flex-wrap: wrap;
  }
  
  /* 隐藏桌面端导航，显示移动端菜单 */
  .desktop-nav {
    display: none !important;
  }
  
  .mobile-menu-btn {
    display: block !important;
  }
  
  /* 图片大小限制 - 防止图片太大 */
  img {
    max-width: 100% !important;
    max-height: 400px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain;
  }
  
  /* 大图特殊处理 */
  img[src*="images"],
  img[src*="static"] {
    max-height: 300px !important;
  }
  
  /* 表格横向滚动 */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* 按钮全宽 */
  button, .btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem !important;
  }
  
  /* 文字大小优化 - 确保可读性 */
  p, span, div, li, a {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  
  h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }
  
  h4 {
    font-size: 1.125rem !important;
  }
}

/* 移动端方案: 小屏手机 (< 480px) */
@media (max-width: 479px) {
  :root {
    --scale-factor: 0.7;
  }
  html {
    font-size: 13px; /* 提高字体大小，提升可读性 */
  }
  
  /* 移动端布局优化 */
  body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 1rem;
  }
  
  /* 容器宽度调整 */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* 导航栏移动端优化 */
  header nav {
    padding: 0.5rem;
    flex-wrap: wrap;
  }
  
  /* 隐藏桌面端导航 */
  .desktop-nav {
    display: none !important;
  }
  
  .mobile-menu-btn {
    display: block !important;
  }
  
  /* 图片大小限制 - 防止图片太大 */
  img {
    max-width: 100% !important;
    max-height: 350px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain;
  }
  
  /* 大图特殊处理 */
  img[src*="images"],
  img[src*="static"] {
    max-height: 250px !important;
  }
  
  /* 表格横向滚动 */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* 按钮全宽 */
  button, .btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem !important;
  }
  
  /* 文字大小优化 - 确保可读性 */
  p, span, div, li, a {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  
  h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 1.375rem !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }
  
  h4 {
    font-size: 1.125rem !important;
  }
}

/* ==================== 通用响应式样式 ==================== */

/* 图片自适应缩放 */
img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* 移动端图片大小限制 */
@media (max-width: 767px) {
  /* 限制图片最大高度，防止图片太大 */
  img {
    max-height: 400px !important;
    width: auto !important;
  }
  
  /* 大图（如banner、hero图片）进一步限制 */
  section img,
  main img,
  .hero img,
  img[src*="images"],
  img[src*="static"] {
    max-height: 300px !important;
  }
  
  /* 卡片内的图片 */
  .card img,
  [class*="card"] img {
    max-height: 250px !important;
  }
  
  /* 确保图片不会超出容器 */
  figure img,
  .image-container img {
    max-width: 100% !important;
    max-height: 300px !important;
  }
}

/* 图标字体大小自适应 */
.fa,
[class*="fa-"] {
  font-size: inherit;
}

/* SVG 图标自适应 */
svg {
  width: 1em;
  height: 1em;
}

/* 表格自适应 */
table {
  width: 100%;
  border-collapse: collapse;
}

/* 确保所有文本元素使用相对单位 */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
}

/* 按钮和表单元素自适应 */
button,
input,
select,
textarea {
  font-size: inherit;
}

/* Font Awesome 图标大小类 */
.fa-lg {
  font-size: 1.33333em;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

/* 容器宽度自适应 */
.container {
  width: 100%;
  max-width: 100%;
}

/* 防止水平滚动 */
body {
  overflow-x: hidden;
}

/* ==================== 导航栏字体大小优化 ==================== */
header nav a,
header nav button {
  font-size: 1.125rem !important; /* 18px 基准，会随缩放比例调整 */
}

header nav .font-tech {
  font-size: 1.5rem !important; /* Logo文字更大 */
}

@media (min-width: 1024px) {
  header nav .font-tech {
    font-size: 2rem !important; /* 桌面端Logo更大 */
  }
  
  header nav a {
    font-size: 1.25rem !important; /* 桌面端导航链接更大 */
  }
}

/* 导航栏图标大小 */
header nav .fa {
  font-size: 1.25em !important;
}

/* 导航栏下拉箭头优化 - 让箭头更细 */
header nav .fa-chevron-down {
  font-weight: 300 !important;
  font-size: 0.7em !important;
  opacity: 0.8;
}

/* 产品中心下拉箭头特殊处理 */
header nav a[href*="products"] .fa-chevron-down,
header nav .group a .fa-chevron-down {
  font-weight: 300 !important;
  font-size: 0.65em !important;
  opacity: 0.75;
  transform: scale(0.9);
}

/* 导航栏布局修复 - 防止1024px以下串位 */
@media (max-width: 1023px) {
  /* 确保导航栏使用flex布局且不换行 */
  header nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: visible;
    position: relative;
  }
  
  /* Logo区域 */
  header nav > a:first-child {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    z-index: 10;
  }
  
  /* 隐藏桌面端导航菜单 */
  header nav > div.hidden.md\:flex,
  header nav > .hidden.md\:flex {
    display: none !important;
  }
  
  /* 显示移动端菜单按钮 */
  header nav #menu-toggle,
  header nav button.md\:hidden {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  
  /* 确保移动端菜单按钮可见 */
  header nav button[id="menu-toggle"] {
    display: block !important;
  }
}

/* ==================== 页脚字体大小优化 ==================== */
footer {
  font-size: 1rem;
}

footer h3 {
  font-size: 1.25rem !important; /* 页脚标题更大 */
  font-weight: 600;
}

footer a,
footer span,
footer p,
footer li {
  font-size: 1rem !important; /* 页脚文字更大 */
}

footer .text-gray-400 {
  font-size: 1rem !important;
}

footer .text-sm {
  font-size: 0.95rem !important; /* 版权信息稍小但可读 */
}

/* 页脚Logo和图标 */
footer .font-tech {
  font-size: 1.5rem !important;
}

footer .fa {
  font-size: 1.25em !important;
}

/* 移动端触摸优化 */
@media (max-width: 1023px) {
  /* 增加触摸目标大小 */
  a, button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* 优化滚动 */
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  /* 移动端导航栏字体 */
  header nav a {
    font-size: 1rem !important;
  }
  
  /* 导航栏布局修复 - 防止串位 */
  header nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  
  /* Logo区域固定 */
  header nav > a:first-child {
    flex-shrink: 0;
    min-width: auto;
  }
  
  /* 移动端菜单按钮固定 */
  header nav #menu-toggle {
    flex-shrink: 0;
    margin-left: auto;
  }
  
  /* 移动端页脚字体 */
  footer h3 {
    font-size: 1.125rem !important;
  }
  
  footer a,
  footer span,
  footer p,
  footer li {
    font-size: 0.95rem !important;
  }
  
  /* 容器宽度优化 - 让内容区域更宽 */
  .container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* 主内容区域优化 */
  main {
    width: 100%;
    max-width: 100%;
  }
}