/* rising underline on hover */

@media (min-width: 769px) {
    .main-navigation .main-nav ul li > a {
        /*box-shadow: 0 -4px 0px #0088ff inset;*/
        padding-bottom: 2px;
        transition: all 300ms ease-in-out;
        margin: 0 15px;
    }
}

.main-navigation .main-nav ul li:hover > a {
    /*box-shadow: 0 -12px 0px #0088ff inset;*/
}


/* horizontal rule on hover */

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 2px;
        background-color: var(--contrast);
        transition: all 300ms ease-in-out;
    }
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after {
    width: 50px;
}