/* ============================================================
   a11y.css - 可访问性增强样式
   
   用途: 全站统一的焦点样式、动画降级、触控目标优化
   依赖: core/tokens.css
   加载顺序: 在所有组件之后加载，以便覆盖默认样式
   
   选择器范围:
   - 焦点样式: a, button, input, textarea, select, [role="button"], 
              [tabindex]:not([tabindex="-1"]), .card-link, .pdt-card, 
              .pb-nav__link, .pb-sidebar__item a, .pb-related__item a
   - 动画降级: 所有使用 transition/animation/transform 的元素
   - 触控目标: 移动端按钮、分页、导航链接
   ============================================================ */

/* ============================================================
   1. Focus-Visible 统一样式
   
   原则:
   - 使用 :focus-visible 而非 :focus，避免影响鼠标用户
   - 统一使用品牌色 outline + 透明扩展
   - 移除默认 outline，用 box-shadow 替代（更灵活）
   ============================================================ */

/* --- 1.1 CSS 变量扩展 --- */
:root {
  /* 焦点环样式 */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-primary);
  --focus-ring-color-light: var(--overlay-primary-20);
  
  /* 焦点环组合值 */
  --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-bg),
                0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
  --focus-ring-inset: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* --- 1.2 全局焦点重置 --- */
*:focus {
  outline: none;
}

/* --- 1.3 交互元素焦点样式 --- */

/* 链接 */
a:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* 按钮（原生 + 自定义） */
button:focus-visible,
[role="button"]:focus-visible,
.pg-btn:focus-visible,
.pb-btn:focus-visible,
.pd-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-sm);
}

/* 输入框 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.pb-search__input:focus-visible,
.pg-search-box__input:focus-visible {
  outline: none;
  border-color: var(--focus-ring-color);
  box-shadow: var(--focus-ring);
}

/* 可点击卡片 */
.pdt-card:focus-visible,
.pb-related__item a:focus-visible,
.pb-sidebar__item a:focus-visible,
.pg-search-item:focus-visible,
[class*="card"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-card);
}

/* 导航链接 */
.pb-nav__link:focus-visible,
.pb-header__search:focus-visible,
.pb-header__topic:focus-visible,
.pb-sortnav__link:focus-visible,
.pb-breadcrumb__link:focus-visible {
  outline: none;
  border-radius: var(--radius-md);
  box-shadow: var(--focus-ring);
}

/* 分页 */
.pb-page__item--bar a:focus-visible,
.pg-pagination a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 页脚链接 */
.pb-footer__list a:focus-visible,
.pb-footer__title:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 var(--focus-ring-offset) var(--color-bg-dark),
              0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--color-primary-light);
}

/* Tab 可聚焦元素 */
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- 1.4 跳过链接（已在 misc.css，此处增强） --- */
.pb-skip-link:focus {
  top: var(--space-4);
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-lg);
}

/* ============================================================
   2. Reduced Motion 动画降级
   
   原则:
   - 尊重用户系统偏好
   - 保留必要的状态反馈（如颜色变化）
   - 移除位移、缩放、旋转等动画
   - 不使用 !important 泛滥，仅针对关键组件
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* --- 2.1 全局过渡降级 --- */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* --- 2.2 按钮 hover 动画降级 --- */
  .pg-btn:hover,
  .pg-btn--primary:hover,
  .pg-btn--tech:hover,
  .pg-btn--outline:hover,
  .pg-btn--white:hover {
    transform: none;
  }

  /* --- 2.3 卡片 hover 动画降级 --- */
  .pdt-card:hover,
  .pdt-card:hover .pdt-card__img,
  [class*="card"]:hover {
    transform: none;
  }

  /* --- 2.4 导航动画降级 --- */
  .pb-nav {
    transition: none;
  }
  
  .pb-nav.is-open {
    transform: translateX(0);
  }

  .pb-burger::before,
  .pb-burger::after {
    transition: none;
  }

  /* --- 2.5 下拉菜单动画降级 --- */
  .pb-nav__sub {
    transition: none;
    transform: none;
  }

  .pb-nav__item:hover .pb-nav__sub {
    transform: none;
  }

  /* --- 2.6 返回顶部动画降级 --- */
  .pb-back-top {
    transition: none;
  }

  .pb-back-top.is-visible {
    transform: none;
  }

  /* --- 2.7 悬浮按钮动画降级 --- */
  .pb-float-btn:hover {
    transform: none;
  }

  /* --- 2.8 搜索面板动画降级 --- */
  .pb-search {
    transition: none;
  }

  /* --- 2.9 Header 滚动效果降级 --- */
  .pb-header {
    transition: none;
  }

  /* --- 2.10 Overlay 动画降级 --- */
  .pb-overlay {
    transition: none;
  }
}

/* ============================================================
   3. 触控目标优化（移动端 44px 最小点击区域）
   
   原则:
   - WCAG 2.1 建议最小 44x44px
   - 使用 min-height/min-width + padding 实现
   - 仅在移动端应用，桌面端保持紧凑
   ============================================================ */

@media (max-width: 767px) {
  /* --- 3.1 按钮最小高度 --- */
  .pg-btn,
  .pb-btn,
  .pd-btn {
    min-height: 44px;
  }

  /* --- 3.2 分页最小尺寸 --- */
  .pb-page__item--bar a,
  .pb-page__item--bar span,
  .pg-pagination a,
  .pg-pagination span {
    min-width: 44px;
    min-height: 44px;
  }

  /* --- 3.3 导航链接最小高度 --- */
  .pb-nav__link {
    min-height: 44px;
    padding-block: var(--space-3);
  }

  .pb-nav__sub a {
    min-height: 44px;
    padding-block: var(--space-3);
  }

  /* --- 3.4 面包屑链接 --- */
  .pb-breadcrumb__link,
  .pb-breadcrumb__current {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* --- 3.5 侧边栏链接 --- */
  .pb-sidebar__item a {
    min-height: 44px;
  }

  /* --- 3.6 相关内容链接 --- */
  .pb-related__item a {
    min-height: 44px;
  }

  /* --- 3.7 标签链接 --- */
  .pb-tag,
  .pg-tag-item {
    min-height: 44px;
    padding-block: var(--space-2);
  }

  /* --- 3.8 排序导航 --- */
  .pb-sortnav__link {
    min-height: 44px;
    padding-block: var(--space-3);
  }

  /* --- 3.9 Header 操作按钮 --- */
  .pb-header__search,
  .pb-header__menu,
  .pb-header__topic {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- 3.10 底部导航栏 --- */
  .pb-mobile-bar__item {
    min-height: 56px; /* 底栏稍高 */
  }

  /* --- 3.11 搜索提交按钮 --- */
  .pb-search__submit,
  .pb-search__close,
  .pg-search-box__btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* --- 3.12 关闭/展开按钮 --- */
  .pb-nav__toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- 3.13 返回顶部按钮 --- */
  .pb-back-top {
    width: 48px;
    height: 48px;
  }

  /* --- 3.14 悬浮按钮 --- */
  .pb-float-btn {
    width: 52px;
    height: 52px;
  }
}

/* ============================================================
   4. 高对比度模式支持（可选增强）
   ============================================================ */

@media (prefers-contrast: more) {
  :root {
    --focus-ring-width: 3px;
    --focus-ring-color: var(--color-text);
  }

  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
  }
}

/* ============================================================
   5. 打印样式（隐藏交互元素）
   ============================================================ */

@media print {
  .pb-skip-link,
  .pb-back-top,
  .pb-float-btn,
  .pb-mobile-bar {
    display: none !important;
  }
}