/**
 * PWD Elementor Theme Pro - Nav Menu Widget CSS v1.2.0
 *
 * 1.2.0: desktop hover effects for the top-level items (underline, overline,
 * frame, background sweep, pill, dot, text roll, sliding highlight) and
 * dropdown open animations and item hover effects, all CSS, all with speed
 * controls.
 *
 * 1.1.0: mobile panel rebuilt around transitions (slide from left or right, or
 * fade, with a speed and easing control), scrolling inside the panel, and an
 * animated submenu accordion with its own toggle buttons. Desktop menu is
 * unchanged.
 */

/* ── Wrapper ─────────────────────────────────────────────── */
.pwd-nav-wrap {
	display: flex;
	align-items: center;
	position: relative;

	/* Mobile panel settings. The widget controls override these. */
	--pwd-mob-speed: 300ms;
	--pwd-mob-ease: ease;
	--pwd-mob-width: 300px;
	--pwd-mob-maxh: 80vh;
	--pwd-sub-speed: 300ms;
	--pwd-sub-indent: 16px;
	--pwd-mob-overlay: rgba(0, 0, 0, 0.5);
	--pwd-mob-blur: 0px;
	--pwd-mob-divider: rgba(0, 0, 0, 0.06);
}

/* ── Desktop menu ────────────────────────────────────────── */
.pwd-nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 24px;
}

.pwd-nav-layout-vertical .pwd-nav-menu {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.pwd-nav-menu li {
	position: relative;
	margin: 0;
	padding: 0;
}

.pwd-nav-menu li a {
	display: flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
	line-height: 1.4;
}

/* ── Dropdown arrow ──────────────────────────────────────── */
.pwd-nav-arrow-no .pwd-nav-arrow {
	display: none;
}
.pwd-nav-arrow {
	font-size: 0.7em;
	line-height: 1;
	display: inline-block;
	transition: transform 0.2s ease;
}
.pwd-nav-menu li.pwd-open > a .pwd-nav-arrow {
	transform: rotate(180deg);
}

/* ── Dropdown (sub-menu) ─────────────────────────────────── */
.pwd-nav-menu ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	min-width: 200px;
	background: #ffffff;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	border-radius: 4px;
}

.pwd-nav-menu ul.sub-menu li {
	width: 100%;
}

.pwd-nav-menu ul.sub-menu a {
	display: block;
	padding: 10px 20px;
	white-space: nowrap;
}

/* nested dropdowns */
.pwd-nav-menu ul.sub-menu ul.sub-menu {
	top: 0;
	left: 100%;
}

.pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-nav-menu li:hover > ul.sub-menu {
	display: block;
	animation: pwdNavFadeIn 0.15s ease;
}

@keyframes pwdNavFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Vertical layout dropdown ────────────────────────────── */
.pwd-nav-layout-vertical .pwd-nav-menu ul.sub-menu {
	position: static;
	box-shadow: none;
	border-radius: 0;
	padding-left: 16px;
}

/* ══════════════════════════════════════════════════════════
 * Desktop hover effects (top-level items) and dropdown animations
 *
 * Every effect is driven by one custom property, --pwd-hv-on, which is 0 at
 * rest and 1 while the link is hovered, keyboard-focused or (optionally) the
 * current page. The effects draw with ::before / ::after and read that value in
 * a transform or opacity, so the same transition handles the way in and the
 * way out. Colour, thickness, offset, radius, speed and easing are variables
 * set by the Hover Effect controls.
 * ══════════════════════════════════════════════════════════ */

.pwd-nav-menu > li > a,
.pwd-nav-menu ul.sub-menu a {
	--pwd-hv-on: 0;
	position: relative;
}

.pwd-nav-menu > li > a:focus-visible,
.pwd-nav-menu ul.sub-menu a:focus-visible,
.pwd-hv-keep .pwd-nav-menu > li.current-menu-item > a,
.pwd-hv-keep .pwd-nav-menu > li.current-menu-ancestor > a {
	--pwd-hv-on: 1;
}

