/* the default page menu has a div.dhmenu > ul html scheme, whereas custom menus have div.dhmenu-[menu-name]-container > ul#menu-[menu-name].menu html scheme */

/* Word Press menu classes for default page menu */
li.current_page_item { }
li.page_item_has_children, li.menu-item-has-children { }
ul.children, ul.sub-menu { }

.dhmenu,
.dhmenu ul,
.dhmenu li { list-style-type: none; margin: 0; padding: 0; overflow: visible; position: relative; }
.dhmenu a { text-decoration: none; }

/* first level menu item anchors */
.dhmenu > li > a { font-size: 1.3em; line-height: 1.5em; }

/* first level menu items */
.dhmenu > li { display: inline-block; margin: 0; padding: 0; white-space: nowrap }
a.dhmenu-icon { display: none; }

/* 782 based on WP mobile menu flip */
@media (min-width: 783px) {
	.dhmenu { display: block; }

	/* applies to all submenus */
	.dhmenu ul { position: absolute; text-align: left; display: none; }
	.dhmenu:hover ul { display: block; } /* this, with the display:none above stops the menus from being 'hoverable' without first hovering the parent*/

	/* applies to first level item anchors */
	.dhmenu > li > a { padding: .5em 0; display: inline-block; }

	/* applies to second level submenu */
	.dhmenu > li:hover > ul { z-index: 1; }
	/* ensure that flyouts aren't overridden by other dropdowns being on top of them */

	/* applies to item anchors >= 2nd level -------------------------------- */
	.dhmenu ul a { display: block; overflow: hidden; background-color: #fff; box-sizing: border-box; border: 0px solid #d7d7d7; padding: .5em 1em }

	.dhmenu li:hover ul a { border-width: 1px; border-bottom-width: 0; }
	.dhmenu li:hover ul li:last-of-type > a { border-bottom-width: 1px; }

	/*************** Show / Hide submenus via CSS transitions ****************/
	/* applies to 2nd level item anchor ------------------------------------ */
	.dhmenu > li > ul > li > a { max-height: 0; padding: 0 1em; transition: .2s ease-in-out; transition-property: padding, max-height, border; }

	/* expand items down */
	.dhmenu > li:hover > ul > li > a { max-height: 100px; padding: .5em 1em; }

	/* applies to submenus >= 3rd level ------------------------------------ */
	.dhmenu ul ul { z-index: -2; max-width: 100%; background-color: #fff; top: 0; border-left: 2px solid #d7d7d7; transition: .2s ease-in-out; transition-property: opacity, left, right; opacity: 0; left: 0; }

	/* open to right */
	.dhmenu ul li:hover > ul { opacity: 1; left: 100%; max-width: none; }


	/* force last items drop-down on-screen */
	.dhmenu > li:last-child > ul { right: 0; }

	/* reverse flyouts for last item - reset rules and flip border */
	.dhmenu > li:last-child ul ul { right: 0; left: auto; border-right: 2px solid #d7d7d7; border-left-width: 0px; }

	/* open last item to left */
	.dhmenu > li:last-child li:hover > ul { right: 100%; left: auto; }

	/* applies to submenus >= 4th level ------------------------------------ */
	.dhmenu ul ul ul { z-index: -3; }
}

/* 782 based on WP mobile menu flip */
@media (max-width: 782px) {
	.dhmenu-container { clear: both; position: relative; }

	.dhmenu a { display: block; text-align: left; line-height: 40px; padding: .5em; }

	.dhmenu { display: block; opacity: 0; width: 104%; margin-left: -2%; position: absolute; top: -100vh; transition: .25s ease-in-out; }
	.dhmenu.expanded { display: block; opacity: 1; top: 0; }
	/* open the mobile menu */

	/* applies to top level items */
	.dhmenu > li { display: block; margin: 0; padding: 0; color: #999; background-color: #fff; border-bottom: 1px solid #d7d7d7; height: auto; }


	/******** show/hide submenu levels via CSS transition of max-height ********/
	/* applies to >= 2nd level submenus - these rules for submenus prevent nested submenus from being shown when a parent menu is closed */
	.dhmenu ul { display: block; overflow: hidden; transition: .3s ease-in-out; max-height: 0 }

	/* applies to the submenu of the expanded item >= 2nd level */
	.dhmenu li.expanded > ul { max-height: 2000px; }

	/* applies to >= 2nd level anchors - these rules show/hide subitems when the parent item is open/closed */
	.dhmenu ul a { display: block; text-align: left; line-height: 2em; box-sizing: border-box; overflow: hidden; transition: .3s ease-in-out; max-height: 0; padding: 0 1em; border-top: 0 solid #d7d7d7 }

	/* applies to anchors of a submenu of an open item */
	.dhmenu li.expanded > ul > li > a { max-height: 100px; padding-top: .7em; padding-bottom: .7em; border-top-width: 1px; }

	/* increase indent for each subsequent menu level */
	.dhmenu ul a { padding-left: 2em; }
	.dhmenu ul ul a { padding-left: 3em; }
	.dhmenu ul ul ul a { padding-left: 4em; }
	.dhmenu ul ul ul ul a { padding-left: 5em; }


	/*** a.dhmenu-icon is the button which toggles display of the mobile menu ***/
	/*header .main-nav > li > aa.dhmenu-icon {*/
	span.dhmenu-icon { cursor: pointer; margin: -1px 0 0; padding: 0; display: inline-block; height: 30px; width: 30px; position: relative; border:1px solid rgba(0,0,0,0); border-radius: 2px }
	span.dhmenu-icon:hover { border-color: #eee;  }
	span.dhmenu-icon > span { background-color: #000; display: block; position: absolute; height: 3px; width: 20px; opacity: 1; left: 5px; transition: .25s ease-in-out; transform: rotate(0deg) }
	span.dhmenu-icon > span:nth-child(1) { top: 7px; }
	span.dhmenu-icon > span:nth-child(2),
	span.dhmenu-icon > span:nth-child(3) { top: 14px; }
	span.dhmenu-icon > span:nth-child(4) { top: 21px; }
	span.dhmenu-icon.expanded > span:nth-child(1),
	span.dhmenu-icon.expanded > span:nth-child(4) { top: 14px; width: 0; left: 50%; }
	span.dhmenu-icon.expanded > span:nth-child(2) { transform: rotate(45deg); }
	span.dhmenu-icon.expanded > span:nth-child(3) { transform: rotate(-45deg); }


	/****** rules which create the +/- icons which open/close submenus *******/
	.submenu-expander { display: block; position: absolute; top: 9px; right: 2%; height: 30px; width: 30px; cursor: pointer; border: 1px solid rgba(0,0,0,0); border-radius: 2px }
	.submenu-expander:hover { border-color: #eee; }
	.submenu-expander span { background-color: #000; display: block; position: absolute; height: 3px; width: 16px; opacity: 1; left: 7px; transform: rotate(0deg); transition: .25s ease-in-out; top: calc(50% - 1px) }
	.submenu-expander > span:nth-child(1) { transform: rotate(90deg) }
	.submenu-expander > span:nth-child(2) { transform: rotate(-90deg) }
	.expanded > .submenu-expander > span:nth-child(1),
	.expanded > .submenu-expander > span:nth-child(2) { transform: rotate(0deg) }
	.expanded > .submenu-expander > span:nth-child(3) { width: 0; left: 50% }
}