/* Outer Container */
.dhwp-navigation {
    transition: all .3s ease;
    width: 100%;
}
.dhwp-navigation * {
    box-sizing: border-box;
    transition: height .3s ease, opacity .3s ease;
}

/* Inner Container */
.dhwp-navigation nav.wp-block-navigation {
    display: inline-block;
    position: relative;
    width: 100%;
}

/* UL */
.dhwp-navigation nav.wp-block-navigation ul.wp-block-navigation__container {
    list-style-type: none;
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
}
.dhwp-navigation nav.wp-block-navigation ul.wp-block-navigation__container.is-vertical {
    width: 100%;
}
.dhwp-navigation nav.wp-block-navigation ul.wp-block-navigation__container.is-horizontal {
    width: 100%;
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal ul.wp-block-navigation {
    width: 100%;
    display: flex;
    column-gap: 4px;
}

/* LI */
.dhwp-navigation nav.wp-block-navigation ul.wp-block-navigation__container li.wp-block-navigation-item {
    list-style-type: none;
    display: grid;
    position: relative;
    direction: ltr;
    margin: 0 0 0 0;
    /* padding: 2px 8px; */
    /* border-bottom: 1px solid rgba(0,0,0,0.1); */
    z-index: 1;
}
.dhwp-navigation nav.wp-block-navigation.is-vertical ul.wp-block-navigation__container li.wp-block-navigation-item {
    width: 100%;
}

/* Second Level - Vertical */
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child::after {
    content: "";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    /* max-height: min(25px, 100%); */
    aspect-ratio: 1 / 1;
    z-index: 2;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.1);
    grid-row: 1 / span 1;
}
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child::before {
    content: "\f347";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    /* max-height: min(25px, 100%); */
    aspect-ratio: 1 / 1;
    z-index: 3;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    transform-origin: 50% 50%;
    grid-row: 1 / span 1;
}
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child.active::before {
    transform: rotate(180deg);
}

/* Third Level - Vertical */
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1):not(.depth-2) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child::after {
    content: "";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    /* max-height: min(25px, 100%); */
    aspect-ratio: 1 / 1;
    z-index: 2;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.1);
    grid-row: 1 / span 1;
}
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1):not(.depth-2) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child::before {
    content: "\f347";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    /* max-height: min(25px, 100%); */
    aspect-ratio: 1 / 1;
    z-index: 3;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    transform-origin: 50% 50%;
    grid-row: 1 / span 1;
}
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1):not(.depth-2) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child.active::before {
    transform: rotate(180deg);
}

/* Fourth Level - Vertical */
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1):not(.depth-2):not(.depth-3) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child::after {
    content: "";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    /* max-height: min(25px, 100%); */
    aspect-ratio: 1 / 1;
    z-index: 2;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.1);
    grid-row: 1 / span 1;
}
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1):not(.depth-2):not(.depth-3) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child::before {
    content: "\f347";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    /* max-height: min(25px, 100%); */
    aspect-ratio: 1 / 1;
    z-index: 3;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    transform-origin: 50% 50%;
    grid-row: 1 / span 1;
}
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1):not(.depth-2):not(.depth-3) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child.active::before {
    transform: rotate(180deg);
}

/* Horizontal LI */
/* Second Level - Horizontal */
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child {
    /* padding-right: 50px; */
    padding-right: 28px;
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child::after {
    content: "";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 4px;
    height: 100%;
    max-height: min(36px, 100%);
    aspect-ratio: 1 / 1;
    width: auto;
    z-index: 2;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.1);
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child::before {
    content: "\f347";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 4px;
    height: 100%;
    max-height: min(36px, 100%);
    aspect-ratio: 1 / 1;
    width: auto;
    z-index: 3;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    transform-origin: 50% 50%;
    transition: all .3s ease;
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child.active::before {
    transform: rotate(180deg);
}

/* Third Level - Horizontal */
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1):not(.depth-2) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child::after {
    content: "";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    max-height: min(25px, 100%);
    aspect-ratio: 1 / 1;
    width: 25px;
    z-index: 2;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.1);
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1):not(.depth-2) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child::before {
    content: "\f347";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    max-height: min(25px, 100%);
    aspect-ratio: 1 / 1;
    width: 25px;
    z-index: 3;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    transform-origin: 50% 50%;
    transition: all .3s ease;
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1):not(.depth-2) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child.active::before {
    transform: rotate(180deg);
}

