.pavo-menu {
	position: relative;
	--pavo-menu-panel-width: 300px;
	--pavo-menu-offcanvas-duration: 300ms;
	--pavo-menu-overlay-color: #000000;
	--pavo-menu-overlay-opacity: 0.5;
	--pavo-menu-toggle-size: 24px;
	--pavo-menu-tint: color-mix(in srgb, currentColor 8%, transparent);
	--pavo-menu-tint-strong: color-mix(in srgb, currentColor 14%, transparent);
}

.pavo-menu__list,
.pavo-menu__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pavo-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

/* prefix_class puts pavo-menu--vertical on the outer Elementor container,
   one level above <nav>, so this must be a descendant (not direct-child)
   selector to actually match .pavo-menu__list. */
.pavo-menu--vertical .pavo-menu__list {
	flex-direction: column;
	align-items: stretch;
}

.pavo-menu__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
}

.pavo-menu__link {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 0.4em;
	padding: 0.6em 1em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.pavo-menu__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Icon + Badge — generic per-menu-item features (see Menu_Walker::start_el()
   and MegaMenu\Admin's Menu Item Settings modal), independent of Mega Menu:
   any item, at any depth, can carry either regardless of whether it's a
   mega item. .menu-icon/.menu-badge are TemplateHelper's own class names
   (shared with the legacy theme-wide wp_nav_menu() walker) — only color/
   size come inline from there, sizing/shape is this widget's own. */
.pavo-menu__link .menu-icon {
	flex: 0 0 auto;
	font-size: 1em;
	line-height: 1;
}

.pavo-menu__link-text {
	flex: 0 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pavo-menu__link .menu-badge {
	flex: 0 0 auto;
	padding: 0.1em 0.5em;
	font-size: 0.7em;
	font-weight: 700;
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: 3px;
	background: var(--pavo-menu-tint-strong);
}

/* Pointer: the visual cue for a hovered/active top-level item — mirrors
   Elementor Pro's Nav Menu "Pointer" style options (Underline/Overline/
   Framed/Background), reproduced independently. Scoped to .pavo-menu__list
   so dropdown items (which have their own Dropdown style section) are
   unaffected.

   The "Theme" Pointer value (`.pavo-menu--pointer-theme`) is deliberately
   NOT styled here — every rule below is keyed to a specific built-in value
   (`--pointer-underline` / `--pointer-overline` / `--pointer-framed` /
   `--pointer-background` / `--pointer-anim-*`), so none of them match the
   theme wrapper class. Keep it that way: "Theme" means the active theme
   owns the entire hover/active treatment. Do not add a
   `.pavo-menu--pointer-theme` rule to this file. */
.pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
	content: '';
	position: absolute;
	left: 1em;
	right: 1em;
	height: 2px;
	background: var(--pavo-menu-pointer-color, currentColor);
	transform: scaleX(0);
}

.pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
	bottom: 0.3em;
}

.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
	top: 0.3em;
}

/* Animation: how the pointer transitions in — Grow (default: scale from
   center), Fade (bar stays full width, only opacity animates), Slide
   (scale from the left edge instead of the center), None (instant). */
.pavo-menu--pointer-anim-grow .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
	transition: transform 0.25s ease;
}

.pavo-menu--pointer-anim-fade .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
	transform: scaleX(1);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.pavo-menu--pointer-anim-slide .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
	transform-origin: left;
	transition: transform 0.25s ease;
}

.pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item:hover > .pavo-menu__link::after,
.pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item.current-menu-item > .pavo-menu__link::after,
.pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item.current-menu-ancestor > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item:hover > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item.current-menu-ancestor > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item.current-menu-item > .pavo-menu__link::after {
	transform: scaleX(1);
	opacity: 1;
}

.pavo-menu--pointer-framed .pavo-menu__list > .pavo-menu__item > .pavo-menu__link {
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px transparent;
}

.pavo-menu--pointer-framed .pavo-menu__list > .pavo-menu__item:hover > .pavo-menu__link,
.pavo-menu--pointer-framed .pavo-menu__list > .pavo-menu__item.current-menu-item > .pavo-menu__link,
.pavo-menu--pointer-framed .pavo-menu__list > .pavo-menu__item.current-menu-ancestor > .pavo-menu__link {
	box-shadow: inset 0 0 0 1px var(--pavo-menu-pointer-color, currentColor);
}

.pavo-menu--pointer-background .pavo-menu__list > .pavo-menu__item > .pavo-menu__link {
	border-radius: 4px;
}

