/*
Theme Name:   LfDI BW auf Extra
Theme URI:    ... let's take it to GitLab sometime soon ...
Description:  Child Theme zu https://www.elegantthemes.com/gallery/extra/ für die LfDI-BW-Website
Author:       KuP
Author URI:   https://www.baden-wuerttemberg.datenschutz.de/
Template:     Extra
Version:      0.0.1
Tags:         lfdi
Text Domain:  lfdibw-extra
*/

/*** set colour scheme (collection of non-#ffffff colours used below) ***/
:root {
	--submenu-toggle-icon-background-color: #f0f3f6; /* rgba(240, 243, 246, 1) */
	--underline-header-selection-color: #404040; /* rgba(64, 64, 64, 1), instead of black */

	--text-font: 'Open Sans';
	--title-font: 'Open Sans';
}


/*** change hamburger icon to x when mobile menu is open ***/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}

/*** adjust the new toggle element which is added via jQuery ***/
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 {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}

/*** some code to keep everyting positioned properly ***/
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;
}

/*** remove default background color from menu items that have children ***/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

/*** hide the submenu 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;
}

/*** show the submenu 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;
}

/*** adjust the toggle icon position and transparency ***/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}

/*** submenu toggle icon when closed ***/
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 {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #000000;
	background: var(--submenu-toggle-icon-background-color);
	border-radius: 50%;
	padding: 3px;
}

/*** submenu toggle icon when 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: '\32';
}

/*** add point on top of the menu submenu dropdown ***/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}

/*** adjust the position of the hamburger menu ***/
.mobile_menu_bar {
	position: relative;
	display: block;
	bottom: 5px;
	line-height: 0;
}

/*** force the background color and add a rounded border ***/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;
}

/*** underline header selection ***/
.dl-menu ul.et-menu > li > a:before {
	content: '';
	width: 0;
	left: 50%;
	height: 2px;
	border-radius: 0px;
	background: var(--underline-header-selection-color);
	position: absolute;
	z-index: -1;
	bottom: 5px;
	opacity: 0;
	transition: .3s cubic-bezier(.25,.01,.32,1.61);
}
.dl-menu ul.et-menu > li > a:hover:before,
.dl-menu ul.et-menu > li.current-menu-item > a:before {
	width: 110%;
	left: -5%;
	opacity: 1;
}
.dl-menu ul.et-menu > li > a {
	z-index: 1;
}

/*** header size bug ***/
.dl-menu li, .fullwidth-menu li {
	font-size: 16px; /*  Change value  */
}

/*** underline header selection ***/
.dl-menu2 ul.et-menu > li > a:before {
	content: '';
	width: 0;
	left: 50%;
	height: 2px;
	border-radius: 0px;
	background: black;
	position: absolute;
	z-index: -1;
	bottom: 5px;
	opacity: 0;
	transition: .3s cubic-bezier(.25,.01,.32,1.61);
}
.dl-menu2 ul.et-menu > li > a:hover:before,
.dl-menu2 ul.et-menu > li.current-menu-item > a:before {
	width: 110%;
	left: -5%;
	opacity: 1;
}
.dl-menu2 ul.et-menu > li > a {
	z-index: 1;
}