.underline a {
    transition: all 0.2s ease; cursor: pointer; /*font-weight: 700;*/
    text-decoration: none;
    padding: 1px 0;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 0 1px, 100% 1px;
    transition: background-size .3s;

}

.underline a:hover {
    background-size: 100% 1px, 100% 1px

}
.underline a:focus-visible {
    box-shadow: 0 0 0 3px var(--green);

}

.underline.cats a { background-size: 0 2px, 100% 2px; }
.underline.cats a:hover {  background-size: 100% 2px, 100% 2px  }


.acf-field-message a,
.underline_shown a{
    color: inherit;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 1px, 100% 1px;
    transition: background-size .2s;
}
.acf-field-message a:is(:hover,:focus-visible),
.underline_shown a:is(:hover,:focus-visible) {
    color: black;
    background-image: linear-gradient(var(--green-lightest), var(--green-lightest)), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-size: 100% 100%, 100% 100%;
    transition: background-size .2s;
}