/* Component: cta-visit-more — label + short accent bar (::after) + arrow */

.df-cta-visit-more {
    --df-cta-visit-more-accent: var(--df-color-accent, #a107c0);
    --df-cta-visit-more-text: #3a3a42;
    --df-cta-visit-more-bar-width: 30px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding-bottom: .4rem;
    color: var(--df-cta-visit-more-text);
    font-family: var(--df-font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none
}

.df-cta-visit-more::after {
    content: "";
    position: absolute;
    left: 5px;
    bottom: 0;
    width: var(--df-cta-visit-more-bar-width);
    height: 2px;
    background: var(--df-cta-visit-more-accent);
    border-radius: 1px;
    transition: all 250ms ease-in-out
}

.df-cta-visit-more::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3px;
    height: 2px;
    background: var(--df-cta-visit-more-accent);
    border-radius: 1px;
    transition: all 250ms ease-in-out
}

.df-cta-visit-more__label {
    display: inline
}

.df-cta-visit-more__icon,
.df-cta-visit-more .df-icon--cta-arrow {
    display: block;
    flex: 0 0 auto;
    width: .9rem;
    height: .9rem;
    max-width: none;
    max-height: none;
    color: var(--df-cta-visit-more-accent);
    fill: currentColor;
    transform: rotate(0deg);
    transition: transform 250ms ease-in-out
}

.df-cta-visit-more__icon path {
    fill: none;
    stroke: currentColor
}

.df-cta-visit-more:hover,
.df-cta-visit-more:focus-visible {
    color: var(--df-cta-visit-more-text)
}

.df-cta-visit-more:hover .df-icon--cta-arrow,
.df-cta-visit-more:focus-visible .df-icon--cta-arrow,
.df-cta-visit-more:hover .df-cta-visit-more__icon,
.df-cta-visit-more:focus-visible .df-cta-visit-more__icon {
    transform: rotate(45deg)
}

.df-cta-visit-more:hover::before,
.df-cta-visit-more:focus-visible::before {
    width: 0
}

.df-cta-visit-more:hover::after,
.df-cta-visit-more:focus-visible::after {
    left: 0;
    width: 100%
}

@media (prefers-reduced-motion: reduce) {
    .df-cta-visit-more__icon,
    .df-cta-visit-more .df-icon--cta-arrow {
        transition: none
    }
}

.df-cta-visit-more:focus-visible {
    outline: 2px solid var(--df-cta-visit-more-accent);
    outline-offset: 4px;
    border-radius: .25rem
}