/* =============================================================================
   CDSWerx Submenu Widget
   Pointer/animation system mirroring Elementor Pro's nav-menu approach,
   adapted to CDSWerx BEM class names.

   NOTE: Responsive collapse media queries are NOT here. They are generated
   inline by PHP per widget instance so they use Elementor's actual configured
   breakpoint values (see render_inline_breakpoint_style() in the widget class).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base Layout
   ----------------------------------------------------------------------------- */
.cdswerx-submenu {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
}

.cdswerx-submenu__items {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Horizontal */
.cdswerx-submenu--horizontal .cdswerx-submenu__items {
	flex-direction: row;
	align-items: center;
}

/* Elementor-style horizontal item spacing via wrapper variable */
.cdswerx-submenu--horizontal .cdswerx-submenu__items > .cdswerx-submenu__item:not(:first-child) > .cdswerx-submenu__link {
	margin-inline-start: var(--cdswerx-submenu-horizontal-menu-item-margin, 0);
}

.cdswerx-submenu--horizontal .cdswerx-submenu__items > .cdswerx-submenu__item:not(:last-child) > .cdswerx-submenu__link {
	margin-inline-end: var(--cdswerx-submenu-horizontal-menu-item-margin, 0);
}

/* Vertical */
.cdswerx-submenu--vertical .cdswerx-submenu__items {
	flex-direction: column;
	align-items: flex-start;
}

/* Dropdown — toggle always visible, items hidden by default.
   Inline <style> from PHP handles per-instance animation variant. */
.cdswerx-submenu--dropdown .cdswerx-submenu__toggle-wrap {
	display: block;
}

.cdswerx-submenu--dropdown .cdswerx-submenu__items {
	display: none;
	flex-direction: column;
	width: 100%;
}

.cdswerx-submenu--dropdown .cdswerx-submenu__items--open {
	display: flex !important;
}

/* Suppress pointer pseudo-elements in stacked/dropdown layouts */
.cdswerx-submenu--dropdown .cdswerx-submenu__link::before,
.cdswerx-submenu--dropdown .cdswerx-submenu__link::after {
	display: none;
}

.cdswerx-submenu__item {
	display: flex;
	align-items: center;
}

.cdswerx-submenu__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	padding: 8px 15px;
	transition-property: color;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

.cdswerx-submenu__text {
	display: inline-block;
}

/* -----------------------------------------------------------------------------
   Divider
   ----------------------------------------------------------------------------- */
.cdswerx-submenu--horizontal.cdswerx-submenu--divider .cdswerx-submenu__item:not(:last-child) {
	border-right: 1px solid #d5d5d5;
	border-bottom: none;
}

.cdswerx-submenu--vertical.cdswerx-submenu--divider .cdswerx-submenu__item:not(:last-child) {
	border-bottom: 1px solid #d5d5d5;
	border-right: none;
}

/* =============================================================================
   POINTER SYSTEM — Line Pointers (underline / overline / double-line)
   ============================================================================= */

/* Pseudo-element base: underline (::after) */
.cdswerx-submenu--pointer-underline .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-double-line .cdswerx-submenu__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	pointer-events: none;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

/* Pseudo-element base: overline (::before) */
.cdswerx-submenu--pointer-overline .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line .cdswerx-submenu__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	pointer-events: none;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

/* --- Underline Alignment --- */
/* Left (default): pseudo-elements already positioned from left: 0 */

/* Right alignment */
.cdswerx-submenu[data-underline-align="right"] .cdswerx-submenu__link::after,
.cdswerx-submenu[data-underline-align="right"] .cdswerx-submenu__link::before {
	right: 0;
	left: auto;
	transform-origin: right center;
}

/* Center alignment — uses translateX so the origin stays centered */
.cdswerx-submenu[data-underline-align="center"] .cdswerx-submenu__link::after,
.cdswerx-submenu[data-underline-align="center"] .cdswerx-submenu__link::before {
	left: 50%;
	right: auto;
	transform-origin: center;
}

/* --- Animation: Fade --- */
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-fade .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-fade .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-fade .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-fade .cdswerx-submenu__link::after {
	opacity: 0;
	transition-property: opacity;
}

.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-fade .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-fade .cdswerx-submenu__item--active .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-fade .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-fade .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-fade .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-fade .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-fade .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-fade .cdswerx-submenu__item--active .cdswerx-submenu__link::after {
	opacity: 1;
}

/* --- Animation: Slide (from left / from right for right-aligned) --- */
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-slide .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-slide .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-slide .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-slide .cdswerx-submenu__link::after {
	transform: scaleX(0);
	transform-origin: left center;
	transition-property: transform;
}

/* Center: override transform-origin so slide grows from center */
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-slide .cdswerx-submenu__link::after,
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-slide .cdswerx-submenu__link::before {
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
}

.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-slide .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-slide .cdswerx-submenu__item--active .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-slide .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-slide .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-slide .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-slide .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-slide .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-slide .cdswerx-submenu__item--active .cdswerx-submenu__link::after {
	transform: scaleX(1);
}

/* Center hover: preserve the translateX offset while scaling to 1 */
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-slide .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-slide .cdswerx-submenu__item--active .cdswerx-submenu__link::after,
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-slide .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-slide .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	transform: translateX(-50%) scaleX(1);
}

