/* =========================================================================
   Dotance Mega Menu — frontend styles
   All rules scoped under .dotance-mega-menu. No !important.
   Mobile mode is toggled by JS via the .dmm-mobile class on the nav, so the
   breakpoint stays fully configurable per-widget. A @media fallback at 1024px
   keeps things usable if JS is disabled.
   ========================================================================= */

.dotance-mega-menu {
	--dmm-primary: #4353ff;
	--dmm-text: #1a1a2e;
	--dmm-top-text: inherit;
	--dmm-heading: #999999;
	--dmm-border: #eeeeee;
	--dmm-hover-bg: #f5f7ff;
	--dmm-panel-bg: #ffffff;
	--dmm-panel-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
	--dmm-radius: 7px;
	--dmm-banner-bg: #eaf1fb;
	--dmm-btn-bg: #e63946;
	--dmm-btn-text: #ffffff;
	--dmm-panel-max: 1200px;
	--dmm-top-size: 14px;
	--dmm-card-size: 14px;
	--dmm-heading-size: 11px;
	--dmm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	position: relative;
	font-family: var(--dmm-font);
}

.dotance-mega-menu *,
.dotance-mega-menu *::before,
.dotance-mega-menu *::after {
	box-sizing: border-box;
}

/* =========================================================================
   THEME COMPATIBILITY HARDENING
   Some themes apply aggressive global styles to ul/li/a/buttons (often with
   !important), which can show list bullets, recolor menu text to match the
   header background, or override the banner button. These scoped overrides
   keep the mega menu rendering correctly on any theme. !important is
   intentional and limited to the exact properties themes tend to fight.
   ========================================================================= */

/* Kill inherited list bullets / markers */
.dotance-mega-menu ul,
.dotance-mega-menu ol,
.dotance-mega-menu li {
	list-style: none !important;
}

.dotance-mega-menu li::marker {
	content: "" !important;
}

/* Top-bar links follow the widget's "Top Bar Text Color" control */
.dotance-mega-menu .dotance-mega-item > a,
.dotance-mega-menu .dotance-mega-item > a .dotance-mega-label {
	color: var(--dmm-top-text) !important;
}

/* Card links keep their intended colors, not the theme's link color */
.dotance-mega-menu .dotance-mega-links a,
.dotance-mega-menu .dotance-mega-links a .dotance-mega-text {
	color: var(--dmm-text) !important;
}

.dotance-mega-menu .dotance-mega-links a:hover,
.dotance-mega-menu .dotance-mega-links a:hover .dotance-mega-text,
.dotance-mega-menu .dotance-mega-links a:focus-visible,
.dotance-mega-menu .dotance-mega-links a:focus-visible .dotance-mega-text {
	color: var(--dmm-primary) !important;
}

/* Column headings: keep the small uppercase label, not the theme's h4 size */
.dotance-mega-menu .dotance-mega-col-heading {
	font-size: var(--dmm-heading-size, 11px) !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	margin: 0 0 12px !important;
	text-transform: uppercase !important;
}

/* Banner button keeps its own background + white text */
.dotance-mega-menu .dotance-mega-banner-btn {
	background: var(--dmm-btn-bg) !important;
	color: var(--dmm-btn-text, #fff) !important;
}

/* ── Top-level list ──────────────────────────────────────────────────────── */

.dotance-mega-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.dotance-mega-item {
	margin: 0;
	padding: 0;
}

.dotance-mega-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	font-size: var(--dmm-top-size, 14px);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	color: var(--dmm-top-text);
	transition: color 0.18s ease;
}

.dotance-mega-item > a:hover,
.dotance-mega-item > a:focus-visible {
	color: var(--dmm-primary);
}

/* Dropdown indicator (▼) */
.dotance-mega-indicator {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform 0.2s ease;
	opacity: 0.7;
}

.dotance-mega-item.dmm-active > a .dotance-mega-indicator {
	transform: rotate(-135deg) translateY(-1px);
}

/* ── Dropdown panel (desktop) ────────────────────────────────────────────── */

/* The panel itself is the white card. JS sets inline left/width so the card
   is centered in the VIEWPORT (not the nav), clamped to the contained
   max-width. The ::before bridge keeps hover alive across the 12px gap. */
.dotance-mega-panel {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 999;
	background: var(--dmm-panel-bg);
	border-radius: 10px;
	border-top: 3px solid var(--dmm-primary);
	box-shadow: var(--dmm-panel-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	pointer-events: none;
}

.dotance-mega-panel::before {
	content: '';
	position: absolute;
	top: -15px;
	left: 0;
	right: 0;
	height: 15px;
}

.dotance-mega-item.dmm-active > .dotance-mega-panel,
.dotance-mega-item:focus-within > .dotance-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	pointer-events: auto;
}

