/* Desktop header dropdown navigation. The source rules live in _header.scss. */
@media (min-width: 1142px) {
    .site-header {
        overflow: visible;
    }

    .site-header .menu-main-menu-container > ul > li.menu-item-has-children {
        position: relative;
    }

    /* Keep the hover state active while crossing the visual gap. */
    .site-header .menu-main-menu-container > ul > li.menu-item-has-children::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: .5rem;
    }

    .site-header .menu-main-menu-container > ul > li.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: .45rem;
        height: .45rem;
        margin-left: .5rem;
        vertical-align: .15rem;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        transform: rotate(45deg);
    }

    .site-header .menu-main-menu-container > ul > li.menu-item-has-children > ul.sub-menu {
        display: none;
        position: absolute;
        top: calc(100% + .5rem);
        left: 0;
        z-index: 100;
        min-width: 14rem;
        padding: .75rem 0;
        margin: 0;
        background-color: #fff;
        box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .15);
    }

    .site-header .menu-main-menu-container > ul > li.menu-item-has-children:hover > ul.sub-menu,
    .site-header .menu-main-menu-container > ul > li.menu-item-has-children:focus-within > ul.sub-menu {
        display: block;
    }

    .site-header .menu-main-menu-container > ul > li.menu-item-has-children > ul.sub-menu > li {
        display: block;
        width: 100%;
        padding: 0;
    }

    .site-header .menu-main-menu-container > ul > li.menu-item-has-children > ul.sub-menu > li > a {
        display: block;
        padding: .45rem 1rem;
        white-space: nowrap;
    }
}