/* Foldout Menu — frontend styles. All selectors are scoped under
   .hsarfold-* / #hsarfold-* to avoid clashing with theme or other plugin CSS.
   Nearly every plugin-controlled property carries !important — themes and
   page builders (Elementor, Divi, WPBakery, etc.) frequently ship global
   typography/reset CSS with !important, which otherwise beats a plain
   selector regardless of specificity. Doubled-class selectors add specificity
   on top of that as a second line of defense. */

.hsarfold-overlay,
.hsarfold-panel,
.hsarfold-trigger {
	box-sizing: border-box !important;
}

.hsarfold-overlay *,
.hsarfold-panel *,
.hsarfold-trigger * {
	box-sizing: inherit !important;
}

/* Shared premium easing curve for every animated element in this plugin.
   Balanced ease-in-out so changing the duration visibly changes the whole
   motion (a front-loaded curve would make most of the movement happen
   almost instantly regardless of duration). */
.hsarfold-overlay,
.hsarfold-panel,
.hsarfold-icon-bar {
	transition-timing-function: cubic-bezier( 0.65, 0, 0.35, 1 ) !important;
}

/* ---------- Overlay (dims rest of page) ---------- */
.hsarfold-overlay.hsarfold-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: var( --hsarfold-overlay-bg, rgba(0,0,0,0.5) ) !important;
	z-index: calc( var( --hsarfold-z, 999999 ) - 1 ) !important;
	opacity: 0;
	visibility: hidden;
	transition-property: opacity;
	transition-duration: var( --hsarfold-anim-speed, 320ms );
}

.hsarfold-overlay.hsarfold-is-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ---------- Panel base ---------- */
.hsarfold-panel.hsarfold-panel {
	position: fixed !important;
	background-color: var( --hsarfold-panel-bg, #fff ) !important;
	background-image: var( --hsarfold-panel-bg-image, none ) !important;
	background-size: var( --hsarfold-panel-bg-size, cover ) !important;
	background-position: var( --hsarfold-panel-bg-position, center center ) !important;
	background-repeat: var( --hsarfold-panel-bg-repeat, no-repeat ) !important;
	z-index: var( --hsarfold-z, 999999 ) !important;
	overflow: hidden !important;
	margin: 0 !important;
	transition-property: transform;
	transition-duration: var( --hsarfold-anim-speed, 320ms );
}

/* Left / Right slide directions */
.hsarfold-panel.hsarfold-panel.hsarfold-direction-right,
.hsarfold-panel.hsarfold-panel.hsarfold-direction-left {
	top: 0 !important;
	bottom: 0 !important;
	width: var( --hsarfold-panel-size, 30% ) !important;
	max-width: 100% !important;
	height: auto !important;
}

.hsarfold-panel.hsarfold-panel.hsarfold-direction-right {
	right: 0 !important;
	left: auto !important;
	transform: translateX(100%);
}

.hsarfold-panel.hsarfold-panel.hsarfold-direction-left {
	left: 0 !important;
	right: auto !important;
	transform: translateX(-100%);
}

/* Top / Bottom slide directions */
.hsarfold-panel.hsarfold-panel.hsarfold-direction-top,
.hsarfold-panel.hsarfold-panel.hsarfold-direction-bottom {
	left: 0 !important;
	right: 0 !important;
	height: var( --hsarfold-panel-size, 60% ) !important;
	max-height: 100% !important;
	width: auto !important;
}

.hsarfold-panel.hsarfold-panel.hsarfold-direction-top {
	top: 0 !important;
	bottom: auto !important;
	transform: translateY(-100%);
}

.hsarfold-panel.hsarfold-panel.hsarfold-direction-bottom {
	bottom: 0 !important;
	top: auto !important;
	transform: translateY(100%);
}

.hsarfold-panel.hsarfold-is-open {
	transform: translate(0, 0) !important;
}

/* ---------- Background media (image handled via CSS vars above; video is a real element) ---------- */
.hsarfold-panel-media-video.hsarfold-panel-media-video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	z-index: 0 !important;
	pointer-events: none !important;
	margin: 0 !important;
}

