.page-menu-navigation{
    max-width: 100%;
    margin: var(--block-margin) 0;
}

.page-menu-navigation-menu{
    position: sticky;
    top: calc(var(--fixed-header-height) + var(--admin-bar-height));
    left: 0;
    width: 100%;
    margin-bottom: var(--block-margin);
    z-index: 50;
    background: var(--background-color);
    padding: 1rem 0 0;
}

.page-menu-navigation-menu nav{
    max-width: 100%;
    margin: 0 auto;
}

.page-menu-navigation-menu ul{
    display: flex;
    margin: 0;
    padding: 0 var(--page-padding);
    overflow: auto;
}

.page-menu-navigation-menu ul li{
    display: block;
    list-style: none;
    flex-grow: 1;
}

.page-menu-navigation-menu ul li a{
    font: var(--font-elevated-2);
    display: block;
    padding: 0 0.5em;
    text-align: center;
    border-bottom: 0.2rem solid transparent;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.5;
    position: relative;
}

.page-menu-navigation-menu ul li a:is(:hover, :focus, :active, .active){
    color: var(--accent-color);
    opacity: 1;
}

.page-menu-navigation-menu ul li a.active{
    border-bottom-color: var(--accent-color);
    opacity: 1; 
}

.page-menu-navigation-menu ul li a::before{
    content: '';
    display: block;
    position: absolute;
    bottom: -0.2rem;
    left: 0;
    border-top: 0.1rem solid;
    opacity: 0.2;
    width: 100%;
}

@media (min-width: 768px){
    .page-menu-navigation-menu nav{
        max-width: var(--wide-width);
    }

    .page-menu-navigation-menu ul{
        padding: 0;
    }

    .page-menu-navigation-menu ul li a{
        font: var(--font-elevated-2);
    }
}