@media (hover: hover) {
	.pwd-nav-menu > li > a:hover,
	.pwd-nav-menu ul.sub-menu a:hover {
		--pwd-hv-on: 1;
	}
}

/* ── Lines: underline, overline, both ───────────────────── */
.pwd-hv-ul-left .pwd-nav-menu > li > a::after,
.pwd-hv-ul-center .pwd-nav-menu > li > a::after,
.pwd-hv-ul-right .pwd-nav-menu > li > a::after,
.pwd-hv-double .pwd-nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--pwd-hv-offset, 0px);
	height: var(--pwd-hv-thick, 2px);
	background: var(--pwd-hv-color, currentColor);
	transform: scaleX(var(--pwd-hv-on));
	transform-origin: left center;
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

.pwd-hv-overline .pwd-nav-menu > li > a::before,
.pwd-hv-double .pwd-nav-menu > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--pwd-hv-offset, 0px);
	height: var(--pwd-hv-thick, 2px);
	background: var(--pwd-hv-color, currentColor);
	transform: scaleX(var(--pwd-hv-on));
	transform-origin: right center;
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

.pwd-hv-ul-center .pwd-nav-menu > li > a::after { transform-origin: center; }
.pwd-hv-ul-right .pwd-nav-menu > li > a::after { transform-origin: right center; }

/* ── Frame ──────────────────────────────────────────────── */
.pwd-hv-frame .pwd-nav-menu > li > a::before {
	content: "";
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: var(--pwd-hv-thick, 2px) solid var(--pwd-hv-color, currentColor);
	border-radius: var(--pwd-hv-radius, 6px);
	opacity: var(--pwd-hv-on);
	transform: scale(calc(0.9 + 0.1 * var(--pwd-hv-on)));
	transition: opacity var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease), transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

/* ── Background sweeps and pill (drawn behind the text) ── */
.pwd-hv-sweep-x .pwd-nav-menu > li > a,
.pwd-hv-sweep-y .pwd-nav-menu > li > a,
.pwd-hv-pill .pwd-nav-menu > li > a {
	isolation: isolate;
}

.pwd-hv-sweep-x .pwd-nav-menu > li > a::before,
.pwd-hv-sweep-y .pwd-nav-menu > li > a::before,
.pwd-hv-pill .pwd-nav-menu > li > a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pwd-hv-color, currentColor);
	border-radius: var(--pwd-hv-radius, 6px);
	pointer-events: none;
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease), opacity var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
}

.pwd-hv-sweep-x .pwd-nav-menu > li > a::before {
	transform: scaleX(var(--pwd-hv-on));
	transform-origin: left center;
}

.pwd-hv-sweep-y .pwd-nav-menu > li > a::before {
	transform: scaleY(var(--pwd-hv-on));
	transform-origin: center bottom;
}

.pwd-hv-pill .pwd-nav-menu > li > a::before {
	border-radius: 999px;
	opacity: var(--pwd-hv-on);
	transform: scale(calc(0.8 + 0.2 * var(--pwd-hv-on)));
}

/* ── Dot ────────────────────────────────────────────────── */
.pwd-hv-dot .pwd-nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: var(--pwd-hv-offset, 0px);
	width: calc(var(--pwd-hv-thick, 2px) * 2);
	height: calc(var(--pwd-hv-thick, 2px) * 2);
	border-radius: 50%;
	background: var(--pwd-hv-color, currentColor);
	transform: translateX(-50%) scale(var(--pwd-hv-on));
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

/* ── Text roll (the walker prints the label twice) ──────── */
.pwd-hv-roll .pwd-nav-menu > li > a .pwd-nav-label {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.pwd-hv-roll .pwd-nav-menu > li > a .pwd-nav-label-roll {
	display: block;
	transform: translateY(calc(-100% * var(--pwd-hv-on)));
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
}

.pwd-hv-roll .pwd-nav-menu > li > a .pwd-nav-label-roll::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	white-space: nowrap;
}

