/*
 * BL Elementor Toggle Menu
 * Version: 1.2.9
 * Author: blulink.pl
 */

/* =========================================================
   1. PRZYCISK TOGGLE / HAMBURGER
   ========================================================= */

.bl-menu-toggle {
	--bl-toggle-size: 34px;
	--bl-toggle-line-width: 30px;
	--bl-toggle-line-height: 2px;
	--bl-toggle-line-gap: 8px;
	--bl-toggle-color: currentColor;
	--bl-toggle-bg: transparent;

	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--bl-toggle-size);
	height: var(--bl-toggle-size);
	padding: 0 !important;
	margin: 0;
	border: 0 !important;
	border-radius: 999px;
	background: var(--bl-toggle-bg) !important;
	color: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	line-height: 1;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
}

.bl-menu-toggle:focus {
	outline: none;
}

.bl-menu-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.bl-menu-toggle__icon {
	position: relative;
	display: block;
	width: var(--bl-toggle-line-width);
	height: calc((var(--bl-toggle-line-gap) * 2) + var(--bl-toggle-line-height));
}

.bl-menu-toggle__line {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 100%;
	height: var(--bl-toggle-line-height);
	border-radius: 999px;
	background: var(--bl-toggle-color);
	transform-origin: center;
	transition:
		transform 420ms cubic-bezier(.2,.8,.2,1),
		opacity 250ms ease,
		width 420ms cubic-bezier(.2,.8,.2,1);
	will-change: transform, opacity;
}

/* Stan domyślny / zamknięty: klasyczny hamburger z trzema kreskami. */
.bl-menu-toggle__line--top {
	opacity: 1;
	transform:
		translate(-50%, calc(-50% - var(--bl-toggle-line-gap)))
		scaleX(1);
}

.bl-menu-toggle__line--middle {
	opacity: 1;
	transform: translate(-50%, -50%) scaleX(.84);
}

.bl-menu-toggle__line--bottom {
	opacity: 1;
	transform:
		translate(-50%, calc(-50% + var(--bl-toggle-line-gap)))
		scaleX(1);
}

/* Stan otwarty: trzy kreski płynnie składają się do jednej. */
.bl-menu-toggle.is-active .bl-menu-toggle__line--top,
.bl-menu-toggle.is-active .bl-menu-toggle__line--bottom {
	opacity: 0;
	transform: translate(-50%, -50%) scaleX(.08);
}

.bl-menu-toggle.is-active .bl-menu-toggle__line--middle {
	opacity: 1;
	transform: translate(-50%, -50%) scaleX(1);
}

@media (hover: hover) {
	.bl-menu-toggle:hover .bl-menu-toggle__line--middle {
		width: 100%;
	}

	.bl-menu-toggle.is-active:hover .bl-menu-toggle__line--middle {
		width: 88%;
	}
}


/* =========================================================
   2. KONTENER ELEMENTORA #bl_menu_wrapper
   Na publicznym froncie ZAWSZE startuje zamknięty.
   W samym edytorze Elementor arkusz nie jest ładowany.
   ========================================================= */

#bl_menu_wrapper {
	/*
	 * STAN ZAMKNIĘTY:
	 * wrapper nie może wpływać na szerokość rodzica, dlatego ma width: 0.
	 * Dzięki temu nadrzędny panel z width: fit-content może się skurczyć
	 * do logo / przycisku / stopki.
	 */
	width: 0 !important;
	max-width: 0 !important;
	min-width: 0 !important;
	box-sizing: border-box;

	height: 0;
	min-height: 0 !important;
	overflow: hidden;
	opacity: 1;
	visibility: hidden;
	pointer-events: none;
	transform: none;
}

/*
 * STAN OTWARTY / ZAMYKANIE:
 * menu przyjmuje naturalną szerokość swojej zawartości.
 * To pozwala rodzicowi z width: fit-content rozszerzyć się do menu.
 */
#bl_menu_wrapper.is-open,
#bl_menu_wrapper.is-closing {
	width: max-content !important;
	max-width: calc(100vw - 20px) !important;
	min-width: 0 !important;
}

/* Przejścia uruchamiamy dopiero po inicjalizacji JS. */
#bl_menu_wrapper.bl-menu-ready {
	transition:
		height 560ms cubic-bezier(.22, 1, .36, 1),
		visibility 0s linear 560ms;
	will-change: height;
}

#bl_menu_wrapper.bl-menu-ready.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition:
		height 560ms cubic-bezier(.22, 1, .36, 1),
		visibility 0s linear 0s;
}




/* =========================================================
   DYNAMICZNA SZEROKOŚĆ MENU
   ========================================================= */

/*
 * Wewnętrzne elementy mają szerokość wynikającą z treści,
 * a nie 100% rodzica. Dzięki temu najdłuższa pozycja menu
 * wyznacza naturalną szerokość #bl_menu_wrapper.
 */
#bl_menu_wrapper > .elementor-widget,
#bl_menu_wrapper .elementor-widget-icon-list,
#bl_menu_wrapper .elementor-widget-container,
#bl_menu_wrapper .elementor-icon-list-items {
	width: max-content !important;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
}

