/* ==========================================================================
   Custom Elementor Menu Widget — Frontend Styles
   ========================================================================== */

.cem-wrapper {
	position: relative;
	width: 100%;
}

/* ---------- Desktop menu ---------- */
.cem-menu-desktop {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 32px;
	flex-wrap: wrap;
}

.cem-menu-desktop li {
	position: relative;
}

.cem-menu-desktop a {
	position: relative;
	text-decoration: none;
	display: inline-block;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* ---------- Hover / active indicator styles ----------
   The chosen style adds a "cem-indicator-*" class to the <ul>
   itself (set in render()); indicator_color/thickness/offset/
   duration are all controlled from the Style panel. Scoped to
   "> li > a" (direct top-level items only) so drop-down sub-menu
   items don't also pick up the underline/dot/background effect.
   Hover is keyed off the parent <li>, not the link itself, so the
   indicator stays active while the cursor moves down into that
   item's own drop-down — matching the same li:hover pattern
   already used to keep the drop-down panel itself open. */

/* Underline: appears instantly on hover/active */
.cem-indicator-underline > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.cem-indicator-underline > li:hover > a::after,
.cem-indicator-underline > li.current-menu-item > a::after,
.cem-indicator-underline > li.current_page_item > a::after,
.cem-indicator-underline > li.current-menu-ancestor > a::after {
	opacity: 1;
}

/* Animated underline: grows outward from the center */
.cem-indicator-underline-grow > li > a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 0;
	height: 2px;
	background-color: currentColor;
	transform: translateX(-50%);
	transition: width 0.25s ease;
}
.cem-indicator-underline-grow > li:hover > a::after,
.cem-indicator-underline-grow > li.current-menu-item > a::after,
.cem-indicator-underline-grow > li.current_page_item > a::after,
.cem-indicator-underline-grow > li.current-menu-ancestor > a::after {
	width: 100%;
}

/* Background pill: fill + radius come from the Style panel controls */
.cem-indicator-background > li > a {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Dot below text */
.cem-indicator-dot > li > a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: currentColor;
	transform: translateX(-50%) scale(0);
	transition: transform 0.2s ease;
}
.cem-indicator-dot > li:hover > a::after,
.cem-indicator-dot > li.current-menu-item > a::after,
.cem-indicator-dot > li.current_page_item > a::after,
.cem-indicator-dot > li.current-menu-ancestor > a::after {
	transform: translateX(-50%) scale(1);
}

/* Desktop drop-down sub-menus */
.cem-menu-desktop .sub-menu {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: calc( 100% + var( --cem-submenu-gap, 10px ) );
	left: 0;
	min-width: 200px;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 100;
}

/* Invisible bridge over the gap between a parent item and its drop-down,
   so moving the cursor from one to the other doesn't cross a "dead zone"
   that breaks :hover and closes the menu before it's reached. */
.cem-menu-desktop li.menu-item-has-children::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: var( --cem-submenu-gap, 10px );
	min-width: 100%;
}

/* Hover trigger (default) */
.cem-wrapper[data-cem-desktop-trigger="hover"] .cem-menu-desktop li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Click trigger: toggled via JS adding .cem-submenu-open to the <li> */
.cem-menu-desktop li.cem-submenu-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cem-menu-desktop .sub-menu li {
	width: 100%;
}

