/**
 * Focus Indicators — WCAG 2.4.7 / 2.4.11
 * Aravrit Accessibility Plugin
 *
 * Strategy:
 * - Remove browser default outlines (which are often invisible)
 * - Replace with a consistent, high-contrast focus ring
 * - Use :focus-visible to avoid showing rings on mouse click (better UX)
 * - Ensure 3:1 contrast ratio for focus indicator against adjacent colors
 */

/* ── Global focus ring ────────────────────────────────────────────────── */

*:focus {
    outline: 3px solid #0066cc;
    outline-offset: 3px;
}

/* Use :focus-visible for mouse users — no ring on click, ring on keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Links ────────────────────────────────────────────────────────────── */

a:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    text-decoration: underline;
}

/* Dark background links (footer, hero overlays) */
.dark-bg a:focus-visible,
footer a:focus-visible,
.site-footer a:focus-visible {
    outline-color: #66b3ff;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
.button:focus-visible,
.btn:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #place_order:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(0, 102, 204, 0.25);
}

/* ── Form inputs ──────────────────────────────────────────────────────── */

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 0;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
    border-color: #0066cc;
}

/* ── Navigation items ─────────────────────────────────────────────────── */

nav a:focus-visible,
.main-navigation a:focus-visible,
.site-navigation a:focus-visible,
header nav a:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 3px;
    background-color: rgba(0, 102, 204, 0.08);
    border-radius: 3px;
}

/* ── WooCommerce specific ─────────────────────────────────────────────── */

.products .product a:focus-visible,
.woocommerce-loop-product__link:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 4px;
}

.quantity input:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 0;
}

/* ── Cart & checkout ──────────────────────────────────────────────────── */

.cart-contents:focus-visible,
a.cart-contents:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 4px;
    border-radius: 50%;
}

/* ── Mobile menu toggle ───────────────────────────────────────────────── */

.menu-toggle:focus-visible,
button.hamburger:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 4px;
}

/* ── Social/icon links ────────────────────────────────────────────────── */

.social-links a:focus-visible,
[class*="social"] a:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 4px;
    border-radius: 50%;
}

/* ── Skip link (when focused) ─────────────────────────────────────────── */

.aravrit-skip-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -3px;
}

/* ── Ensure touch targets are large enough (WCAG 2.5.5) ─────────────── */

button,
[role="button"],
a.button,
.button,
input[type="submit"],
input[type="button"],
.woocommerce button.button,
.menu-toggle,
.cart-contents {
    min-height: 44px;
    min-width: 44px;
    /* padding adjusts inline elements — visual only, doesn't affect block */
}

/* Small utility buttons that can't be 44px — use padding instead */
.woocommerce a.remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 4px;
}