/* --- Animation: Grow (from center) --- */
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-grow .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-grow .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-grow .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-grow .cdswerx-submenu__link::after {
	transform: scaleX(0);
	transform-origin: center;
	transition-property: transform;
}

.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-grow .cdswerx-submenu__link::after,
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-grow .cdswerx-submenu__link::before {
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
}

.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-grow .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-grow .cdswerx-submenu__item--active .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-grow .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-grow .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-grow .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-grow .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-grow .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-grow .cdswerx-submenu__item--active .cdswerx-submenu__link::after {
	transform: scaleX(1);
}

.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-grow .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-grow .cdswerx-submenu__item--active .cdswerx-submenu__link::after,
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-grow .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu[data-underline-align="center"].cdswerx-submenu--animation-grow .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	transform: translateX(-50%) scaleX(1);
}

/* --- Animation: Drop In --- */
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-drop-in .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-in .cdswerx-submenu__link::after {
	transform: translateY(100%);
	transition-property: transform;
}

.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-drop-in .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-in .cdswerx-submenu__link::before {
	transform: translateY(-100%);
	transition-property: transform;
}

.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item--active .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item--active .cdswerx-submenu__link::after {
	transform: translateY(0);
}

/* --- Animation: Drop Out --- */
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-drop-out .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-out .cdswerx-submenu__link::after {
	transform: translateY(-100%);
	transition-property: transform;
}

.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-drop-out .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-out .cdswerx-submenu__link::before {
	transform: translateY(100%);
	transition-property: transform;
}

.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item--active .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item--active .cdswerx-submenu__link::after {
	transform: translateY(0);
}

/* --- Animation: None (instant show/hide) --- */
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-none .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-none .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-none .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-none .cdswerx-submenu__link::after {
	opacity: 0;
	transition: none;
}

.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-none .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-underline.cdswerx-submenu--animation-none .cdswerx-submenu__item--active .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-none .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-overline.cdswerx-submenu--animation-none .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-none .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-none .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-none .cdswerx-submenu__item:hover .cdswerx-submenu__link::after,
.cdswerx-submenu--pointer-double-line.cdswerx-submenu--animation-none .cdswerx-submenu__item--active .cdswerx-submenu__link::after {
	opacity: 1;
}

/* =============================================================================
   POINTER SYSTEM — Framed
   ============================================================================= */
.cdswerx-submenu--pointer-framed .cdswerx-submenu__link::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid currentColor;
	border-color: transparent;
	box-sizing: border-box;
	pointer-events: none;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-fade .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-none .cdswerx-submenu__link::before {
	opacity: 0;
	transition-property: opacity;
}

.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-none .cdswerx-submenu__link::before {
	transition: none;
}

.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-fade .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-fade .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-none .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-none .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	opacity: 1;
	border-color: currentColor;
}