.dotance-mega-panel-inner {
	display: flex;
	gap: 20px;
	padding: 28px;
}

/* ── Columns ─────────────────────────────────────────────────────────────── */

.dotance-mega-column {
	flex: 1 1 0;
	min-width: 210px;
}

.dotance-mega-col-heading {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--dmm-heading);
}

.dotance-mega-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dotance-mega-links > li {
	margin: 0 0 8px;
}

.dotance-mega-links > li:last-child {
	margin-bottom: 0;
}

.dotance-mega-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--dmm-border);
	border-radius: var(--dmm-radius);
	background: var(--dmm-panel-bg);
	font-size: var(--dmm-card-size, 14px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--dmm-text);
	text-decoration: none;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.dotance-mega-links a:hover,
.dotance-mega-links a:focus-visible {
	background: var(--dmm-hover-bg);
	border-color: color-mix(in srgb, var(--dmm-primary) 30%, transparent);
	color: var(--dmm-primary);
}

/* Older browsers without color-mix get a sensible fallback border. */
@supports not (border-color: color-mix(in srgb, red 30%, transparent)) {
	.dotance-mega-links a:hover,
	.dotance-mega-links a:focus-visible {
		border-color: var(--dmm-primary);
	}
}

.dotance-mega-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-right: 10px;
}

.dotance-mega-icon img {
	width: 22px;
	height: 22px;
	display: block;
}

.dotance-mega-text {
	flex: 1 1 auto;
}

.dotance-mega-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--dmm-primary);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.dotance-mega-links a:hover .dotance-mega-arrow,
.dotance-mega-links a:focus-visible .dotance-mega-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* ── CTA banner ──────────────────────────────────────────────────────────── */

.dotance-mega-banner {
	margin: 0 28px 28px;
	padding: 18px 24px;
	background: var(--dmm-banner-bg);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.dotance-mega-banner-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dotance-mega-banner-text strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--dmm-text);
}

.dotance-mega-banner-text span {
	font-size: 13px;
	color: #5a6173;
}

.dotance-mega-banner-btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 14px 26px;
	background: var(--dmm-btn-bg);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-radius: 6px;
	transition: filter 0.16s ease;
}

.dotance-mega-banner-btn:hover,
.dotance-mega-banner-btn:focus-visible {
	filter: brightness(0.92);
	color: #fff;
}

/* ── Hamburger toggle (hidden on desktop) ────────────────────────────────── */

.dotance-mega-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.dotance-mega-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--dmm-top-text, currentColor);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* =========================================================================
   MOBILE MODE — applied when JS adds .dmm-mobile to the nav
   ========================================================================= */

.dotance-mega-menu.dmm-mobile .dotance-mega-toggle {
	display: inline-flex;
}

.dotance-mega-menu.dmm-mobile .dotance-mega-menu-list {
	position: fixed;
	inset: 0;
	z-index: 99999;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	padding: 64px 20px 32px;
	margin: 0;
	background: var(--dmm-panel-bg);
	/* clip (not hidden): offscreen drill panels create horizontal overflow,
	   and focus/tap would otherwise auto-scroll the overlay sideways. */
	overflow-x: hidden;
	overflow-x: clip;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	visibility: hidden;
}

.dotance-mega-menu.dmm-mobile.dmm-mobile-open .dotance-mega-menu-list {
	transform: translateX(0);
	visibility: visible;
}

/* Close (X) button injected by JS into the open overlay */
.dmm-mobile-close {
	position: fixed;
	top: 14px;
	right: 18px;
	z-index: 100001;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 0;
	display: none;
}

.dotance-mega-menu.dmm-mobile.dmm-mobile-open .dmm-mobile-close {
	display: block;
}

.dmm-mobile-close::before,
.dmm-mobile-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	background: var(--dmm-text);
}

.dmm-mobile-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.dmm-mobile-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Top-level items become full-width rows */
.dotance-mega-menu.dmm-mobile .dotance-mega-item {
	border-bottom: 1px solid var(--dmm-border);
}

.dotance-mega-menu.dmm-mobile .dotance-mega-item > a {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 16px 4px;
	/* font-size follows the Top Bar Font Size control (--dmm-top-size),
	   whose mobile value defaults to 16px in the widget. */
}

/* In the (white) mobile overlay, items use the dark text colour — not the
   top-bar colour, which is tuned for the desktop header background.
   !important + extra specificity overrides the top-bar hardening rule. */
.dotance-mega-menu.dmm-mobile .dotance-mega-item > a,
.dotance-mega-menu.dmm-mobile .dotance-mega-item > a .dotance-mega-label {
	color: var(--dmm-text) !important;
}

