/* =========================================
   PT Navigation Engine
   Offcanvas Navigation
========================================= */

/* =========================================
   OFFCANVAS PANEL
========================================= */

.ptne-mobile-panel {
	position: fixed;

	top: 0;
	right: 0;

	width: 320px;
	max-width: 90%;

	height: 100vh;

	padding: var(--ptne-space-xl);

	background: #ffffff;

	box-shadow:
		-8px 0 30px
		rgba(15, 23, 42, 0.10);

	transform: translateX(100%);

	transition:
		transform
		0.30s ease;

	overflow-y: auto;

	z-index: 9999;
}

/* =========================================
   OFFCANVAS OPEN STATE
========================================= */

.ptne-mobile-navigation.is-open
> .ptne-mobile-panel {
	transform: translateX(0);
}

/* =========================================
   OFFCANVAS OVERLAY
========================================= */

.ptne-mobile-navigation::before {
	content: '';

	position: fixed;

	inset: 0;

	background:
		rgba(15, 23, 42, 0.45);

	opacity: 0;

	visibility: hidden;

	transition:
		opacity 0.30s ease,
		visibility 0.30s ease;

	z-index: 9998;
}

/* =========================================
   OVERLAY ACTIVE STATE
========================================= */

.ptne-mobile-navigation.is-open::before {
	opacity: 1;

	visibility: visible;
}

/* =========================================
   MOBILE MENU
========================================= */

.ptne-mobile-menu {
	display: flex;
	flex-direction: column;

	gap: 6px;
}

/* =========================================
   MOBILE LINKS
========================================= */

.ptne-mobile-menu
.ptne-menu-link {
	padding:
		14px 16px;

	color: #0f172a;

	background: transparent;

	border-radius: 10px;

	transition:
		background-color
		var(--ptne-transition-speed)
		var(--ptne-transition-ease);
}

/* =========================================
   MOBILE LINK HOVER
========================================= */

.ptne-mobile-menu
.ptne-menu-link:hover {
	background:
		rgba(15, 23, 42, 0.05);
}