/* ============================================================

   a11y.css · Our Smart Baby

   可访问性系统

   加载顺序：5/34

   ============================================================ */



/* 1. 焦点状态 */

:focus-visible {

  outline: 2px solid var(--color-primary-500);

  outline-offset: 2px;

  border-radius: var(--radius-sm);

}



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



/* 2. 跳过导航 */

.skip-to-main {

  position: absolute;

  left: -9999px;

  top: 0;

  z-index: var(--z-toast);

  padding: var(--space-3) var(--space-5);

  background-color: var(--color-primary-600);

  color: white;

  font-weight: var(--font-semibold);

  text-decoration: none;

  border-radius: 0 0 var(--radius-md) 0;

}



.skip-to-main:focus {

  left: 0;

  outline: 2px solid white;

  outline-offset: 2px;

}



/* 3. 屏幕阅读器专用 */

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



.sr-only-focusable:focus {

  position: static;

  width: auto;

  height: auto;

  padding: var(--space-3);

  margin: 0;

  overflow: visible;

  clip: auto;

  white-space: normal;

}



/* 4. 高对比度模式支持 */

@media (prefers-contrast: more) {

  :root {

    --color-text-secondary: var(--color-neutral-800);

    --color-border: var(--color-neutral-400);

  }

}



/* 5. 减少透明度偏好 */

@media (prefers-reduced-transparency: reduce) {

  .nav-container { backdrop-filter: none; }

}



/* 6. 触摸目标最小尺寸 */

@media (hover: none) {

  a, button {

    min-height: 44px;

    min-width: 44px;

  }



  .nav-links a { min-height: 48px; }

}



/* 7. 键盘导航增强 */

.tab-focusable:focus {

  box-shadow: var(--shadow-focus);

}



/* 8. ARIA状态视觉提示 */

[aria-expanded="true"] > .expand-icon { transform: rotate(180deg); }



[aria-current="page"] {

  font-weight: var(--font-semibold);

  color: var(--color-primary-600);

}



/* 9. 输入框可访问性 */

input, textarea, select {

  font-family: inherit;

  font-size: inherit;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: var(--space-3);

  min-height: 44px;

}



input:focus, textarea:focus, select:focus {

  border-color: var(--color-primary-500);

  outline: 2px solid var(--color-primary-200);

  outline-offset: 0;

}



/* 10. 减少动效偏好强化 */

@media (prefers-reduced-motion: reduce) {

  .scroll-reveal {

    opacity: 1 !important;

    transform: none !important;

  }



  html { scroll-behavior: auto; }

}