/* ==========================================================================
   Widget Plugin – Off-Canvas Nav Menu
   ========================================================================== */

/* The widget wrapper shrinks to button size; panel lives in fixed space */
.svgw-nav {
	position: relative;
	width:     fit-content;
}

/* --------------------------------------------------------------------------
   Toggle button
   -------------------------------------------------------------------------- */
.svgw-nav__toggle {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	padding:     10px 14px;
	background:  transparent;
	border:      none;
	cursor:      pointer;
	color:       inherit;
	border-radius: 8px;
	line-height: 1;
	transition:  background-color 0.2s ease, color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.svgw-nav__toggle:focus-visible {
	outline:        2px solid currentColor;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hamburger icon  →  × animation
   -------------------------------------------------------------------------- */
.svgw-nav__hamburger {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	gap:             5px;
	width:           24px;
	flex-shrink:     0;
}

.svgw-nav__bar {
	display:          block;
	height:           2px;
	width:            100%;
	background:       currentColor;
	border-radius:    2px;
	transform-origin: center center;
	transition:
		transform 0.35s cubic-bezier(.4, 0, .2, 1),
		opacity   0.25s ease;
}

.svgw-nav__toggle[aria-expanded="true"] .svgw-nav__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.svgw-nav__toggle[aria-expanded="true"] .svgw-nav__bar:nth-child(2) {
	opacity:   0;
	transform: scaleX(0);
}
.svgw-nav__toggle[aria-expanded="true"] .svgw-nav__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.svgw-nav__label {
	font-size:   0.9rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Backdrop
   -------------------------------------------------------------------------- */
.svgw-nav__backdrop {
	position:   fixed;
	inset:      0;
	z-index:    99998;
	background: rgba(0, 0, 0, 0.45);
	opacity:    0;
	visibility: hidden;
	transition:
		opacity    0.35s ease,
		visibility 0s linear 0.35s;
	cursor: pointer;
}

.svgw-nav__backdrop.is-visible {
	opacity:    1;
	visibility: visible;
	transition:
		opacity    0.35s ease,
		visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   Off-canvas panel
   -------------------------------------------------------------------------- */
.svgw-nav__panel {
	position:   fixed;
	top:        0;
	bottom:     0;
	left:       0;
	width:      300px;
	max-width:  90vw;
	z-index:    99999;
	display:    flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;

	/* Slide out to the left by default */
	transform:  translateX(-100%);
	transition: transform 0.38s cubic-bezier(.4, 0, .2, 1);

	/* Visual defaults — overrideable via Elementor */
	background: #fff;
	box-shadow: 4px 0 32px rgba(0, 0, 0, 0.18);
}

.svgw-nav__panel.is-open {
	transform: translateX(0);
}

/* Right-side variant */
.svgw-nav--right .svgw-nav__panel {
	left:      auto;
	right:     0;
	transform: translateX(100%);
	box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18);
}

.svgw-nav--right .svgw-nav__panel.is-open {
	transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Panel header (close button)
   -------------------------------------------------------------------------- */
.svgw-nav__panel-head {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	padding:         12px 16px;
	flex-shrink:     0;
	border-bottom:   1px solid rgba(128, 128, 128, 0.12);
}

.svgw-nav__close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           2.4rem;
	height:          2.4rem;
	border:          none;
	background:      transparent;
	cursor:          pointer;
	color:           inherit;
	border-radius:   50%;
	transition:      background 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.svgw-nav__close:hover {
	background: rgba(128, 128, 128, 0.1);
}

.svgw-nav__close:focus-visible {
	outline:        2px solid currentColor;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Panel body
   -------------------------------------------------------------------------- */
.svgw-nav__panel-body {
	flex:       1;
	overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Top-level list
   -------------------------------------------------------------------------- */
.svgw-nav__list {
	list-style: none;
	margin:     0;
	padding:    8px 0;
}

.svgw-nav__list > li:not(:last-child) {
	border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

/* --------------------------------------------------------------------------
   Parent items layout  →  [link ——— arrow]  /  [sub-menu full width]
   -------------------------------------------------------------------------- */
.svgw-nav__list .menu-item-has-children {
	display:     flex;
	flex-wrap:   wrap;
	align-items: stretch;
}

.svgw-nav__list .menu-item-has-children > a {
	flex: 1 1 0;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Sub-menu toggle arrow
   -------------------------------------------------------------------------- */
.svgw-nav__sub-toggle {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           3rem;
	border:          none;
	background:      transparent;
	cursor:          pointer;
	color:           inherit;
	transition:      background 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.svgw-nav__sub-toggle:hover {
	background: rgba(128, 128, 128, 0.08);
}

.svgw-nav__sub-toggle:focus-visible {
	outline:        2px solid currentColor;
	outline-offset: -2px;
}

.svgw-nav__sub-toggle svg {
	transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}

.svgw-nav__sub-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Sub-menu accordion (grid slide trick)
   -------------------------------------------------------------------------- */
.svgw-nav__sub-wrap {
	flex-basis:         100%;
	display:            grid;
	grid-template-rows: 0fr;
	transition:         grid-template-rows 0.3s cubic-bezier(.4, 0, .2, 1);
}

.svgw-nav__sub-wrap.is-open {
	grid-template-rows: 1fr;
}

.svgw-nav__sub-wrap > .sub-menu {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Sub-menu visual style
   -------------------------------------------------------------------------- */
.svgw-nav__list .sub-menu {
	list-style: none;
	margin:     0 12px 8px 20px;
	padding:    4px 0;
	border-left: 2px solid rgba(128, 128, 128, 0.2);
}

.svgw-nav__list .sub-menu a {
	padding:   10px 16px 10px 16px;
	font-size: 0.9em;
	opacity:   0.82;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.svgw-nav__list .sub-menu a::before {
	content:       '';
	display:       inline-block;
	width:         5px;
	height:        5px;
	border-radius: 50%;
	background:    currentColor;
	opacity:       0.35;
	margin-right:  10px;
	vertical-align: middle;
	flex-shrink:   0;
}

.svgw-nav__list .sub-menu a:hover,
.svgw-nav__list .sub-menu .current-menu-item > a {
	opacity: 1;
	background-color: rgba(128, 128, 128, 0.07);
}

.svgw-nav__list .sub-menu > li:not(:last-child) {
	border-bottom: 1px solid rgba(128, 128, 128, 0.07);
}

/* --------------------------------------------------------------------------
   All links (shared)
   -------------------------------------------------------------------------- */
.svgw-nav__list a {
	display:         flex;
	align-items:     center;
	padding:         13px 20px;
	color:           inherit;
	text-decoration: none;
	transition:      background-color 0.15s ease, color 0.15s ease;
}

.svgw-nav__list a:hover,
.svgw-nav__list .current-menu-item   > a,
.svgw-nav__list .current-menu-ancestor > a {
	background-color: rgba(128, 128, 128, 0.08);
}

/* --------------------------------------------------------------------------
   Scroll-lock helper (added to <body> by JS)
   -------------------------------------------------------------------------- */
body.svgw-nav-lock {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.svgw-nav__bar,
	.svgw-nav__panel,
	.svgw-nav__backdrop,
	.svgw-nav__sub-wrap,
	.svgw-nav__sub-toggle svg {
		transition: none !important;
	}
}