/* 
Theme Name:		 CMS Child theme
Template:		 cms
Version:		 1.1.1
Text Domain:	 cms-child
*/


/* Add your custom styles here */

/*navigation menu dropdown CSS adjustments*/
.sa-header__menu > .menu-item > a {
	padding: 8px 20px;
}	
.sa-header__menu .menu-item.menu-item-has-children {
	position: relative;
	text-decoration: none;
	transition-duration: 0.5s;
}
.sa-header__menu .current-menu-parent a {
	background-color: rgba(0,0,0,.4);
}	
.sa-header__menu .menu-item-has-children > a {
    position: relative;
    padding-right: 15px; /* Space for the icon */
}

.sa-header__menu .menu-item-has-children > a {
    position: relative;
    padding-right: 20px; /* Add more space for the larger icon */
}

.sa-header__menu .menu-item-has-children > a {
    position: relative;
    padding-right: 20px; /* Add space for larger icon */
}

.sa-header__menu .menu-item-has-children > a {
    position: relative;
    padding-right: 50px; /* Space for icon */
}

.sa-header__menu .menu-item-has-children > a:after,
.sa-header-mobile__menu > .menu-item-has-children > a > .submenu-toggle{
    content: "";
    display: inline-block;
    width: 16px; /* Adjust size */
    height: 16px;
    background-image: url("assets/img/chevron-down-solid.svg"); /* Ensure correct path */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    /* Smooth transition effect */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.sa-header__menu .menu-item-has-children:hover > a:after {
    background-image: url("assets/img/chevron-up-solid.svg");
    transform: translateY(-50%) rotate(180deg); /* Smooth rotation */
    opacity: 0.8; /* Slight fade effect */
}
.sa-header__menu .menu-item-has-children .sub-menu {
	background-color: #000;
	visibility: hidden; /* hides sub-menu */
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	border: rgba(63, 63, 63, 1) solid 1px;
	width: 100%;
	transform: translateY(-2em);
	z-index: 1;
	transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; 
	border-radius: 10px;
	width: 270px;
	padding: 24px 16px;
	-webkit-box-shadow: 0px 8px 5px 0px rgba(16,15,15,0.8);
	-moz-box-shadow: 0px 8px 5px 0px rgba(16,15,15,0.8);
	box-shadow: 0px 8px 5px 0px rgba(16,15,15,0.8);
}
.sa-header__menu .menu-item.menu-item-has-children .sub-menu > div {
	padding: 0;
}
.sa-header__menu .menu-item.menu-item-has-children .sub-menu a {
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	padding-left: 0;
	display: block;
	padding:6px 16px;
	margin-bottom: 1px;
	line-height: 1;
	font-weight: 300;
	-webkit-transition: padding 0.3s ease-in-out;
	-moz-transition: padding 0.3s ease-in-out;
	-o-transition: padding 0.3s ease-in-out;
	transition: padding 0.3s ease-in-out;
}
.sa-header__menu .menu-item.menu-item-has-children .sub-menu a:hover,
.sa-header__menu .menu-item.menu-item-has-children .sub-menu .current-menu-item a {
	background: rgba(255, 255, 255, 0.1);
  	border-radius: 20px;
}
.sa-header__menu .menu-item.menu-item-has-children:hover > .sub-menu,
.sa-header__menu .menu-item.menu-item-has-children:focus-within > .sub-menu,
.sa-header__menu .menu-item.menu-item-has-children .sub-menu:hover,
.sa-header__menu .menu-item.menu-item-has-children .sub-menu:focus {
	visibility: visible; /* shows sub-menu */
	opacity: 1;
	z-index: 1;
	transform: translateY(0%);
	transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}
.sa-header__menu > .menu-item.show-mobile {
	display: none;
}
.sa-header__menu .menu-item.menu-item-has-children .sub-menu a {
    display: flex;
    padding-left: 16px; /* Adjust as needed */
	align-items: center;
}

.sa-header__menu .menu-item.menu-item-has-children .sub-menu a img {
    width: 24px;
    height: 24px;
	margin-right: 12px;
}

/*mobile menu CSS adjustments*/
.sa-header-mobile {
	overflow: scroll;
}
.sa-header-mobile__menu > .menu-item > a {
	font-size: 1rem;
}
.sa-header-mobile__menu .sub-menu .menu-item {
	text-align: left;
}
.sa-header-mobile__menu .sub-menu .menu-item a {
	color: #fff;
	font-weight: 300;
	font-size: 1rem;
	padding: 12px 16px;
	display: block;
	border-radius: 20px;
	line-height: 1;
}
.sa-header-mobile__menu > .menu-item-has-children .sub-menu .menu-item.current-menu-item a,
.sa-header-mobile__menu > .menu-item-has-children .sub-menu .menu-item.current-menu-item a:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
.sa-header-mobile__menu > .menu-item-has-children > a {
	position: relative;
}
.sa-header-mobile__menu > .menu-item-has-children .sub-menu {
	opacity: 0;
	visibility: hidden;
	display: none;
	padding: 10px;
}
.sa-header-mobile__menu > .menu-item-has-children.active .sub-menu {
	opacity: 1;
	visibility: visible;
	overflow: hidden; /* Prevents content overflow while animating */
}
.sa-header-mobile__menu > .menu-item-has-children > a > .submenu-toggle {
	right: unset;
	top: 50%;
	padding-left: 40px;
	user-select: none;
	cursor: pointer;
}
.sa-header-mobile__menu > .menu-item-has-children.active > a > .submenu-toggle  {
    transform: translateY(-50%) rotate(180deg); /* Smooth rotation */
}
.sa-header-mobile__menu > .current-menu-parent,
.sa-header-mobile__menu > .menu-item-has-children.active {
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 20px;
}
.sa-header-mobile__menu > .current-menu-parent > a {
	background-color: rgba(255,255,255,.1);
	color: #fff;
}
.sa-header-mobile__menu > .menu-item.show-mobile {
	display: block;
	border-radius: 20px;
	background: rgb(32,75,158);
	background: linear-gradient(90deg, rgba(32,75,158,1) 0%, rgba(54,122,255,1) 100%); 
}
.sa-header-mobile__menu > .menu-item.show-mobile a {
	color: rgba(255,255,255,1);
}

.sa-header-mobile__menu .menu-item.menu-item-has-children .sub-menu a {
    display: flex;
    padding-left: 16px; /* Adjust as needed */
	align-items: center;
}

.sa-header-mobile__menu .menu-item.menu-item-has-children .sub-menu a img {
    width: 24px;
    height: 24px;
	margin-right: 12px;
}