.dotance-mega-menu.dmm-mobile .dotance-mega-indicator {
	opacity: 0.5;
}

/* ── Drill-down screens ──────────────────────────────────────────────────── */

.dotance-mega-menu.dmm-mobile.dmm-mode-drill .dotance-mega-panel {
	position: fixed;
	inset: 0;
	width: auto;
	z-index: 100000;
	display: block;
	padding: 64px 20px 32px;
	background: var(--dmm-panel-bg);
	border-radius: 0;
	border-top: 0;
	box-shadow: none;
	opacity: 1;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(100%);
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
	overflow-y: auto;
}

.dotance-mega-menu.dmm-mobile .dotance-mega-panel::before {
	content: none;
}

.dotance-mega-menu.dmm-mobile.dmm-mode-drill .dotance-mega-item.dmm-drill-open > .dotance-mega-panel {
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	transition: transform 0.3s ease, visibility 0s;
}

.dotance-mega-menu.dmm-mobile.dmm-mode-drill .dotance-mega-panel-inner {
	width: 100%;
	max-width: none;
	flex-direction: column;
	padding: 0;
	gap: 0;
}

/* Drill header (← Back · Title · ✕) injected by JS.
   Hidden by default — it only exists for the mobile drill screens. */
.dmm-drill-header {
	display: none;
}

.dotance-mega-menu.dmm-mobile.dmm-mode-drill .dmm-drill-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	background: var(--dmm-panel-bg);
	border-bottom: 1px solid var(--dmm-border);
}

.dmm-drill-back {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: var(--dmm-primary);
	padding: 8px 4px;
}

.dmm-drill-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dmm-text);
}

.dmm-drill-header .dmm-drill-spacer {
	width: 48px;
}

/* ── Accordion mode ──────────────────────────────────────────────────────── */

.dotance-mega-menu.dmm-mobile.dmm-mode-accordion .dotance-mega-panel {
	position: static;
	width: auto;
	display: block;
	padding: 0;
	background: transparent;
	border-radius: 0;
	border-top: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.dotance-mega-menu.dmm-mobile.dmm-mode-accordion .dotance-mega-item.dmm-acc-open > .dotance-mega-panel {
	max-height: 2000px;
}

.dotance-mega-menu.dmm-mobile.dmm-mode-accordion .dotance-mega-panel-inner {
	width: 100%;
	max-width: none;
	flex-direction: column;
	padding: 0 0 16px;
	gap: 0;
}

/* Shared mobile column / link sizing */
.dotance-mega-menu.dmm-mobile .dotance-mega-column {
	min-width: 0;
	margin-bottom: 8px;
}

.dotance-mega-menu.dmm-mobile .dotance-mega-col-heading {
	margin-top: 16px;
}

.dotance-mega-menu.dmm-mobile .dotance-mega-arrow {
	opacity: 1;
	transform: none;
}

.dotance-mega-menu.dmm-mobile .dotance-mega-banner {
	margin: 18px 0 0;
	flex-direction: column;
	align-items: flex-start;
}

/* Lock background scroll while the mobile overlay is open */
body.dmm-no-scroll {
	overflow: hidden;
}

/* ── No-JS fallback breakpoint ───────────────────────────────────────────── */

@media (max-width: 1024px) {
	.dotance-mega-menu:not(.dmm-js) .dotance-mega-menu-list {
		flex-direction: column;
		align-items: stretch;
	}

	.dotance-mega-menu:not(.dmm-js) .dotance-mega-panel {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		padding-top: 0;
		justify-content: flex-start;
	}

	.dotance-mega-menu:not(.dmm-js) .dotance-mega-panel-inner {
		width: 100%;
		max-width: none;
		flex-direction: column;
		box-shadow: none;
	}
}

/* ── RTL ─────────────────────────────────────────────────────────────────── */

[dir="rtl"] .dotance-mega-links a {
	flex-direction: row-reverse;
}

[dir="rtl"] .dotance-mega-icon {
	margin-right: 0;
	margin-left: 10px;
}

[dir="rtl"] .dotance-mega-arrow svg {
	transform: scaleX(-1);
}

[dir="rtl"] .dotance-mega-menu.dmm-mobile .dotance-mega-menu-list,
[dir="rtl"] .dotance-mega-menu.dmm-mobile.dmm-mode-drill .dotance-mega-panel {
	transform: translateX(-100%);
}

[dir="rtl"] .dotance-mega-menu.dmm-mobile.dmm-mobile-open .dotance-mega-menu-list,
[dir="rtl"] .dotance-mega-menu.dmm-mobile.dmm-mode-drill .dotance-mega-item.dmm-drill-open > .dotance-mega-panel {
	transform: translateX(0);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.dotance-mega-menu * {
		transition-duration: 0.01ms;
	}
}