/* =========================================================
   KINETIC MARKET
   HEADER — EXPLORE MEGA MENU
   Desktop only
   ========================================================= */


/* ---------------------------------------------------------
   Explore menu item
   --------------------------------------------------------- */

#header-menu-1 .km-nav-explore {
	position: static;
	display: flex;
	align-items: center;
}


/* Keep Explore itself as a normal link */

#header-menu-1 .km-nav-explore > .ct-menu-link {
	position: relative;
}


/* Our independent dropdown control */

#header-menu-1 .km-explore-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 32px;

	margin-left: -7px;
	padding: 0;

	border: 0;
	background: transparent;
	color: currentColor;

	cursor: pointer;
}

#header-menu-1 .km-explore-toggle svg {
	display: block;
	fill: currentColor;

	transition: transform 180ms ease;
}

#header-menu-1 .km-explore-open > .km-explore-toggle svg {
	transform: rotate(180deg);
}


/* ---------------------------------------------------------
   Main panel
   --------------------------------------------------------- */

#header-menu-1 .km-explore-panel {
	position: absolute;
	z-index: 9999;

	top: 100%;
	left: 50%;

	width: min(900px, calc(100vw - 48px));

	padding-top: 0;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translate(-50%, 8px);

	transition:
		opacity 160ms ease,
		transform 160ms ease,
		visibility 160ms ease;
}

#header-menu-1 .km-explore-open > .km-explore-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: translate(-50%, 0);
}


/* Actual menu surface */

#header-menu-1 .km-explore-panel__inner {
	overflow: hidden;

	background: #ffffff;

	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 4px;

	box-shadow:
		0 18px 45px rgba(0, 0, 0, 0.13),
		0 4px 12px rgba(0, 0, 0, 0.06);
}


/* ---------------------------------------------------------
   Category level
   --------------------------------------------------------- */

#header-menu-1 .km-explore-level {
	padding: 30px 32px 24px;
}

#header-menu-1 .km-explore-level[hidden] {
	display: none !important;
}


/* ---------------------------------------------------------
   Level header
   --------------------------------------------------------- */

#header-menu-1 .km-explore-level__header {
	margin-bottom: 22px;
}

#header-menu-1 .km-explore-eyebrow {
	margin-bottom: 6px;

	color: #035841;

	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;

	letter-spacing: 0.09em;
	text-transform: uppercase;
}

#header-menu-1 .km-explore-title {
	margin: 0;

	color: #111111;

	font-size: 22px;
	font-weight: 750;
	line-height: 1.2;
}


/* Back control */

#header-menu-1 .km-explore-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin: 0 0 10px;
	padding: 0;

	border: 0;
	background: transparent;

	color: #035841;

	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;

	letter-spacing: 0.07em;
	text-transform: uppercase;

	cursor: pointer;
}

#header-menu-1 .km-explore-back:hover,
#header-menu-1 .km-explore-back:focus-visible {
	color: #111111;
}


/* ---------------------------------------------------------
   Category grid
   --------------------------------------------------------- */

#header-menu-1 .km-explore-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	column-gap: 28px;
	row-gap: 8px;
}


/* One category row */

#header-menu-1 .km-explore-item {
	display: flex;
	align-items: stretch;

	min-width: 0;

	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}


/* Category archive link */

#header-menu-1 .km-explore-item__link {
	display: flex;
	align-items: center;
	flex: 1;

	min-width: 0;
	min-height: 48px;

	padding: 10px 8px 10px 0;

	color: #111111;

	font-size: 14px;
	font-weight: 650;
	line-height: 1.3;

	text-decoration: none;
}

#header-menu-1 .km-explore-item__link:hover,
#header-menu-1 .km-explore-item__link:focus-visible {
	color: #035841;
}


/* Drill-down arrow */

#header-menu-1 .km-explore-item__drill {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 38px;

	width: 38px;

	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;

	color: #035841;

	font-size: 18px;
	line-height: 1;

	cursor: pointer;

	transition:
		background 150ms ease,
		transform 150ms ease;
}

#header-menu-1 .km-explore-item__drill:hover,
#header-menu-1 .km-explore-item__drill:focus-visible {
	background: rgba(3, 88, 65, 0.07);
}

#header-menu-1 .km-explore-item__drill:hover span {
	transform: translateX(2px);
}

#header-menu-1 .km-explore-item__drill span {
	transition: transform 150ms ease;
}

#header-menu-1 .km-explore-level:not([data-km-level="0"])
.km-explore-item {
	border-bottom: 0;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

#header-menu-1 .km-explore-level__footer {
	margin-top: 18px;
	padding-top: 0;
}

#header-menu-1 .km-explore-view-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	color: #035841;

	font-size: 13px;
	font-weight: 750;
	line-height: 1.3;

	text-decoration: none;
}

#header-menu-1 .km-explore-view-all:hover,
#header-menu-1 .km-explore-view-all:focus-visible {
	color: #111111;
}

#header-menu-1 .km-explore-view-all span {
	transition: transform 150ms ease;
}

#header-menu-1 .km-explore-view-all:hover span {
	transform: translateX(3px);
}


/* ---------------------------------------------------------
   Keyboard focus
   --------------------------------------------------------- */

#header-menu-1 .km-explore-toggle:focus-visible,
#header-menu-1 .km-explore-back:focus-visible,
#header-menu-1 .km-explore-item__drill:focus-visible,
#header-menu-1 .km-explore-item__link:focus-visible,
#header-menu-1 .km-explore-view-all:focus-visible {
	outline: 2px solid #f2b544;
	outline-offset: 2px;
}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	#header-menu-1 .km-explore-panel,
	#header-menu-1 .km-explore-toggle svg,
	#header-menu-1 .km-explore-item__drill,
	#header-menu-1 .km-explore-item__drill span,
	#header-menu-1 .km-explore-view-all span {
		transition: none !important;
	}
}


/* ---------------------------------------------------------
   Keep this desktop-only.
   Mobile drawer gets its own implementation later.
   --------------------------------------------------------- */

@media (max-width: 999px) {

	#header-menu-1 .km-explore-panel,
	#header-menu-1 .km-explore-toggle {
		display: none !important;
	}
}