/* ── Sliding highlight (CSS anchor positioning) ─────────── */
/* One background element belongs to the whole menu and is tethered to
   whichever item is hovered or focused, so it glides from item to item. Where
   anchor positioning is missing, the item just gets a background fade. */
@supports (anchor-name: --pwd-hv) {
	.pwd-hv-highlight .pwd-nav-menu {
		position: relative;
		isolation: isolate;
	}

	.pwd-hv-highlight .pwd-nav-menu > li > a {
		z-index: 1;
	}

	.pwd-hv-highlight .pwd-nav-menu > li:focus-within > a {
		anchor-name: --pwd-hv;
	}

	.pwd-hv-highlight .pwd-nav-menu::before {
		content: "";
		position: absolute;
		z-index: 0;
		position-anchor: --pwd-hv;
		top: anchor(top);
		bottom: anchor(bottom);
		left: anchor(left);
		right: anchor(right);
		background: var(--pwd-hv-color, rgba(127, 127, 127, 0.18));
		border-radius: var(--pwd-hv-radius, 6px);
		opacity: 0;
		pointer-events: none;
		transition:
			top var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease),
			bottom var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease),
			left var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease),
			right var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease),
			opacity var(--pwd-hv-speed, 300ms) ease;
	}

	.pwd-hv-highlight .pwd-nav-menu:has(> li:focus-within > a)::before {
		opacity: 1;
	}

	@media (hover: hover) {
		.pwd-hv-highlight .pwd-nav-menu > li:hover > a {
			anchor-name: --pwd-hv;
		}

		.pwd-hv-highlight .pwd-nav-menu:has(> li:hover > a)::before {
			opacity: 1;
		}
	}
}

@supports not (anchor-name: --pwd-hv) {
	.pwd-hv-highlight .pwd-nav-menu > li > a {
		border-radius: var(--pwd-hv-radius, 6px);
		transition: background-color var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	}

	.pwd-hv-highlight .pwd-nav-menu > li > a:focus-visible {
		background-color: var(--pwd-hv-color, rgba(127, 127, 127, 0.18));
	}

	@media (hover: hover) {
		.pwd-hv-highlight .pwd-nav-menu > li > a:hover {
			background-color: var(--pwd-hv-color, rgba(127, 127, 127, 0.18));
		}
	}
}

/* ── Dropdown item hover effects ────────────────────────── */
.pwd-nav-menu ul.sub-menu a .pwd-nav-label {
	display: inline-block;
}

.pwd-ddh-nudge .pwd-nav-menu ul.sub-menu a .pwd-nav-label {
	transform: translateX(calc(8px * var(--pwd-hv-on)));
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
}

.pwd-ddh-bar .pwd-nav-menu ul.sub-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12%;
	bottom: 12%;
	width: 3px;
	border-radius: 2px;
	background: var(--pwd-dd-color, currentColor);
	transform: scaleY(var(--pwd-hv-on));
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

.pwd-ddh-sweep .pwd-nav-menu ul.sub-menu a {
	isolation: isolate;
}

.pwd-ddh-sweep .pwd-nav-menu ul.sub-menu a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pwd-dd-color, rgba(127, 127, 127, 0.15));
	transform: scaleX(var(--pwd-hv-on));
	transform-origin: left center;
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

/* ── Dropdown open animations (desktop) ─────────────────── */
/* The default (fade and slide down) is the original rule above. Speed comes
   from --pwd-dd-speed. */
.pwd-nav-wrap .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-nav-wrap .pwd-nav-menu li:hover > ul.sub-menu {
	animation-duration: var(--pwd-dd-speed, 150ms);
}

.pwd-dd-fade .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-fade .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdFade;
}