.pavo-menu--pointer-background .pavo-menu__list > .pavo-menu__item:hover > .pavo-menu__link,
.pavo-menu--pointer-background .pavo-menu__list > .pavo-menu__item.current-menu-item > .pavo-menu__link,
.pavo-menu--pointer-background .pavo-menu__list > .pavo-menu__item.current-menu-ancestor > .pavo-menu__link {
	background-color: var(--pavo-menu-pointer-color, var(--pavo-menu-tint-strong));
}

/* The caret is an inline <span> inside .pavo-menu__link (matching
   Elementor Pro's Nav Menu markup, where aria-haspopup/aria-expanded
   live on the <a> itself rather than on a separate control), so it
   just falls in as a normal flex item alongside the link text. */
.pavo-menu__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Logical, not margin-left — RTL audit Phase 2A: the caret sits on
	   the flex row's trailing (inline-end) side regardless of direction,
	   so its spacing from the label needs to track that same side. */
	margin-inline-start: 0.3em;
}

/* .pavo-menu__caret-icon is either our own hand-drawn chevron
   (.pavo-menu__caret-icon--default, when no Submenu Indicator icon is
   set) or the real <i>/<svg> markup Icons_Manager renders for a chosen
   icon — both get the same open-state rotation; the default drawn
   shape needs an extra 45deg on top since it rests at a tilt. */
.pavo-menu__caret-icon {
	display: inline-flex;
	font-size: 0.75em;
	transition: transform 0.2s ease;
}

.pavo-menu__item--open .pavo-menu__caret-icon {
	transform: rotate(180deg);
}

.pavo-menu__caret-icon--default {
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -0.2em;
}

.pavo-menu__item--open .pavo-menu__caret-icon--default {
	transform: rotate(225deg);
	margin-top: 0.2em;
}

/* Nested Submenu Indicator (level 2+ — a submenu inside a submenu, marked
   with the extra --nested modifier by Menu_Walker/Menu::render(), see
   Menu.php): unlike Level 1, these always fly out to the side rather than
   opening below (see .pavo-menu__submenu .pavo-menu__submenu further
   below), so the indicator should point sideways instead of down/up.
   Desktop only — mobile always collapses back to an in-place accordion
   (see .pavo-menu--is-mobile .pavo-menu__item > .pavo-menu__submenu), so
   .pavo-menu__caret-icon--nested carets there fall through to the same
   down/up .pavo-menu__caret-icon--default rules mobile already uses
   further below, untouched and unaware this modifier even exists —
   nothing here ever matches once .pavo-menu--is-mobile is present.
   .pavo-menu__item--flyout-left/--flyout-right come from menu.js
   (positionFlyoutPanel()), which measures — same "Auto" viewport-fit
   logic the top-level vertical flyout already used, just generalized to
   run for nested items too, in either Layout — so RTL, a left-hand Panel
   Position, or a right-edge collision all resolve correctly without a
   separate "Nested Direction" setting. */
.pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__caret-icon--default.pavo-menu__caret-icon--nested {
	/* Reuses the exact same drawn triangle as --default (border-right +
	   border-bottom), just rotated a further 90deg from its "down" resting
	   angle to point right instead. */
	transform: rotate(-45deg);
	margin-top: 0;
}

.pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__item--flyout-left > .pavo-menu__link .pavo-menu__caret-icon--default.pavo-menu__caret-icon--nested {
	transform: rotate(135deg);
}

/* A real icon (Nested Indicator Icon control, or Level 1's own Submenu
   Indicator reused under "Same as Default") is assumed to already point
   right at rest — the same convention Level 1's own Submenu Indicator
   already relies on assuming "down" — so it gets no base rotation, only a
   horizontal mirror for a left-opening flyout, which (unlike a fixed
   rotation amount) looks correct regardless of the icon's own shape. */
.pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__item--flyout-left > .pavo-menu__link .pavo-menu__caret-icon--nested:not(.pavo-menu__caret-icon--default) {
	transform: scaleX(-1);
}

/* Both of the above intentionally win over the generic
   .pavo-menu__item--open .pavo-menu__caret-icon 180deg-rotate rule (higher
   selector specificity): a flyout is a hover/click reveal beside the
   item, not an in-place accordion, so unlike Level 1 and the mobile
   accordion below, its indicator doesn't need to flip when opened — the
   side it already points to doesn't change just because the panel is now
   visible. */

