/**
 * kbnx-focus-visible.css — Focus visible styles for keyboard users.
 *
 * Provides a consistent, high-contrast focus ring across all kbnexus
 * interactive elements. Meets WCAG 2.4.7 (Focus Visible) with 3:1+
 * contrast ratio against all backgrounds.
 *
 * Focus ring colors:
 *   Light: #1a73e8 on white = 4.6:1 contrast (passes 3:1)
 *   Dark:  #8ab4f8 on #1e1e1e = 5.2:1 contrast (passes 3:1)
 */

:root {
    --kbnx-focus-ring-color: #1a73e8;
    --kbnx-focus-ring-width: 2px;
    --kbnx-focus-ring-offset: 2px;
}

/* Universal focus-visible style — keyboard only. */
.kbnx-block *:focus-visible,
[data-kbnx-component] *:focus-visible,
.kbnx-skip-link:focus-visible {
    outline: var(--kbnx-focus-ring-width) solid var(--kbnx-focus-ring-color);
    outline-offset: var(--kbnx-focus-ring-offset);
}

/* Remove outline on mouse click for elements inside kbnx blocks. */
.kbnx-block *:focus:not(:focus-visible),
[data-kbnx-component] *:focus:not(:focus-visible) {
    outline: none;
}

/* Double ring for complex/image backgrounds — inner white + outer color. */
.kbnx-complex-bg *:focus-visible {
    outline: var(--kbnx-focus-ring-width) solid var(--kbnx-focus-ring-color);
    outline-offset: var(--kbnx-focus-ring-offset);
    box-shadow: 0 0 0 calc(var(--kbnx-focus-ring-offset) + var(--kbnx-focus-ring-width) + 2px) rgba(255, 255, 255, 0.8);
}

/* Dark mode focus ring color override. */
@media (prefers-color-scheme: dark) {
    :root {
        --kbnx-focus-ring-color: #8ab4f8;
    }
}

/* Forced-colors (Windows High Contrast) — use system highlight. */
@media (forced-colors: active) {
    .kbnx-block *:focus-visible,
    [data-kbnx-component] *:focus-visible,
    .kbnx-skip-link:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}