/**
 * Card-based mega menu styling.
 *
 * Every selector is scoped under .acepro-mega-menu-instance — the wrapper
 * inc/mega-menu.php renders INSIDE any Divi Menu Module marked with the
 * "acepro-mega-menu" CSS class (Advanced → CSS ID & Classes). Divi's own
 * module wrapper (.et_pb_menu, spacing, background, etc.) stays completely
 * untouched around it, so it cannot collide with anything else on the site.
 * There can be more than one instance on a page (one per marked Menu
 * Module), which is why nothing here uses an #id selector.
 */

.acepro-mega-menu-instance,
.acepro-mega-menu-instance *{
	box-sizing: border-box;
}

/* Every tappable element: kill the ~300ms tap delay some mobile browsers
   still apply and the grey flash-on-tap overlay, so touches feel instant. */
.acepro-mega-menu-instance a,
.acepro-mega-menu-instance button{
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/*
 * Invisible in-page jump targets, prepended before specific page sections by
 * the the_content filter in inc/mega-menu.php — lets the About submenu's
 * Philosophy & Values / Journey links land on the right section instead of
 * just the top of the page. scroll-margin-top keeps the target from
 * landing underneath Divi's fixed/sticky header; bump this one number if
 * that header's height ever changes.
 */
.acepro-anchor{
	display: block;
	height: 0;
	scroll-margin-top: 110px;
}

.acepro-mega-menu-instance{
	--acepro-megamenu-ink: #1f2933;
	--acepro-megamenu-ink-2: #111827;
	--acepro-megamenu-orange: #f97316;
	--acepro-megamenu-indigo: #4f46e5;
	--acepro-megamenu-white: #ffffff;
	--acepro-megamenu-gray-50: #f8f9fb;
	--acepro-megamenu-gray-100: #eef0f4;
	--acepro-megamenu-gray-400: #97a0ae;
	--acepro-megamenu-graphite: #1f2933;

	display: block;
	position: relative;
	z-index: 9000;
	background: rgba(31, 41, 51, 0.97);
	font-family: 'Helvetica Neue', Arial, 'Segoe UI', sans-serif;
}

/* ─── bar ─── */
.acepro-megamenu-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	height: 64px;
}

/* ─── desktop nav ─── */
.acepro-megamenu-links{
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1;
	justify-content: center;
}

.acepro-megamenu-item{ position: relative; }

