/**
 * Topic chips shown near the top of a single resource.
 *
 * These sit inside .resource-meta-details, which carries a 4rem bottom padding
 * and an absolutely positioned accent bar at its bottom edge, so the chips only
 * need a top margin to separate them from the author and date fields.
 */

.resource-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style-type: none;
    margin: 3rem 0 0 0;
    padding: 0;
}

.resource-topic {
    margin: 0;
    padding: 0;
}

.resource-topic-link {
    background-color: var(--color-light-gray);
    border-radius: 3rem;
    color: var(--color-apex42-oxford-blue);
    display: inline-block;
    font-size: var(--font-body-medium-small);
    line-height: 1;
    padding: 1.2rem 2.4rem;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/**
 * Scoped to the anchor on purpose. While the term archives are not being linked
 * to, a topic renders as a span, and a hover state on something that cannot be
 * clicked reads as a broken control. Restoring the link restores the hover.
 */
a.resource-topic-link:hover,
a.resource-topic-link:focus {
    background-color: var(--color-apex42-teal);
    color: var(--color-primary-white);
}