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

.page-navigation:has(+ .section-background){
    margin-bottom: 0;
}

.page-navigation-menu{
    position: sticky;
    top: calc(var(--fixed-header-height) + var(--admin-bar-height) + (var(--item-row-gap) / 2));
    left: 0;
    width: 100%;
    margin-bottom: var(--block-margin);
    z-index: 50;
}

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

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

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

.page-navigation-menu ul li a{
    display: block;
    padding: calc(var(--item-row-gap) / 2) calc(var(--item-column-gap) / 2);
    text-align: center;
    text-transform: uppercase;
    border: 0.1rem solid var(--text-color);
    border-radius: 4rem;
    background: var(--background-color);
    text-decoration: none;
    white-space: nowrap;
}

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

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

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

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