/* =====================================================================
 * Menu mobilne — pelnoekranowy drawer.
 *
 * Zakres: <=991 px, czyli dokladnie ten sam prog, na ktorym main.css
 * pokazuje hamburgera i chowa poziome menu. Powyzej tego progu nic tu
 * nie dziala — pasek desktopowy zostaje bez zmian.
 *
 * Arkusz laduje sie na kazdej podstronie serwisu (Main_controller),
 * bo drawer jest wspolny dla calego www, nie tylko dla strony glownej.
 *
 * Markup zostaje legacy: dwie listy .nav-menu (akcje gosca / uzytkownik
 * oraz .nav-menu-center z pozycjami menu) plus .navbar-brand i hamburger
 * siedza w .navbar-top > .main-container. Kolejnosc z makiety (logo,
 * pozycje, przyciski, social) robimy flexem i wlasnoscia order, zeby nie
 * ruszac PHP-a ani JS-a. Handler hamburgera z main.js dalej robi tylko
 * slideToggle na .nav-menu i przelacza klase .active na .navbar.
 * ===================================================================== */

/* Dluzsza etykieta przycisku rejestracji pojawia sie wylacznie w drawerze
   (patrz regula ponizej) — na desktopie zostaje krotkie "Zaloz konto". */
.nav-word-free { display: none; }

