/*
 * ═══════════════════════════════════════════════════════════════
 * Kevron Group — Accessibility Globals (WCAG 2.2)
 * Focus-visible for non-form elements, touch-target safety,
 * aria-live region styling, and additional a11y utilities.
 *
 * Loaded AFTER app.css. app.css handles:
 *   - Reduced motion        (☑)
 *   - Input focus rings      (☑)
 *   - High-contrast mode     (☑)
 *   - Font-size overrides    (☑)
 *   - Skip-to-content link   (☑ in header.php)
 *   - Print styles           (☑)
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── Focus-Visible: Non-form Interactive Elements ──────────── */

/* Buttons, links, cards — always show a visible focus ring on
   keyboard navigation but suppress it on mouse clicks.
   Uses :focus-visible (supported in all modern browsers).       */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent, #0078C0);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Cards that are links or have tabindex */
.kv-card:focus-visible {
  outline: 2px solid var(--accent, #0078C0);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-focus-ring, rgba(0, 120, 192, 0.2));
}

/* Remove the default outline for mouse-click focus
   while keeping :focus-visible for keyboard users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Touch-Target Safety (WCAG 2.5.8 – Target Size) ───────── */

/* Ensure minimum 44×44px target area for touch devices.
   Uses @media (pointer: coarse) so desktop mouse users
   are not affected by the spacing increase.                     */

@media (pointer: coarse) {
  /* Inline actions and small clickable elements */
  a:not(.kv-btn):not(.kv-btn-progressive),
  button:not(.kv-btn):not(.kv-btn-progressive):not(.kv-btn-sm) {
    min-height: 44px;
    min-width: 44px;
  }

  /* Small buttons get touch padding boost */
  .kv-btn-sm {
    min-height: 44px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Table action buttons */
  td a, td button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Chips and inline dismisses */
  .chip-remove {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ─── Live Region Styles ────────────────────────────────────── */

/* Screen-reader-only live regions that announce dynamic status
   (timer warnings, save confirmations, toast messages, etc.)    */

.sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible timer warning (non-sr-only) — used in quiz player */
.timer-warning-banner {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-card, 0.1rem);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.timer-warning-banner--urgent {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.timer-warning-banner--caution {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ─── Color-Independent State Indicators ────────────────────── */

/* Progress bars — add a subtle pattern for non-color indication */
.progress-patterned {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.15) 4px,
    rgba(255, 255, 255, 0.15) 8px
  );
}

/* Status indicators with text + icon (never color alone) */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.72rem;
  font-weight: 500;
}
.status-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-indicator--active::before { background: #22c55e; }
.status-indicator--warning::before { background: #f59e0b; }
.status-indicator--error::before { background: #ef4444; }
.status-indicator--inactive::before { background: #9ca3af; border: 1px solid #6b7280; }

/* ─── Forced Colors (Windows High Contrast Mode) ────────────── */

@media (forced-colors: active) {
  .kv-btn,
  .kv-btn-progressive,
  .kv-card {
    border: 1px solid ButtonText;
  }
  .kv-btn::before,
  .kv-btn-progressive::before,
  .kv-btn-progressive::after {
    display: none;
  }
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid Highlight;
  }
  .status-indicator::before {
    forced-color-adjust: none;
  }
}

/* ─── Accessible Data Tables ────────────────────────────────── */

/* Ensure table headers are distinguishable */
table[role="grid"] th[aria-sort] {
  cursor: pointer;
  user-select: none;
}
table[role="grid"] th[aria-sort]::after {
  content: ' ↕';
  font-size: 0.7em;
  opacity: 0.4;
}
table[role="grid"] th[aria-sort="ascending"]::after {
  content: ' ↑';
  opacity: 1;
}
table[role="grid"] th[aria-sort="descending"]::after {
  content: ' ↓';
  opacity: 1;
}

/* Row keyboard focus */
table[role="grid"] tr:focus-visible {
  outline: 2px solid var(--accent, #0078C0);
  outline-offset: -2px;
}


/* ─── Media & Dark Mode Integrity (Section 23) ──────────────── */
/* Never invert project photographs, partner logos, or client marks in dark mode */
[data-theme="dark"] img,
[data-theme="dark"] picture,
[data-theme="dark"] video,
[data-theme="dark"] .logo,
[data-theme="dark"] .brand-logo {
  filter: none !important;
}

/* ─── Universal Reduced Motion Enforcement ──────────────────── */
@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;
  }
}