/**
 * GF-02 Service-Navigation
 */

.service-navigation__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;

    /* Below the wide breakpoint the links stand under one another rather than in a row — a change
       of direction, which is what earns the query. */
    @media (width < 64rem) {
        flex-direction: column;
        gap: 0.75rem;
        /* The rows measure the line the links are set on, or an entry keeps the taller line of the
           sheet around it and the 12px between two of them read as 14. */
        line-height: 1.625rem;
    }
}

.service-navigation__link {
    color: var(--sav-color-dunkelblau);
    font-size: var(--sav-text-xs-size);
    line-height: var(--sav-text-xs-line);
    text-decoration: none;

    /* Stacked, the design gives the links the size the wide header's row carries rather than the
       smaller one a narrow screen would interpolate to. */
    @media (width < 64rem) {
        font-size: 1rem;
        line-height: 1.625rem;
    }

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
        text-decoration: underline;
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}