/* Mewoo Mega Nav 1.0.0
 * Format reference: white panel, equal-width columns with 1px dividers,
 * bold navy column headers, regular navy items, light-blue hover with accent text.
 * Top-level: uppercase. Column headers and items: title case (from menu labels).
 */

:root {
	--mnav-panel-bg: #ffffff;
	--mnav-text: var(--mewoo-navy, #0d1537);
	--mnav-head: var(--mewoo-navy, #0d1537);
	--mnav-hover-bg: #eef7fc;
	--mnav-hover-text: #0fb5ea;
	--mnav-divider: #e6e8ef;
	--mnav-shadow: 0 18px 40px -18px rgba(13, 21, 55, 0.35), 0 2px 6px rgba(13, 21, 55, 0.08);
	--mnav-cta: var(--mewoo-violet, #6d3ff0);
}

/* ---------- top level: uppercase, caret for parents ---------- */
.mewoo-nav__list > li > a {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.mewoo-nav__list > li.menu-item-has-children > a::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.6;
	transition: transform 0.16s ease;
}
.mewoo-nav__list > li.menu-item-has-children:hover > a::after,
.mewoo-nav__list > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

/* ---------- sub-menus: reset, hidden by default ---------- */
.mewoo-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
}

/* ================= DESKTOP (theme mobile breakpoint is 960px) ================= */
@media (min-width: 961px) {
	.mewoo-header__inner { position: relative; }
	.mewoo-nav__list { position: static; }
	.mewoo-nav__list > li { position: static; }
	.mewoo-nav__list > li > a { padding-block: 22px; }

	/* hover bridge so the cursor can cross the gap between link and panel */
	.mewoo-nav__list > li > .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -22px;
		height: 22px;
	}

	.mewoo-nav__list > li:hover > .sub-menu,
	.mewoo-nav__list > li:focus-within > .sub-menu {
		display: block;
	}

	/* ---- mega panel: spans the header shell ---- */
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 60;
		background: var(--mnav-panel-bg);
		box-shadow: var(--mnav-shadow);
		border-top: 1px solid var(--mnav-divider);
		border-radius: 0 0 12px 12px;
		padding: 26px 10px 30px;
	}
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu:hover { display: block; }

	/* columns: equal width, dividers between */
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu {
		display: none;
	}
	.mewoo-nav__list > li.mewoo-has-mega:hover > .sub-menu,
	.mewoo-nav__list > li.mewoo-has-mega:focus-within > .sub-menu {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col {
		padding: 0 26px;
		border-left: 1px solid var(--mnav-divider);
		min-width: 0;
	}
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col:first-child { border-left: 0; }

	/* column header */
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col > a {
		display: block;
		color: var(--mnav-head);
		font-weight: 800;
		font-size: 1rem;
		text-transform: none;
		letter-spacing: 0;
		padding: 4px 8px 12px;
		margin: 0 -8px 6px;
		border-radius: 6px;
	}
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col > a:hover,
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col > a:focus-visible {
		color: var(--mnav-hover-text);
	}

	/* third level (items) always visible inside the open panel */
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col > .sub-menu {
		display: block;
		position: static;
	}
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col > .sub-menu > li > a {
		display: block;
		color: var(--mnav-text);
		font-weight: 500;
		font-size: 0.95rem;
		line-height: 1.35;
		text-transform: none;
		letter-spacing: 0;
		padding: 10px 8px;
		margin: 0 -8px;
		border-radius: 6px;
	}
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col > .sub-menu > li > a:hover,
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col > .sub-menu > li > a:focus-visible,
	.mewoo-nav__list > li.mewoo-has-mega > .sub-menu > li.mewoo-col > .sub-menu > li.current-menu-item > a {
		background: var(--mnav-hover-bg);
		color: var(--mnav-hover-text);
	}

	/* ---- simple dropdown (For Resellers) ---- */
	.mewoo-nav__list > li.mewoo-has-drop { position: relative; }
	.mewoo-nav__list > li.mewoo-has-drop > .sub-menu {
		position: absolute;
		left: 0;
		top: 100%;
		z-index: 60;
		min-width: 300px;
		background: var(--mnav-panel-bg);
		box-shadow: var(--mnav-shadow);
		border-top: 1px solid var(--mnav-divider);
		border-radius: 0 0 12px 12px;
		padding: 12px 10px 14px;
	}
	.mewoo-nav__list > li.mewoo-has-drop > .sub-menu > li > a {
		display: block;
		color: var(--mnav-text);
		font-weight: 500;
		font-size: 0.95rem;
		line-height: 1.35;
		text-transform: none;
		letter-spacing: 0;
		padding: 10px 12px;
		border-radius: 6px;
		white-space: nowrap;
	}
	.mewoo-nav__list > li.mewoo-has-drop > .sub-menu > li > a:hover,
	.mewoo-nav__list > li.mewoo-has-drop > .sub-menu > li > a:focus-visible {
		background: var(--mnav-hover-bg);
		color: var(--mnav-hover-text);
	}
	.mewoo-nav__list > li.mewoo-has-drop > .sub-menu > li.mewoo-nav-cta {
		margin: 8px 2px 0;
		padding-top: 10px;
		border-top: 1px solid var(--mnav-divider);
	}
	.mewoo-nav__list > li.mewoo-has-drop > .sub-menu > li.mewoo-nav-cta > a {
		background: var(--mnav-cta);
		color: #fff;
		text-align: center;
		font-weight: 700;
	}
	.mewoo-nav__list > li.mewoo-has-drop > .sub-menu > li.mewoo-nav-cta > a:hover,
	.mewoo-nav__list > li.mewoo-has-drop > .sub-menu > li.mewoo-nav-cta > a:focus-visible {
		background: var(--mnav-cta);
		color: #fff;
		filter: brightness(1.08);
	}

	/* mobile-only toggle button hidden on desktop */
	.mewoo-sub-toggle { display: none; }
}

/* ================= MOBILE (<= 960px): accordion ================= */
@media (max-width: 960px) {
	.mewoo-nav__list > li > a { padding-block: 0; }
	.mewoo-nav__list > li.menu-item-has-children > a::after { display: none; }

	.mewoo-nav .menu-item-has-children {
		display: grid;
		grid-template-columns: 1fr 44px;
		align-items: center;
	}
	.mewoo-nav .menu-item-has-children > a { grid-column: 1; }
	.mewoo-sub-toggle {
		grid-column: 2;
		width: 44px;
		height: 44px;
		border: 0;
		background: transparent;
		color: inherit;
		display: grid;
		place-items: center;
		cursor: pointer;
		border-radius: 8px;
	}
	.mewoo-sub-toggle::before {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform 0.16s ease;
		opacity: 0.8;
	}
	.mewoo-nav .menu-item-has-children.is-open > .mewoo-sub-toggle::before {
		transform: rotate(225deg) translate(-2px, -2px);
	}
	.mewoo-nav .menu-item-has-children > .sub-menu {
		grid-column: 1 / -1;
		display: none;
		padding-left: 14px;
		border-left: 1px solid rgba(255, 255, 255, 0.12);
		margin: 2px 0 6px;
	}
	.mewoo-nav .menu-item-has-children.is-open > .sub-menu { display: block; }

	/* column headers on mobile (mega items only): bold, not uppercase */
	.mewoo-nav .mewoo-has-mega > .sub-menu > li.mewoo-col > a { font-weight: 800; text-transform: none; letter-spacing: 0; }
	.mewoo-nav .sub-menu a { font-weight: 550; text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
	.mewoo-nav .sub-menu > li.mewoo-nav-cta > a {
		margin-top: 6px;
		justify-content: center;
		background: var(--mnav-cta);
		color: #fff;
		border-radius: 8px;
		font-weight: 700;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mewoo-nav__list > li.menu-item-has-children > a::after,
	.mewoo-sub-toggle::before { transition: none; }
}