@media (min-width: 768px) {
    .woocommerce-active .site-header .main-navigation{
        width: auto;
        float: none;
        margin-right: 0;
    }

    .main-navigation ul.menu, .main-navigation ul.nav-menu{
        margin-left: 0;
    }
}

/* make hamburger icon bigger - start */
button.menu-toggle::before,
button.menu-toggle::after,
button.menu-toggle span::before{
    height: 3px;
    width: 25px;
    background-color: #585858;
}
button.menu-toggle::before{
    transform: translateY(-8px);
}
button.menu-toggle::after{
    transform: translateY(8px);
}
button.menu-toggle span{
    font-size: 0;
}
button.menu-toggle span:before{
    transform: translateX(14px);
}
/* make hamburger icon bigger - end */

.header__navigation{
    grid-area: navigation;
    display: flex;
    justify-content: center;
    margin-top: 0;
    width: 100%;
    pointer-events: auto;
}

.header__navigation #site-navigation{
    width: 100%;
}

.header__navigation button.menu-toggle{
    border: none;
}

.header__navigation .menu-item{
    width: max-content;
    text-align: center;
    line-height: 1.2;
    font-family: var(--brand-font);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-wrap: normal;
}

/* overriding a storefront default */
.main-navigation ul ul li a,
.secondary-navigation ul ul li a{
    min-width: 200px;
    width: auto;
}

.header__navigation .main-navigation .menu-item a,
.header__navigation .main-navigation .menu-item.current-menu-item > a,
.header__navigation .main-navigation .menu-item.current-menu-parent > a{
    color: #2a4a8b;
}

.header__navigation .menu-item b{
    display: block;
}

.header__navigation nav ul.menu .menu-item a:after{
    display: none;
    content: " ";
}

.header__navigation .menu-item + .menu-item{

}

.header__navigation .primary-navigation ul.menu > li > a,
.header__navigation .primary-navigation ul.nav-menu > li > a{
    padding: 0;
}

.primary-navigation ul.menu{
    display: flex;
    background-color: transparent;
    padding: 1rem 0;
	justify-content: space-around;
}

.header__navigation .primary-navigation ul.menu .sub-menu{
    background-color: #fff;
    transform: translateX(50%);
    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 20px 20px rgba(0, 0, 0, 0.08);
        font-size: 1.8rem;
    border-radius: 3px;
}

.header__navigation .primary-navigation ul.menu .menu-item:hover > .sub-menu,
.header__navigation .primary-navigation > ul.menu > .menu-item > a:focus + .sub-menu{
    right: 50%;
    left: unset;
}

.header__navigation .primary-navigation ul.menu .sub-menu .menu-item:hover > .sub-menu,
.header__navigation .primary-navigation > ul.menu > .sub-menu > .menu-item > a:focus + .sub-menu{
    left: 100%;
    right: auto;
    transform: revert;
}

.header__navigation .primary-navigation .sub-menu .menu-item{
    text-align: left;
}

#site-navigation .handheld-navigation{
    top: -100vh;
    height: 100vh;
    max-height: 100vh;
    z-index: -1;
    background-color: #f1f1f1;
}

#site-navigation .handheld-navigation .menu-item{
    padding-left: 1rem;
    padding-right: 1rem;
}

#site-navigation.toggled .handheld-navigation{
    top: 100%;
}

.main-navigation .menu{
    visibility: visible;
    max-height: 100%;
    background-color: #fff;
}

#site-navigation .handheld-navigation .menu-item{
    display: grid;
    grid-template-areas: "label icon"
                         "submenu submenu";
    grid-template-columns: 1fr max-content;
    width: 100%;
    text-align-last: left;
}
#site-navigation .handheld-navigation .menu-item a{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    grid-area: label;
}

#site-navigation .handheld-navigation .sub-menu{
    margin-left: 0;
    grid-area: submenu;
}

#site-navigation .handheld-navigation .dropdown-toggle{
    position: relative;
    right: 0;
}

#site-navigation .handheld-navigation ul.menu li button{
    grid-area: icon;
    padding: 0;
}

#site-navigation .handheld-navigation ul.menu li button::after{
    content: "\f067";
}

#site-navigation .handheld-navigation ul.menu li button.toggled-on::after{
    content: "\f068";
    transform: rotate(0);
}

#site-navigation-menu-toggle{
    padding: 1rem 1rem 1rem 4rem;
}

@media screen and (max-width: 1000px){
    .header__navigation .primary-navigation ul.menu > li > a,
    .header__navigation .primary-navigation ul.nav-menu > li > a{
        padding: 0 1rem;
    }
}
@media screen and (max-width: 768px){
    .header__navigation .main-navigation .menu-item a,
    .header__navigation .main-navigation .menu-item.current-menu-item > a,
    .header__navigation .main-navigation .menu-item.current-menu-parent > a{
        color: #2a4a8b;
    }

    #site-navigation .handheld-navigation .menu-item{
        padding-left: 0;
        padding-right: 0;
        position: relative;
    }

    #site-navigation .handheld-navigation .menu-item .sub-menu .menu-item{
        padding-left: 3rem;
        padding-right: 3rem;
    }

    #site-navigation .handheld-navigation .menu .menu-item a{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .header__navigation .handheld-navigation > .menu > .menu-item{
        background-color: #f1f1f1;
    }

    .header__navigation .handheld-navigation > .menu > .menu-item .menu-item{
        background-color: #fff;
    }

    #site-navigation.toggled .handheld-navigation > ul,
    #site-navigation.toggled .menu > ul{
        padding: 0;
    }

    #site-navigation .handheld-navigation ul.menu li button{
        margin-right: 1rem;
    }

    #site-navigation.toggled .handheld-navigation, #site-navigation.toggled .menu{
        border-bottom: none;
    }

    /* 
        force the dropdown toggle to cover the parent menu item, 
        so that the clickable area toggles the drop down, 
        screenreaders etc will still function fine

        it's probably not the best way to do this, but it works
    */
    .dropdown-toggle:before{
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 200vw;
        height: 150%;
        z-index: 10;
        transform: translate(-50%,0);
    }
}

@media(min-width: 768px) {
    .main-navigation ul.menu ul li.menu-item-has-children>a::after,
    .main-navigation ul.menu ul li.page_item_has_children>a::after,
    .main-navigation ul.nav-menu ul li.menu-item-has-children>a::after,
    .main-navigation ul.nav-menu ul li.page_item_has_children>a::after {
        line-height: inherit;
        padding-left: 1rem;
    }
}