/* The existing bordered button, also safe for links created by CKEditor 5.
 * Legacy animation layers used z-index:1 and covered unwrapped link text.
 * Keep those layers inside the button and below both plain text and .button__text.
 * Colors and animation are inherited from motion4kids.min.css, not redefined here.
 */
.button--bordered {
    isolation: isolate;
    max-width: 100%;
    overflow-wrap: break-word;
}
.button--bordered::before,
.button--bordered::after {
    z-index: -1;
    pointer-events: none;
}
.button--bordered.is-normal {
    transition: color .45s ease-in-out;
}
.button--bordered.is-normal:focus {
    color: #fff;
}
@media (min-width: 1025px) {
    .button--bordered.is-normal:hover {
        color: #fff;
    }
}
.button--bordered:focus-visible {
    outline: 3px solid #00b9e9;
    outline-offset: 4px;
}