/**
 * Builder-agnostic styles: focus visibility + skip link. Colors come
 * from CSS custom properties set server-side (see WPA_Frontend::enqueue)
 * from the plugin's Settings screen, so this file never needs editing.
 */

:root {
    --wpa-focus-outline-color: #ff0000;
    --wpa-skip-link-background: #ffffff;
    --wpa-skip-link-text: #000000;
}

/* ------ Keyboard Focus ------ */

/*
 * !important + a repeated-class specificity boost, deliberately.
 *
 * Confirmed live on a real Divi site (pc-designs-divi-5, /services/):
 * the Theme Builder header's own generated menu CSS ships
 * `outline: none !important` on every nav link (Divi routinely
 * strips the native focus ring as part of a module's "clean look"
 * styling, without the person building it realizing they just broke
 * keyboard navigation). A plain, unweighted rule here loses that
 * fight on both specificity and !important, so the whole point of
 * this fix — a visible focus indicator — silently does nothing on
 * exactly the sites that need it fixed.
 *
 * Repeating the same class 4x doesn't require anything extra in the
 * markup (it's the one already-applied `wpa-focus-outline` body
 * class matched 4 times), but it multiplies this selector's class
 * specificity component past what realistic page-builder-generated
 * CSS uses — reliable without resorting to inline styles or a JS
 * style-recalc loop.
 */
.wpa-focus-outline.wpa-focus-outline.wpa-focus-outline.wpa-focus-outline :focus-visible {
    outline: 0.25rem solid var(--wpa-focus-outline-color) !important;
    outline-offset: 2px !important;
}

/* ------ Skip Link ------ */

.wpa-skip-link {
    position: absolute;
    top: -4rem;
    left: 0;
    background-color: var(--wpa-skip-link-background);
    color: var(--wpa-skip-link-text);
    padding: 1rem;
    text-align: center;
    z-index: 999999;
    transition: top 0.2s ease-in-out;
}

.wpa-skip-link:focus {
    top: 0;
}