/* CTA Link — shared filled-button link pattern
 * Used in: footer (support, listserv), publication sidebar (Where to Find), etc.
 *
 * Usage: <a href="…" class="cta-link">Label <svg>…</svg></a>
 * On dark backgrounds add: class="cta-link cta-link--on-dark"
 */

.cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-neutral-warm-dark);
    color: var(--color-white);
    text-decoration-line: none;
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    border: none;
    transition: background-color var(--transition-base);
}

.cta-link:hover,
.cta-link:focus-visible {
    background-color: var(--color-neutral-warm-dark-hover);
    color: var(--color-white);
    text-decoration-line: none;
}

.cta-link:focus-visible {
    outline: 2px solid var(--color-berkeley-blue);
    outline-offset: 2px;
}

/* On dark backgrounds — lighter focus ring */
.cta-link--on-dark:focus-visible {
    outline-color: var(--color-blue-light);
}

/* Icon inside link — inherits color, fixed size */
.cta-link svg,
.cta-link img {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

/* Stack variant — full-width block links */
.cta-link--block {
    display: flex;
    justify-content: space-between;
}