.acepro-megamenu-link{
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 16px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255,255,255,0.68);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.acepro-megamenu-link:hover{ color: #fff; }

.acepro-megamenu-caret{
	font-size: 0.6rem;
	opacity: 0.5;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.acepro-megamenu-item:hover .acepro-megamenu-caret{ transform: rotate(180deg); opacity: 1; }
.acepro-megamenu-item:hover .acepro-megamenu-link{ color: #fff; }

/* ─── dropdown panel ─── */
.acepro-megamenu-panel{
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 10px;
	transform: translateX(-50%) translateY(-6px);
	background: var(--acepro-megamenu-white);
	border-radius: 14px;
	box-shadow: 0 20px 56px rgba(17,24,39,0.22);
	border: 1px solid rgba(17,24,39,0.06);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 20;
}
/* invisible bridge so the panel doesn't close on the diagonal mouse path */
.acepro-megamenu-panel::before{
	content: '';
	position: absolute;
	top: -18px;
	left: 0;
	right: 0;
	height: 18px;
}
.acepro-megamenu-item:hover .acepro-megamenu-panel{
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: all;
}

.acepro-megamenu-panel--sm{
	width: 300px;
	padding: 14px;
	left: 0;
	transform: translateX(0) translateY(-6px);
}
.acepro-megamenu-item:hover .acepro-megamenu-panel--sm{ transform: translateX(0) translateY(0); }

.acepro-megamenu-panel--lg{
	width: 1080px;
	padding: 28px;
	left: 50%;
}

.acepro-megamenu-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}
.acepro-megamenu-panel--sm .acepro-megamenu-grid{
	grid-template-columns: 1fr;
}

.acepro-megamenu-card{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.12s ease;
}
.acepro-megamenu-card:hover{ background: var(--acepro-megamenu-gray-50); }

.acepro-megamenu-card-icon{
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #ece9fd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	flex-shrink: 0;
	overflow: hidden;
}
.acepro-megamenu-card-icon img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 5px;
}
.acepro-megamenu-panel--sm .acepro-megamenu-card-icon{ width: 30px; height: 30px; }

/* Fallback when a menu item's label has no leading emoji and its URL
   doesn't match a real Program Domain page — see
   acepro_mega_menu_item_to_card() in inc/mega-menu.php. */
.acepro-megamenu-card-letter{
	font-weight: 800;
	font-size: 0.85rem;
	color: var(--acepro-megamenu-indigo);
}

.acepro-megamenu-card-text{ min-width: 0; }
.acepro-megamenu-card-title{
	font-size: 11px;
	font-weight: 700;
	color: var(--acepro-megamenu-graphite);
	line-height: 1.25;
}
.acepro-megamenu-card-sub{
	font-size: 0.68rem;
	color: var(--acepro-megamenu-gray-400);
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.acepro-megamenu-panel-foot{
	padding-top: 16px;
	margin-top: 16px;
	border-top: 1px solid var(--acepro-megamenu-gray-100);
	display: flex;
	justify-content: flex-end;
}
.acepro-megamenu-foot-link{
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--acepro-megamenu-indigo);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: gap 0.15s ease;
}
.acepro-megamenu-foot-link:hover{ gap: 9px; }

/* ─── hamburger (mobile) ─── */
.acepro-megamenu-hamburger{
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgba(255,255,255,0.1);
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}
.acepro-megamenu-hamburger span{
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.acepro-megamenu-hamburger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.acepro-megamenu-hamburger.is-open span:nth-child(2){ opacity: 0; }
.acepro-megamenu-hamburger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ─── mobile drawer ─── */
.acepro-megamenu-overlay{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(17,24,39,0.55);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.acepro-megamenu-overlay.is-show{ display: block; opacity: 1; }

.acepro-megamenu-drawer{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 320px;
	max-width: 86vw;
	background: var(--acepro-megamenu-ink-2);
	z-index: 9999;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* momentum scrolling on older iOS Safari */
	overscroll-behavior: contain; /* dragging past the drawer's own end shouldn't scroll the page behind it */
}
.acepro-megamenu-drawer.is-open{ transform: translateX(0); }

.acepro-megamenu-drawer-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	flex-shrink: 0;
}
.acepro-megamenu-drawer-title{
	font-weight: 800;
	font-size: 0.95rem;
	color: #fff;
	letter-spacing: -0.01em;
}
.acepro-megamenu-drawer-close{
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(255,255,255,0.1);
	border: none;
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}

.acepro-megamenu-accordion-item{ border-bottom: 1px solid rgba(255,255,255,0.07); }
.acepro-megamenu-accordion-item--link{
	display: block;
	padding: 14px 20px;
	font-size: 0.85rem;
	font-weight: 700;
	color: rgba(255,255,255,0.82);
	text-decoration: none;
}
.acepro-megamenu-accordion-item--link:hover{ color: #fff; }
.acepro-megamenu-accordion-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	padding: 14px 20px;
	font-size: 0.85rem;
	font-weight: 700;
	color: rgba(255,255,255,0.82);
	cursor: pointer;
}
.acepro-megamenu-accordion-arrow{
	font-size: 0.65rem;
	color: rgba(255,255,255,0.35);
	transition: transform 0.2s ease;
}
.acepro-megamenu-accordion-head.is-open .acepro-megamenu-accordion-arrow{ transform: rotate(180deg); }

.acepro-megamenu-accordion-body{
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.acepro-megamenu-accordion-body.is-open{ max-height: 900px; }

.acepro-megamenu-accordion-link{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 20px 9px 30px;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.55);
	text-decoration: none;
}
.acepro-megamenu-accordion-link:hover{ color: rgba(255,255,255,0.9); }
.acepro-megamenu-accordion-link .acepro-megamenu-card-icon{ width: 24px; height: 24px; font-size: 0.8rem; background: rgba(255,255,255,0.08); }
/* .acepro-megamenu-card-title has its own hardcoded dark color for the white desktop
   panels — that wins over .acepro-megamenu-accordion-link's color here since the title
   <span> doesn't inherit it, so the dark drawer needs its own override. */
.acepro-megamenu-accordion-link .acepro-megamenu-card-title{ color: rgba(255,255,255,0.92); }

/* ─── responsive ─── */
@media (max-width: 1080px){
	.acepro-megamenu-panel--lg{ width: 700px; }
	.acepro-megamenu-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px){
	.acepro-megamenu-links{ display: none; }
	.acepro-megamenu-hamburger{ display: flex; }
}

@media (max-width: 480px){
	.acepro-megamenu-drawer{ width: 100%; max-width: 100%; }
	.acepro-megamenu-bar{ padding: 0 16px; }
}