/**
 * V10 — Off-canvas menu styles driven by Customizer CSS variables.
 */

.nth-offcanvas__overlay {
	background: rgba(15, 23, 42, var(--nth-offcanvas-overlay-opacity, 0.55));
	transition: opacity var(--nth-offcanvas-slide-speed, 320ms) ease;
}

.nth-offcanvas__panel {
	transition:
		transform var(--nth-offcanvas-slide-speed, 320ms) cubic-bezier(0.4, 0, 0.2, 1),
		opacity var(--nth-offcanvas-slide-speed, 320ms) ease;
}

.nth-offcanvas--slide-right .nth-offcanvas__panel {
	right: 0;
	left: auto;
	transform: translateX(100%);
}

.nth-offcanvas--slide-right.is-open .nth-offcanvas__panel {
	transform: translateX(0);
}

.nth-offcanvas--slide-left .nth-offcanvas__panel {
	left: 0;
	right: auto;
	transform: translateX(-100%);
}

.nth-offcanvas--slide-left.is-open .nth-offcanvas__panel {
	transform: translateX(0);
}

.nth-offcanvas--fade .nth-offcanvas__panel {
	right: 0;
	left: auto;
	transform: none;
	opacity: 0;
}

.nth-offcanvas--fade.is-open .nth-offcanvas__panel {
	opacity: 1;
}

.nth-offcanvas__logo {
	text-align: var(--nth-offcanvas-logo-align, center);
	margin-top: var(--nth-offcanvas-logo-margin-top, 0);
	margin-bottom: var(--nth-offcanvas-logo-margin-bottom, 16px);
	padding: var(--nth-offcanvas-logo-padding, 0);
}

.nth-offcanvas__logo a {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	text-align: inherit;
}

.nth-offcanvas__close {
	font-size: var(--nth-offcanvas-close-size, 28px);
	color: var(--nth-offcanvas-close-color, #fff);
}

.nth-offcanvas__nav {
	gap: var(--nth-offcanvas-menu-gap, 0);
}

.nth-offcanvas__nav a,
.nth-offcanvas__nav-link {
	padding-top: var(--nth-offcanvas-menu-spacing, 16px);
	padding-bottom: var(--nth-offcanvas-menu-spacing, 16px);
	font-size: var(--nth-offcanvas-menu-size, 16px);
	font-weight: var(--nth-offcanvas-menu-weight, 500);
	color: var(--nth-offcanvas-menu-color, #fff);
}

.nth-offcanvas__nav a:hover,
.nth-offcanvas__nav a:focus-visible,
.nth-offcanvas__nav-link:hover,
.nth-offcanvas__nav-link:focus-visible {
	color: var(--nth-offcanvas-menu-hover-color, var(--nth-accent, #38bdf8));
}

.nth-offcanvas__logo img,
.nth-offcanvas__logo svg,
.nth-offcanvas-logo-img,
.nth-offcanvas-logo-svg {
	width: var(--nth-offcanvas-logo-width, 128px);
	height: auto;
	max-width: var(--nth-offcanvas-logo-max-width, var(--nth-offcanvas-logo-width, 128px));
	max-height: var(--nth-offcanvas-logo-max-height, var(--nth-offcanvas-logo-height, 32px));
}

.nth-offcanvas__tagline {
	font-size: var(--nth-offcanvas-tagline-size, 14px);
	font-weight: var(--nth-offcanvas-tagline-weight, 400);
	color: var(--nth-offcanvas-tagline-color, rgba(255, 255, 255, 0.7));
}

.nth-offcanvas__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nth-offcanvas-cta-width, auto);
	min-height: var(--nth-offcanvas-cta-height, 44px);
	padding: var(--nth-offcanvas-cta-padding, 12px) 20px;
	border-radius: var(--nth-offcanvas-cta-radius, 8px);
	background: var(--nth-offcanvas-cta-bg, var(--nth-btn-bg, #0ea5e9));
	color: #fff;
	transition: background var(--nth-btn-transition, 0.25s ease);
}

.nth-offcanvas__cta:hover,
.nth-offcanvas__cta:focus-visible {
	background: var(--nth-offcanvas-cta-bg-hover, var(--nth-btn-bg-hover, #0284c7));
	color: #fff;
}

.nth-offcanvas--no-menu-icons .nth-menu-icon,
.nth-offcanvas--no-menu-icons .nth-menu-icon--svg {
	display: none !important;
}