/* Fourth Level - Horizontal */
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1):not(.depth-2):not(.depth-3) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child::after {
    content: "";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    max-height: min(25px, 100%);
    aspect-ratio: 1 / 1;
    width: 25px;
    z-index: 2;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.1);
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1):not(.depth-2):not(.depth-3) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child::before {
    content: "\f347";
    font-family:"dashicons";
    display: grid;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    max-height: min(25px, 100%);
    aspect-ratio: 1 / 1;
    width: 25px;
    z-index: 3;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    transform-origin: 50% 50%;
    transition: all .3s ease;
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1):not(.depth-2):not(.depth-3) > ul.wp-block-navigation__container > li.wp-block-navigation-item.has-child.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.has-child.active::before {
    transform: rotate(180deg);
}

/* Second Level Submenu OFF */
.dhwp-navigation nav.wp-block-navigation ul.wp-block-navigation__container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container {
    display: block;
    position: relative;
    visibility: visible;
    opacity: 0;
    top: -100%;
    bottom: auto;
    left: auto;
    right: auto;
    height: 0;
    width: 0;
    min-width: 0;
    color: inherit;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
}
/* Second Level - Submenu Active */
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1) ul.wp-block-navigation__container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container {
    height: auto;
    width: auto;
    top: 0;
    opacity: 1;
    /* padding-left: 20px; */
    margin-left: 28px;
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1) ul.wp-block-navigation__container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container {
    position: absolute;
    min-width: 200px;
    height: auto;
    width: auto;
    top: 0;
    opacity: 1;
}

/* Third Level Submenu (and lower) */
/* Third Level Submenu OFF */
.dhwp-navigation nav.wp-block-navigation ul.wp-block-navigation__container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container {
    display: block;
    position: relative;
    visibility: visible;
    opacity: 0;
    top: -100%;
    bottom: auto;
    left: auto;
    right: auto;
    height: 0;
    width: 0;
    min-width: 0;
    color: inherit;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
}
/* Third Level Submenu Active */
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1):not(.depth-2) ul.wp-block-navigation__container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container {
    height: auto;
    width: auto;
    top: 0;
    opacity: 1;
    margin-left: 20px;
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1):not(.depth-2) ul.wp-block-navigation__container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container {
    position: relative;
    min-width: 0;
    width: calc(100% - 20px);
    height: auto;
    top: 0;
    opacity: 1;
    margin-left: 20px;
}

/* Fourth Level Submenu Active */
.dhwp-navigation nav.wp-block-navigation.is-vertical:not(.depth-1):not(.depth-2):not(.depth-3) ul.wp-block-navigation__container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container {
    height: auto;
    width: auto;
    top: 0;
    opacity: 1;
    margin-left: 20px;
}
.dhwp-navigation nav.wp-block-navigation.is-horizontal:not(.depth-1):not(.depth-2):not(.depth-3) ul.wp-block-navigation__container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.active > ul.wp-block-navigation__submenu-container {
    position: relative;
    min-width: 0;
    width: calc(100% - 20px);
    height: auto;
    width: auto;
    top: 0;
    opacity: 1;
    margin-left: 20px;
}

/* Anchor */
.dhwp-navigation nav.wp-block-navigation ul.wp-block-navigation__container li.wp-block-navigation-item a.wp-block-navigation-item__content {
    display: inline-block;
    position: relative;
    direction: ltr;
    text-align: left;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    /* color: black; */
    color: inherit;
    background: none;
    border-radius: 0;
}
/* Anchor color overrides */
.dhwp-navigation nav.wp-block-navigation ul.wp-block-navigation__container li.wp-block-navigation-item a.wp-block-navigation-item__content,
.dhwp-navigation .wp-block-navigation-submenu a:where(:not(.wp-element-button)),
.dhwp-navigation a:where(:not(.wp-element-button)) {
    /* color: black; */
    /* color: #62840a; */
    color: inherit;
    display: inline-block;
    text-decoration: none;
}

/* Current Menu Item */
.dhwp-navigation nav.wp-block-navigation.is-vertical ul.wp-block-navigation__container li.current-menu-item > a {
    /* color: red !important; */
    padding-left: 28px !important;
}
.dhwp-navigation nav.wp-block-navigation.is-vertical ul.wp-block-navigation__container li.current-menu-item > a:before {
    content: "\f139";
    font-family:"dashicons";
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    left: 0;
    top: 0px;
    width: 34px;
    height: 100%;
    display: grid;
    align-self: center;
    align-content: center;
    justify-self: center;
    justify-content: center;
}


/* General Overrides */
/* Prevent default drop down behavior of Gutenberg Navigation Block */
body .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container,
body .wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container,
body .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container {
    height: 0px;
    width: 0px;
    min-width: 0px;
    display: block;
    overflow: hidden;
}

body .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    background-color: rgba(0,0,0,0);
}