@media all and (max-width: 991px) {

	/* --- wspolny margines boczny ---
	   Jedna wartosc dla drawera, paska i przypietej wyszukiwarki, zeby logo,
	   pozycje menu i lupka staly w jednej linii pionowej. hero_mobile.css
	   bierze ja pod --hero-pad, wiec hero na stronie glownej trzyma ten sam
	   margines. Plynna, bo stale 30 px zjadalo za duzo szerokosci na 320 px. */
	.navbar { --nav-pad: clamp(20px, 7vw, 32px); }


	/* --- opuszczenie zawartosci paska o 3 px ---
	   Logo i hamburger siedzialy wyzej niz srodek belki (srodek ikony 28.2 px
	   przy belce 65 px). Przesuwamy oba przez position/margin, a nie paddingiem
	   belki — dzieki temu wysokosc paska sie nie zmienia i --hero-bar w
	   hero_mobile.css nadal opisuje prawde, wiec przypieta wyszukiwarka zostaje
	   na swoim miejscu.
	   Regula jest wspolna dla paska i drawera, wiec oba elementy schodza o tyle
	   samo i nie moga sie rozjechac. */
	/* margin-top: 5px z main.css schodzi — dotyczy obu logotypow, wiec skraca
	   tez wiersz, a przez to cala belke. Wysokosc belki opisuje --hero-bar
	   w hero_mobile.css i jest tam skorygowana. */
	.navbar-brand img { position: relative; top: 3px; margin-top: 0; }
	.hamburger-menu { margin-top: 3px; }


	/* ============================ DRAWER ============================ */

	/* html body — zeby przebic body.home .navbar z hero_mobile.css, ktory
	   laduje sie pozniej i ustawia .navbar na static + 100dvh. */
	html body .navbar.active {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1100;
		min-height: 0;
		height: auto;
		padding: 0;
		overflow-y: auto;
		/* Przewijanie drawera nie przenosi sie na strone pod spodem. */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		box-shadow: none;
		background-color: #4BC599;
		background-image: url("../images/png/ekor_bg.png");
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: auto 300px;
		/* Bez fade na wejsciu. Kusilo, zeby zmiekczyc pojawienie sie nakladki
		   przejsciem opacity, ale hero znika w tej samej klatce, w ktorej
		   dochodzi klasa (.main-container i .hero-m ida na display:none,
		   a .navbar z przeplywu na fixed). Przez czas trwania fade'u przez
		   pol-przezroczysta zielen przebijala wiec biala tresc strony spod
		   hero — stad migniecie. Nakladka musi byc kryjąca od pierwszej klatki. */
	}

	/* Hero i pasek wyszukiwania nie naleza do menu — chowamy caly kontener,
	   wiec razem z nim znika tez przypieta .hero-desktop-search (siedzi
	   w srodku, mimo ze jest position:fixed). */
	html body .navbar.active > .main-container,
	html body .navbar.active .hero-m { display: none; }

	/* .navbar-top na stronie glownej jest przypieta (hero_mobile.css) —
	   w drawerze wraca do przeplywu i rozciaga sie na cala wysokosc. */
	/* Gornego paddingu belki CELOWO nie ustawiamy — to on wyznacza gore
	   .main-container, a wzgledem niej main.css pozycjonuje hamburgera. Gdy
	   drawer go zerowal, kontener zaczynal sie wyzej i krzyzyk siadal ponizej
	   hamburgera. Wpisanie tu konkretnej liczby tez nie dziala: main.css daje
	   belce 15 px, ale ponizej 767 px schodzi do 13 px — kazda stala rozjezdzala
	   wiec jeden z progow. Zostawiamy wartosc z main.css i zerujemy tylko dol,
	   bo nakladka konczy sie na krawedzi ekranu. box-sizing, zeby gorny padding
	   miescil sie w min-height:100%, a nie dokladal sie do niego. */
	.navbar.active .navbar-top {
		position: static;
		display: flex;
		box-sizing: border-box;
		min-height: 100%;
		padding-bottom: 0;
		background: transparent;
	}

	.navbar.active .navbar-top > .main-container {
		width: 100%;
		max-width: none;
		margin: 0;
		/* Bez wciecia od gory — daje je juz padding belki, dokladnie tak samo
		   jak w stanie zwinietym. Dzieki temu logo i krzyzyk nie potrzebuja
		   zadnej korekty i stoja tam, gdzie stoja w pasku. */
		padding: 0 var(--nav-pad);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	/* Zaden element paska nie moze dojezdzac wlasnym przejsciem — ani przy
	   otwieraniu, ani przy zamykaniu. Regula jest CELOWO niezalezna od .active:
	   klasa znika w tej samej klatce, w ktorej wracaja wartosci z paska, wiec
	   gdyby ograniczyc ja do stanu otwartego, zamkniecie animowaloby powrot.
	   A wlasnie to bylo widac na logo:
	     - filtr szedl z "brightness(0) invert(1)" do "none" przez 0.4 s, a w
	       polowie tej drogi invert(0.5) sprowadza kazdy piksel do jednakowej
	       szarosci — logo doslownie robilo sie szare;
	     - margin-top wracal z 0 na 5 px, wiec przy okazji zjezdzalo w dol.
	   Przy otwieraniu ta sama regula pilnuje .btn (main.css daje mu "all 0.3s",
	   a drawer zmienia naraz wysokosc, szerokosc, padding i zaokraglenie).
	   Blanket z !important, bo regul zrodlowych jest kilka i wszystkie siedza
	   glebiej w main.css.
	   Uwaga: kompaktowa wyszukiwarka NIE jest w .navbar-top, tylko w
	   .navbar > .main-container — jej wjazd po przewinieciu zostaje plynny. */
	.navbar-top,
	.navbar-top * {
		transition: none !important;
	}

	/* --- logo ---
	   W drawerze zostaje logo_white.svg — main.js pomija tu podmiane na zielona
	   wersje (patrz komentarz przy handlerze hamburgera). Filtr jest wiec
	   zabezpieczeniem, a nie korekta: brightness(0) czerni cala grafike,
	   invert(1) robi z niej biel, wiec logo bedzie biale niezaleznie od tego,
	   ktory wariant pliku akurat siedzi w src. */
	/* Pionu nie ruszamy — logo ma stac tam, gdzie w pasku zwinietym, a wyznacza
	   to gorny padding belki. Zerujemy tylko wciecie z lewej: w pasku daje je
	   .navbar-brand, a w drawerze kontener, wiec bez tego sumowalyby sie
	   i logo odjezdzalo o dwa wciecia od krawedzi. */
	.navbar.active .navbar-brand {
		order: 1;
		flex: 0 0 auto;
		margin: 0;
		padding-left: 0;
	}

	.navbar.active .navbar-brand img {
		filter: brightness(0) invert(1);
	}

	/* Drugi logotyp (wersja dla przewinietego paska) ma opacity:0, ale przy
	   <=991 px jest position:static, wiec zajmuje miejsce w wierszu — i jako
	   wyzszy (26 px wobec 19 px) podnosi linie bazowa, spychajac widoczne logo
	   nizej. Chowanie go rozjezdzalo wiec logo o 3.5 px wzgledem paska.
	   Zostaje w ukladzie, tylko odbieramy mu width:auto, ktore main.css nadaje
	   pod .active: przy zielonym logo, ktore kiedys tu wjezdzalo, niewidzialny
	   obrazek urastal do 174 px i wiersz lamal sie na dwie linie ponizej ~340 px.
	   Ze stalymi 30 px wiersz wyglada dokladnie tak jak w pasku zwinietym. */
	.navbar.active .navbar-brand img.sticky { width: 30px; }

	/* --- krzyzyk ---
	   Pudelka NIE ruszamy: X ma stac dokladnie tam, gdzie hamburger, wiec
	   zostawiamy jego wymiar (4.4rem), padding (1rem 0.5rem) i pozycje z main.css.
	   Wlasne 32x32 i top:24px stawialy ikone 12 px nizej i 3 px bardziej w prawo.

	   Kreski liczymy w tych samych jednostkach co padding hamburgera, wiec
	   nie rozjada sie, gdy zmieni sie font-size html (54.3% ponizej 1360 px):
	     - left/right: 0.5rem  = szerokosc kresek rowna tej w hamburgerze;
	     - top: 1rem + 9.5px   = padding gorny + polowa wysokosci trzech kresek
	                             (3+5+3+5+3 = 19 px), czyli srodek ikony hamburgera. */
	.navbar.active .navbar-top .hamburger-menu span {
		position: absolute;
		top: calc(1rem + 9.5px);
		left: 0.5rem;
		right: 0.5rem;
		width: auto;
		height: 2px;
		margin: -1px 0 0;
		background: #fff;
	}

	.navbar.active .navbar-top .hamburger-menu span:first-child { transform: rotate(45deg); }
	.navbar.active .navbar-top .hamburger-menu span:nth-child(2) { opacity: 0; }
	.navbar.active .navbar-top .hamburger-menu span:last-child { transform: rotate(-45deg); }


	/* --- pozycje menu ---
	   margin:auto w pionie centruje liste w wolnej przestrzeni miedzy logo
	   a przyciskami. Dziala tylko dlatego, ze main.js pokazuje liste od razu
	   (toggle), a nie slideToggle — slide nadpisywal marginesy wartosciami
	   inline i zwalnial je dopiero na ostatniej klatce, co dawalo przeskok. */
	.navbar.active .navbar-top .nav-menu.nav-menu-center {
		order: 2;
		width: 100%;
		margin: auto 0;
		padding: 0;
		background: transparent;
	}

	.navbar.active .navbar-top .nav-menu.nav-menu-center li.menu-item {
		float: none;
		display: block;
		margin: 0;
		line-height: normal;
		background: transparent;
		border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	}

	.navbar.active .navbar-top .nav-menu.nav-menu-center li.menu-item a,
	.navbar.active .navbar-top .nav-menu.nav-menu-center li.menu-item.menu-item-highlight a {
		display: block;
		position: relative;
		padding: 19px 34px 19px 0;
		margin: 0;
		background: transparent;
		border: none;
		border-radius: 0;
		color: #fff;
		/* Roboto jest sciagane do wagi 500 — wyzej przegladarka pogrubia
		   sztucznie i litery sie rozmywaja. */
		font-size: 17px;
		font-weight: 500;
		line-height: 1.3;
		text-decoration: none;
	}

	/* Biezaca zakladka bez podkreslenia (main.css je dodaje) — w drawerze
	   wyroznia ja pelna biel na tle pozostalych. */
	.navbar.active .navbar-top .nav-menu.nav-menu-center li.current-page a {
		text-decoration: none;
	}

	/* Strzalka ">" rysowana rogiem ramki — bez dokladania grafiki. */
	.navbar.active .navbar-top .nav-menu.nav-menu-center li.menu-item a::after {
		content: "";
		position: absolute;
		right: 6px;
		top: 50%;
		width: 9px;
		height: 9px;
		margin-top: -5px;
		border-right: 2px solid rgba(255, 255, 255, 0.8);
		border-bottom: 2px solid rgba(255, 255, 255, 0.8);
		transform: rotate(-45deg);
	}


	/* --- dol: przyciski i social --- */

	.navbar.active .navbar-top .nav-menu:not(.nav-menu-center) {
		order: 3;
		width: 100%;
		margin: 0;
		padding: 0;
		background: transparent;
	}

	/* border:none — main.css obramowuje ten <li> na #ebebeb (drawer byl bialy,
	   wiec linia oddzielala grupe logowania). Na zielonym tle zostawala jasna
	   kreska nad przyciskami. line-height:normal z tego samego powodu: 55 px
	   z paska rozpychalo wiersz z ikonami social. */
	.navbar.active .nav-menu li.multi-menu-item {
		float: none;
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 18px 0 0;
		border: none;
		line-height: normal;
	}

	/* Kolejnosc z makiety: najpierw rejestracja, pod nia logowanie.
	   W markupie jest odwrotnie, wiec przestawiamy przez order. */
	.navbar.active .nav-menu li.guest-actions > a {
		order: 2;
		display: block;
		width: 100%;
		height: 48px;
		margin: 0 0 12px;
		padding: 0;
		top: 0;                 /* main.css podnosi te linki o 1 px */
		border-radius: 8px;
		font-size: 16px;
		font-weight: 500;
		line-height: 46px;
		text-align: center;
		text-decoration: none;
	}

	.navbar.active .nav-menu li.guest-actions > a.btn-frame-white {
		order: 1;
		background-color: #fff;
		border: 1px solid #fff;
		color: #2AC59B;
	}

	.navbar.active .nav-menu li.guest-actions > a:not(.btn) {
		border: 1px solid rgba(255, 255, 255, 0.85);
		color: #fff;
		background: transparent;
	}

	.navbar.active .nav-word-free { display: inline; }

	.navbar.active .nav-menu li.multi-menu-item .divider-bar { display: none; }

	.navbar.active .nav-menu li.multi-menu-item .socials-wrapper {
		order: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 30px;
		padding: 18px 0 26px;
	}

	/* Staly kwadrat na ikone. Bez niego wysokosc wiersza zalezala od tego, co
	   sie juz doladowalo: <i class="fa"> jest puste dopoki nie przyjdzie font
	   ikon, a youtube.svg ma wlasne 22.75x16 px. Wiersz rosl i malal po
	   otwarciu menu, a razem z nim przesuwala sie wysrodkowana lista. */
	.navbar.active .nav-menu li.multi-menu-item a.social {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 21px;
		height: 21px;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		color: #fff;
		font-size: 21px;
		line-height: 1;
	}

	/* youtube.svg jest podmieniany na inline <svg> przez main.js — wymiar musi
	   byc ten sam przed i po podmianie, inaczej wiersz drgnie w momencie, gdy
	   zapytanie wroci. main.css maluje go wtedy na zielono (drawer byl bialy),
	   tu musi byc bialy. */
	.navbar.active .nav-menu li.multi-menu-item a.social svg,
	.navbar.active .nav-menu li.multi-menu-item a.social img {
		width: 21px;
		height: 21px;
		vertical-align: middle;
	}

	.navbar.active .nav-menu li.multi-menu-item a.social svg path { fill: #fff; }


	/* --- stan zalogowany ---
	   Zamiast pary przyciskow jest wiersz z avatarem i "Wyloguj". Ikony
	   dzwonka i koperty (.mobile-my-account) main.css trzyma absolutnie
	   w pasku — przesuwamy je tylko tak, zeby nie wchodzily na krzyzyk. */
	.navbar.active .nav-menu li.multi-menu-item .user-navbar-mobile {
		display: flex;
		flex-direction: column;
		gap: 14px;
		width: 100%;
		padding-bottom: 26px;
	}

	.navbar.active .nav-menu li.multi-menu-item .user-navbar-mobile > a:first-child {
		display: flex;
		align-items: center;
		margin: 0;
		color: #fff;
		font-size: 17px;
		font-weight: 500;
		text-decoration: none;
	}

	.navbar.active .nav-menu li.multi-menu-item .user-navbar-mobile .avatar-wrapper img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.navbar.active .nav-menu li.multi-menu-item .user-navbar-mobile > a.btn {
		display: block;
		width: 100%;
		height: 48px;
		margin: 0;
		padding: 0;
		border-radius: 8px;
		border: 1px solid rgba(255, 255, 255, 0.85);
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		line-height: 46px;
		text-align: center;
	}

	.navbar.active .mobile-my-account { right: calc(var(--nav-pad) + 46px); top: 27px; }

	.navbar.active .mobile-my-account svg path { fill: #fff; }
}


/* ============ PASEK ZWINIETY — wyrownanie do drawera ============
 * Ponizej 551 px .navbar-top > .main-container ma juz szerokosc 100%,
 * wiec wciecia biora sie z paddingu logo i pozycji hamburgera. Ustawiamy
 * je na --nav-pad, zeby logo w pasku stalo dokladnie tam, gdzie logo
 * w otwartym drawerze — inaczej przy otwieraniu menu przeskakiwalo.
 * Wyzej (551-991 px) kontener jest wysrodkowany na 660 px i wciecie
 * wynika z jego marginesu — tam nic nie zmieniamy. */
@media (max-width: 550px) {
	.navbar-brand { padding-left: var(--nav-pad); }
	.hamburger-menu { right: var(--nav-pad); }
}