/* [dls_service_areas]: inherits the footer's colour and font so it fits any site's footer. */

.dls-areas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 22px;
    color: inherit;
    font-family: inherit;
    font-size: 0.9rem;
}

.dls-areas__label {
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
}

.dls-areas .dls-areas__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dls-areas .dls-areas__list a {
    border-bottom: 1px solid transparent;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s;
}

.dls-areas .dls-areas__list a:hover,
.dls-areas .dls-areas__list a:focus-visible {
    border-bottom-color: currentColor;
}