/**
 * === Accessibility CSS - Focus, Motion, Transparency, Tap Targets ===
 *
 * Mô tả: Stylesheet global cho các override accessibility (a11y).
 *        Áp dụng trên toàn trang để đảm bảo WCAG 2.1 AA compliance.
 *
 * Flow:
 *   1. Universal focus ring dùng :focus-visible (keyboard only)
 *   2. Xóa default focus outline cho mouse interaction
 *   3. Tap target tối thiểu 44x44px cho interactive elements
 *   4. Input minimum 48px height + font 16px (iOS auto-zoom prevention)
 *   5. prefers-reduced-motion: minimize animation/transition duration
 *   6. prefers-reduced-transparency: solid backgrounds thay glass
 *   7. prefers-contrast: more — tăng border width và focus outline
 *   8. Focus-within cho compound widgets (dropdown, has-dropdown)
 *   9. aria-hidden và aria-current visual utilities
 *
 * Depends on: design-tokens.css (--color-focus, --color-surface, etc.)
 */

/* ============================================================
   1. Universal focus ring (keyboard only)
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove default outline cho mouse — chỉ giữ cho keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   2. Tap target minimums — 44x44px (WCAG 2.5.5)
   ============================================================ */

button:not(.btn-icon-inline),
a.btn,
[role="button"]:not(.btn-inline),
input[type="submit"],
input[type="button"],
.tab,
.accordion-toggle,
.faq-toggle {
  min-height: 44px;
  min-width: 44px;
}

/* ============================================================
   3. Input minimum height + iOS no-zoom font size
   ============================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  min-height: 48px;
  font-size: var(--text-body-lg);
}

/* ============================================================
   4. Reduced motion — tắt animation/transition
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal animation elements: hiển thị ngay không cần animate */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Scroll-driven animations reset */
  .timeline-item,
  .stepper-step,
  .fade-in,
  .slide-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   5. Reduced transparency — glass surfaces thành solid
   ============================================================ */

@media (prefers-reduced-transparency: reduce) {
  .glass-surface,
  .home-glass-subtle,
  .home-glass-medium,
  .home-glass-strong {
    background: var(--color-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--color-ink-950) !important;
  }

  /* Header glass khi sticky */
  .site-header.is-sticky,
  .site-header--glass {
    background: var(--color-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ============================================================
   6. High contrast mode (Windows forced colors)
   ============================================================ */

@media (prefers-contrast: more) {
  button,
  .btn,
  input,
  select,
  textarea {
    border-width: 2px !important;
  }

  :focus-visible {
    outline-width: 3px !important;
  }
}

/* ============================================================
   7. Focus-within cho compound widgets
   ============================================================ */

.dropdown:focus-within > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-panel {
  display: block;
}

/* ============================================================
   8. aria-hidden — ngăn pointer interaction
   ============================================================ */

[aria-hidden="true"] {
  pointer-events: none;
}

/* ============================================================
   9. aria-current — visual indicator cho nav active link
   ============================================================ */

[aria-current="page"] {
  font-weight: var(--weight-semibold);
}

/* ============================================================
   10. Screen-reader only utility (verify với base.css)
   ============================================================ */

.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;
}