.hsarfold-media-overlay.hsarfold-media-overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	background: var( --hsarfold-media-overlay-bg, transparent ) !important;
	pointer-events: none !important;
}

/* ---------- Scrollable inner content (kept separate from the panel itself
   so background media always covers the full panel, even while menu content scrolls) ---------- */
.hsarfold-panel-inner.hsarfold-panel-inner {
	position: relative !important;
	z-index: 2 !important;
	height: 100% !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	padding: 60px 24px 24px !important;
	margin: 0 !important;
}

/* ---------- Close button (identical bars/animation to the hamburger trigger) ---------- */
.hsarfold-close.hsarfold-close {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	left: auto !important;
	bottom: auto !important;
	width: var( --hsarfold-icon-size, 28px ) !important;
	height: var( --hsarfold-icon-size, 28px ) !important;
	display: inline-flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: var( --hsarfold-icon-gap, 5px ) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
	z-index: 3 !important;
}

body.rtl .hsarfold-close.hsarfold-close {
	right: auto !important;
	left: 16px !important;
}

/* ---------- Nav menu inside panel ---------- */
.hsarfold-nav-menu.hsarfold-nav-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: var( --hsarfold-menu-align, left ) !important;
}

.hsarfold-nav-menu.hsarfold-nav-menu li {
	list-style: none !important;
	margin: 0 0 var( --hsarfold-menu-item-spacing, 8px ) !important;
	padding: 0 !important;
}

.hsarfold-nav-menu.hsarfold-nav-menu li:last-child {
	margin-bottom: 0 !important;
}

.hsarfold-nav-menu.hsarfold-nav-menu a {
	display: block !important;
	padding: 4px !important;
	text-decoration: none !important;
	font-family: var( --hsarfold-menu-font, inherit ) !important;
	font-size: var( --hsarfold-menu-font-size, 18px ) !important;
	transition: color 0.2s ease, font-size 0.2s ease;
}

