body {
    --primary-navigation-menu-foreground: black;
    --primary-navigation-menu-background: white;
    --primary-navigation-menu-submenu-background: #CCC;
}

nav#primary-navigation.horizontal-navigation {
    color: var(--primary-navigation-menu-foreground);
    background-color: var(--primary-navigation-menu-background);
    font-size: 1.2em;
    line-height: 1.375;
}
/* List */
nav#primary-navigation.horizontal-navigation ul.menu {
    display: flex;
    flex-wrap: wrap;
    margin: initial;  /* Reset margin to override browser defaults */
    padding: 0 1.4em;
}
/* Item */
nav#primary-navigation.horizontal-navigation ul.menu li.menu-item {
    flex: none;
    border: none;
    /* border-bottom: 0.0625rem solid #C8C8C8; */
    break-inside: avoid;
    margin: 0;
    padding: 0.1em 0;
    vertical-align: baseline;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    list-style: none;
}
/* Link */
nav#primary-navigation.horizontal-navigation.navigation-menu-item-dividers ul.menu > li.menu-item:nth-child(n+2) > a {
    border-left: 2px solid color-mix(transparent, var(--primary-navigation-menu-foreground));
}
nav#primary-navigation.horizontal-navigation li.menu-item > a {
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
/* Link text */
nav#primary-navigation.horizontal-navigation li.menu-item > a {
    padding: 0.1em 1em;
    min-height: 2em;
    cursor: pointer;
}
nav#primary-navigation.horizontal-navigation li.menu-item.current-menu-item > a > .navigation-menu-item-link-text,
nav#primary-navigation.horizontal-navigation li.menu-item > a:hover > .navigation-menu-item-link-text,
nav#primary-navigation.horizontal-navigation li.menu-item.manually-expanded > a > .navigation-menu-item-link-text {
    border-bottom-color: var(--primary-navigation-menu-foreground);
}
.navigation-menu-item-link-text {
    padding: 0.3em 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transition: border-bottom-color 0.2s ease-in-out;
}
/* Submenus */
nav#primary-navigation.horizontal-navigation li.menu-item > ul.sub-menu {
    display: none;
}
nav#primary-navigation.horizontal-navigation li.menu-item:hover > ul.sub-menu,
nav#primary-navigation.horizontal-navigation li.menu-item.manually-expanded > ul.sub-menu {
    display: block;
    position: absolute;
    box-shadow: 0 1px 5px 1px var(--primary-navigation-menu-foreground);
    z-index: 1000;
    padding-inline-start: 0;
    background-color: var(--primary-navigation-menu-background);
    /*  border: 1px solid var(--primary-navigation-menu-foreground);
        border-top: 0;  /* */
}
nav#primary-navigation.horizontal-navigation li.menu-item > ul.sub-menu > li.menu-item {
    border-bottom: 1px solid var(--primary-navigation-menu-foreground);
}
nav#primary-navigation.horizontal-navigation li.menu-item:hover > ul.sub-menu {
    /*background-color: color-mix(var(--primary-navigation-menu-background), transparent 10%);*/
}




#pagecanvas-hamburger-menu {
    display: none;
}

@media (max-width: 800px) {

    header#header {
        --pagecanvas-hamburger-svg-size: 53px;
        --pagecanvas-hamburger-svg-padding: 16px;
    }

    #logo-row {
        margin: 0 auto;
    }

    #logo-row > #minipage-sidebar-logo {
        margin: 0 var(--pagecanvas-hamburger-svg-size)
    }

    nav#primary-navigation.horizontal-navigation {
        display: none;
    }

    #pagecanvas-hamburger-menu {
        display: flex;
        flex-direction: column;
        z-index: 1000;
        position: absolute;
        top: 0;
        right: 0;
    }

    #pagecanvas-hamburger-menu > svg {
        width: calc(var(--pagecanvas-hamburger-svg-size) - var(--pagecanvas-hamburger-svg-padding) * 2);
        height: calc(var(--pagecanvas-hamburger-svg-size) - var(--pagecanvas-hamburger-svg-padding) * 2);
        display: inline-block;
        margin: 0 0 0 auto;
        cursor: pointer;
        padding: var(--pagecanvas-hamburger-svg-padding);
        color: var(--primary-navigation-menu-foreground);
        background-color: transparent;
    }

    #pagecanvas-hamburger-menu.expanded > svg {
        --pagecanvas-hamburger-svg-padding: 8px;
        color: var(--primary-navigation-menu-background);
        background-color: var(--primary-navigation-menu-foreground);
    }

    #pagecanvas-hamburger-menu > #pagecanvas-hamburger-menu-dropdown {
        display: none;
    }

    #pagecanvas-hamburger-menu.expanded > #pagecanvas-hamburger-menu-dropdown {
        display: block;
    }

    #pagecanvas-hamburger-menu .submenu > .menu-item > svg.chevron {
        margin: auto 0 auto auto;
        font-weight: normal;
        opacity: 1;
        width: 0.8em;
        height: 0.8em;
        padding: 0.25em 0;
        vertical-align: middle;
        text-align: right;
        color: var(--primary-navigation-menu-foreground);
    }

    #pagecanvas-hamburger-menu .submenu.collapsed-submenu > .menu-item > svg.chevron {
        transform: rotate(180deg);
        padding-right: 1.2em;
    }

    #pagecanvas-hamburger-menu .submenu.collapsed-submenu > .menu-item-list {
        display: none;
    }

    #pagecanvas-hamburger-menu .menu-item {
        background-color: var(--primary-navigation-menu-background);
        color: var(--primary-navigation-menu-foreground);
        padding: 0.5em 1em;
        margin: 0;

        font-size: 16pt;
        font-weight: bold;
        font-family: "Arial", sans-serif;
        text-decoration: none;
        display: flex;
        align-items: center;
        cursor: pointer;

        border-top: 1px solid var(--primary-navigation-menu-foreground);
    }

    #pagecanvas-hamburger-menu > #pagecanvas-hamburger-menu-dropdown > .menu-item:first-child {
        border-top-color: transparent;
    }

    #pagecanvas-hamburger-menu .submenu .menu-item-list .menu-item {
        background-color: var(--primary-navigation-menu-submenu-background);
        padding-left: 2em;
    }

    #pagecanvas-hamburger-menu .menu-item:hover {
        text-decoration: underline;
    }

}