.pwd-dd-scale .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-scale .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdScale;
	transform-origin: top left;
}

.pwd-dd-wipe .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-wipe .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdWipe;
}

.pwd-dd-flip .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-flip .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdFlip;
	transform-origin: top center;
}

.pwd-dd-none .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-none .pwd-nav-menu li:hover > ul.sub-menu {
	animation: none;
}

.pwd-dd-stagger .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-stagger .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdFade;
}

.pwd-dd-stagger .pwd-nav-menu li.pwd-open > ul.sub-menu > li,
.pwd-dd-stagger .pwd-nav-menu li:hover > ul.sub-menu > li {
	animation: pwdDdItem var(--pwd-dd-speed, 150ms) ease calc(var(--pwd-i, 0) * 45ms) both;
}

.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(1) { --pwd-i: 0; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(2) { --pwd-i: 1; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(3) { --pwd-i: 2; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(4) { --pwd-i: 3; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(5) { --pwd-i: 4; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(6) { --pwd-i: 5; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(7) { --pwd-i: 6; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(8) { --pwd-i: 7; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(9) { --pwd-i: 8; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(n+10) { --pwd-i: 9; }

@keyframes pwdDdFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes pwdDdScale {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes pwdDdWipe {
	from { clip-path: inset(0 -40px 100% -40px); }
	to   { clip-path: inset(0 -40px -60px -40px); }
}

@keyframes pwdDdFlip {
	from { opacity: 0; transform: perspective(600px) rotateX(-18deg); }
	to   { opacity: 1; transform: perspective(600px) rotateX(0); }
}

@keyframes pwdDdItem {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: effects still show their end state, without moving. */
@media (prefers-reduced-motion: reduce) {
	.pwd-nav-wrap .pwd-nav-menu *,
	.pwd-nav-wrap .pwd-nav-menu *::before,
	.pwd-nav-wrap .pwd-nav-menu *::after,
	.pwd-nav-wrap .pwd-nav-menu::before {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Hamburger button ────────────────────────────────────── */
.pwd-nav-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.2s ease;
	z-index: 1001;
}

.pwd-ham-bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animated X on open */
.pwd-nav-hamburger.pwd-is-open .pwd-ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pwd-nav-hamburger.pwd-is-open .pwd-ham-bar:nth-child(2) { opacity: 0; }
.pwd-nav-hamburger.pwd-is-open .pwd-ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* dots */
.pwd-ham-dot {
	display: block;
	width: 5px;
	height: 5px;
	background: currentColor;
	border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════
 * Mobile panel
 *
 * One set of rules for all three styles. The panel is always laid out while
 * the menu is in mobile mode and is hidden with visibility, so a closed panel
 * can never be reached by keyboard. Opening and closing are transitions on
 * opacity, transform and clip-path, timed by --pwd-mob-speed / --pwd-mob-ease.
 * The widget's colour, shadow and padding controls set the plain properties
 * below at a higher specificity, so the visual defaults here stay single-class.
 * ══════════════════════════════════════════════════════════ */

.pwd-nav-mobile-panel {
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* ── Dropdown style: hangs below the header ─────────────── */
.pwd-nav-wrap .pwd-nav-mobile-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	max-height: var(--pwd-mob-maxh);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--pwd-mob-speed) var(--pwd-mob-ease),
		transform var(--pwd-mob-speed) var(--pwd-mob-ease),
		clip-path var(--pwd-mob-speed) var(--pwd-mob-ease),
		visibility 0s linear var(--pwd-mob-speed);
}

/* Slide down: reveal from the top edge (the extra inset leaves room for the shadow). */
.pwd-nav-wrap.pwd-mob-dropdown.pwd-mob-anim-slide .pwd-nav-mobile-panel {
	clip-path: inset(0 -40px 100% -40px);
}

.pwd-nav-wrap .pwd-nav-mobile-panel.pwd-is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition-delay: 0s;
}

.pwd-nav-wrap.pwd-mob-dropdown.pwd-mob-anim-slide .pwd-nav-mobile-panel.pwd-is-open {
	clip-path: inset(0 -40px -60px -40px);
}

/* ── Off-canvas style: slides in from the left or right ─── */
.pwd-nav-wrap.pwd-mob-sidebar .pwd-nav-mobile-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	width: var(--pwd-mob-width);
	max-width: 90vw;
	max-height: none;
	transform: translateX(-100%);
}

.pwd-nav-wrap.pwd-mob-sidebar.pwd-mob-side-right .pwd-nav-mobile-panel {
	left: auto;
	right: 0;
	transform: translateX(100%);
}

.pwd-nav-wrap.pwd-mob-sidebar .pwd-nav-mobile-panel.pwd-is-open,
.pwd-nav-wrap.pwd-mob-sidebar.pwd-mob-side-right .pwd-nav-mobile-panel.pwd-is-open {
	transform: none;
}

/* Fade: the panel stays put and only its opacity changes. */
.pwd-nav-wrap.pwd-mob-sidebar.pwd-mob-anim-fade .pwd-nav-mobile-panel,
.pwd-nav-wrap.pwd-mob-sidebar.pwd-mob-anim-fade.pwd-mob-side-right .pwd-nav-mobile-panel {
	transform: none;
}

/* ── Full-screen style ──────────────────────────────────── */
.pwd-nav-wrap.pwd-mob-fullscreen .pwd-nav-mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 9999;
	max-height: none;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.pwd-nav-wrap.pwd-mob-fullscreen.pwd-mob-anim-slide .pwd-nav-mobile-panel {
	transform: translateX(-100%);
}

.pwd-nav-wrap.pwd-mob-fullscreen.pwd-mob-anim-slide.pwd-mob-side-right .pwd-nav-mobile-panel {
	transform: translateX(100%);
}

.pwd-nav-wrap.pwd-mob-fullscreen.pwd-mob-anim-slide .pwd-nav-mobile-panel.pwd-is-open,
.pwd-nav-wrap.pwd-mob-fullscreen.pwd-mob-anim-slide.pwd-mob-side-right .pwd-nav-mobile-panel.pwd-is-open {
	transform: none;
}

/* Centred when short, scrolls normally when tall. */
.pwd-nav-wrap.pwd-mob-fullscreen .pwd-nav-menu-mobile {
	width: 100%;
	max-width: 560px;
	margin: auto;
	box-sizing: border-box;
}

/* Page scroll lock while an off-canvas or full-screen menu is open. */
body.pwd-nav-lock {
	overflow: hidden;
}

/* ── Overlay ─────────────────────────────────────────────── */
.pwd-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--pwd-mob-overlay);
	-webkit-backdrop-filter: blur(var(--pwd-mob-blur));
	backdrop-filter: blur(var(--pwd-mob-blur));
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--pwd-mob-speed) ease, visibility 0s linear var(--pwd-mob-speed);
}
.pwd-nav-overlay.pwd-is-open {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

/* ── Close button ────────────────────────────────────────── */
.pwd-nav-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	font-size: 1.4rem;
	cursor: pointer;
	line-height: 1;
}

/* Scoped so a theme's button styles (background, border, colours) do not
   repaint the close button. The colour comes from a variable the widget's
   Close Button Colour control sets. */
.pwd-nav-wrap .pwd-nav-close,
.pwd-nav-wrap .pwd-nav-close:hover,
.pwd-nav-wrap .pwd-nav-close:focus {
	padding: 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--pwd-nav-close-color, inherit);
}

/* ── Mobile menu list ────────────────────────────────────── */
/* Lists, items and links are scoped under .pwd-nav-wrap so a theme's rules for
   bare ul, li and a elements (bullets, margins, underlines) cannot undo them.
   Padding and colour stay at lower specificity on purpose: the widget's own
   controls set those. */
.pwd-nav-wrap .pwd-nav-menu-mobile {
	list-style: none;
	margin: 0;
	padding: 16px 0;
}
.pwd-nav-wrap .pwd-nav-menu-mobile li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pwd-nav-menu-mobile a {
	display: block;
	padding: 12px 20px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.pwd-nav-wrap .pwd-nav-menu-mobile li a {
	text-decoration: none;
	border-bottom: 1px solid var(--pwd-mob-divider);
}

/* Rows with a submenu: link on the left, toggle button on the right. */
.pwd-nav-menu-mobile li.menu-item-has-children {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
}

.pwd-nav-menu-mobile .pwd-sub-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--pwd-mob-divider);
	border-radius: 0;
	color: inherit;
	cursor: pointer;
}

.pwd-nav-menu-mobile .pwd-sub-toggle svg {
	display: block;
	width: 16px;
	height: 16px;
	transition: transform var(--pwd-sub-speed) var(--pwd-mob-ease);
}

.pwd-nav-menu-mobile li.pwd-open > .pwd-sub-toggle svg {
	transform: rotate(180deg);
}

/* Submenu: the wrapper animates its row height from 0fr to 1fr, so any
   amount of content opens smoothly without measuring it in script. */
.pwd-nav-menu-mobile .pwd-sub-wrap {
	grid-column: 1 / -1;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--pwd-sub-speed) var(--pwd-mob-ease);
}

.pwd-nav-menu-mobile li.pwd-open > .pwd-sub-wrap {
	grid-template-rows: 1fr;
}

.pwd-nav-menu-mobile .pwd-sub-inner {
	min-height: 0;
	overflow: hidden;
	padding-left: var(--pwd-sub-indent);
	visibility: hidden;
	transition: visibility 0s linear var(--pwd-sub-speed);
}

.pwd-nav-menu-mobile li.pwd-open > .pwd-sub-wrap > .pwd-sub-inner {
	visibility: visible;
	transition-delay: 0s;
}

.pwd-nav-wrap .pwd-nav-menu-mobile ul.sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A theme's button hover and focus colours must not repaint the arrow button. */
.pwd-nav-wrap .pwd-nav-menu-mobile .pwd-sub-toggle:hover,
.pwd-nav-wrap .pwd-nav-menu-mobile .pwd-sub-toggle:focus {
	background-color: transparent;
	border-top-width: 0;
	box-shadow: none;
}

/* Keyboard focus */
.pwd-nav-hamburger:focus-visible,
.pwd-nav-close:focus-visible,
.pwd-nav-menu-mobile .pwd-sub-toggle:focus-visible,
.pwd-nav-menu-mobile a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* ── Responsive visibility (JS driven via data-breakpoint) ── */
/* JS adds class pwd-nav-mobile-mode to .pwd-nav-wrap when below breakpoint */
.pwd-nav-wrap.pwd-nav-mobile-mode .pwd-nav-menu { display: none; }
.pwd-nav-wrap.pwd-nav-mobile-mode .pwd-nav-hamburger { display: flex; }
.pwd-nav-wrap:not(.pwd-nav-mobile-mode) .pwd-nav-hamburger { display: none; }
.pwd-nav-wrap:not(.pwd-nav-mobile-mode) .pwd-nav-mobile-panel { display: none !important; }
.pwd-nav-wrap:not(.pwd-nav-mobile-mode) .pwd-nav-overlay { display: none !important; }

/* Reduced motion: no sliding or fading, the panel just appears. */
@media (prefers-reduced-motion: reduce) {
	.pwd-nav-wrap .pwd-nav-mobile-panel,
	.pwd-nav-wrap .pwd-nav-overlay,
	.pwd-nav-menu-mobile .pwd-sub-wrap,
	.pwd-nav-menu-mobile .pwd-sub-toggle svg {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}