/* Link-arrow component: animated underline + sliding arrow. Also the arrow for pill/solid buttons. */
:root,
[data-theme="light"] {
    --link-color: var(--color-emerald-700);
    --link-color-hover: var(--color-emerald-900);
    --link-ring: var(--color-emerald-600);
}

[data-theme="dark"] {
    --link-color: var(--color-emerald-300);
    --link-color-hover: #ffffff;
    --link-ring: var(--color-emerald-300);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--link-color);
    border-radius: 6px;
    transition: color 0.2s ease;
}

.link-arrow__text {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    padding-bottom: 2px;
    transition: background-size 0.3s ease;
}

.link-arrow__icon {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.link-arrow:hover,
.link-arrow:focus-visible {
    color: var(--link-color-hover);
}

.link-arrow:hover .link-arrow__text,
.link-arrow:focus-visible .link-arrow__text {
    background-size: 100% 2px;
}

.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon {
    transform: translateX(4px);
}

.link-arrow:focus-visible {
    outline: 3px solid var(--link-ring);
    outline-offset: 3px;
}

/* Button variants keep the .btn look; no underline, only the arrow moves. */
.link-arrow--pill {
    color: var(--color-btn-outline-text);
}

.link-arrow--pill:hover {
    color: var(--color-btn-primary-text);
}

.link-arrow--pill:focus-visible {
    color: var(--color-btn-primary-text); /* Bootstrap fills the button on focus-visible */
}

.link-arrow--solid,
.link-arrow--solid:hover,
.link-arrow--solid:focus-visible {
    color: var(--color-btn-primary-text);
}

.link-arrow--pill .link-arrow__text,
.link-arrow--solid .link-arrow__text {
    background-image: none;
    padding-bottom: 0;
}

.link-arrow--pill:focus-visible,
.link-arrow--solid:focus-visible {
    outline-offset: 2px;
}

/* Row of related links (replaces " · " separated lists) */
.link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-row {
    margin-top: 0.25rem;
}

/* On gradient CTA banners */
.cta-banner .link-arrow--pill {
    color: #fff;
}

.cta-banner .link-arrow--pill:hover {
    color: var(--color-emerald-800);
}

.cta-banner .link-arrow--pill:focus-visible {
    color: var(--color-emerald-800);
}

.cta-banner .link-arrow:focus-visible,
.carousel-caption .link-arrow:focus-visible {
    outline-color: #fff;
}

/* Footer links: reuse the underline reveal */
.footer-links a,
.footer-nap a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: color 0.2s, background-size 0.3s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-nap a:hover,
.footer-nap a:focus-visible {
    background-size: 100% 1px;
}

.footer-links a:focus-visible,
.footer-nap a:focus-visible {
    outline: 2px solid var(--color-emerald-300);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .link-arrow,
    .link-arrow__text,
    .link-arrow__icon,
    .footer-links a,
    .footer-nap a {
        transition: none;
    }

    .link-arrow:hover .link-arrow__icon,
    .link-arrow:focus-visible .link-arrow__icon {
        transform: none;
    }
}