/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — ui.accessibility
   Classification : System | Accessibility | Focus & Live Announcer
   Version        : 3.3.0
   File           : /tools/modules/ui.accessibility/ui.accessibility.css
   Maintainer     : DΛREΛKT_ CORE UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

@layer ui.accessibility {

  /* ─── Skiplink ─────────────────────────────────────────────────────────────── */
  .skiplink {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ui-skiplink-bg, #000);
    color: var(--ui-skiplink-fg, #fff);
    padding: var(--ui-skiplink-pad, 0.5rem 1rem);
    font-size: var(--ui-skiplink-size, 0.95rem);
    border-radius: var(--ui-skiplink-radius, 4px);
    z-index: 10000;
    text-decoration: none;
    transition: top 0.3s ease, background 0.2s ease, color 0.2s ease;
  }

  .skiplink:focus,
  .skiplink:active {
    top: 0;
    background: var(--ui-skiplink-bg-focus, #111);
    color: var(--ui-skiplink-fg-focus, #fff);
  }

  /* ─── Focus Visibility Layer ──────────────────────────────────────────────── */
  .focus-visible *:focus {
    outline: 2px solid var(--ui-accent, #ff4444);
    outline-offset: 2px;
  }

  /* ─── Screen Reader Only Utility ──────────────────────────────────────────── */
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ─── Accessibility Debug (Optional) ─────────────────────────────────────────
     Uncomment for diagnostics of accessibility regions or skiplinks
  [data-debug-a11y="true"] .skiplink {
    top: 0 !important;
    opacity: 0.7;
  }
  ----------------------------------------------------------------------------- */
}