header#header {
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0.3em 0;
}

#logo-row {
    flex-grow: 0;
    flex-shrink: 0;
}

#logo-row .custom-logo-link > img {
    width: 100%;
    height: clamp(50px, 100vmin, 150px);
    display: block;
}





@media (max-width: 900px) {

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

    nav#primary-navigation {
        display: none;
    }

    #logo-row {
        margin: 0 auto;
    }

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

    #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;
    }

}