#bl_menu_wrapper .elementor-icon-list-item,
#bl_menu_wrapper .elementor-icon-list-item > a {
	width: max-content;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

#bl_menu_wrapper .elementor-icon-list-text {
	min-width: 0;
}

/*
 * Elementor Spacer umieszczony bezpośrednio po menu może mieć width:100%
 * i przez to blokować shrink-to-fit całego panelu. Zerujemy wyłącznie
 * jego wymiar poziomy. flex-grow nadal działa w osi pionowej i nadal
 * może wypychać stopkę na dół.
 */
.main_menu_wrapper #bl_menu_wrapper + .elementor-widget-spacer {
	width: 0 !important;
	max-width: 0 !important;
	min-width: 0 !important;
	align-self: flex-start !important;
}

/*
 * Klasa techniczna do pomiaru naturalnej szerokości przy zamkniętym menu.
 * position:absolute sprawia, że sam pomiar nie rozszerza rodzica.
 */
#bl_menu_wrapper.bl-menu-measuring {
	position: absolute !important;
	width: max-content !important;
	max-width: calc(100vw - 20px) !important;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: none !important;
}

/* =========================================================
   3. ANIMACJA ELEMENTÓW LISTY ELEMENTORA
   ========================================================= */

#bl_menu_wrapper.bl-menu-ready .elementor-icon-list-item {
	/*
	 * Stan zamknięty: element jest poza lewą krawędzią
	 * i jest niewidoczny. Podczas otwierania jednocześnie
	 * przesuwa się do pozycji docelowej i wykonuje fade-in.
	 */
	opacity: 0;
	transform: translate3d(
		calc(-1 * var(--bl-menu-slide-distance, 100vw)),
		0,
		0
	);
	transition:
		transform 520ms cubic-bezier(.16, 1, .3, 1),
		opacity 420ms ease;
	transition-delay: 0ms;
	will-change: transform, opacity;
}

/*
 * OTWIERANIE:
 * elementy wjeżdżają z lewej do pozycji docelowej.
 * Kolejny element startuje co 250 ms, dzięki czemu animacje
 * delikatnie nachodzą na siebie i zachowują płynny rytm.
 */
#bl_menu_wrapper.bl-menu-ready.is-open .elementor-icon-list-item {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition-delay: calc(80ms + (var(--bl-item-index, 0) * 250ms));
}

/*
 * ZAMYKANIE:
 * każdy element wyjeżdża w prawo o pełną szerokość wrappera
 * + zapas, więc kończy całkowicie poza kontenerem.
 * Kolejność pozostaje od góry do dołu, ze staggerem 250 ms.
 */
#bl_menu_wrapper.bl-menu-ready.is-closing .elementor-icon-list-item {
	opacity: 0;
	transform: translate3d(
		var(--bl-menu-slide-distance, 100vw),
		0,
		0
	);

	/*
	 * Przy zamykaniu używamy osobnej krzywej ease-in:
	 * element rusza łagodnie i dopiero później przyspiesza.
	 * Otwieranie zachowuje wcześniejszą, bardziej miękką krzywą.
	 */
	transition:
		transform 520ms cubic-bezier(.42, 0, 1, 1),
		opacity 420ms ease-in;

	transition-delay: calc(var(--bl-item-index, 0) * 250ms);
}

/*
 * Podczas sekwencji wyjazdu wrapper pozostaje widoczny i zachowuje wysokość.
 * Po ostatnim elemencie JS uruchamia dopiero zwijanie wysokości.
 */
#bl_menu_wrapper.bl-menu-ready.is-closing {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	transform: none;
	transition:
		height 560ms cubic-bezier(.22, 1, .36, 1),
		visibility 0s linear 0s;
}




/*
 * RESET PO ZAMKNIĘCIU:
 * pozycje są przenoszone z prawej strony z powrotem na lewą
 * dopiero wtedy, gdy wrapper ma już wysokość 0 i jest ukryty.
 * Brak transition eliminuje przelot elementów przez kontener.
 */
#bl_menu_wrapper.bl-menu-ready.bl-menu-reset {
	visibility: hidden !important;
	pointer-events: none !important;
	transition: none !important;
}

#bl_menu_wrapper.bl-menu-ready.bl-menu-reset .elementor-icon-list-item {
	transition: none !important;
	transition-delay: 0ms !important;
}



/* =========================================================
   GŁÓWNY PANEL MENU - KLASA UŻYTKOWNIKA
   ========================================================= */

/*
 * Głównemu kontenerowi Elementora nadaj klasę:
 *
 * main_menu_wrapper
 *
 * Dzięki temu wtyczka nie zależy od automatycznie generowanych
 * klas typu .elementor-element-0cd9371.
 *
 * Na mobile panel ma szerokość zależną od aktualnej zawartości:
 * - zamknięte menu -> panel kurczy się do logo / toggle / stopki,
 * - otwarte menu -> panel rozszerza się do naturalnej szerokości menu.
 */
