/* =========================================
   PT Navigation Engine
   Mobile Navigation
========================================= */

/* =========================================
   MOBILE NAVIGATION
========================================= */

.ptne-mobile-navigation {
	position: relative;

	width: 100%;
}

/* =========================================
   MOBILE TOGGLE BUTTON
========================================= */

.ptne-mobile-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	padding: 0;

	background: #ffffff;

	border:
		1px solid
		#dbe3ec;

	border-radius: 10px;

	cursor: pointer;

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

/* =========================================
   MOBILE TOGGLE HOVER
========================================= */

.ptne-mobile-toggle:hover {
	background: #f8fafc;
}

/* =========================================
   MOBILE PANEL
========================================= */

.ptne-mobile-panel {
	display: none;

	position: relative;

	width: 100%;

	margin-top: var(--ptne-space-md);

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

	background: #ffffff;

	border:
		1px solid
		#e2e8f0;

	border-radius: 16px;
}

/* =========================================
   MOBILE OPEN STATE
========================================= */

.ptne-mobile-navigation.is-open
> .ptne-mobile-panel {
	display: block;
}

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

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

	gap: var(--ptne-space-xs);
}

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

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

	color: #0f172a;

	border-radius: 10px;

	text-decoration: none;

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

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

.ptne-mobile-menu
.ptne-menu-link:hover {
	background: #f8fafc;
}

/* =========================================
   MOBILE SUBMENU
========================================= */

.ptne-mobile-menu
.ptne-submenu {
	margin-top: 6px;

	padding-left: 16px;
}