/* =========================================
   PT Navigation Engine
   Core Navigation Foundation
========================================= */

/* =========================================
   ROOT VARIABLES
========================================= */

:root {

	--ptne-focus-outline: #2563eb;

	--ptne-space-xs: 0.25rem;
	--ptne-space-sm: 0.5rem;
	--ptne-space-md: 1rem;
	--ptne-space-lg: 1.5rem;
	--ptne-space-xl: 2rem;

	--ptne-transition-speed: 0.25s;
	--ptne-transition-ease: ease;

}

/* =========================================
   ROOT NAVIGATION
========================================= */

.ptne-navigation,
.ptne-mobile-navigation,
.ptne-offcanvas-navigation {
	position: relative;

	width: 100%;
}

/* =========================================
   MENU RESET
========================================= */

.ptne-menu,
.ptne-submenu,
.ptne-mobile-menu {
	list-style: none;

	margin: 0;
	padding: 0;
}

/* =========================================
   MENU ITEMS
========================================= */

.ptne-menu-item {
	position: relative;
}

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

.ptne-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;

	text-decoration: none;

	cursor: pointer;

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

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

.ptne-submenu {
	display: none;
}

/* =========================================
   EXPANDED SUBMENU STATE
========================================= */

.ptne-menu-item.is-expanded
> .ptne-submenu {
	display: block;
}

/* =========================================
   TOGGLE BUTTONS
========================================= */

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

	padding: 0;

	background: none;

	border: none;

	cursor: pointer;

	transition:
		opacity var(--ptne-transition-speed)
		var(--ptne-transition-ease);
}

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

.ptne-mobile-panel {
	display: none;
}

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

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

/* =========================================
   ACCESSIBILITY FOCUS
========================================= */

.ptne-submenu-toggle:focus,
.ptne-mobile-toggle:focus,
.ptne-menu-link:focus {
	outline:
		2px solid
		var(--ptne-focus-outline);

	outline-offset: 2px;
}

/* =========================================
   SCREEN READER UTILITY
========================================= */

.ptne-screen-reader-text {
	position: absolute;

	width: 1px;
	height: 1px;

	margin: -1px;
	padding: 0;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);

	white-space: nowrap;

	border: 0;
}

/* =========================================
   ACCESSIBILITY STATE
========================================= */

.ptne-accessibility-enabled {
	--ptne-focus-outline: #2563eb;
}