/**
 * Divi Mobile Menu Collapse
 *
 * Collapses Divi mobile sub-menus into accordions toggled by a .mobile-toggle
 * button (added by divi-mobile-menu.js). The toggle shows an ETModules font
 * icon (a chevron that flips when open); its circle background and icon colour
 * come from the module settings as CSS variables, with sensible fallbacks.
 *
 * Selectors are intentionally specific (and include the `.et-db #et-boc .et-l`
 * Divi Builder context + `!important` on the show/hide rules) so they beat
 * Divi's own mobile-menu CSS on the front-end and in the builder preview.
 *
 * Note: brand/site-specific styling (the mobile menu container colour, the
 * pointer triangle, and swapping the hamburger icon for a close icon) is left
 * to the theme's own Custom CSS — this stylesheet only provides the collapse
 * mechanism and the toggle icon.
 */

/* Parent items need relative positioning so the toggle anchors correctly. */
ul.et_mobile_menu > li.menu-item-has-children,
ul.et_mobile_menu > li.page_item_has_children,
ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

/* Submenu toggle button (added via JS). */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 100%;
	max-height: 44px;
	padding: 0 !important;
	background-color: transparent;
	border: none;
	text-align: center;
	opacity: 1;
	z-index: 999;
}

/* Toggle icon — closed (ETModules chevron). */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	content: "3";
	position: relative;
	top: 10px;
	padding: 3px;
	background: var(--dmm-toggle-bg, #f0f3f6);
	border-radius: 50%;
	color: var(--dmm-icon-color, #979c8a);
	font-family: "ETModules";
}

/* Toggle icon — open. */
ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {
	content: "2";
}

/* Submenu hidden by default. */
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

/* Submenu shown when toggled open. */
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}