/* =========================================
	 MOBILE MENU — DROPDOWN UNDER HEADER
========================================= */
#mobile-drawer {
	position: absolute !important;
	top: 100%;
	left: 0;
	right: 0;
	background: transparent !important;
	height: auto !important;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .3s ease, opacity .3s ease;
	z-index: 999;
}

#mobile-drawer .drawer-inner {
	background: #fff;
	padding: 80px 0 0 0;
	box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

body.showing-popup-drawer-from-full #mobile-drawer {
	max-height: 100vh;
	opacity: 1;
}

/* Hide Kadence header/logo inside drawer */
#mobile-drawer .drawer-header,
#mobile-drawer .mobileMenuLogo {
	display: none !important;
}

/* Drawer content padding */
#mobile-drawer .drawer-content {
	padding: 1rem;
}



/* =========================================
	 TOGGLE: HAMBURGER → X WHEN OPEN
	 ========================================= */

#mobile-header #mobile-toggle {
	position: relative;
}

#mobile-header #mobile-toggle[aria-expanded="true"] .kadence-menu-svg {
	opacity: 0;
}

#mobile-header #mobile-toggle[aria-expanded="true"]::before,
#mobile-header #mobile-toggle[aria-expanded="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background: currentColor;
	transform-origin: center;
}

#mobile-header #mobile-toggle[aria-expanded="true"]::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

#mobile-header #mobile-toggle[aria-expanded="true"]::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}





/* =========================================
	 NAV LIST (TOP-LEVEL + SUBMENUS)
========================================= */

#mobile-drawer button.drawer-sub-toggle {
	border-bottom: 1px solid #e6e6e6;
	border-left: none;
}

#mobile-drawer #mobile-menu > .menu-item {
	line-height: 2;
}

#mobile-drawer #mobile-menu > .menu-item > a,
#mobile-drawer #mobile-menu > .menu-item > .drawer-nav-drop-wrap > a {
	display: block;
	padding: .75rem 1rem;
	font-family: 'Source Sans 3', sans-serif;
	font-weight: 400;
	font-size: 1.2rem;
	color: #111;
	text-decoration: none;
	border-bottom: 1px solid #e6e6e6;
}

#mobile-drawer #mobile-menu .sub-menu {
	margin-bottom: 8px;
	line-height: 1.5;
	background-color: #f6f6f6;
	padding: 0;
	border-bottom: 1px solid #e6e6e6;
}



/* Dropdown menu transitioning effect - - - - - - - - */
/* Sub-menu hidden state */
#mobile-drawer #mobile-menu .sub-menu {
	max-height: 0;
	opacity: 0;
	transform: translate(-10px, -4px);
	overflow: hidden;
	transition:
		max-height 0.35s ease-in-out,
		opacity 0.4s ease-in-out,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sub-menu open state (Kadence adds these classes) */
#mobile-drawer #mobile-menu .sub-menu.show-drawer.active.pop-animated {
	max-height: 600px;  /* large enough for contents */
	opacity: 1;
	transform: translateY(0);
	background-color: #f6f6f6;

	transition:
	max-height 0.35s ease-in-out,
	opacity 0.45s ease-in-out,
	transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - */

#mobile-drawer #mobile-menu .sub-menu a {
	display: block;
	padding: .6rem 0 .6rem 3.5rem;
	font-weight: 400;
	font-size: 1rem;
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #fff;
}

#mobile-drawer #mobile-menu .drawer-sub-toggle,
#mobile-drawer #mobile-menu .drawer-sub-toggle .kadence-svg-icon,
#mobile-drawer .kadence-arrow-down-svg {
	color: #222;
	fill: currentColor;
}

#mobile-drawer #mobile-menu a:hover {
	background-color: var(--brandBlue);
	color: white;
	transition: background-color 0.25s ease, color 0.25s ease, fill 0.25s ease;
}

#mobile-drawer #mobile-menu .menu-icon svg {
	color: var(--brandBlue);
	fill: currentColor;
	width: 1.2em;
	height: 1.2em;
	margin-right: .5em;
	vertical-align: middle;
	transition: background-color 0.25s ease, color 0.25s ease, fill 0.25s ease;
}
/* Hover only — no persistence */
#mobile-drawer #mobile-menu .menu-item-has-children:hover {
	background: var(--brandBlue);
	color: #fff;
	transition: background-color 0.25s ease, color 0.25s ease, fill 0.25s ease;
}

#mobile-drawer #mobile-menu .menu-item-has-children:hover > .drawer-nav-drop-wrap a,
#mobile-drawer #mobile-menu .menu-item-has-children:hover > .drawer-nav-drop-wrap .drawer-sub-toggle,
#mobile-drawer #mobile-menu .menu-item-has-children:hover .menu-icon svg,
#mobile-drawer #mobile-menu .menu-item-has-children:hover .drawer-sub-toggle svg {
	color: #fff;
	fill: currentColor;
}

#mobile-drawer #mobile-menu .menu-item-has-children:hover .drawer-sub-toggle,
#mobile-drawer #mobile-menu .menu-item-has-children:hover .drawer-sub-toggle:hover {
	border-left: none;
}