@media (max-width: 767px) {

	.main_menu_wrapper {
		--width: fit-content !important;
		width: fit-content !important;
		max-width: 100vw !important;
		min-width: 0 !important;
	}

	/*
	 * Bezpośredni wewnętrzny kontener Elementora.
	 * Selector opiera się wyłącznie na strukturze, nie na ID Elementora.
	 */
	.main_menu_wrapper > .e-con {
		--width: fit-content !important;
		width: fit-content !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
	}

	/*
	 * Elementor w kontenerze boxed dodaje .e-con-inner.
	 * On również musi mieć shrink-to-fit, inaczej może zachować
	 * szerokość wynikającą z ustawień Elementora.
	 */
	.main_menu_wrapper > .e-con > .e-con-inner {
		width: fit-content !important;
		max-width: calc(100vw - 20px) !important;
		min-width: 0 !important;
	}

}

/*
 * Spacer znajdujący się za #bl_menu_wrapper ma służyć do wypychania
 * stopki w dół, ale nie powinien wpływać na szerokość bocznego panelu.
 * Reguła jest ograniczona tylko do .main_menu_wrapper.
 */
.main_menu_wrapper #bl_menu_wrapper + .elementor-widget-spacer {
	width: 0 !important;
	max-width: 0 !important;
	min-width: 0 !important;
	align-self: flex-start !important;
}



/* =========================================================
   ANIMACJA SZEROKOŚCI GŁÓWNEGO PANELU
   ========================================================= */

@media (max-width: 767px) {

	/*
	 * Podczas animacji JS zamienia fit-content na konkretną wartość px.
	 * Dzięki temu przeglądarka może płynnie interpolować szerokość.
	 */
	.main_menu_wrapper.bl-panel-width-animating {
		width: var(--bl-panel-width) !important;
		--width: var(--bl-panel-width) !important;
		max-width: 100vw !important;
		transition: width 560ms cubic-bezier(.22, 1, .36, 1) !important;
		will-change: width;
	}

	/*
	 * W czasie animacji elementy wewnętrzne korzystają z szerokości rodzica.
	 * Zapobiega to natychmiastowemu "skokowi" wewnętrznego kontenera,
	 * zanim zewnętrzny panel zdąży się rozszerzyć lub zwęzić.
	 */
	.main_menu_wrapper.bl-panel-width-animating > .e-con,
	.main_menu_wrapper.bl-panel-width-animating > .e-con > .e-con-inner {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	/*
	 * Tryb techniczny do pomiaru szerokości naturalnej.
	 * Jest wykonywany synchronicznie i niewidocznie.
	 */
	.main_menu_wrapper.bl-panel-width-measuring {
		--width: fit-content !important;
		width: fit-content !important;
		max-width: 100vw !important;
		transition: none !important;
		visibility: hidden !important;
	}

	.main_menu_wrapper.bl-panel-width-measuring > .e-con {
		--width: fit-content !important;
		width: fit-content !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
	}

	.main_menu_wrapper.bl-panel-width-measuring > .e-con > .e-con-inner {
		width: fit-content !important;
		max-width: calc(100vw - 20px) !important;
		min-width: 0 !important;
	}

	/*
	 * Pomiar stanu otwartego: menu pozostaje w normalnym flow,
	 * aby jego naturalna szerokość rozszerzyła panel.
	 */
	.main_menu_wrapper.bl-panel-width-measuring
	#bl_menu_wrapper.bl-panel-measure-open {
		position: static !important;
		width: max-content !important;
		max-width: calc(100vw - 20px) !important;
		min-width: 0 !important;
		height: auto !important;
		overflow: visible !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: none !important;
	}

	/*
	 * Pomiar stanu zamkniętego: menu nie bierze udziału
	 * w wyliczaniu szerokości panelu.
	 */
	.main_menu_wrapper.bl-panel-width-measuring
	#bl_menu_wrapper.bl-panel-measure-closed {
		width: 0 !important;
		max-width: 0 !important;
		min-width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
		visibility: hidden !important;
		transition: none !important;
	}
}

/* =========================================================
   4. DODATKOWA ASEKURACJA DLA EDYTORA ELEMENTORA
   Gdyby motyw/cache mimo wszystko podał arkusz w edytorze,
   kontener ma pozostać widoczny.
   ========================================================= */

body.elementor-editor-active #bl_menu_wrapper,
.elementor-editor-active #bl_menu_wrapper {
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: initial !important;
	overflow: visible !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
	transition: none !important;
}

body.elementor-editor-active #bl_menu_wrapper .elementor-icon-list-item,
.elementor-editor-active #bl_menu_wrapper .elementor-icon-list-item {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}


/* =========================================================
   5. REDUKCJA RUCHU - dostępność
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.bl-menu-toggle__line,
	.main_menu_wrapper.bl-panel-width-animating,
	#bl_menu_wrapper.bl-menu-ready,
	#bl_menu_wrapper.bl-menu-ready .elementor-icon-list-item {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}