.pavo-menu__submenu {
	position: absolute;
	top: 100%;
	/* Logical, not `left: 0` — RTL audit Phase 2A: a horizontal dropdown
	   should hug the trigger's inline-start edge (its right edge in RTL,
	   matching how RTL dropdowns conventionally align), not stay pinned
	   to the physical left regardless of direction. */
	inset-inline-start: 0;
	z-index: 100;
	min-width: 100%;
	padding: 8px;
	/* Falls back to the site's "Surface" Global Color instead of a
	   hardcoded white — actual white if that custom property isn't
	   defined on :root at all (e.g. an older Elementor Kit). Overridden
	   the moment "Dropdown → Background Color" is actually set (that
	   control has no default of its own — see Menu.php — precisely so it
	   doesn't fight this one). */
	background: var(--e-global-color-surface, #fff);
	/* The dropdown has a hardcoded light background, so it needs its own
	   readable text color — without this it inherits whatever color the
	   surrounding nav uses (often light-on-dark in a header), which on a
	   white box is functionally invisible. "Dropdown → Text Color"
	   overrides this same as before. */
	color: #1a1a1a;
	font-size: 0.95em;
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	visibility: hidden;
	opacity: 0;
}

.pavo-menu__submenu .pavo-menu__link {
	border-radius: 4px;
	/* Unlike the top-level bar, dropdown items sit in a width-constrained
	   panel (see "Dropdown → Width" in Menu.php), so long titles need to
	   wrap instead of inheriting the single-line .pavo-menu__link default. */
	white-space: normal;
}

.pavo-menu__submenu .pavo-menu__link-text {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Dropdown items get no visual cue from the top-level Pointer system
   (that's intentionally scoped to .pavo-menu__list's own direct
   children — see the Pointer block above), so without this they'd have
   no hover feedback at all unless "Dropdown → Hover → Text Color" is
   explicitly set in Style. This default tint keeps them from feeling
   dead the moment the cursor moves off the top-level item. */
.pavo-menu__submenu .pavo-menu__item:hover > .pavo-menu__link {
	background-color: var(--pavo-menu-tint);
}

.pavo-menu--anim-fade .pavo-menu__submenu,
.pavo-menu--anim-slide .pavo-menu__submenu {
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.pavo-menu--anim-slide .pavo-menu__submenu {
	transform: translateY(6px);
}

/* Mobile: always an in-place accordion regardless of layout — unaffected
   by the desktop vertical flyout below. */
.pavo-menu--is-mobile .pavo-menu__item > .pavo-menu__submenu {
	position: static;
	display: none;
	flex: 0 0 100%;
	padding-left: 1em;
	visibility: visible;
	opacity: 1;
	transform: none;
	box-shadow: none;
	border-radius: 0;
}

.pavo-menu--is-mobile .pavo-menu__item--open > .pavo-menu__submenu {
	display: block;
}

/* Desktop vertical layout: the nav itself shrinks to its widest item by
   default ("Menu Wrapper Width" = Auto — no value, so nothing here
   overrides it) instead of stretching to fill the Elementor container.
   That's what makes left:100%/right:100% below actually land flush
   against the visible menu — an unconstrained width:auto nav would
   otherwise be exactly as wide as the container, and every submenu would
   open with a big gap after it. The "Menu Wrapper Width" control
   (Elementor selectors, see Menu.php) overrides this with an explicit
   width when set. max-width keeps a very wide item from ever pushing the
   nav past its own container regardless. */
.pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) {
	width: max-content;
	max-width: 100%;
}

/* Submenus (including mega panels — .pavo-menu__submenu--mega is still a
   .pavo-menu__submenu, see Menu_Walker::render_mega_panel()) fly out
   beside the triggering item instead of opening below it, using the base
   .pavo-menu__submenu rule above for visibility/opacity/hover — nothing
   here forces a display, so Hover trigger keeps working exactly like the
   horizontal layout does, just anchored to the item's own top edge (which
   spans the full nav width here, same as the nav itself, thanks to
   .pavo-menu__list's align-items:stretch above). Which side is menu.js's
   call (positionVerticalPanel(), driven by the Panel Position setting)
   via the runtime open-left/open-right class; right is the unmeasured
   default so there's a sane fallback before JS runs on a very first
   paint. Width comes from the "Panel Width" control if set, or the
   panel's own content otherwise — see the mega-full override below for
   why that intrinsic default needs a little help there specifically. */
.pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__item > .pavo-menu__submenu {
	top: 0;
	left: 100%;
	right: auto;
}

.pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__submenu.pavo-vertical-menu--open-right {
	left: 100%;
	right: auto;
}

.pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__submenu.pavo-vertical-menu--open-left {
	left: auto;
	right: 100%;
}

/* Full Width's edge-to-edge width:100% (see .pavo-menu__submenu--mega-full
   above) means 100% of the nav — which the flyout above just made exactly
   as wide as the menu itself, not the page — so left unchecked it would
   render as a sliver the same width as the sidebar instead of a usable
   panel. Falls back to content width like a plain submenu unless "Panel
   Width" is set (that control's selector is more specific than this one,
   see Menu.php, so it still wins when configured). Stretch/Container/
   Custom don't need a matching override: positionMegaPanel() in menu.js
   skips its body/container-relative inline sizing entirely in vertical
   layout, so no inline style ever fights this CSS for those. */
.pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__submenu--mega-full {
	width: max-content;
	max-width: 90vw;
}

.pavo-menu__submenu .pavo-menu__submenu {
	top: 0;
	left: 100%;
}

/* Mirrors the top-level vertical flyout's own open-left override just
   above, for a nested (level 2+) submenu instead — same runtime class,
   now also applied to nested items by menu.js's generalized
   positionFlyoutPanel(), see that file. */
.pavo-menu__submenu .pavo-menu__submenu.pavo-vertical-menu--open-left {
	left: auto;
	right: 100%;
}

/* Hover trigger (desktop only — click trigger is handled entirely by JS). */
.pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__item:hover > .pavo-menu__submenu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

/* Not scoped to "click" trigger specifically: JS also opens an item this
   way on a device with no real hover (touch/coarse-pointer, regardless
   of viewport width — a wide tablet is still "desktop" by width but
   physically can't hover), and via ArrowDown on the keyboard. Whatever
   put .pavo-menu__item--open there, this just has to show it. */
.pavo-menu__list > .pavo-menu__item--open > .pavo-menu__submenu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.pavo-menu__submenu > .pavo-menu__item:not(:last-child) {
	border-bottom: 1px solid transparent;
}

/* Mega menu: a pavo-menu__submenu that renders an Elementor template
   (see Menu_Walker::render_mega_panel()) instead of plain menu items —
   same open/close mechanics as any other submenu, just unpadded so the
   template's own layout (and its own e-con/e-con-inner width handling)
   shows through untouched, instead of being fought or clipped by this
   wrapper's own box. */
.pavo-menu__submenu--mega {
	padding: 0;
}

/* An item can have "Enable Mega Menu" checked *and* real child items in
   the menu structure at the same time (Menu_Walker no longer discards
   them). Desktop: the mega panel wins — its real-children fallback
   <ul class="pavo-menu__submenu"> (no --mega modifier) stays hidden so
   the two don't stack on top of each other. Scoped to :not(is-mobile)
   rather than an !important tug of war with the mobile rule below. */
.pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__item--mega > .pavo-menu__submenu:not(.pavo-menu__submenu--mega) {
	display: none;
}

/* Mobile: the desktop mega template's own multi-column layout doesn't
   usefully fit a narrow accordion panel, so skip it outright instead of
   cramming it in — the item's real children (if it has any) become the
   fallback submenu there instead, following the normal mobile accordion
   rules above like any other submenu; --mega-only items (no such
   fallback) just behave like a plain link (see the matching
   mega-only+isMobile() branch in menu.js's click handler), caret hidden
   since there's nothing left for it to open. */
.pavo-menu--is-mobile .pavo-menu__submenu--mega {
	display: none !important;
}

.pavo-menu--is-mobile .pavo-menu__item--mega-only > .pavo-menu__link > .pavo-menu__caret {
	display: none;
}

/* Full Width, and Custom width with "Sub Mega Menu Position Left" set:
   both pure CSS, no measurement needed — the item opts its own
   position:relative out, letting its submenu's position:absolute look
   further up to .pavo-menu (also position:relative) as its containing
   block instead of the triggering item, so the panel left-aligns to the
   whole nav bar rather than to wherever a (possibly far-right) item
   happens to sit. */
.pavo-menu__item--mega-static {
	position: static;
}

.pavo-menu__submenu--mega-full {
	left: 0;
	right: 0;
	width: 100%;
}

/* Stretch Width, Container Width, and Custom (mega-stretch/-container/
   -custom) are all positioned by menu.js instead — how far the
   triggering item sits from the document body's or an Elementor
   container's own edge isn't knowable in static CSS. Until that first
   runs, they simply render at this base .pavo-menu__submenu's own
   default position, same as any other dropdown. */

/* Toggle button. */
.pavo-menu__toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(var(--pavo-menu-toggle-size) * 1.6);
	height: calc(var(--pavo-menu-toggle-size) * 1.6);
	padding: calc(var(--pavo-menu-toggle-size) * 0.3);
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	color: inherit;
	transition: background-color 0.2s ease;
}

.pavo-menu__toggle:hover {
	background-color: var(--pavo-menu-tint);
}

.pavo-menu__toggle-bar {
	position: relative;
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.pavo-menu__toggle-bar + .pavo-menu__toggle-bar {
	margin-top: 5px;
}

/* Hamburger → X morph on open. */
.pavo-menu--panel-open .pavo-menu__toggle--hamburger .pavo-menu__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.pavo-menu--panel-open .pavo-menu__toggle--hamburger .pavo-menu__toggle-bar:nth-child(2) {
	opacity: 0;
}

.pavo-menu--panel-open .pavo-menu__toggle--hamburger .pavo-menu__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Dots toggle style: same 3 .pavo-menu__toggle-bar spans, reshaped into
   a horizontal row of dots — no open-state morph, just a plain toggle. */
.pavo-menu__toggle--dots {
	flex-direction: row;
	gap: 4px;
}

.pavo-menu__toggle--dots .pavo-menu__toggle-bar {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	margin-top: 0;
}

/* Plus/X toggle style: a single element, ::before/::after cross into a
   "+" that morphs into an "×" on open. */
.pavo-menu__toggle-plus {
	position: relative;
	width: 1em;
	height: 1em;
}

.pavo-menu__toggle-plus::before,
.pavo-menu__toggle-plus::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease;
}

.pavo-menu__toggle-plus::before {
	transform: translate(-50%, -50%) rotate(0deg);
}

.pavo-menu__toggle-plus::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.pavo-menu--panel-open .pavo-menu__toggle-plus::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.pavo-menu--panel-open .pavo-menu__toggle-plus::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Close button (off-canvas panel) — only ever shown once the panel is
   in its fixed, slide-in mobile state; see .pavo-menu--offcanvas.pavo-menu--is-mobile
   .pavo-menu__close below. On desktop the offcanvas wrapper is
   display:contents, so without this the close button would otherwise
   render inline in the middle of the regular menu bar. */
.pavo-menu__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	color: inherit;
	transition: background-color 0.2s ease;
}

