/* ==================== 移动端触摸体验和可访问性优化 ==================== */

/* ========================================
   触摸目标优化 - 符合WCAG 2.1标准
   ======================================== */

/* 基础触摸目标尺寸（44x44px）*/
.touch-target {
  min-width: 44px;
  min-height: 44px;
  position: relative;
}

.touch-target::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  z-index: -1;
}

/* 小型触摸目标（36x36px）*/
.touch-target-sm {
  min-width: 36px;
  min-height: 36px;
  position: relative;
}

.touch-target-sm::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  z-index: -1;
}

/* 大型触摸目标（48x48px）*/
.touch-target-lg {
  min-width: 48px;
  min-height: 48px;
  position: relative;
}

.touch-target-lg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  z-index: -1;
}

/* ========================================
   触摸交互优化
   ======================================== */

/* 移除移动端点击延迟 */
.touch-optimized {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* 触摸反馈效果 */
.touch-feedback {
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.touch-feedback:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* 触摸波纹效果 */
.touch-ripple {
  position: relative;
  overflow: hidden;
}

.touch-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.touch-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* ========================================
   手势识别优化
   ======================================== */

/* 滑动手势优化 */
.touch-swipe {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.touch-swipe-horizontal {
  touch-action: pan-x;
  overscroll-behavior: contain;
}

/* 缩放手势优化 */
.touch-pinch {
  touch-action: pinch-zoom;
}

/* 拖拽手势优化 */
.touch-drag {
  touch-action: none;
  user-select: none;
}

/* ========================================
   移动端滚动优化
   ======================================== */

/* 平滑滚动 */
.touch-scroll-smooth {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 弹性滚动 */
.touch-scroll-bounce {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
}

/* 禁止滚动回弹 */
.touch-scroll-no-bounce {
  overscroll-behavior: contain;
}

/* 自定义滚动条（移动端）*/
.touch-scroll-custom::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.touch-scroll-custom::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.touch-scroll-custom::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.touch-scroll-custom::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* ========================================
   可访问性增强
   ======================================== */

/* 焦点可见性 */
.accessibility-focus:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);
}

.accessibility-focus:focus:not(:focus-visible) {
  outline: none;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .accessibility-focus:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .touch-feedback,
  .touch-ripple,
  .touch-ripple::before {
    transition: none !important;
    animation: none !important;
  }
}

/* 屏幕阅读器专用内容 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* 跳过导航链接 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 6px;
}

/* ========================================
   色盲友好设计
   ======================================== */

/* 色盲友好的状态指示 */
.colorblind-friendly {
  position: relative;
}

.colorblind-friendly::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
}

/* 图标+文字的双重提示 */
.icon-text-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.icon-text-hint::after {
  content: attr(data-text);
  font-size: 0.875em;
  opacity: 0.8;
}

/* ========================================
   键盘导航优化
   ======================================== */

/* 键盘导航可见性 */
.keyboard-nav :focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.keyboard-nav .keyboard-focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* 焦点指示器 */
.focus-indicator {
  position: relative;
}

.focus-indicator::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: border-color 0.2s ease;
}

.focus-indicator:focus::after {
  border-color: #0066cc;
}

/* ========================================
   移动端特定优化
   ======================================== */

/* 移动端字体大小调整 */
@media screen and (max-width: 767px) {
  .mobile-text-adjust {
    font-size: 16px; /* 防止iOS缩放 */
    -webkit-text-size-adjust: 100%;
  }
  
  /* 移动端触摸目标间距 */
  .mobile-touch-spacing > * + * {
    margin-top: 8px;
  }
  
  /* 移动端按钮优化 */
  .mobile-button-optimize {
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.4;
    min-height: 44px;
  }
  
  /* 移动端表单优化 */
  .mobile-form-optimize input,
  .mobile-form-optimize select,
  .mobile-form-optimize textarea {
    font-size: 16px; /* 防止iOS缩放 */
    padding: 12px;
    min-height: 44px;
  }
  
  /* 移动端链接优化 */
  .mobile-link-optimize {
    padding: 8px 0;
    display: inline-block;
    min-height: 44px;
    line-height: 1.4;
  }
}

/* ========================================
   响应式可访问性
   ======================================== */

/* 不同屏幕尺寸的触摸目标调整 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tablet-touch-target {
    min-width: 40px;
    min-height: 40px;
  }
}

@media screen and (min-width: 1024px) {
  .desktop-touch-target {
    min-width: 32px;
    min-height: 32px;
  }
}

/* ========================================
   辅助功能工具类
   ======================================== */

/* 文本缩放支持 */
.text-scaling-support {
  font-size: 1rem;
  line-height: 1.6;
}

/* 颜色对比度检查 */
.contrast-check {
  /* 确保WCAG AA级别的对比度 */
  color: #000;
  background: #fff;
}

.contrast-check-dark {
  /* 确保WCAG AA级别的对比度 */
  color: #fff;
  background: #000;
}

/* 语义化标记 */
.semantic-markup article,
.semantic-markup section,
.semantic-markup nav,
.semantic-markup aside,
.semantic-markup header,
.semantic-markup footer,
.semantic-markup main {
  display: block;
}

/* ARIA标签支持 */
[role="button"] {
  cursor: pointer;
}

[role="button"]:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* ========================================
   使用示例
   ======================================== */

/*
使用示例：

<!-- 触摸目标优化 -->
<button class="touch-target touch-feedback">触摸按钮</button>

<!-- 移动端滚动优化 -->
<div class="touch-scroll-smooth touch-scroll-custom">
  滚动内容
</div>

<!-- 可访问性焦点 -->
<a href="#" class="accessibility-focus">可访问链接</a>

<!-- 色盲友好 -->
<div class="colorblind-friendly" data-state="success">
  <span class="icon-text-hint" data-text="成功">✓</span>
</div>

<!-- 跳过导航 -->
<a href="#main-content" class="skip-link">跳到主内容</a>

<!-- 屏幕阅读器专用 -->
<span class="sr-only">这段文字只对屏幕阅读器可见</span>

*/