/*
 * Agrarium - Accessibility fixes (WCAG 2.2)
 * ------------------------------------------------------------------
 * Loaded last, from functions.php -> agrarium_css_js().
 *
 * Addresses:
 *   2.4.7  Focus Visible        (AA)
 *   2.4.13 Focus Appearance     (AAA)
 *   1.4.1  Use of Color         (A)  - link-in-text-block
 *
 * theme.css disables the focus outline in 33 places (`outline: none`).
 * Those declarations are left alone so nothing changes visually for mouse
 * users; the rules below re-instate a ring for KEYBOARD focus only, via
 * :focus-visible, and use !important to win against them.
 */

:root {
    /* Dark ring with a light halo, so it stays visible on both light and
       dark backgrounds. Override these two to match your brand. */
    --agrarium-focus-ring: #101820;
    --agrarium-focus-halo: #ffffff;
    --agrarium-focus-width: 3px;
}

/* ------------------------------------------------------------------ *
 * 2.4.7 Focus Visible / 2.4.13 Focus Appearance
 * ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible,
.elementor-button:focus-visible,
.agrarium-button:focus-visible,
.slick-arrow:focus-visible,
.slick-dots button:focus-visible,
.owl-nav button:focus-visible,
.owl-dot:focus-visible,
.menu-trigger:focus-visible,
.menu-close:focus-visible,
.search-trigger:focus-visible,
.dropdown-trigger:focus-visible,
.sub-menu-trigger:focus-visible {
    outline: var(--agrarium-focus-width) solid var(--agrarium-focus-ring) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 calc(var(--agrarium-focus-width) + 3px) var(--agrarium-focus-halo) !important;
    border-radius: 2px;
}

/* Some of the theme's triggers are plain <div>/<span> elements with click
   handlers. They are not keyboard reachable at all, so give them a tabindex
   in markup if you need them focusable - the ring above will then apply. */

/* Browsers without :focus-visible support (older Safari) fall back to :focus
   so keyboard users are never left without an indicator. */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus {
        outline: var(--agrarium-focus-width) solid var(--agrarium-focus-ring) !important;
        outline-offset: 2px !important;
    }
}

/* The focusable skip-target must not be visually hidden when focused. */
#main-content:focus {
    outline: none;
}

/* ------------------------------------------------------------------ *
 * 1.4.1 Use of Color - links inside body copy
 * ------------------------------------------------------------------
 * axe's `link-in-text-block` rule fires when a link inside a paragraph is
 * distinguished from the surrounding text by colour alone. Underlining body
 * links fixes it. Scoped to prose only - buttons, menus, cards and icon
 * links are deliberately excluded so nothing else changes appearance.
 */

.elementor-widget-text-editor .elementor-widget-container p a,
.elementor-widget-text-editor .elementor-widget-container li a,
.elementor-widget-theme-post-content p a,
.entry-content p a,
.post-content p a,
.comment-content p a,
.single-post-content p a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
}

/* Keep the underline off anything that is really a button or an icon. */
.elementor-widget-text-editor .elementor-widget-container p a.elementor-button,
.elementor-widget-text-editor .elementor-widget-container p a.agrarium-button,
.elementor-widget-text-editor .elementor-widget-container p a[class*="fa-"],
.entry-content p a.elementor-button,
.entry-content p a.agrarium-button,
.entry-content p a[class*="fa-"] {
    text-decoration: none;
}

/* Underline needs to stay on hover too, otherwise it is still colour-only
   in the default state for anyone who never hovers. */
.elementor-widget-text-editor .elementor-widget-container p a:hover,
.entry-content p a:hover,
.post-content p a:hover {
    text-decoration: underline;
}