/* Remove the mobile tap-highlight flash on every clickable element */
.wwj-nav-bar a, .wwj-nav-bar button,
.wwj-mobile-sidebar a, .wwj-mobile-sidebar button,
.wwj-mega-item, .wwj-mobile-mega-item {
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.wwj-nav-bar {
	position: relative; /* mega panel positions relative to this, not to each menu item */
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #000000;
	padding: 20px 40px;
	width: 100%;
	box-sizing: border-box;
}

/* ============ DESKTOP MENU ============ */
.wwj-menu-list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 36px;
	flex-wrap: nowrap;
}

.wwj-menu-item {
	position: static;
	/* extra invisible padding below the link keeps the hover chain unbroken
	   while the mouse travels down to the full-width panel */
	padding-bottom: 22px;
	margin-bottom: -22px;
}

.wwj-menu-item > a {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #ffffff;
	text-decoration: none;
	font-size: 15px;
	white-space: nowrap;
	transition: color .2s ease;
}
.wwj-menu-item > a:hover { color: #C2A38F; }

.wwj-caret { display: inline-flex; align-items: center; color: currentColor; }
.wwj-caret svg { display: block; transition: transform .2s ease; }
.wwj-menu-item.has-mega:hover .wwj-caret svg,
.wwj-menu-item.has-mega.is-open .wwj-caret svg { transform: rotate(180deg); }

/* Mega panel - full width, sits directly under the nav bar, top corners square */
.wwj-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	background: #ffffff;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 25px 45px rgba(0,0,0,0.18);
	padding: 40px 60px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 999;
}

.wwj-menu-item.has-mega.is-open .wwj-mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.wwj-mega-grid {
	display: grid;
	grid-template-columns: repeat(var(--wwj-mega-cols, 4), 1fr);
	gap: 30px;
}

.wwj-mega-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	text-align: center;
}
.wwj-mega-item img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.wwj-mega-placeholder {
	width: 100%;
	height: 180px;
	border-radius: 8px;
	display: block;
	background: linear-gradient(135deg, #ECE3D6 0%, #D9CBB8 100%);
}
.wwj-mega-item span {
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 500;
	transition: color .2s ease;
}
.wwj-mega-item:hover span { color: #C2A38F; }

/* Right button (desktop) */
.wwj-expert-btn {
	background: #C2A38F;
	color: #ffffff;
	text-decoration: none;
	padding: 12px 26px;
	border-radius: 30px;
	font-size: 14px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background .2s ease;
}
.wwj-expert-btn:hover { background: #a98a73; }
.wwj-desktop-btn { margin-left: 32px; }

/* ============ MOBILE TOGGLE BUTTON ============ */
.wwj-mobile-toggle {
	display: none; /* shown via per-widget inline media query, and as a fallback below */
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: #ffffff;
	font-size: 24px;
	padding: 4px;
	line-height: 1;
	min-width: 24px;
	min-height: 24px;
}
.wwj-mobile-toggle svg,
.wwj-mobile-toggle i { width: 24px; height: 24px; display: block; }
.wwj-mobile-toggle i::before { font-size: 24px; line-height: 1; }

/* ============ MOBILE OFF-CANVAS SIDEBAR ============ */
.wwj-mobile-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	z-index: 99998;
}
.wwj-mobile-overlay.is-active { opacity: 1; visibility: visible; }

.wwj-mobile-sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 320px;
	max-width: 90vw;
	background: #0A0A0A;
	z-index: 99999;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: transform .35s ease;
	box-sizing: border-box;
}
.wwj-sidebar-right { right: 0; transform: translateX(100%); }
.wwj-sidebar-left  { left: 0;  transform: translateX(-100%); }
.wwj-mobile-sidebar.is-open { transform: translateX(0); }

.wwj-mobile-sidebar-header {
	display: flex;
	justify-content: flex-end;
	padding: 20px 20px 0;
}
.wwj-mobile-close {
	background: none;
	border: none;
	cursor: pointer;
	color: #ffffff;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	min-width: 20px;
	min-height: 20px;
}
.wwj-mobile-close svg,
.wwj-mobile-close i { width: 20px; height: 20px; display: block; }
.wwj-mobile-close i::before { font-size: 20px; line-height: 1; }

.wwj-mobile-menu-list {
	list-style: none;
	margin: 0;
	padding: 10px 24px 24px;
}
.wwj-mobile-menu-item { border-bottom: 1px solid rgba(255,255,255,0.1); }

.wwj-mobile-menu-item > a,
.wwj-mobile-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	color: #ffffff;
	text-decoration: none;
	font-size: 16px;
	padding: 16px 2px;
	cursor: pointer;
	box-sizing: border-box;
}

.wwj-mobile-caret { display: inline-flex; align-items: center; }
.wwj-mobile-caret svg { display: block; transition: transform .25s ease; }
.wwj-mobile-menu-item.is-expanded .wwj-mobile-caret svg { transform: rotate(180deg); }

.wwj-mobile-mega-panel {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	max-height: 0;
	overflow: hidden;
	padding: 0 2px;
	transition: max-height .35s ease, padding .35s ease;
}
.wwj-mobile-menu-item.is-expanded .wwj-mobile-mega-panel {
	max-height: 1200px;
	padding: 4px 2px 18px;
}

.wwj-mobile-mega-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	text-align: center;
}
.wwj-mobile-mega-item img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.wwj-mobile-mega-placeholder {
	width: 100%;
	height: 100px;
	border-radius: 6px;
	display: block;
	background: linear-gradient(135deg, #2A2A2A 0%, #1A1A1A 100%);
}
.wwj-mobile-mega-item span {
	color: #E5DDD3;
	font-size: 13px;
}

.wwj-mobile-expert-btn {
	display: block;
	text-align: center;
	margin: 8px 24px 30px;
}

/* Fallback breakpoint (in case a widget instance ever loads without its inline style) */
@media (max-width: 1024px) {
	.wwj-menu-list,
	.wwj-desktop-btn { display: none !important; }
	.wwj-mobile-toggle { display: inline-flex !important; }
}
@media (min-width: 1025px) {
	.wwj-mobile-toggle,
	.wwj-mobile-sidebar,
	.wwj-mobile-overlay { display: none; }
}

body.wwj-menu-open { overflow: hidden; }