/**
 * Mobile / off-canvas menu — clean official panel.
 * Brand: deep green accent (#245c48), ink text, solid white surface.
 */

#offcanvas.ct-panel {
	--vv-oc-ink: #1a1a1a;
	--vv-oc-muted: #6b6b6b;
	--vv-oc-line: #e8e8e8;
	--vv-oc-soft: #f6f7f6;
	--vv-oc-brand: #245c48;
	--vv-oc-brand-soft: #e8f1ed;
}

/* Solid panel + dim backdrop (no see-through blue) */
#offcanvas.ct-panel[data-behaviour*="side"] .ct-panel-inner,
#offcanvas.ct-panel .ct-panel-inner {
	background: #fff !important;
	color: var(--vv-oc-ink) !important;
	box-shadow: 8px 0 32px rgba(26, 26, 26, 0.12) !important;
	overflow: hidden !important;
}

/* Thin brand strip at top of panel */
#offcanvas.ct-panel .ct-panel-inner::before {
	content: "" !important;
	display: block !important;
	height: 3px !important;
	width: 100% !important;
	background: linear-gradient(90deg, var(--vv-oc-brand) 0%, #3d8f6e 55%, #b4e000 100%) !important;
}

#offcanvas.ct-panel::before,
#offcanvas.ct-panel .ct-panel-actions::before {
	background: rgba(26, 26, 26, 0.42) !important;
	opacity: 1 !important;
	backdrop-filter: none !important;
}

#offcanvas .ct-panel-content,
#offcanvas .ct-panel-content-inner {
	background: transparent !important;
	color: var(--vv-oc-ink) !important;
}

/* Header row: brand + Menu + close */
#offcanvas .ct-panel-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 16px 18px 14px !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--vv-oc-line) !important;
	background: #fff !important;
	color: var(--vv-oc-ink) !important;
}

#offcanvas .ct-panel-heading {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 3px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--vv-oc-ink) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
}

#offcanvas .ct-panel-heading::before {
	content: "VIOIV" !important;
	display: block !important;
	color: var(--vv-oc-brand) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.18em !important;
	line-height: 1 !important;
}

#offcanvas .ct-toggle-close {
	width: 36px !important;
	height: 36px !important;
	margin: 0 0 0 auto !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--vv-oc-soft) !important;
	color: var(--vv-oc-ink) !important;
	opacity: 1 !important;
	transition: background .15s ease, color .15s ease !important;
}

#offcanvas .ct-toggle-close:hover {
	background: var(--vv-oc-brand-soft) !important;
	color: var(--vv-oc-brand) !important;
}

#offcanvas .ct-toggle-close .ct-icon,
#offcanvas .ct-toggle-close svg {
	width: 12px !important;
	height: 12px !important;
	fill: currentColor !important;
	color: inherit !important;
}

/* Content spacing */
#offcanvas .ct-panel-content-inner {
	padding: 10px 0 28px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}

/* Primary nav */
#offcanvas .mobile-menu,
#offcanvas .menu-container {
	margin: 0 !important;
	padding: 6px 10px 12px !important;
	list-style: none !important;
}

#offcanvas .mobile-menu > li,
#offcanvas .menu-container > ul > li {
	margin: 0 0 2px !important;
	border: 0 !important;
}

#offcanvas .mobile-menu > li > a,
#offcanvas .menu-container > ul > li > a {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	min-height: 48px !important;
	padding: 12px 14px 12px 16px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent !important;
	color: var(--vv-oc-ink) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	text-transform: none !important;
	opacity: 1 !important;
	cursor: pointer !important;
	transition: background .15s ease, color .15s ease !important;
}

/* Quiet chevron — just a hint of structure */
#offcanvas .mobile-menu > li > a::after,
#offcanvas .menu-container > ul > li > a::after {
	content: "" !important;
	width: 7px !important;
	height: 7px !important;
	margin-left: 10px !important;
	border-right: 1.5px solid #c5c5c5 !important;
	border-top: 1.5px solid #c5c5c5 !important;
	transform: rotate(45deg) !important;
	flex: 0 0 auto !important;
	opacity: .7 !important;
	transition: border-color .15s ease, opacity .15s ease !important;
}

#offcanvas .mobile-menu > li > a:hover,
#offcanvas .menu-container > ul > li > a:hover {
	background: var(--vv-oc-soft) !important;
	color: var(--vv-oc-brand) !important;
}

#offcanvas .mobile-menu > li > a:hover::after,
#offcanvas .menu-container > ul > li > a:hover::after {
	border-color: var(--vv-oc-brand) !important;
	opacity: 1 !important;
}

/* Brief tap feedback — only on items that are NOT the current page */
#offcanvas .mobile-menu > li:not(.current-menu-item):not(.current_page_item) > a:active,
#offcanvas .menu-container > ul > li:not(.current-menu-item):not(.current_page_item) > a:active {
	background: var(--vv-oc-soft) !important;
	color: var(--vv-oc-ink) !important;
	box-shadow: none !important;
}

#offcanvas .mobile-menu .sub-menu a:active,
#offcanvas .menu-container .sub-menu a:active {
	background: var(--vv-oc-soft) !important;
	color: var(--vv-oc-ink) !important;
}

#offcanvas .ct-header-account a:active {
	background: var(--vv-oc-soft) !important;
	color: var(--vv-oc-ink) !important;
}

#offcanvas .ct-header-account a:active .ct-icon,
#offcanvas .ct-header-account a:active svg {
	color: var(--vv-oc-muted) !important;
}

#offcanvas .ct-toggle-close:active {
	background: var(--vv-oc-brand-soft) !important;
	color: var(--vv-oc-brand) !important;
	transform: scale(0.94);
}