.pavo-menu__close:hover {
	background-color: var(--pavo-menu-tint);
}

.pavo-menu__close-icon {
	position: relative;
	width: 16px;
	height: 16px;
}

.pavo-menu__close-icon::before,
.pavo-menu__close-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.pavo-menu__close-icon::before {
	transform: rotate(45deg);
}

.pavo-menu__close-icon::after {
	transform: rotate(-45deg);
}

/* Off-canvas panel header — only rendered (see Menu.php render()) when a
   Panel Title is set, so its presence in the DOM is itself the "has a
   title" condition; nothing here needs to guard against the title-less
   case where .pavo-menu__close still renders directly inside
   .pavo-menu__offcanvas as before. */
.pavo-menu__offcanvas-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.pavo-menu__offcanvas-header .pavo-menu__close {
	margin-left: 0;
}

.pavo-menu__offcanvas-title {
	font-weight: 700;
	font-size: 1.05em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Off-canvas panel: display:contents on desktop keeps .pavo-menu__list a
   direct flex child of <nav> so it doesn't affect the horizontal layout. */
.pavo-menu__offcanvas {
	display: contents;
}

.pavo-menu__overlay {
	position: fixed;
	inset: 0;
	background: var(--pavo-menu-overlay-color);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pavo-menu-offcanvas-duration) ease, visibility var(--pavo-menu-offcanvas-duration);
	z-index: 9998;
}

