/**
 * Webdash Canvas Navigation
 * Version: 0.9.4
 *
 * Behaviour-only CSS. Divi remains responsible for Canvas presentation,
 * animation and visual styling.
 */


/* Shared keyboard focus treatment for all Webdash-managed interactive
 * elements. :focus-visible keeps pointer interaction visually unchanged,
 * while currentColor lets each Divi design retain control of the colour. */
.wd-focus-visible:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
}

/* Some Divi modules suppress :focus-visible on a focusable wrapper. The
 * keyboard-input class is set by the runtime and provides a conservative
 * fallback without showing outlines after pointer interaction. */
html.wd-canvas-keyboard-input .wd-focus-visible:focus {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
}

.wd-canvas-panel[hidden] {
	display: none !important;
}


/* Desktop stacking contract:
 * Divi renders the authored Theme Builder header and each native Canvas as
 * sibling <header> elements directly beneath #et-boc. Keep the authored
 * header one layer above the mapped Canvas so an overhanging logo remains
 * visible, while the Canvas retains its existing page-safe layer. Generated
 * Canvas headers are explicitly excluded and mobile stacking is untouched. */
@media (min-width: 981px) {
	#et-boc > header.et-l--header:not([data-canvas]) {
		position: relative;
		z-index: 999;
	}
}

[data-canvas].wd-canvas-sticky-anchored {
	position: fixed !important;
	top: var(--wd-canvas-anchor-top, 0px) !important;
	right: 0 !important;
	left: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	overflow-anchor: none;
	/* Keep the desktop Canvas above page content but below Divi's sticky
	 * header layer. This preserves the intended backdrop/header stacking. */
	z-index: 998 !important;
}


/* Mobile/tablet behaviour only: promote the mapped Canvas above Divi's
 * authored and sticky header layers. The class is applied before Divi executes
 * its native reveal, so the Canvas animates as a single top-most layer without
 * hiding or modifying the header underneath. */
@media (max-width: 980px) {
	[data-canvas].wd-canvas-sticky-anchored {
		position: static !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		width: auto !important;
	}


	html.wd-canvas-mobile-open,
	html.wd-canvas-mobile-open body {
		overscroll-behavior: none !important;
	}

	html.wd-canvas-mobile-open [data-canvas]:not([inert]),
	html.wd-canvas-mobile-open [data-canvas].wd-canvas-mobile-overlay {
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch;
	}


	/* Stable mobile Canvas hierarchy. While the mobile Canvas system is open,
	 * every native Canvas remains above Divi's authored/sticky header. Switching
	 * panels only changes which Canvas receives the active top layer. */
	html.wd-canvas-mobile-open [data-canvas] {
		z-index: 10020 !important;
	}

	html.wd-canvas-mobile-open [data-canvas].wd-canvas-mobile-active-layer {
		z-index: 10021 !important;
	}

	/* Divi's back-to-top control uses z-index: 99999. Keep it below the Canvas
	 * system while a mobile Canvas is open, without otherwise changing it. */
	html.wd-canvas-mobile-open .et_pb_scroll_top {
		z-index: 10009 !important;
	}

	[data-canvas].wd-canvas-mobile-overlay {
		position: fixed !important;
		inset: 0 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
		width: 100% !important;
		height: 100dvh !important;
		max-width: none !important;
		margin: 0 !important;
		z-index: 10021 !important;
	}
	/* Accessible fallback focus treatment. Divi may override this with a
	 * project-specific focus style; currentColor keeps it theme-aware. */
	[data-canvas].wd-canvas-mobile-overlay
	:is(
		a[href],
		button:not([disabled]),
		input:not([disabled]),
		select:not([disabled]),
		textarea:not([disabled]),
		[role="button"],
		[tabindex]:not([tabindex="-1"])
	):focus-visible {
		outline: 2px solid currentColor !important;
		outline-offset: 3px !important;
	}


	/* Scripted initial focus should be visible when the Canvas was opened from
	 * the keyboard, while pointer/touch opening remains visually unobtrusive. */
	[data-canvas].wd-canvas-mobile-overlay.wd-canvas-keyboard-open
	:is(
		a[href],
		button:not([disabled]),
		input:not([disabled]),
		select:not([disabled]),
		textarea:not([disabled]),
		[role="button"],
		[tabindex]:not([tabindex="-1"])
	):focus {
		outline: 2px solid currentColor !important;
		outline-offset: 3px !important;
	}

	/* Divi icon modules and wrappers can suppress the native focus outline.
	 * Give Webdash Back and Close controls an explicit keyboard-only state. */
	html.wd-canvas-keyboard-input
	[data-canvas].wd-canvas-mobile-overlay
	:is(.wd-canvas-close, .wd-canvas-close-all):focus {
		outline: 2px solid currentColor !important;
		outline-offset: 3px !important;
	}

}


/* Mapped triggers represent navigation into a secondary Canvas. The marker is
 * a real decorative element rather than a pseudo-element so it remains
 * reliable across Divi desktop and mobile menu link structures. */
.wd-canvas-submenu-indicator {
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-left: 0.55em;
	border-right: 0.12em solid currentColor;
	border-bottom: 0.12em solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transform-origin: center;
	vertical-align: middle;
	pointer-events: none;
}

.wd-canvas-submenu-trigger[aria-expanded="true"] > .wd-canvas-submenu-indicator {
	transform: translateY(0.1em) rotate(225deg);
}


/* Canvas Action contract: non-native Divi clickable wrappers are made
 * keyboard focusable by the runtime and share the standard theme-aware focus
 * treatment. Pointer and touch presentation remain unchanged. */
.wd-canvas-action.wd-focus-visible:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
}