/* Keep background while dropdown is actually open */
#mobile-drawer #mobile-menu .menu-item-has-children > .drawer-nav-drop-wrap .drawer-sub-toggle[aria-expanded="true"],
#mobile-drawer #mobile-menu .menu-item-has-children > .drawer-nav-drop-wrap .drawer-sub-toggle[aria-expanded="true"] + ul {
	background: #333; /* dark gray while open */
	color: #fff;
	transition: background-color 0.25s ease, color 0.25s ease, fill 0.25s ease;
}



/* ------------------------------
	 Base hover effect: ALL menu items
	 ------------------------------ */
#mobile-drawer #mobile-menu .menu-item:hover {
	background: var(--brandBlue);
	color: #fff;
}

#mobile-drawer #mobile-menu .menu-item:hover > a,
#mobile-drawer #mobile-menu .menu-item:hover .menu-icon svg,
#mobile-drawer #mobile-menu .menu-item:hover .drawer-sub-toggle,
#mobile-drawer #mobile-menu .menu-item:hover .drawer-sub-toggle svg {
	color: #fff;
	fill: currentColor;
}

/* ------------------------------
	 Dropdown parent: KEEP background while open
	 ------------------------------ */
/* Match the whole parent <li> when its toggle is expanded */
#mobile-drawer #mobile-menu .menu-item-has-children > .drawer-nav-drop-wrap .drawer-sub-toggle[aria-expanded="true"] {
	background: transparent; /* clear out the button's own color */
}

#mobile-drawer #mobile-menu .menu-item-has-children > .drawer-nav-drop-wrap .drawer-sub-toggle[aria-expanded="true"]::before {
	content: ''; /* hack for specificity if needed */
}


#mobile-drawer #mobile-menu .menu-item-has-children > .drawer-nav-drop-wrap .drawer-sub-toggle[aria-expanded="true"] {
	/* remove default background */
	background: none;
}

/*! Expanded Menu Background Change */
/* This is the key: style the LI if its toggle is expanded */
#mobile-drawer #mobile-menu .menu-item-has-children:has(> .drawer-nav-drop-wrap > .drawer-sub-toggle[aria-expanded="true"]) {
	background: #444;
	color: #fff;
	transition: background-color 0.25s ease, color 0.25s ease, fill 0.25s ease;

}



#mobile-drawer #mobile-menu .menu-item-has-children:has(> .drawer-nav-drop-wrap > .drawer-sub-toggle[aria-expanded="true"]) > .drawer-nav-drop-wrap a,
#mobile-drawer #mobile-menu .menu-item-has-children:has(> .drawer-nav-drop-wrap > .drawer-sub-toggle[aria-expanded="true"]) .menu-icon svg,
#mobile-drawer #mobile-menu .menu-item-has-children:has(> .drawer-nav-drop-wrap > .drawer-sub-toggle[aria-expanded="true"]) .drawer-sub-toggle,
#mobile-drawer #mobile-menu .menu-item-has-children:has(> .drawer-nav-drop-wrap > .drawer-sub-toggle[aria-expanded="true"]) .drawer-sub-toggle svg {
	color: #fff;
	fill: currentColor;
	transition: background-color 0.25s ease, color 0.25s ease, fill 0.25s ease;

}






/* =========================================
	 LAST MENU ITEM (CONTACT)
	 ========================================= */

/* Last nav item (Contact) — standout CTA style */
#mobile-drawer #mobile-menu > .menu-item:last-child > a {
	background: var(--brandYellow);
	color: #fff;
	font-weight: 600;
	display: flex;
	align-items: center;
	padding: .9rem 1rem;
	margin-top: 5px;
}

/* Ensure the icon flips to white */
#mobile-drawer #mobile-menu > .menu-item:last-child .menu-icon svg {
	color: #fff;
	fill: currentColor;

}


/* Hover effect */
#mobile-drawer #mobile-menu > .menu-item:last-child > a:hover {
	background: var(--brandBlue);
	color: #fff;
}





/* =========================================
	 INFO BLOCK (HOURS / SESSIONS / EMAIL / PHONE)
========================================= */
/* Mobile drawer • Info block spacing (uniform across both rows) */
#mobile-drawer .tsMobileMenuInfo.infoBlockGroup {
	padding: 40px 0 0 0;
}

#mobile-drawer .tsMobileMenuInfo.infoBlockGroup .infoRowGroup {
	margin: 0;
}

#mobile-drawer .tsMobileMenuInfo.infoBlockGroup .infoRowGroup:not(:last-child) {
	/*margin-bottom: .25rem;*/
}

#mobile-drawer .tsMobileMenuInfo.infoBlockGroup .infoPair {
	margin: .12rem 0;
}

#mobile-drawer .tsMobileMenuInfo.infoBlockGroup .infoPair strong,
#mobile-drawer .tsMobileMenuInfo.infoBlockGroup .infoPair span,
#mobile-drawer .tsMobileMenuInfo.infoBlockGroup .infoPair a {
	display: inline;
	line-height: 1;
}

#mobile-drawer .tsMobileMenuInfo.infoBlockGroup .infoPair strong {
	margin-right: .5rem;
	opacity: .85;
}

#mobile-drawer .tsMobileMenuInfo.infoBlockGroup .infoPair a {
	font-size: .85rem;
	text-underline-offset: 1px;
}