.pavo-menu--panel-open .pavo-menu__overlay {
	opacity: var(--pavo-menu-overlay-opacity);
	visibility: visible;
}

/* Mobile mode makes <nav> itself a (wrapping) flex row, purely so the
   Toggle Align margin trick below has a flex context to resolve
   "margin: auto" against — the desktop horizontal/vertical layouts are
   entirely governed by .pavo-menu__list's own flex settings and are
   untouched by this. */
.pavo-menu--is-mobile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Pointer indicator (Underline/Overline) is a desktop hover affordance —
   on mobile the accordion open/close state already shows which item is
   active, so hide the ::after bar entirely instead of leaving a dead
   hover effect that touch devices can't trigger anyway. */
.pavo-menu--pointer-underline .pavo-menu--is-mobile .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu--is-mobile .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
	display: none;
}

/* Accordion list, mobile: caret pushed to the row's far right (instead of
   sitting right after the label) and top-level items separated by a
   divider — border color comes from the "Item Divider" style control
   (Off Canvas section) and stays transparent/invisible until set. */
.pavo-menu--is-mobile .pavo-menu__link {
	justify-content: space-between;
}

.pavo-menu--is-mobile .pavo-menu__list > .pavo-menu__item:not(:last-child) {
	border-bottom: 1px solid transparent;
}