.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-grow .cdswerx-submenu__link::before {
	transform: scale(0.5);
	opacity: 0;
	transition-property: transform, opacity;
	border-color: currentColor;
}

.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-grow .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-grow .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	transform: scale(1);
	opacity: 1;
}

/* Slide / Drop-in / Drop-out fallback to fade for framed */
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-slide .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-drop-in .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-drop-out .cdswerx-submenu__link::before {
	opacity: 0;
	transition-property: opacity;
	border-color: currentColor;
}

.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-slide .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-slide .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-framed.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	opacity: 1;
}

/* =============================================================================
   POINTER SYSTEM — Background
   ============================================================================= */
.cdswerx-submenu--pointer-background .cdswerx-submenu__link {
	z-index: 0;
}

.cdswerx-submenu--pointer-background .cdswerx-submenu__link::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: currentColor;
	z-index: -1;
	pointer-events: none;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-fade .cdswerx-submenu__link::before {
	opacity: 0;
	transition-property: opacity;
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-fade .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-fade .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	opacity: 1;
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-grow .cdswerx-submenu__link::before {
	transform: scaleX(0);
	transform-origin: center;
	transition-property: transform;
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-grow .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-grow .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	transform: scaleX(1);
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-slide .cdswerx-submenu__link::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition-property: transform;
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-slide .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-slide .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	transform: scaleX(1);
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-none .cdswerx-submenu__link::before {
	opacity: 0;
	transition: none;
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-none .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-none .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	opacity: 1;
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-drop-in .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-drop-out .cdswerx-submenu__link::before {
	opacity: 0;
	transition-property: opacity;
}

.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-drop-in .cdswerx-submenu__item--active .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item:hover .cdswerx-submenu__link::before,
.cdswerx-submenu--pointer-background.cdswerx-submenu--animation-drop-out .cdswerx-submenu__item--active .cdswerx-submenu__link::before {
	opacity: 1;
}

/* =============================================================================
   POINTER SYSTEM — Text (color change only)
   ============================================================================= */
.cdswerx-submenu--pointer-text .cdswerx-submenu__link {
	transition-property: color;
}

/* =============================================================================
   POINTER SYSTEM — Floating Underline
   A positioned <span> that slides under the active item via JS.
   ============================================================================= */
.cdswerx-submenu--pointer-floating-underline {
	/* nav needs non-static positioning for the absolute line */
	position: relative;
}

.cdswerx-submenu__floating-line {
	display: none; /* JS shows and positions it */
	position: absolute;
	bottom: 0;
	height: 2px;
	background-color: currentColor;
	pointer-events: none;
	transition-property: transform, width, opacity;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

.cdswerx-submenu--pointer-floating-underline .cdswerx-submenu__floating-line {
	display: block;
}

/* =============================================================================
   Icons
   ============================================================================= */
.cdswerx-submenu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

/* Icon order: left (default) puts icon before text, right puts it after */
.cdswerx-submenu-icon-position--left .cdswerx-submenu__link {
	flex-direction: row;
}

.cdswerx-submenu-icon-position--right .cdswerx-submenu__link {
	flex-direction: row-reverse;
}

/* Apart structure: push icon and text to opposite sides */
.cdswerx-submenu-icon-structure--apart .cdswerx-submenu__link {
	justify-content: space-between;
	width: 100%;
}

/* Active icon — hidden by default, shown when item is active */
.cdswerx-submenu__icon--active {
	display: none;
}

.cdswerx-submenu__item--active .cdswerx-submenu__icon--normal {
	display: none;
}

.cdswerx-submenu__item--active .cdswerx-submenu__icon--active {
	display: inline-flex;
}

/* Icon appear animations (applied via prefix_class on wrapper) */
.cdswerx-submenu-icon-appear--fade-in .cdswerx-submenu__icon--active {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.cdswerx-submenu-icon-appear--fade-in .cdswerx-submenu__item--active .cdswerx-submenu__icon--active {
	opacity: 1;
}

.cdswerx-submenu-icon-appear--from-center-horizontal .cdswerx-submenu__icon--active {
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

.cdswerx-submenu-icon-appear--from-center-horizontal .cdswerx-submenu__item--active .cdswerx-submenu__icon--active {
	transform: scaleX(1);
}

.cdswerx-submenu-icon-appear--from-center-vertical .cdswerx-submenu__icon--active {
	transform: scaleY(0);
	transition: transform 0.25s ease;
}

.cdswerx-submenu-icon-appear--from-center-vertical .cdswerx-submenu__item--active .cdswerx-submenu__icon--active {
	transform: scaleY(1);
}

.cdswerx-submenu-icon-appear--from-left .cdswerx-submenu__icon--active {
	transform: translateX(-100%);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.cdswerx-submenu-icon-appear--from-left .cdswerx-submenu__item--active .cdswerx-submenu__icon--active {
	transform: translateX(0);
	opacity: 1;
}

/* Icon hover movement.
   Technique: icon is rendered twice in PHP. The first copy is the "rest" state,
   the second copy is the "hover" state. CSS clips and translates between them. */
.cdswerx-submenu__icon--normal {
	overflow: hidden;
}

/* When hover-move is active, the icon span holds two icons stacked */
[class*="cdswerx-submenu-icon-hover--"] .cdswerx-submenu__icon--normal {
	display: inline-flex;
	flex-direction: column;
	position: relative;
}

[class*="cdswerx-submenu-icon-hover--"] .cdswerx-submenu__icon--normal i,
[class*="cdswerx-submenu-icon-hover--"] .cdswerx-submenu__icon--normal svg {
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Horizontal Short */
.cdswerx-submenu-icon-hover--horizontal-short .cdswerx-submenu__icon--normal > *:nth-child(2) {
	position: absolute;
	transform: translateX(-60%);
	opacity: 0;
}

.cdswerx-submenu-icon-hover--horizontal-short .cdswerx-submenu__item:hover .cdswerx-submenu__icon--normal > *:nth-child(1) {
	transform: translateX(60%);
	opacity: 0;
}

.cdswerx-submenu-icon-hover--horizontal-short .cdswerx-submenu__item:hover .cdswerx-submenu__icon--normal > *:nth-child(2) {
	transform: translateX(0);
	opacity: 1;
}

/* Horizontal */
.cdswerx-submenu-icon-hover--horizontal .cdswerx-submenu__icon--normal > *:nth-child(2) {
	position: absolute;
	transform: translateX(-100%);
	opacity: 0;
}

.cdswerx-submenu-icon-hover--horizontal .cdswerx-submenu__item:hover .cdswerx-submenu__icon--normal > *:nth-child(1) {
	transform: translateX(100%);
	opacity: 0;
}

.cdswerx-submenu-icon-hover--horizontal .cdswerx-submenu__item:hover .cdswerx-submenu__icon--normal > *:nth-child(2) {
	transform: translateX(0);
	opacity: 1;
}

/* Vertical */
.cdswerx-submenu-icon-hover--vertical .cdswerx-submenu__icon--normal > *:nth-child(2) {
	position: absolute;
	transform: translateY(100%);
	opacity: 0;
}

.cdswerx-submenu-icon-hover--vertical .cdswerx-submenu__item:hover .cdswerx-submenu__icon--normal > *:nth-child(1) {
	transform: translateY(-100%);
	opacity: 0;
}

.cdswerx-submenu-icon-hover--vertical .cdswerx-submenu__item:hover .cdswerx-submenu__icon--normal > *:nth-child(2) {
	transform: translateY(0);
	opacity: 1;
}

/* Diagonal */
.cdswerx-submenu-icon-hover--diagonal .cdswerx-submenu__icon--normal > *:nth-child(2) {
	position: absolute;
	transform: translate(-50%, 50%);
	opacity: 0;
}

.cdswerx-submenu-icon-hover--diagonal .cdswerx-submenu__item:hover .cdswerx-submenu__icon--normal > *:nth-child(1) {
	transform: translate(50%, -50%);
	opacity: 0;
}

.cdswerx-submenu-icon-hover--diagonal .cdswerx-submenu__item:hover .cdswerx-submenu__icon--normal > *:nth-child(2) {
	transform: translate(0, 0);
	opacity: 1;
}

/* =============================================================================
   Toggle Button
   ============================================================================= */
.cdswerx-submenu__toggle-wrap {
	display: none; /* shown via inline <style> at the configured breakpoint */
}

.cdswerx-submenu__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	transition: background-color 0.2s ease;
}

/* Default 3-bar hamburger */
.cdswerx-submenu__toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* Bar → X when open (default icon only) */
.cdswerx-submenu__toggle[aria-expanded="true"] .cdswerx-submenu__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.cdswerx-submenu__toggle[aria-expanded="true"] .cdswerx-submenu__toggle-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.cdswerx-submenu__toggle[aria-expanded="true"] .cdswerx-submenu__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Custom icon toggle */
.cdswerx-submenu__toggle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cdswerx-submenu__toggle-icon--close {
	display: none;
}

.cdswerx-submenu__toggle[aria-expanded="true"] .cdswerx-submenu__toggle-icon--open {
	display: none;
}

.cdswerx-submenu__toggle[aria-expanded="true"] .cdswerx-submenu__toggle-icon--close {
	display: flex;
}

/* =============================================================================
   Content Width (legacy class — kept for backward compat with existing pages)
   ============================================================================= */
.cdswerx-submenu-width--fit .cdswerx-submenu {
	display: inline-flex;
}

.cdswerx-submenu-width--full .cdswerx-submenu {
	display: flex;
	width: 100%;
}

/* =============================================================================
   Horizontal Scroll
   ============================================================================= */
[class*="cdswerx-submenu-hscroll-"][class*="-enable"] .cdswerx-submenu__items {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* =============================================================================
   MENU ITEM STYLES
   ============================================================================= */

/* --- With Icon: icons always visible (auto-enabled by PHP) --- */
.cdswerx-submenu-style--with-icon .cdswerx-submenu__icon--normal {
	display: inline-flex;
}

/* --- With Active Icon: icon only on active item --- */
.cdswerx-submenu-style--with-active-icon .cdswerx-submenu__icon--normal {
	display: none;
}

.cdswerx-submenu-style--with-active-icon .cdswerx-submenu__item--active .cdswerx-submenu__icon--normal {
	display: inline-flex;
}

/* --- Active Underline: styled line under active item text --- */
.cdswerx-submenu__active-line {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #6EC1E4;
	pointer-events: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform: scaleX(0);
	transform-origin: center;
}

.cdswerx-submenu-style--with-active-underline .cdswerx-submenu__active-line {
	display: block;
}

.cdswerx-submenu-style--with-active-underline .cdswerx-submenu__item--active .cdswerx-submenu__active-line {
	transform: scaleX(1);
}

/* --- Background Shape: SVG behind active item --- */
.cdswerx-submenu__bg-shape {
	display: none;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.15;
	transition: opacity 0.3s ease, transform 0.3s ease;
	transform: scale(0.8);
}

.cdswerx-submenu__bg-shape svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: #6EC1E4;
}

.cdswerx-submenu-style--background-svg .cdswerx-submenu__link {
	z-index: 0;
}

.cdswerx-submenu-style--background-svg .cdswerx-submenu__bg-shape {
	display: block;
}

.cdswerx-submenu-style--background-svg .cdswerx-submenu__item--active .cdswerx-submenu__bg-shape {
	opacity: 1;
	transform: scale(1);
}

.cdswerx-submenu-style--background-svg .cdswerx-submenu__item:hover .cdswerx-submenu__bg-shape {
	opacity: 0.6;
	transform: scale(0.95);
}

/* =============================================================================
   Keyboard Focus
   ============================================================================= */
.cdswerx-submenu__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

.cdswerx-submenu__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* =============================================================================
   Editor Notice (no query selected / no items returned)
   ============================================================================= */

.cdswerx-submenu-notice {
	padding: 12px 16px;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: 4px;
	color: #795548;
	font-size: 13px;
	list-style: none;
}