/* "My Account" dropdown in the header menu (display_dynamic_single_menu in functions.php).
   Own classes, so it doesn't depend on superfish/ubermenu; selectors are long enough to win over
   superfish.css (.sf-menu ul { top: -999em }) and the theme's sub-menu rules. Colours match the theme's sub-menus. */

/* Desktop: open on hover and on keyboard focus */
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown {
	position: relative;
}
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > a::after {
	content: "";
	display: inline-block;
	margin-left: 7px;
	vertical-align: middle;
	border: 5px solid transparent;
	border-bottom: 0;
	border-top-color: currentColor;
}
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 220px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #363B40;
	border-top: 3px solid var(--sae-brand, #e88b4b);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown:hover > ul.sae-dropdown,
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown:focus-within > ul.sae-dropdown {
	display: block;
}
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li {
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
}
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li > a {
	display: block;
	padding: 13px 15px;
	font-family: var(--sae-font, inherit);
	font-size: 14px;
	line-height: 1.3;
	color: #D7DCE0;
	background: #363B40;
	white-space: normal;
	text-decoration: none;
}
/* Dark submenu: a 10% tint would disappear and dark text would fail. Hover fills with the brand colour. */
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li > a:hover,
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li > a:focus-visible {
	color: #fff;
	background: var(--sae-brand, #e88b4b);
}
.menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li.current-menu-item > a {
	color: #fff;
	background: var(--sae-brand, #e88b4b);
}

/* Phones: the theme swaps .menu_container for .mobile_menu_container; tapping "My Account" toggles .sae-open.
   The theme's mobile item styles target li.ubermenu-item, which this menu doesn't output, so give our items the same look. */
.mobile_menu_container .ubermenu .ubermenu-nav > li.menu-item:not(.menu-item-search) {
	display: block;
	float: none;
	height: auto;
	padding: 0;
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.menu-item:not(.menu-item-search) > a {
	display: block;
	margin-bottom: 1px;
	padding: 12px 20px;
	font-family: var(--sae-font, inherit);
	font-size: 16px;
	line-height: 1;
	color: #25282A;
	background: #F0F0F0;
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.menu-item > a:hover,
.mobile_menu_container .ubermenu .ubermenu-nav > li.menu-item > a:focus-visible {
	background: var(--sae-brand-soft, rgba(232, 139, 75, 0.1));
	color: var(--sae-brand, #e88b4b);
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.menu-item.current-menu-item > a {
	color: #fff;
	background: var(--sae-brand, #e88b4b);
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > a::after {
	content: "";
	display: inline-block;
	margin-left: 8px;
	vertical-align: middle;
	border: 5px solid transparent;
	border-bottom: 0;
	border-top-color: currentColor;
	transition: transform 0.2s ease;
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown.sae-open > a::after {
	transform: rotate(180deg);
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown {
	display: none;
	position: static;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown.sae-open > ul.sae-dropdown {
	display: block;
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li {
	display: block;
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li > a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 20px 12px 40px;
	margin-bottom: 1px;
	font-family: var(--sae-font, inherit);
	font-size: 14px;
	line-height: 1.2;
	color: #25282A;
	background: #F0F0F0;
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li > a:hover,
.mobile_menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li > a:focus-visible {
	background: var(--sae-brand-soft, rgba(232, 139, 75, 0.1));
	color: var(--sae-brand, #e88b4b);
}
.mobile_menu_container .ubermenu .ubermenu-nav > li.sae-has-dropdown > ul.sae-dropdown > li.current-menu-item > a {
	color: #fff;
	background: var(--sae-brand, #e88b4b);
}