.hd-mega-menu {
	position: relative;
	z-index: 50;
}

/* Critical first-paint presentation: the opener is already in server HTML. */
.hd-mobile-menu-toggle { display: none; align-items: center; gap: 8px; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 8px; border: 0; background: transparent; color: #333; font: inherit; cursor: pointer; }
.hd-mobile-menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hd-mobile-menu-toggle__icon, .hd-mobile-menu-toggle__icon::before, .hd-mobile-menu-toggle__icon::after { display: block; width: 20px; height: 2px; background: currentColor; content: ""; }
.hd-mobile-menu-toggle__icon { position: relative; }
.hd-mobile-menu-toggle__icon::before, .hd-mobile-menu-toggle__icon::after { position: absolute; right: 0; }
.hd-mobile-menu-toggle__icon::before { top: -6px; }
.hd-mobile-menu-toggle__icon::after { top: 6px; }
.hd-mobile-menu-toggle__label { font-size: var(--hd-menu-mobile-font-size, 14px); font-weight: var(--hd-menu-font-weight, 600); }
.hd-mega-menu[data-hd-desktop-mode="drawer"] > .hd-mega-menu__desktop { display: none; }
.hd-mega-menu[data-hd-desktop-mode="drawer"] > .hd-mobile-menu-toggle { display: inline-flex; }
.hd-mega-menu[data-hd-menu-layout="drawer"] > .hd-mega-menu__desktop { display: none; }
.hd-mega-menu[data-hd-menu-layout="drawer"] > .hd-mobile-menu-toggle { display: inline-flex; }
.hd-mega-menu[data-hd-menu-layout="horizontal"] > .hd-mobile-menu-toggle { display: none; }
.hd-mega-menu.hd-menu-fallback > .hd-mega-menu__desktop { display: block !important; }
.hd-mega-menu.hd-menu-fallback > .hd-mobile-menu-toggle { display: none !important; }

.hd-mega-menu :where(a, button):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[dir="rtl"] .hd-mega-menu .sub-menu .sub-menu { left: auto; right: calc(100% + .65rem); }
.hd-mega-menu__list { flex-wrap: wrap; }

.hd-mega-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hd-mega-menu__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hd-mega-menu__list > li {
	position: relative;
}

.hd-mega-menu__list > .hd-mega-item--full,
.hd-mega-menu__list > .hd-mega-item--container {
	position: relative;
}

.hd-mega-menu a {
	color: inherit;
	text-decoration: none;
}

.hd-mega-menu__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 46px;
	padding: 0.65rem 0.8rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.hd-mega-menu__list > li > a:hover,
.hd-mega-menu__list > li > a:focus-visible {
	color: var(--wp--preset--color--hd-primary, #2457d6);
}

.hd-mega-menu__badge {
	display: inline-flex;
	align-items: center;
	min-height: 18px;
	padding-inline: 0.42rem;
	border-radius: 999px;
	background: var(--wp--preset--color--hd-primary, #2457d6);
	color: var(--wp--preset--color--hd-background, #fff);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.hd-mega-menu__submenu-toggle {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 36px;
	margin-inline-start: -0.65rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: currentColor;
	cursor: pointer;
}

.hd-mega-menu__submenu-toggle span {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 180ms ease;
}

.hd-mega-item.is-open > .hd-mega-menu__submenu-toggle span {
	transform: translateY(2px) rotate(225deg);
}

.hd-mega-panel,
.hd-mega-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.hd-mega-panel {
	box-sizing: border-box;
	max-width: calc(100vw - var(--wp--preset--hd-menu-gutter, 1.25rem) - var(--wp--preset--hd-menu-gutter, 1.25rem));
	border: 1px solid #e5e7eb;
	border-radius: 0 0 0.75rem 0.75rem;
	background: var(--wp--preset--color--hd-background, #fff);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
	color: var(--wp--preset--color--hd-foreground, #172033);
}

.hd-mega-panel__inner {
	box-sizing: border-box;
	max-width: 100%;
	padding: clamp(1.5rem, 3vw, 2.75rem);
}

.hd-mega-item--full > .hd-mega-panel {
	width: calc(100vw - var(--wp--preset--hd-menu-gutter, 1.25rem) - var(--wp--preset--hd-menu-gutter, 1.25rem));
	border-radius: 0;
}

.hd-mega-item--full > .hd-mega-panel > .hd-mega-panel__inner {
	width: min(1200px, 100%);
	margin-inline: auto;
}

.hd-mega-item--container > .hd-mega-panel {
	width: min(1200px, calc(100vw - var(--wp--preset--hd-menu-gutter, 1.25rem) - var(--wp--preset--hd-menu-gutter, 1.25rem)));
}

.hd-mega-item--compact > .hd-mega-panel {
	width: min(440px, calc(100vw - 2rem));
}

.hd-mega-menu__list > li > .hd-mega-panel,
.hd-mega-menu__list > li > .sub-menu {
	left: auto;
	right: auto;
	inset-inline-start: 0;
}

.hd-mega-item--hover:not(.hd-is-closed):hover > .hd-mega-panel,
.hd-mega-item--hover:not(.hd-is-closed):focus-within > .hd-mega-panel,
.hd-mega-item.is-open > .hd-mega-panel,
.hd-mega-menu li:not(.hd-is-closed):hover > .sub-menu,
.hd-mega-menu li:not(.hd-is-closed):focus-within > .sub-menu,
.hd-mega-menu li.is-open > .sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.hd-mega-item--full.is-open > .hd-mega-panel,
.hd-mega-item--full:hover > .hd-mega-panel,
.hd-mega-item--full:focus-within > .hd-mega-panel,
.hd-mega-item--container.is-open > .hd-mega-panel,
.hd-mega-item--container:hover > .hd-mega-panel,
.hd-mega-item--container:focus-within > .hd-mega-panel {
	transform: translateY(0);
}

.hd-mega-menu .sub-menu {
	min-width: 220px;
	padding: 0.65rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--hd-background, #fff);
	box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
}

.hd-mega-menu .sub-menu li {
	position: relative;
}

.hd-mega-menu .sub-menu a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: 0.35rem;
}

.hd-mega-menu .sub-menu a:hover,
.hd-mega-menu .sub-menu a:focus-visible {
	background: var(--wp--preset--color--hd-muted, #f4f6fa);
	color: var(--wp--preset--color--hd-primary, #2457d6);
}

.hd-mega-menu .sub-menu .sub-menu {
	top: -0.65rem;
	left: calc(100% + 0.65rem);
}

.hd-mega-menu__notice {
	margin: 0;
	font-size: var(--wp--preset--font-size--hd-small, .875rem);
}

@media (prefers-reduced-motion: reduce) {
	.hd-mega-panel,
	.hd-mega-menu .sub-menu,
	.hd-mega-menu__submenu-toggle span {
		transition: none;
	}
}

/* Per-block controls also apply to the server-rendered editor preview. */
.hd-mega-menu__list { gap: var(--hd-menu-gap, 4px); }
.hd-mega-menu__list > li > a { font-size: var(--hd-menu-font-size, 16px); font-weight: var(--hd-menu-font-weight, 600); }
.hd-mega-menu .sub-menu a { display: flex; align-items: center; gap: .4rem; font-size: var(--hd-menu-submenu-font-size, 14px); font-weight: var(--hd-menu-font-weight, 600); overflow-wrap: anywhere; }
.hd-menu-icon { width: var(--hd-menu-icon-size, 20px); height: var(--hd-menu-icon-size, 20px); flex: 0 0 auto; vertical-align: middle; }
.hd-mega-menu li > .hd-mega-menu__submenu-toggle[aria-expanded="true"] span { transform: translateY(2px) rotate(225deg); }
.hd-mega-menu .sub-menu, .hd-mega-panel { box-sizing: border-box; min-width: min(220px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
.hd-mega-panel { overflow: auto; overflow-wrap: anywhere; }
.hd-mega-menu li > .hd-mega-panel { width: var(--hd-submenu-width, min(1200px, calc(100vw - 24px))); height: var(--hd-submenu-height, auto); }
.hd-mega-menu .hd-mega-item--compact > .hd-mega-panel { width: var(--hd-submenu-width, 440px); }
.hd-mega-menu .hd-mega-item--full > .hd-mega-panel { width: var(--hd-submenu-width, calc(100vw - 24px)); }
.hd-mega-menu li > .sub-menu { width: var(--hd-submenu-width, 220px); height: var(--hd-submenu-height, auto); }
.hd-mega-menu li > .sub-menu, .hd-mega-menu li > .hd-mega-panel { min-width: 0; }
.hd-mega-menu__desktop[hidden] { display: none; }
.hd-mega-menu .hd-dropdown--full > :is(.hd-mega-panel, .sub-menu) { width: calc(100vw - 48px); max-width: calc(100vw - 48px); height: auto; }
.hd-mega-menu .hd-dropdown--compact > .hd-mega-panel { width: 440px; height: auto; }
.hd-mega-menu .hd-dropdown--compact > .sub-menu { width: 220px; height: auto; }
@media (hover: hover) {
 .hd-mega-menu li:hover > .hd-mega-menu__submenu-toggle span { transform: translateY(2px) rotate(225deg); }
}

/* Modern Scrollbar */
.hd-mega-panel,
.hd-mega-menu .sub-menu {
	scrollbar-width: thin;
	scrollbar-color: rgba(156, 163, 175, 0.6) transparent;
	overflow-y: auto;
}

.hd-mega-panel::-webkit-scrollbar,
.hd-mega-menu .sub-menu::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.hd-mega-panel::-webkit-scrollbar-track,
.hd-mega-menu .sub-menu::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 4px;
}

.hd-mega-panel::-webkit-scrollbar-thumb,
.hd-mega-menu .sub-menu::-webkit-scrollbar-thumb {
	background-color: rgba(156, 163, 175, 0.6);
	border-radius: 4px;
}

.hd-mega-panel::-webkit-scrollbar-thumb:hover,
.hd-mega-menu .sub-menu::-webkit-scrollbar-thumb:hover {
	background-color: rgba(107, 114, 128, 0.8);
}

