/**
 * HeaderFlow Navigation Panel styles.
 *
 * Provides the presentation layer for the Navigation Panel module.
 *
 * @package HeaderFlow
 */

/* ==========================================================================
   Navigation Panel
   ========================================================================== */

.hf-navigation-panel {
	position: fixed;
	top: var(--hf-admin-bar-height, 0px);
	bottom: 0;
	width: var(--hf-navigation-panel-width, 350px);
	height: calc(100vh - var(--hf-admin-bar-height, 0px));
	height: calc(100dvh - var(--hf-admin-bar-height, 0px));
	max-height: calc(100vh - var(--hf-admin-bar-height, 0px));
	max-height: calc(100dvh - var(--hf-admin-bar-height, 0px));
	margin: 0;
	padding: 0;
	background: var(--hf-navigation-panel-background, #ffffff);
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	z-index: 100000;
	box-sizing: border-box;
}

.hf-navigation-panel *,
.hf-navigation-panel *::before,
.hf-navigation-panel *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Direction
   ========================================================================== */

.hf-navigation-panel[data-direction="left"] {
	left: 0;
	right: auto;
}

.hf-navigation-panel[data-direction="right"] {
	right: 0;
	left: auto;
}

/* ==========================================================================
   Panel Content
   ========================================================================== */

.hf-navigation-panel__inner {
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.hf-navigation-panel__content {
	width: 100%;
	min-height: 100%;
}

/* ==========================================================================
   Panel State
   ========================================================================== */

.hf-navigation-panel.is-open {
	visibility: visible;
	pointer-events: auto;
}

.hf-navigation-panel.is-closed {
	pointer-events: none;
}

/* ==========================================================================
   Slide Animation
   ========================================================================== */

.hf-navigation-panel[data-animation="slide"] {
	transition:
		transform var(--hf-navigation-panel-duration, 0.3s) ease,
		visibility 0s linear var(--hf-navigation-panel-duration, 0.3s);
}

.hf-navigation-panel[data-direction="left"][data-animation="slide"] {
	transform: translate3d(-100%, 0, 0);
}

.hf-navigation-panel[data-direction="right"][data-animation="slide"] {
	transform: translate3d(100%, 0, 0);
}

.hf-navigation-panel[data-animation="slide"].is-open {
	transform: translate3d(0, 0, 0);
	transition:
		transform var(--hf-navigation-panel-duration, 0.3s) ease,
		visibility 0s linear 0s;
}

/* ==========================================================================
   Fade Animation
   ========================================================================== */

.hf-navigation-panel[data-animation="fade"] {
	opacity: 0;
	transition:
		opacity var(--hf-navigation-panel-duration, 0.3s) ease,
		visibility 0s linear var(--hf-navigation-panel-duration, 0.3s);
}

.hf-navigation-panel[data-animation="fade"].is-open {
	opacity: 1;
	transition:
		opacity var(--hf-navigation-panel-duration, 0.3s) ease,
		visibility 0s linear 0s;
}

/* ==========================================================================
   Fade + Slide Animation
   ========================================================================== */

.hf-navigation-panel[data-animation="fade_slide"] {
	opacity: 0;
	transition:
		transform var(--hf-navigation-panel-duration, 0.3s) ease,
		opacity var(--hf-navigation-panel-duration, 0.3s) ease,
		visibility 0s linear var(--hf-navigation-panel-duration, 0.3s);
}

.hf-navigation-panel[data-direction="left"][data-animation="fade_slide"] {
	transform: translate3d(-100%, 0, 0);
}

.hf-navigation-panel[data-direction="right"][data-animation="fade_slide"] {
	transform: translate3d(100%, 0, 0);
}

.hf-navigation-panel[data-animation="fade_slide"].is-open {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		transform var(--hf-navigation-panel-duration, 0.3s) ease,
		opacity var(--hf-navigation-panel-duration, 0.3s) ease,
		visibility 0s linear 0s;
}

/* ==========================================================================
   Overlay
   ========================================================================== */

.hf-navigation-overlay {
	position: fixed;
	top: var(--hf-admin-bar-height, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(100vh - var(--hf-admin-bar-height, 0px));
	height: calc(100dvh - var(--hf-admin-bar-height, 0px));
	margin: 0;
	padding: 0;
	background: var(--hf-navigation-overlay-background, rgba(0, 0, 0, 0.5));
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	z-index: 99999;
	box-sizing: border-box;
}

.hf-navigation-overlay.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.hf-navigation-overlay[data-animation="fade"] {
	transition:
		opacity var(--hf-navigation-panel-duration, 0.3s) ease,
		visibility 0s linear var(--hf-navigation-panel-duration, 0.3s);
}

.hf-navigation-overlay[data-animation="fade"].is-open {
	transition:
		opacity var(--hf-navigation-panel-duration, 0.3s) ease,
		visibility 0s linear 0s;
}

/* ==========================================================================
   Trigger
   ========================================================================== */

.hf-nav-trigger {
	cursor: pointer;
}

.hf-nav-trigger[aria-disabled="true"] {
	cursor: default;
}

/* ==========================================================================
   Close Control
   ========================================================================== */

.hf-nav-close {
	cursor: pointer;
}

.hf-nav-close[aria-disabled="true"] {
	cursor: default;
}

/* ==========================================================================
   Admin Bar Compatibility
   ========================================================================== */

/*
 * WordPress admin-bar height is supplied dynamically by JavaScript.
 * The default remains 0px for logged-out visitors and environments
 * where the admin bar is unavailable.
 */

.admin-bar {
	--hf-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar {
		--hf-admin-bar-height: 46px;
	}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hf-navigation-panel,
	.hf-navigation-overlay {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.hf-navigation-panel[data-animation="slide"],
	.hf-navigation-panel[data-animation="fade_slide"] {
		transform: none;
	}

	.hf-navigation-panel[data-animation="fade"],
	.hf-navigation-panel[data-animation="fade_slide"] {
		opacity: 1;
	}

	.hf-navigation-overlay {
		opacity: 1;
	}
}