/*
 * K&E ACF Elementor Bridge — button chevrons
 *
 * IMPORTANT:
 * This stylesheet ONLY adds the arrow icon.
 * It must not change the existing button styling/layout.
 */

:root {
    --ke-button-chevron-url: url("/wp-content/uploads/2026/08/chevron-right-solid.svg");
    --ke-button-chevron-red: var(--e-global-color-accent, #E20020);
    --ke-button-chevron-white: #fff;
}

/*
 * Scope everything to K&E bridge sections so existing site-wide .ke_btn
 * components outside the bridge remain completely untouched.
 *
 * Existing .clean text-link buttons are intentionally excluded.
 */

/* Normal wrapper button: <div class="ke_btn"><a>...</a></div> */
:is(.ke-section, .ke_section)
.ke_btn:not(.bright):not(.ghost):not(.is-ghost):not(.clean) > a {
    position: relative;
}

:is(.ke-section, .ke_section)
.ke_btn:not(.bright):not(.ghost):not(.is-ghost):not(.clean) > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--ke-button-chevron-red);
    -webkit-mask: var(--ke-button-chevron-url) center / contain no-repeat;
    mask: var(--ke-button-chevron-url) center / contain no-repeat;
    pointer-events: none;
}

/* Direct interactive button: <a/button class="ke_btn"> */
:is(.ke-section, .ke_section)
:is(a.ke_btn, button.ke_btn):not(.bright):not(.ghost):not(.is-ghost):not(.clean) {
    position: relative;
}

:is(.ke-section, .ke_section)
:is(a.ke_btn, button.ke_btn):not(.bright):not(.ghost):not(.is-ghost):not(.clean)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--ke-button-chevron-red);
    -webkit-mask: var(--ke-button-chevron-url) center / contain no-repeat;
    mask: var(--ke-button-chevron-url) center / contain no-repeat;
    pointer-events: none;
}

/* Ghost / transparent buttons: white arrow, no extra outer indentation. */
:is(.ke-section, .ke_section)
:is(.ke_btn.bright, .ke_btn.ghost, .ke_btn.is-ghost) > a {
    position: relative;
}

:is(.ke-section, .ke_section)
:is(.ke_btn.bright, .ke_btn.ghost, .ke_btn.is-ghost) > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--ke-button-chevron-white);
    -webkit-mask: var(--ke-button-chevron-url) center / contain no-repeat;
    mask: var(--ke-button-chevron-url) center / contain no-repeat;
    pointer-events: none;
}

:is(.ke-section, .ke_section)
:is(a.ke_btn.bright, a.ke_btn.ghost, a.ke_btn.is-ghost,
    button.ke_btn.bright, button.ke_btn.ghost, button.ke_btn.is-ghost) {
    position: relative;
}

:is(.ke-section, .ke_section)
:is(a.ke_btn.bright, a.ke_btn.ghost, a.ke_btn.is-ghost,
    button.ke_btn.bright, button.ke_btn.ghost, button.ke_btn.is-ghost)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--ke-button-chevron-white);
    -webkit-mask: var(--ke-button-chevron-url) center / contain no-repeat;
    mask: var(--ke-button-chevron-url) center / contain no-repeat;
    pointer-events: none;
}