/* Closed → open reads as "point right, then rotate down to reveal the
   panel below", rather than the down/up convention used elsewhere (see
   .pavo-menu__item--open .pavo-menu__caret-icon-- default above) — mobile
   accordions conventionally use this direction instead. Only the default
   hand-drawn caret is affected; a custom Submenu Indicator icon keeps its
   own down/up rotation since we can't assume what shape it is. */
.pavo-menu--is-mobile .pavo-menu__caret-icon--default {
	margin-top: 0;
	transform: rotate(-45deg);
}

.pavo-menu--is-mobile .pavo-menu__item--open .pavo-menu__caret-icon--default {
	margin-top: 0;
	transform: rotate(45deg);
}

/* Shapes whatever the "Active" tab's Text/Background Color controls (Main
   Menu style section) are set to into a rounded pill — inert until those
   colors are actually set, so this has no effect on its own. */
.pavo-menu--is-mobile .pavo-menu__item.current-menu-item > .pavo-menu__link,
.pavo-menu--is-mobile .pavo-menu__item.current-menu-ancestor > .pavo-menu__link {
	border-radius: 6px;
}

.pavo-menu--is-mobile .pavo-menu__toggle {
	display: flex;
}

.pavo-menu--is-mobile:not(.pavo-menu--offcanvas) .pavo-menu__offcanvas {
	display: block;
	flex: 0 0 100%;
}

.pavo-menu--is-mobile:not(.pavo-menu--offcanvas) .pavo-menu__list {
	display: none;
	flex-direction: column;
	align-items: stretch;
	flex: 0 0 100%;
	width: 100%;
}

.pavo-menu--is-mobile:not(.pavo-menu--offcanvas).pavo-menu--panel-open .pavo-menu__list {
	display: flex;
}

.pavo-menu--dropdown-full-width.pavo-menu--is-mobile:not(.pavo-menu--offcanvas) .pavo-menu__list {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
}

/* Off-canvas panel, mobile mode. */
.pavo-menu--offcanvas.pavo-menu--is-mobile .pavo-menu__close {
	display: flex;
}

.pavo-menu--offcanvas.pavo-menu--is-mobile .pavo-menu__offcanvas {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--pavo-menu-panel-width);
	max-width: 100%;
	/* Falls back to the site's "Surface" Global Color instead of a
	   hardcoded white, same as .pavo-menu__submenu above — actual white
	   if that custom property isn't defined at all. Overridden the moment
	   "Off Canvas → Panel Background" is actually set (that control has
	   no default of its own — see Menu.php — precisely so it doesn't
	   fight this one). */
	background: var(--e-global-color-surface, #fff);
	/* Same reasoning as .pavo-menu__submenu above: a hardcoded light
	   panel background needs its own readable text color instead of
	   inheriting the header's (often light-on-dark). "Off Canvas → Panel
	   Background" only changes the background, so this default keeps
	   the panel's own links/close button readable regardless. */
	color: #1a1a1a;
	overflow-y: auto;
	z-index: 9999;
	padding: 16px;
	box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
	transition: transform var(--pavo-menu-offcanvas-duration) ease;
}

.pavo-menu--offcanvas.pavo-menu--is-mobile .pavo-menu__list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin-top: 16px;
}

.pavo-menu--offcanvas-right.pavo-menu--is-mobile .pavo-menu__offcanvas {
	right: 0;
	transform: translateX(100%);
}

.pavo-menu--offcanvas-left.pavo-menu--is-mobile .pavo-menu__offcanvas {
	left: 0;
	transform: translateX(-100%);
}

.pavo-menu--offcanvas.pavo-menu--is-mobile.pavo-menu--panel-open .pavo-menu__offcanvas {
	transform: translateX(0);
}

html.pavo-menu-scroll-lock {
	overflow: hidden;
}