.zm-menu {
    display: flex;
    width: 100%;

    @media screen and (min-width: 769px) {
        margin-left: var(--spacing-l);
    }
}

.zm-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;

    li {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--color-palette-main-50);
    }

    @media screen and (min-width: 769px) {
        gap: 1rem;
        flex-direction: row;

        li {
            border-bottom: 0;
        }
    }

    a {
        text-decoration: none;
    }
}

.zm-menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--color-text );
    padding: var(--spacing-s);

    &.active {
        font-weight: var(--font-heading-weight);
    }

    @media screen and (min-width: 769px) {
        height: var(--site-header-height);
        padding: 0 var(--spacing-xs);
    }

    &:hover,
    &.is-active {
        color: var(--color-text-highlight);
        text-decoration: underline;
        font-weight: bold;
        position: relative;

        @media screen and (min-width: 769px) {
            &:hover,
            &.is-active {
                text-decoration: none;
            }

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 5px;
                background-color: var(--color-text-highlight);
            }
        }
    }
}
