/* ============================================
   梧州市果然网络科技有限公司 - 主样式文件
   优化日期: 2026-01-03
   ============================================ */

/* 基础样式 */
body {
  font-family: 'Inter', system-ui, sans-serif;
  scroll-behavior: smooth;
}

/* 关键渲染路径CSS */
.content-auto {
  content-visibility: auto;
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 卡片悬停效果 */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

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

/* 图片懒加载样式 */
.lazy-img {
  transition: opacity 0.3s ease;
}

.lazy-img:not(.loaded) {
  opacity: 0;
}

.lazy-img.loaded {
  opacity: 1;
}

/* GPU加速优化 */
.transform-3d {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* 响应式字体优化 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

/* FAQ详情样式 */
details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary .fa-chevron-down {
  transform: rotate(180deg);
}

/* 服务卡片特殊样式 */
.service-card-highlight {
  border: 2px solid #165DFF !important;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.15);
}

.service-card-highlight:hover {
  box-shadow: 0 8px 20px rgba(22, 93, 255, 0.25);
}

/* 加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* 响应式网格布局优化 */
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 导航栏过渡效果 */
.navbar-transition {
  transition: all 0.3s ease;
}

/* 按钮悬停效果优化 */
.btn-primary {
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(22, 93, 255, 0.2);
}

.btn-primary:hover {
  box-shadow: 0 6px 12px rgba(22, 93, 255, 0.3);
  transform: translateY(-2px);
}

/* 图片容器比例 */
.aspect-w-16 {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  overflow: hidden;
}

.aspect-w-16 img,
.aspect-w-16 .aspect-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 章节间距优化 */
section {
  position: relative;
}

/* 文字截断 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 颜色工具类扩展 */
.bg-primary\/5 {
  background-color: rgba(22, 93, 255, 0.05);
}

.bg-primary\/10 {
  background-color: rgba(22, 93, 255, 0.1);
}

.text-primary\/80 {
  color: rgba(22, 93, 255, 0.8);
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #165DFF;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1348cc;
}

/* 打印样式 */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .card-hover:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 移动端菜单链接点击优化 */
#mobileMenu a {
  pointer-events: auto !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

#mobileMenu a:active {
  transform: scale(0.98);
}

/* 移动端菜单按钮点击优化 */
#menuBtn {
  pointer-events: auto !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  position: relative !important;
  z-index: 100 !important;
}

#menuBtn:active {
  transform: scale(0.95);
}

/* 确保导航栏容器不会遮挡按钮 */
#navbar {
  position: relative !important;
  z-index: 40 !important;
}

/* 确保导航栏内的flex容器正确显示 */
#navbar > nav > div {
  position: relative !important;
}