/*
Theme Name: Art
Description: Theme for Janetta Smith Art
Version: 1.0.0
Author: 
Author URI: 
Theme URI: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: Divi
*/

/* ========== Custom CSS ========== */

/* Mobile menu icon: hide until page is ready */

.et_header_style_left #et-top-navigation .mobile_menu_bar {
    padding: 10px 0;
}
.mobile_menu_bar:before,
.et_mobile_menu_bar:before {
	opacity: 0;
	transition: opacity 0.1s ease;
}

body.submenu-toggles-ready .mobile_menu_bar:before,
body.submenu-toggles-ready .et_mobile_menu_bar:before {
	opacity: 1;
}
.et_mobile_menu .menu-item-has-children>a {
    font-weight: 700;
    background-color: transparent;
}

/* Responsive styles */

@media (max-width: 980px) {
    .et_header_style_left #logo {
        max-width: 70%;
    }
    #logo {
    	max-height: 80%;
	}
}

@media all and (min-width: 981px) {
	#main-header .logo_container {
		position: relative;
		padding-bottom: 38px;
	}

	#main-header .logo_container::after {
		content: "Art In Many Forms";
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 40px;
		margin-top: 6px;
		font-size: 18px;
		line-height: 1.3;
		font-weight: 400;
		text-align: right;
		color: #777;
		letter-spacing: 0;
	}
	.et_vertical_nav #main-header .container, .et_vertical_nav.et_boxed_layout #main-header .container {
        margin: 0 30px;
    }
    .et_vertical_nav #main-header #logo {
        margin-bottom: 28px;
        padding: 0;
        max-height: none;
    }
	/* Adjust vertical header width */
	.et_vertical_nav #page-container #main-header {
		width: 270px;
	}

	.et_vertical_nav #et-main-area,
	.et_vertical_nav #top-header {
		margin-left: 270px !important;
		position: relative;
	}

	/* Parent item with child menu */
	#top-menu > li.menu-item-has-children {
		position: relative;
	}

	/* Keep parent link normal and clickable */
	#top-menu > li.menu-item-has-children > a {
		position: relative;
		padding-right: 34px !important;
	}

	/* Hide Divi's default submenu arrow on the parent link */
	#top-menu > li.menu-item-has-children > a::after {
		display: none !important;
	}

	/* Separate toggle button */
	#top-menu > li.menu-item-has-children > .submenu-toggle {
		position: absolute;
		right: -25px;
		top: -8px;
		width: 24px;
		height: 24px;
		border: 0;
		background: transparent;
		cursor: pointer;
		padding: 0;
		margin: 0;
		font-size: 0;
		line-height: 1;
		opacity: 0;
	}

	body.submenu-toggles-ready #top-menu > li.menu-item-has-children > .submenu-toggle {
		opacity: 1;
	}

	/* Pure CSS chevron */
	#top-menu > li.menu-item-has-children > .submenu-toggle::before {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transform-origin: center;
		transition: transform 0.25s ease;
		margin-top: 1px;
		opacity: 0.6;
	}

	/* Rotate chevron when open */
	#top-menu > li.menu-item-has-children.submenu-open > .submenu-toggle::before {
		transform: rotate(-135deg);
	}

	/* Submenu hidden by default */
	#top-menu > li.menu-item-has-children > ul.sub-menu {
		display: none;
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		float: none !important;
		clear: both;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Show submenu when open */
	#top-menu > li.menu-item-has-children.submenu-open > ul.sub-menu {
		display: block !important;
	}

	/* Submenu list items */
	#top-menu > li.menu-item-has-children > ul.sub-menu > li {
		display: block;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Submenu links */
	#top-menu > li.menu-item-has-children > ul.sub-menu > li > a {
		display: block;
		width: 100%;
		padding: 0 0 19px 20px !important;
		margin: 0 !important;
		line-height: 1em;
		background: transparent !important;
		box-shadow: none !important;
	}
}