/* Current page: soft green wash + left accent */
#offcanvas .mobile-menu > li.current-menu-item > a,
#offcanvas .mobile-menu > li.current_page_item > a,
#offcanvas .menu-container > ul > li.current-menu-item > a,
#offcanvas .menu-container > ul > li.current_page_item > a {
	background: var(--vv-oc-brand-soft) !important;
	color: var(--vv-oc-brand) !important;
	box-shadow: inset 3px 0 0 var(--vv-oc-brand) !important;
}

#offcanvas .mobile-menu > li.current-menu-item > a::after,
#offcanvas .mobile-menu > li.current_page_item > a::after,
#offcanvas .menu-container > ul > li.current-menu-item > a::after,
#offcanvas .menu-container > ul > li.current_page_item > a::after {
	border-color: var(--vv-oc-brand) !important;
	opacity: 1 !important;
}

#offcanvas .mobile-menu .sub-menu a,
#offcanvas .menu-container .sub-menu a {
	padding-left: 28px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--vv-oc-muted) !important;
}

#offcanvas .mobile-menu .sub-menu a::after,
#offcanvas .menu-container .sub-menu a::after {
	display: none !important;
}

/* Soft divider before account / secondary widgets */
#offcanvas .ct-panel-content-inner > *:not(.mobile-menu):not(.menu-container) {
	margin-top: 8px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--vv-oc-line) !important;
}

#offcanvas .ct-panel-content-inner > .mobile-menu + *,
#offcanvas .ct-panel-content-inner > .menu-container + * {
	margin-top: 4px !important;
}

/* Account block in offcanvas */
#offcanvas .ct-header-account,
#offcanvas [data-id="account"] {
	display: block !important;
	padding: 4px 16px 8px !important;
	margin: 0 !important;
}

#offcanvas .ct-header-account > .ct-account-item,
#offcanvas .ct-header-account > a.ct-account-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 14px 14px !important;
	margin: 0 0 10px !important;
	border-radius: 12px !important;
	background: var(--vv-oc-soft) !important;
	color: var(--vv-oc-ink) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

#offcanvas .ct-header-account .ct-label,
#offcanvas .ct-header-account .vv-hdr-chip__name,
#offcanvas .ct-header-account strong,
#offcanvas .ct-header-account .ct-account-item {
	color: var(--vv-oc-ink) !important;
	opacity: 1 !important;
}

#offcanvas .ct-header-account .vv-hdr-chip {
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
}

#offcanvas .ct-header-account .ct-icon {
	color: var(--vv-oc-ink) !important;
	opacity: 1 !important;
}

/* Account dropdown / links list inside panel */
#offcanvas .ct-header-account > ul,
#offcanvas .ct-header-account .ct-account-dropdown,
#offcanvas .ct-header-account [class*="dropdown"] {
	position: static !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: auto !important;
}

#offcanvas .ct-header-account > ul > li,
#offcanvas .ct-header-account li {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	float: none !important;
	width: 100% !important;
}

#offcanvas .ct-header-account a {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: 44px !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	border-radius: 10px !important;
	color: var(--vv-oc-ink) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	opacity: 1 !important;
	background: transparent !important;
}

#offcanvas .ct-header-account a:hover {
	background: var(--vv-oc-soft) !important;
	color: var(--vv-oc-brand) !important;
}

#offcanvas .ct-header-account a .ct-icon,
#offcanvas .ct-header-account a svg {
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 18px !important;
	color: var(--vv-oc-muted) !important;
	opacity: 1 !important;
}

#offcanvas .ct-header-account a:hover .ct-icon,
#offcanvas .ct-header-account a:hover svg {
	color: var(--vv-oc-brand) !important;
}

/* Welcome / avatar text if present */
#offcanvas .ct-vioiv-nav-welcome,
#offcanvas [class*="account"] .ct-label,
#offcanvas .ct-header-account span {
	color: var(--vv-oc-muted) !important;
	opacity: 1 !important;
}

#offcanvas .ct-header-account strong,
#offcanvas .vv-hdr-chip__name {
	color: var(--vv-oc-ink) !important;
	font-weight: 700 !important;
}

/* Kill leftover low-contrast theme tokens inside panel */
#offcanvas a,
#offcanvas button,
#offcanvas .ct-label,
#offcanvas li,
#offcanvas span:not(.ct-icon) {
	text-shadow: none !important;
}

#offcanvas .mobile-menu a,
#offcanvas .ct-header-account a {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Mobile header menu button — larger tap target, never covered when menu closed */
@media (max-width: 999.98px) {
	#header {
		position: relative;
		z-index: 100040 !important;
	}

	#header .ct-header-trigger,
	#header .vv-oc-trigger,
	#header [data-toggle-panel="#offcanvas"] {
		position: relative !important;
		z-index: 100050 !important;
		min-width: 48px !important;
		min-height: 48px !important;
		padding: 12px !important;
		margin: -8px 0 -8px -4px !important;
		touch-action: manipulation !important;
		-webkit-tap-highlight-color: transparent !important;
		cursor: pointer !important;
		pointer-events: auto !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	#header .ct-header-trigger:active,
	#header .vv-oc-trigger:active {
		opacity: 0.72;
	}

	/* Closed / half-stuck panel must never swallow taps on the hamburger */
	body:not([data-panel]) #offcanvas.ct-panel,
	#offcanvas.ct-panel:not(.active) {
		pointer-events: none !important;
		visibility: hidden !important;
	}

	body[data-panel] #offcanvas.ct-panel.active {
		pointer-events: auto !important;
		visibility: visible !important;
		z-index: 100060 !important;
	}

	/* Search overlay above menu when open; keep header trigger usable when closed */
	.vioiv-hs:not(.is-open) {
		display: none !important;
		pointer-events: none !important;
	}
}