/* Change the padding of the dropdown icons to center it so when we spin the icon it doesn't behave strangely. */
li.menu-item.dropdown{

	border-top-left-radius: 5px; 
	border-top-right-radius: 5px;
}

@media screen and (min-width:  991px){

	/* Change the background color of links hovered in the menu to light gray unless otherwise specified in Elementor */
	li.menu-item.dropdown:hover,
	li.menu-item.dropdown:focus-within{

		background-color: #F9F9FA;
	}
}

/* Remove the top padding on the menu that was adding some spacing issues (and the drop shadow). */
ul.dropdown-menu{

	padding-top: 0px !important;
	box-shadow: none !important;
}

@media screen and (min-width:  991px){

	/* This fires whenever a link is focused within the dropdown menu. */
	li.menu-item.dropdown:focus-within ul.dropdown-menu,
	li.menu-item.dropdown:hover ul.dropdown-menu{

		/* Causes the child dropdown menu to display. */
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
}

/* Styles to modify the appearance of the icon to the right of dropdown togglers. */ 
li.menu-item.dropdown a.dropdown-toggle::after{

	/* I don't enjoy using !important so often, however Elementor uses really specific selectors, so 
	in order to make sure the styles aren't overriden, I must use it here. */
	padding-left: 0px !important;
	padding-right: 0px !important;
	margin-left: 5px;

	width: 20px;
    height: 20px;
    line-height: 20px !important;
    text-align: center;

	border-radius: 10px;

	background-color: #277b97 !important;
	color: #ffffff !important;
}

@media screen and (min-width:  991px){

	/* When the menu is focused OR hovered... */
	li.menu-item.dropdown:focus-within a.dropdown-toggle::after,
	li.menu-item.dropdown:hover a.dropdown-toggle::after{

		/* Rotate the button and change the background color. */
		transform: rotateZ(180deg);
		background-color: #CF4956 !important;
	}
}

/* On mobile screens... */
@media screen and (max-width:  991px){

	/* Maintain the normal color on menu items, unless... */
	li.menu-item.dropdown a.dropdown-toggle{

		color: #2B333B !important;
	    background-color: transparent !important;
	}

	/* The menu item is open. */
	li.menu-item.dropdown.open-menu a.dropdown-toggle{

		color: #FFFFFF !important;
	    background-color: #3C315B !important;
	}

	/* Rotate the arrow when the menu is opened. */
	li.menu-item.dropdown.open-menu a.dropdown-toggle::after{

		/* Rotate the button and change the background color. */
		transform: rotateZ(180deg);
		background-color: #CF4956 !important;
	}

}

/* A special case to make sure the search button icon color remains white during focus events. */
.elementor-search-form button:focus i{

	color: #FFFFFF;
}

/* Display the mobile menu when the menu is focused. */
.menu-hover:not(:focus-within) .collapse{

	/*display: block;*/
	/*display: none !important;*/
}

/* Adds the purple color to links on hover. */
li.menu-item.dropdown ul.dropdown-menu a:focus > span{

	color: #3C315B;
}

/* Used for the skip-link styles. */
.sr-only {

	position: absolute;
	left: -999px;
	width: 1px;
	height: 1px;
	top: auto;
}

.sr-only:focus,
.sr-only:focus-within {

	color: black;
	display: block;
	height: auto;
	width: auto;
	position: static;
	margin: auto;
}