/* === Navigation === */

@media screen and (min-width: 600px) {
    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
        background: var(--wp--preset--color--accent) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 6px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
        padding: 0 !important;
        min-width: 240px !important;
        z-index: 9999 !important;
    }

    /* Keep the dropdown connected to its parent across the visual gap. */
    header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
        top: calc(100% + 19px) !important;
    }

    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu::before {
        content: "";
        position: absolute;
        top: -21px;
        left: 0;
        right: 0;
        height: 21px;
    }

    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li.wp-block-navigation-item {
        background-color: transparent;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        margin: 0;
        width: 100%;
        min-height: 48px;
    }

    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li.wp-block-navigation-item:last-child {
        border-bottom: 0;
    }

    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item__content {
        padding: 16px 24px !important;
        color: #fff !important;
        width: 100%;
        box-sizing: border-box;
        line-height: 1.35;
    }

    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item__label {
        color: #fff !important;
    }

    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu a.wp-block-navigation-item__content:hover,
    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li.wp-block-navigation-item:hover {
        background: #3d5b8c !important;
        color: #fff !important;
        border-radius: 0 !important;
    }

    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu a.wp-block-navigation-item__content:hover,
    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu a.wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu a.wp-block-navigation-item__content:focus,
    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu a.wp-block-navigation-item__content:focus .wp-block-navigation-item__label {
        color: #fff !important;
    }

    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li.wp-block-navigation-item:first-child a.wp-block-navigation-item__content:hover,
    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li.wp-block-navigation-item:first-child:hover {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li.wp-block-navigation-item:last-child a.wp-block-navigation-item__content:hover,
    header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li.wp-block-navigation-item:last-child:hover {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    /* Beat the parent theme's generic header hover color. */
    header nav.wp-block-navigation .wp-block-navigation-item a.wp-block-navigation-item__content:hover,
    header nav.wp-block-navigation .wp-block-navigation-item a.wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
    header nav.wp-block-navigation .wp-block-navigation-item a.wp-block-navigation-item__content:focus,
    header nav.wp-block-navigation .wp-block-navigation-item a.wp-block-navigation-item__content:focus .wp-block-navigation-item__label {
        color: #fff !important;
    }
}

@media screen and (max-width: 599px) {
    header .wp-block-navigation__responsive-container-open {
        padding: 12px;
    }

    header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
    header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content .wp-block-navigation-item__label {
        color: var(--wp--preset--color--accent) !important;
        font-size: 1rem;
    }

    header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
    header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content .wp-block-navigation-item__label {
        color: var(--wp--preset--color--primary) !important;
        font-size: 0.9rem;
    }

    header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
    header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
        /*
         * `overseas-accent` is only defined by the optional "Purple" style
         * variation, so it is undefined on the active style. Without the
         * fallback the invalid `var()` makes this rule fall back to the
         * inherited white nav color, which is invisible on the white overlay.
         */
        color: var(--wp--preset--color--overseas-accent, #f700b7) !important;
    }
}