.cem-menu-desktop .sub-menu a {
	display: block;
	padding: 8px 20px;
	width: 100%;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Arrow indicator next to items with a sub-menu (desktop) */
.cem-menu-desktop .cem-submenu-arrow {
	display: none;
	width: 8px;
	height: 5px;
	margin-left: 6px;
	background-color: #1a1a1a;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	transform: scale( var( --cem-arrow-scale, 1 ) );
	transition: transform 0.2s ease, background-color 0.2s ease;
	vertical-align: middle;
}

.cem-wrapper.cem-show-arrows .cem-menu-desktop .cem-submenu-arrow {
	display: inline-block;
}

.cem-wrapper[data-cem-desktop-trigger="hover"] .cem-menu-desktop li:hover > a .cem-submenu-arrow,
.cem-menu-desktop li.cem-submenu-open > a .cem-submenu-arrow {
	transform: scale( var( --cem-arrow-scale, 1 ) ) rotate(180deg);
}


/* ---------- Hamburger / close toggle ----------
   .cem-toggle-row is a full-width row hidden on desktop and
   shown as flex on mobile; its justify-content (Left/Center/
   Right) is controlled by the Icon Position setting so you
   can position the button, while the icon itself stays in
   normal document flow (no fixed/absolute positioning). */
.cem-toggle-row {
	display: none;
	width: 100%;
	justify-content: flex-end;
}

.cem-menu-desktop-wrap {
	display: flex;
}

.cem-hamburger {
	position: relative;
	z-index: 10001;
	width: 32px;
	height: 32px;
	background-color: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	transition: background-color 0.3s ease;
	/* Forces its own compositing layer, isolated from the overlay's
	   backdrop-filter blur. Without this, Safari/WebKit can visibly
	   "bleed" that blur onto this button's own rotated bars — soft,
	   fuzzy edges instead of a crisp X — since the button sits both
	   above (z-index) and physically within the blurred region. */
	isolation: isolate;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
}

/* Classic 3-bar hamburger. Positioned absolutely at fixed
   percentages of the button's own height (not via flex gap),
   so line Thickness can be changed freely without throwing off
   the spacing or the X the bars form when the menu opens. */
.cem-hamburger .cem-bar {
	display: block;
	position: absolute;
	left: 50%;
	width: 60%;
	height: 2px;
	background-color: #1a1a1a;
	border-radius: 2px;
	transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
	transform-origin: center;
}

.cem-hamburger .cem-bar:nth-child(1) {
	top: 30%;
	transform: translate(-50%, -50%);
}
.cem-hamburger .cem-bar:nth-child(2) {
	top: 50%;
	transform: translate(-50%, -50%);
}
.cem-hamburger .cem-bar:nth-child(3) {
	top: 70%;
	transform: translate(-50%, -50%);
}

/* Morph hamburger into an X when active. Both bars pivot around
   the exact same center point (50%, 50%) regardless of their own
   thickness, so they always cross cleanly instead of drifting
   apart into a "scissors" look at larger thicknesses. */
.cem-hamburger.cem-active .cem-bar:nth-child(1) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}
.cem-hamburger.cem-active .cem-bar:nth-child(2) {
	opacity: 0;
}
.cem-hamburger.cem-active .cem-bar:nth-child(3) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Dots style */
.cem-hamburger .cem-dot {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #1a1a1a;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Custom icon style: two stacked icons, only one shown at a time */
.cem-hamburger .cem-icon-open,
.cem-hamburger .cem-icon-close {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #1a1a1a;
	transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.cem-hamburger .cem-icon-close {
	display: none;
}

.cem-hamburger.cem-active .cem-icon-open {
	display: none;
}

.cem-hamburger.cem-active .cem-icon-close {
	display: flex;
}

/* If no dedicated close icon was chosen, gracefully rotate the
   single open icon instead so there's still a visible state change. */
.cem-hamburger.cem-icon-style-custom:not(:has(.cem-icon-close)).cem-active .cem-icon-open {
	display: flex;
	transform: rotate(90deg);
}

/* ---------- Mobile full-screen overlay menu ---------- */
.cem-menu-mobile {
	position: fixed;
	inset: 0;
	height: 100vh;   /* fallback for browsers without dvh or JS support */
	height: calc( var( --cem-vh, 1vh ) * 100 ); /* corrected by a small JS helper on old iOS Safari */
	height: 100dvh;  /* used natively wherever supported */
	width: 100%;
	background-color: rgba(10, 10, 15, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0.35s ease;
	transition-duration: 350ms;
	z-index: 10000;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Device safe-area buffer (notches, home-indicator) lives here at
	   the panel level, kept separate from .cem-mobile-inner's padding
	   so the Content Padding style control below is fully user-owned
	   without ever fighting against safe-area protection. */
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
	/* Establishes its own stacking context so the optional background
	   image div below reliably sits behind the actual menu content
	   (.cem-mobile-inner, z-index: 1) rather than depending on paint-
	   order quirks between fixed-position siblings. */
	isolation: isolate;
}

/* Optional image overlay layer (Style → Mobile Overlay → Image
   Overlay). Only rendered in the DOM when that toggle is on. Sits
   on its own real element — rather than a CSS pseudo-element or a
   second background layer on .cem-menu-mobile itself — specifically
   so its opacity and blend mode can be adjusted without affecting
   the menu's own text/links on top of it; CSS opacity always
   applies to an entire element and everything inside it, so there's
   no way to scope it to just one background layer of a shared box. */
.cem-mobile-bg-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.cem-menu-mobile.cem-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Animation variants, selected per-widget via data-cem-anim.
   fade / fade_scale / fade_slide keep the full opacity fade +
   background blur (the original frosted-glass look, untouched).
   The slide_* variants below are deliberately crisp instead —
   no opacity fade and no blur, so the panel appears instantly at
   full clarity and only the position genuinely animates, both
   opening and closing, for a solid, modern slide rather than a
   soft/hazy one. */
.cem-menu-mobile[data-cem-anim="fade_scale"] {
	transform: scale(0.96);
	transition-property: opacity, visibility, transform;
}
.cem-menu-mobile[data-cem-anim="fade_scale"].cem-active {
	transform: scale(1);
}

.cem-menu-mobile[data-cem-anim="fade_slide"] {
	transform: translateY(24px);
	transition-property: opacity, visibility, transform;
}
.cem-menu-mobile[data-cem-anim="fade_slide"].cem-active {
	transform: translateY(0);
}

/* Slide In From Right: menu starts fully off-screen to the right
   and travels leftward into place — and reverses symmetrically
   (slides back out to the right) when closing. No fade, no blur. */
.cem-menu-mobile[data-cem-anim="slide_left"] {
	transform: translateX(100%);
	opacity: 1 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition-property: visibility, transform !important;
}
.cem-menu-mobile[data-cem-anim="slide_left"].cem-active {
	transform: translateX(0);
}

/* Slide In From Left: menu starts fully off-screen to the left
   and travels rightward into place — and reverses symmetrically
   (slides back out to the left) when closing. No fade, no blur. */
.cem-menu-mobile[data-cem-anim="slide_right"] {
	transform: translateX(-100%);
	opacity: 1 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition-property: visibility, transform !important;
}
.cem-menu-mobile[data-cem-anim="slide_right"].cem-active {
	transform: translateX(0);
}

/* Slide In From Bottom: menu starts fully off-screen below and
   travels upward into place — and reverses symmetrically (slides
   back out downward) when closing. No fade, no blur. */
.cem-menu-mobile[data-cem-anim="slide_bottom"] {
	transform: translateY(100%);
	opacity: 1 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition-property: visibility, transform !important;
}
.cem-menu-mobile[data-cem-anim="slide_bottom"].cem-active {
	transform: translateY(0);
}

.cem-mobile-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	position: relative;
	z-index: 1;
	/* auto top/bottom margin — split per alignment below — centers,
	   tops, or bottoms out short menus, but — unlike justify-content
	   on the scroll parent — still lets a taller menu scroll all the
	   way to its own top and bottom correctly regardless of which
	   alignment is chosen. */
	margin: auto 0;
	padding: 40px 24px;
	box-sizing: border-box;
}

.cem-menu-mobile.cem-valign-top .cem-mobile-inner {
	margin-top: 0;
	margin-bottom: auto;
}

.cem-menu-mobile.cem-valign-middle .cem-mobile-inner {
	margin-top: auto;
	margin-bottom: auto;
}

.cem-menu-mobile.cem-valign-bottom .cem-mobile-inner {
	margin-top: auto;
	margin-bottom: 0;
}

/* Scroll-fade edges: only applied once JS detects the menu content
   is actually taller than the viewport, so short menus stay crisp.
   Masking the inner wrapper (not the overlay itself) means items
   fade into the overlay's own blurred background, not the raw page. */
.cem-menu-mobile.cem-scrollable .cem-mobile-inner {
	mask-image: linear-gradient(to bottom, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}

.cem-mobile-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}

/* Every item is a flex row (link + optional chevron together),
   so a single justify-content value — driven by the Text
   Alignment control — reliably positions everything, whether
   or not the item has a sub-menu indicator next to it. */
.cem-mobile-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	column-gap: 4px;
	row-gap: 0;
	width: 100%;
	position: relative;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* The link + chevron form one row; a nested sub-menu (accordion or
   always-expanded mode) is forced onto its own full-width line
   below that row, rather than being treated as just another flex
   item sharing the same row — which is what was causing the parent
   label and its first sub-item to render side-by-side instead of
   stacked. flex-basis: 100% on a wrapped flex item always forces
   a line break before it; min-width/flex-shrink/flex-grow are
   pinned too so nothing can squeeze it back onto the same row as
   the link regardless of how short the link text is. */
.cem-mobile-list li > .sub-menu {
	flex-basis: 100%;
	min-width: 100%;
	max-width: 100%;
	width: 100%;
	flex-shrink: 0;
	flex-grow: 0;
}

.cem-menu-mobile.cem-active .cem-mobile-list li {
	opacity: 1;
	transform: translateY(0);
}

/* Simple stagger for a nicer fade-in of items */
.cem-mobile-list li:nth-child(1) { transition-delay: 0.05s; }
.cem-mobile-list li:nth-child(2) { transition-delay: 0.1s; }
.cem-mobile-list li:nth-child(3) { transition-delay: 0.15s; }
.cem-mobile-list li:nth-child(4) { transition-delay: 0.2s; }
.cem-mobile-list li:nth-child(5) { transition-delay: 0.25s; }
.cem-mobile-list li:nth-child(6) { transition-delay: 0.3s; }
.cem-mobile-list li:nth-child(7) { transition-delay: 0.35s; }
.cem-mobile-list li:nth-child(8) { transition-delay: 0.4s; }

.cem-mobile-list a {
	display: inline-block;
	color: #ffffff;
	text-decoration: none;
	font-size: 28px;
	transition: color 0.2s ease;
}

/* Sub-menu collapses via max-height by default (accordion mode) */
.cem-mobile-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, margin 0.3s ease;
}

.cem-mobile-list li.cem-submenu-open > .sub-menu {
	max-height: 1000px;
	margin-top: 8px;
}

/* Always-expanded mode: sub-menus are simply never collapsed and no toggle is shown */
.cem-wrapper[data-cem-mobile-behavior="always_open"] .cem-mobile-list .sub-menu {
	max-height: none;
	overflow: visible;
	margin-top: 8px;
}

.cem-mobile-list .sub-menu a {
	font-size: 18px;
	opacity: 0.85;
}

.cem-mobile-list .sub-menu li {
	list-style: none;
	position: relative;
}

/* Separator lines between sub-menu items — works for both Accordion
   (still nested inside .cem-mobile-list) and Drill-Down (relocated
   into .cem-drill-sub) since it targets any .sub-menu inside the
   wrapper, not a specific nesting path. Auto-centers in the gap via
   the same --cem-subitem-gap variable the Item Spacing control sets. */
.cem-wrapper.cem-subitem-has-separators .cem-menu-mobile .sub-menu > li:not(:last-child)::after {
	content: '';
	display: block;
	position: absolute;
	bottom: calc( -1 * var( --cem-subitem-gap, 14px ) / 2 );
	width: 50%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.cem-wrapper.cem-subitem-separator-align-left .sub-menu > li:not(:last-child)::after {
	left: 0;
	right: auto;
	transform: none;
}

.cem-wrapper.cem-subitem-separator-align-center .sub-menu > li:not(:last-child)::after {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

.cem-wrapper.cem-subitem-separator-align-right .sub-menu > li:not(:last-child)::after {
	left: auto;
	right: 0;
	transform: none;
}

/* Separator lines between top-level items. Positioned absolutely
   (relative to the <li>, which already has position:relative) so
   it doesn't get pulled into the li's own flex row alongside the
   link text — it just sits below each item. Horizontal position
   (left/center/right) is set by whichever cem-separator-align-*
   class is present, independent of the width/color/etc controls
   below, which apply the same regardless of alignment. */
.cem-mobile-list.cem-has-separators > li:not(:last-child)::after {
	content: '';
	display: block;
	position: absolute;
	/* Sits exactly halfway through the gap to the next item, so it
	   stays centered automatically whenever Item Spacing changes —
	   no separate manual offset to keep in sync. */
	bottom: calc( -1 * var( --cem-item-gap, 24px ) / 2 );
	width: 60%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	pointer-events: none;
}

.cem-mobile-list.cem-separator-align-left > li:not(:last-child)::after {
	left: 0;
	right: auto;
	transform: none;
}

.cem-mobile-list.cem-separator-align-center > li:not(:last-child)::after {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

.cem-mobile-list.cem-separator-align-right > li:not(:last-child)::after {
	left: auto;
	right: 0;
	transform: none;
}

/* Accordion toggle button (mobile only) — sits inline next to the
   link text rather than pinned to the edge of the row. */
.cem-submenu-toggle {
	display: none;
	position: relative;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background-color: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	box-shadow: none;
}

.cem-submenu-toggle:active,
.cem-submenu-toggle:focus {
	background-color: transparent;
	box-shadow: none;
}

.cem-wrapper[data-cem-mobile-behavior="accordion"] .cem-submenu-toggle {
	display: flex;
}

.cem-wrapper.cem-hide-mobile-chevron .cem-submenu-toggle {
	display: none !important;
}

.cem-submenu-toggle-arrow {
	display: block;
	width: 10px;
	height: 6px;
	background-color: #ffffff;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	transform: scale( var( --cem-arrow-scale, 1 ) );
	transition: transform 0.25s ease, background-color 0.2s ease;
}

.cem-mobile-list li.cem-submenu-open > .cem-submenu-toggle .cem-submenu-toggle-arrow {
	transform: scale( var( --cem-arrow-scale, 1 ) ) rotate(180deg);
}

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

/* ---------- Responsive breakpoint switch ----------
   Default breakpoint 768px; widget instances can override
   via the --cem-breakpoint custom property set inline,
   combined by JS toggling a body-level utility class if
   a non-default breakpoint is selected. The base rule below
   covers the common 768px default with pure CSS. */
@media (max-width: 768px) {
	.cem-wrapper[style*="--cem-breakpoint: 768px"] .cem-menu-desktop-wrap {
		display: none;
	}
	.cem-wrapper[style*="--cem-breakpoint: 768px"] .cem-toggle-row {
		display: flex;
	}
}
@media (min-width: 769px) {
	.cem-wrapper[style*="--cem-breakpoint: 768px"] .cem-menu-desktop-wrap {
		display: flex;
	}
	.cem-wrapper[style*="--cem-breakpoint: 768px"] .cem-toggle-row {
		display: none;
	}
	.cem-wrapper[style*="--cem-breakpoint: 768px"] .cem-menu-mobile {
		display: none !important;
	}
}

/* Support for custom breakpoints (1024 / 480) set per-widget instance */
@media (max-width: 1024px) {
	.cem-wrapper[style*="--cem-breakpoint: 1024px"] .cem-menu-desktop-wrap {
		display: none;
	}
	.cem-wrapper[style*="--cem-breakpoint: 1024px"] .cem-toggle-row {
		display: flex;
	}
}
@media (min-width: 1025px) {
	.cem-wrapper[style*="--cem-breakpoint: 1024px"] .cem-menu-desktop-wrap {
		display: flex;
	}
	.cem-wrapper[style*="--cem-breakpoint: 1024px"] .cem-toggle-row {
		display: none;
	}
	.cem-wrapper[style*="--cem-breakpoint: 1024px"] .cem-menu-mobile {
		display: none !important;
	}
}

@media (min-width: 481px) {
	.cem-wrapper[style*="--cem-breakpoint: 480px"] .cem-menu-desktop-wrap {
		display: flex;
	}
	.cem-wrapper[style*="--cem-breakpoint: 480px"] .cem-toggle-row {
		display: none;
	}
	.cem-wrapper[style*="--cem-breakpoint: 480px"] .cem-menu-mobile {
		display: none !important;
	}
}
@media (max-width: 480px) {
	.cem-wrapper[style*="--cem-breakpoint: 480px"] .cem-menu-desktop-wrap {
		display: none;
	}
	.cem-wrapper[style*="--cem-breakpoint: 480px"] .cem-toggle-row {
		display: flex;
	}
}

/* ==========================================================================
   Mobile logo / branding
   ========================================================================== */
.cem-mobile-logo {
	width: 100%;
	margin-bottom: 32px;
	display: flex;
	justify-content: flex-start;
}

.cem-mobile-logo-wrap {
	display: block;
	width: 140px;
	max-width: 60vw;
}

.cem-mobile-logo-wrap img {
	width: 100%;
	height: auto;
	display: block;
}

.cem-mobile-logo-link {
	display: block;
	width: 100%;
}

/* ==========================================================================
   Per-item icons (desktop + mobile)
   ========================================================================== */
.cem-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 6px;
	font-size: 0.9em;
	vertical-align: middle;
}

/* ==========================================================================
   CTA / highlighted menu item
   (apply the "cem-cta" CSS class to a menu item in Appearance > Menus)
   ========================================================================== */
.cem-cta > a {
	display: inline-block;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.cem-menu-desktop .cem-cta > a:hover {
	transform: translateY(-1px);
	opacity: 0.92;
}

.cem-mobile-list .cem-cta > a {
	margin-top: 8px;
}

/* ==========================================================================
   Accessibility: respect reduced-motion preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.cem-menu-mobile,
	.cem-menu-mobile .cem-mobile-list li,
	.cem-social-icons a,
	.cem-hamburger .cem-bar,
	.cem-hamburger .cem-dot,
	.cem-hamburger .cem-icon-open,
	.cem-hamburger .cem-icon-close,
	.cem-menu-desktop .sub-menu,
	.cem-mobile-list .sub-menu,
	.cem-submenu-toggle-arrow,
	.cem-submenu-arrow,
	.cem-cta > a {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}

	.cem-menu-mobile[data-cem-anim="fade_scale"],
	.cem-menu-mobile[data-cem-anim="fade_slide"],
	.cem-menu-mobile[data-cem-anim="slide_left"],
	.cem-menu-mobile[data-cem-anim="slide_right"],
	.cem-menu-mobile[data-cem-anim="slide_bottom"] {
		transform: none !important;
	}

	.cem-mobile-list li,
	.cem-social-icons a {
		transform: none !important;
		opacity: 1 !important;
	}
}

/* ==========================================================================
   RTL language support
   ========================================================================== */
[dir="rtl"] .cem-menu-desktop .sub-menu {
	left: auto;
	right: 0;
}

[dir="rtl"] .cem-submenu-arrow {
	margin-left: 0;
	margin-right: 6px;
}

[dir="rtl"] .cem-item-icon {
	margin: 0 6px;
}

/* ==========================================================================
   Social icons row (mobile overlay)
   ========================================================================== */
.cem-social-icons {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 40px;
	width: 100%;
}

.cem-social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	text-decoration: none;
	background-color: transparent;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease, background-color 0.2s ease;
}

.cem-menu-mobile.cem-active .cem-social-icons a {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered reveal, picking up right after the main menu items'
   own stagger finishes (see .cem-mobile-list li delays above). */
.cem-social-icons a:nth-child(1) { transition-delay: 0.3s; }
.cem-social-icons a:nth-child(2) { transition-delay: 0.35s; }
.cem-social-icons a:nth-child(3) { transition-delay: 0.4s; }
.cem-social-icons a:nth-child(4) { transition-delay: 0.45s; }
.cem-social-icons a:nth-child(5) { transition-delay: 0.5s; }
.cem-social-icons a:nth-child(6) { transition-delay: 0.55s; }

/* Icon fonts/SVGs need their own centering reset — setting only
   width/height (via the Icon Size control) isn't enough, since
   icon font glyphs carry their own line-height/baseline metrics
   that can visually offset the character within its box. */
.cem-social-icons i,
.cem-social-icons svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.cem-menu-mobile.cem-active .cem-social-icons a:hover {
	transform: translateY(-2px);
}

.cem-social-icons i,
.cem-social-icons svg {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Mobile "Drill-Down" sub-menu behavior (full-screen takeover)
   ========================================================================== */
.cem-drill-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.cem-drill-screen {
	width: 100%;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* The top-level list, always present. Slides fully out of view
   (and out of layout) while a sub-screen is showing. */
.cem-drill-main {
	position: relative;
}

.cem-drill-viewport.cem-drill-open .cem-drill-main {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Each sub-menu screen: hidden off to the right until it's the
   active one, then slides in to replace the main list. Holds a
   header (back + title) followed by the relocated <ul class="sub-menu">. */
.cem-drill-sub {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(100%);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cem-drill-viewport.cem-drill-open .cem-drill-sub.cem-drill-current {
	position: relative;
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* The relocated sub-menu list itself: no bullets, spaced to
   match the main list's rhythm. Each li is a flex row so the
   same Text Alignment control (justify-content) governs it. */
.cem-drill-sub .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
}

.cem-drill-sub .sub-menu li {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	list-style: none;
	width: 100%;
	position: relative;
}

.cem-drill-sub .sub-menu a {
	font-size: 22px;
}

/* Header: Back control on its own row, parent label centered
   underneath as the screen's title. */
.cem-drill-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	padding-bottom: 20px;
	margin-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	color: #ffffff;
}

/* "With Parent Title" position: back button sits directly beside
   the title on one row, instead of stacked above it. Vertical
   alignment is forced to center regardless of the alignment
   control's value (which instead drives horizontal position via
   justify-content) — see drilldown_title_alignment's selectors. */
.cem-drill-header-inline {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}

.cem-drill-header-inline .cem-drill-back {
	align-self: center;
}

.cem-wrapper.cem-drill-no-divider .cem-drill-header {
	border-bottom: none;
}

.cem-drill-back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: transparent;
	border: none;
	padding: 4px 2px;
	cursor: pointer;
	color: inherit;
	font-size: 15px;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	box-shadow: none;
}

.cem-drill-back:active,
.cem-drill-back:focus {
	background-color: transparent;
	box-shadow: none;
}

/* "Above Header" position: the back button sits as its own row,
   spanning the full width so align-self: flex-start (from the
   default rule above) still puts it at the left edge, with its
   own spacing before the header/divider/title block underneath. */
.cem-drill-back-standalone {
	margin-bottom: 14px;
}

.cem-drill-back-arrow {
	display: block;
	width: 6px;
	height: 10px;
	background-color: currentColor;
	clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}

.cem-drill-title {
	font-size: 22px;
	font-weight: 600;
}

/* Chevron that triggers drilling into a sub-menu — sits inline
   next to the link text (see the shared .menu-item-has-children
   flex rule above), not pinned to the row's outer edge. */
.cem-drill-trigger {
	display: none;
	position: relative;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background-color: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	box-shadow: none;
}

.cem-drill-trigger:active,
.cem-drill-trigger:focus {
	background-color: transparent;
	box-shadow: none;
}

.cem-wrapper[data-cem-mobile-behavior="drilldown"] .cem-drill-trigger {
	display: flex;
}

.cem-wrapper.cem-hide-mobile-chevron .cem-drill-trigger {
	display: none !important;
}

.cem-drill-trigger-arrow {
	display: block;
	width: 6px;
	height: 10px;
	background-color: #ffffff;
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

/* Removes the translucent gray/blue "flash" that iOS/Android
   browsers show by default when tapping a link or button — shows
   up only on touch interaction (hence "sometimes"), and otherwise
   looks like an unstyled highlight box around whatever was tapped:
   the logo, a menu item, a social icon, etc. */
.cem-wrapper a,
.cem-wrapper button {
	-webkit-tap-highlight-color: transparent;
}

/* Clean, visible-only-for-keyboard focus state applied consistently
   across every interactive element in the widget — links, buttons,
   the hamburger, the logo, social icons, everything. Without this,
   only a few specific buttons had a styled focus state and
   everything else fell back to each browser's own default outline
   (Chrome's blue ring, Safari's gold halo, etc.), which shows up
   whenever focus is moved programmatically for accessibility (e.g.
   focusing the first item when the menu opens, or the Back button
   after drilling into a sub-menu) and can look like an unstyled,
   out-of-place "highlight box" rather than an intentional design. */
.cem-wrapper a:focus-visible,
.cem-wrapper button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
	border-radius: 3px;
}

/* Label-only parent items (href="#" or empty) — a common convention
   for top-level items that exist only to hold a drop-down, with no
   page of their own. Default cursor communicates "not a link" at a
   glance, matching the click-prevention already handled in JS. */
.cem-menu-desktop > li > a[href="#"],
.cem-mobile-list > li > a[href="#"] {
	cursor: default;
}