.hsarfold-nav-link.hsarfold-nav-link {
	color: var( --hsarfold-menu-color, #222 ) !important;
}

.hsarfold-nav-link.hsarfold-nav-link:hover,
.hsarfold-nav-link.hsarfold-nav-link:focus {
	color: var( --hsarfold-menu-hover-color, #000 ) !important;
	font-size: var( --hsarfold-menu-hover-size, 20px ) !important;
	outline: none !important;
}

.hsarfold-nav-menu.hsarfold-nav-menu .sub-menu {
	list-style: none !important;
	padding-left: 16px !important;
	margin: 4px 0 8px !important;
}

body.rtl .hsarfold-nav-menu.hsarfold-nav-menu .sub-menu {
	padding-left: 0 !important;
	padding-right: 16px !important;
}

.hsarfold-nav-menu.hsarfold-nav-menu .sub-menu a {
	font-size: var( --hsarfold-submenu-font-size, 14px ) !important;
}

.hsarfold-nav-menu.hsarfold-nav-menu .sub-menu a:hover,
.hsarfold-nav-menu.hsarfold-nav-menu .sub-menu a:focus {
	font-size: var( --hsarfold-submenu-font-size, 14px ) !important;
}

.hsarfold-no-menu {
	font-family: var( --hsarfold-menu-font, inherit ) !important;
	color: var( --hsarfold-menu-color, #222 ) !important;
	opacity: 0.7 !important;
	text-align: var( --hsarfold-menu-align, left ) !important;
}

/* ---------- Trigger button (shared by shortcode + auto placement) ---------- */
.hsarfold-trigger.hsarfold-trigger {
	display: inline-flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: var( --hsarfold-icon-gap, 5px ) !important;
	width: var( --hsarfold-icon-size, 28px ) !important;
	height: var( --hsarfold-icon-size, 28px ) !important;
	background-color: var( --hsarfold-trigger-bg, transparent ) !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 6px !important;
	margin: 0 !important;
	cursor: pointer !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease;
}

.hsarfold-trigger.hsarfold-trigger:hover,
.hsarfold-trigger.hsarfold-trigger:focus {
	background-color: var( --hsarfold-trigger-bg-hover, transparent ) !important;
}

.hsarfold-trigger.hsarfold-trigger:focus-visible {
	box-shadow: 0 0 0 2px var( --hsarfold-icon-color, #222 ) !important;
}

.hsarfold-icon-bar.hsarfold-icon-bar {
	display: block !important;
	width: 100% !important;
	height: 2px !important;
	background-color: var( --hsarfold-icon-color, #222 ) !important;
	border-radius: 2px !important;
	margin: 0 !important;
	padding: 0 !important;
	transition-property: background-color, transform, opacity;
	transition-duration: 0.2s, var( --hsarfold-anim-speed, 320ms ), 0.2s;
}

.hsarfold-trigger:hover .hsarfold-icon-bar.hsarfold-icon-bar,
.hsarfold-trigger:focus .hsarfold-icon-bar.hsarfold-icon-bar,
.hsarfold-close:hover .hsarfold-icon-bar.hsarfold-icon-bar,
.hsarfold-close:focus .hsarfold-icon-bar.hsarfold-icon-bar {
	background-color: var( --hsarfold-icon-hover-color, #000 ) !important;
}

/* Icon style: dots (rendered as small squares that morph on open) */
.hsarfold-icon-dots.hsarfold-icon-dots .hsarfold-icon-bar {
	height: 4px !important;
	width: 4px !important;
	border-radius: 50% !important;
	align-self: center !important;
}

/* Icon style: plus/lines/dots all morph into an X the same way when active.
   The close button always carries hsarfold-is-active so it permanently shows
   as the "X" state, matching the trigger's open appearance. */
.hsarfold-trigger.hsarfold-is-active .hsarfold-icon-bar:nth-child(1),
.hsarfold-close.hsarfold-is-active .hsarfold-icon-bar:nth-child(1) {
	transform: translateY( calc( var(--hsarfold-icon-gap, 5px) + 2px ) ) rotate(45deg) !important;
}
.hsarfold-trigger.hsarfold-is-active .hsarfold-icon-bar:nth-child(2),
.hsarfold-close.hsarfold-is-active .hsarfold-icon-bar:nth-child(2) {
	opacity: 0 !important;
}
.hsarfold-trigger.hsarfold-is-active .hsarfold-icon-bar:nth-child(3),
.hsarfold-close.hsarfold-is-active .hsarfold-icon-bar:nth-child(3) {
	transform: translateY( calc( -1 * ( var(--hsarfold-icon-gap, 5px) + 2px ) ) ) rotate(-45deg) !important;
}

/* ---------- Auto-placed floating trigger ---------- */
.hsarfold-trigger-auto.hsarfold-trigger-auto {
	position: fixed !important;
	top: var( --hsarfold-auto-padding-top, 20px ) !important;
	bottom: auto !important;
	z-index: calc( var( --hsarfold-z, 999999 ) - 2 ) !important;
	margin: 0 !important;
}

.hsarfold-trigger-auto.hsarfold-trigger-auto.hsarfold-auto-left {
	left: var( --hsarfold-auto-padding-side, 20px ) !important;
	right: auto !important;
}

.hsarfold-trigger-auto.hsarfold-trigger-auto.hsarfold-auto-right {
	right: var( --hsarfold-auto-padding-side, 20px ) !important;
	left: auto !important;
}

body.rtl .hsarfold-trigger-auto.hsarfold-trigger-auto.hsarfold-auto-left {
	left: auto !important;
	right: var( --hsarfold-auto-padding-side, 20px ) !important;
}

body.rtl .hsarfold-trigger-auto.hsarfold-trigger-auto.hsarfold-auto-right {
	right: auto !important;
	left: var( --hsarfold-auto-padding-side, 20px ) !important;
}

/* Instantly hides any trigger button while the panel is open — display:none
   cannot be transitioned, so this has zero delay by nature. */
.hsarfold-trigger.hsarfold-trigger.hsarfold-trigger-hidden {
	display: none !important;
}

/* ---------- Overlay / media-overlay visibility toggles (settings-driven) ---------- */
/* (dynamic per-setting overrides for these are appended inline by PHP) */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.hsarfold-panel,
	.hsarfold-overlay,
	.hsarfold-icon-bar {
		transition: none !important;
	}
}