/* 

zmienne, ktore mozna uzyc w CSS: 

--ee-full-header-height - poczatkowo ma wartosc fallback, a z klasa ee konkretna wartosc
--ee--scroll-px - aktualna pozycja scroll (z klasa ee)
--ee--html-bigger-fontsize - czy aktualnie uzytkownik ma ustawiona wyzszy rozmiar fonta niz 16px (z klasa ee)
--ee-sticky-header-height - aktualna wysokosc sticky headera, ustawiana razem z klasa ee, ale mozna uzyc wczesniej - wtedy bedzie tu 0, ale header i tak nie bedzie sticky
--ee--header-scrolled - czy scrollowano (z klasa ee)
--ee--header-scrolled-scrolled - czy scrollowano dalej (z klasa ee)

--global--scrollbar-width(-px) - domyslnie jest tu fallback, ale jak jest js to konkretna wartosc
--global--window-outer-width(-px) - szerokosc okna ze scrollbarem - moze byc niepoprawna dla firefoxa bez js
--global--window-width(-px) - dostepna szerokosc okna bez scrollbara - domyslnie z fallbackiem scrollbara, moze byc mocno niepoprawna dla firefoxa bez js (fallback)
--global--content-width(-px) - aktualna szerokosc zawartosci - moze byc niepoprawna dla firefoxa bez js
--global--background-width(-px) - aktiualna szerokosc tla gdyby dostepna byla szerokosc inner
--global--content-max-width(-px) - skonfigurowana wartosc maksymalnej szerokosci zawartosci
--global--content-margin(-px) - skonfigurowana wartosc marginesow zawartosci do tla
--global--background-max-width(-px) - skonfigurowana wartosc maksymalnej szerokosci tla
--global--background-margin(-px) - skonfigurowane marginesy miedzy tlem i oknem przegladarki



zmienne, ktore mozna ustalic w css:

--ee--header-extra-height-fallback / --ee--header-height-fallback - tu ustawimy fallback dla headera
--global--scrollbar-width-px - domyslna szerokosc scrollbara w px, aktualizowana przez js, domyslnie 20/0
--global--content-max-width-px - maksymalna szerokosc zawartosci (bez marginesow, domyslnie 1200/9999)
--global--content-margin-px - marginesy dla zawartosci (domyslnie 30/20)
--global--content-scale-base-width-px - szerokosc zawartosci, przy ktorej skala jej elementow bedzie wynosila 1 - domyslnie 1200/320
--global--content-scale-min-width-px - szerokosc zawartosci, przy ktorej skala jej elementow przestanie sie zmniejszac - domyslnie 0/0
--global--content-scale-max-width-px - szerokosc zawartosci, przy ktorej skala jej elementow przestanie sie zwiekszac - domyslnie 1200/9999 
--global--background-max-width-px - maksymalna szerokosc tla (bez marginesow)
--global--background-margin-px - marginesy miedzy tlem a oknem przegladarki
--spacing-xs / --spacing-s / --spacing-m / --spacing-l /--spacing-xl / --spacing-xxl - odstepy
--global-radius - globalne zaokraglenie
--global-font... / --heading1-font... / --heading2-font... - ogolne fonty
...font-size - rozmiary fontow domyslne



ustawiane klasy:

ee - gdy wykonane zostana wszystkie obliczenia
ee_bigger-fontsize - gdy uzytkownik uzywa wiekszego fonta
ee_header-scrolled - po scrollowaniu wzgledem headera
ee_header-scrolled-scrolled - po scrollowaniu wzgledem headera ale tak, ze mozna go pomniejszac



klasy, ktore mozna dodac do elementow:

ee_header-extra - dla elementow dodatkowych headera wliczanych w --ee-full-header-height , ale nie sticky
ee_header - dla elementow headera, ktore moga byc sticky i wliczane tez sa w --ee-full-header-height
ee_header-scrolled - dla elementow headera sticky, ktore maja rozmiar ustawiany po scrollowaniu
ee_header-sticky-desktop / ee_header-sticky-moobile - klasy nadawane razem z ee_header - wtedy dany element bedzie ustawiany na sticky razem z klasa ee
ee_under-header - dla elementow znajdujacych sie pod headerem - bedzie im nadane ujemne margin top
ee_under-header-padding - ta klasa jest dodawana tam gdzie ma byc padding gorny taki sam jak ujemny margin
ee_under-header-dark - jesli element pod headerem jest na cieemnym tle
ee_under-header-active - ta klasa musi byc dodana aby header byl w wersji na ciemne tlo




 */


/* ############## */
/* NIE ZMIENIAC */

/* ee start */

/* powinnismy wylaczyc animacje dla elementow, ktore chcemy od razu miecc dobrze wyswietlone do czasu usuniecia klasy ee-preload */

	:root {

		/* wysokosc fallback dodatkowych elementow headera, uzywana zanim w js obliczymy poprawne wartosci, mozliwa do skonfigurowania nizej */
		--ee--header-extra-height-fallback: 0px;
		
		/* wysokosc fallback sticky headera, uzywana zanim w js obliczymy poprawne wartosci, mozliwa do skonfigurowania nizej */
		--ee--header-height-fallback: 0px;
		
		/* wysokoscc wszystkich dodatkowych elementow headera (.ee_header-extra), ktore nie sa sticky, obliczana w js, uzyteczna gdy jest klasa ee */
		--ee--header-extra-height-px: 0;
			
		/* wysokosc sticky headera (.ee_header), obliczana w js, uzyteczna gdy jest klasa ee */
		--ee--header-height-px: 0;
	
		/* wysokosc sticky headera widoczna po scrollowaniu (.ee_header-scrolled), obliczana w js, uzyteczna gdy jest klasa ee  */
		--ee--header-scrolled-height-px: 0;
	
		/* pozycja sticky headera w dokumencie (.ee_header), obliczana w js, uzyteczna gdy jest klasa ee, bez niej powinnismy pozostawic header normalnie na miejscu  */
		--ee--header-position-px: 0;
	
		/* aktualna pozycja scrolla, obliczana w js, uzyteczna gdy jest klasa ee  */
		--ee--scroll-px: 0;
	
		/* czy uzytkownik scrollowal wzgledem pozycji zasadniczej czesci (0/1), obliczana w js, uzyteczna gdy jest klasa ee */
		--ee--header-scrolled: 0;
	
		/* czy uzytkownik scrollowal wzgledem pozycji zasadniczej czesci z dodatkowym przesunieciem o zmniejszenie po scrollowaniu (0/1) - wtedy mozna pomniejszac header, obliczana w js, uzyteczna gdy jest klasa ee  */
		--ee--header-scrolled-scrolled: 0;
	
		/* czy rozmiar fonta uzytkownika jest powiekszony (0/1), obliczana w js, uzyteczna gdy jest klasa ee  */
		--ee--html-bigger-fontsize: 0;
		
		/* poczatkowo do obliczenia calkowitej wysokosci headera uzywamy rozmiarow fallback tak wiec mozemy uzyc tej zmiennej takze przy braku js */
		--ee-full-header-height: calc(var(--ee--header-extra-height-fallback) + var(--ee--header-height-fallback));
	
		/* aktualna wysokosc sticky headera, ktora mozemy uzyc aby odpowiednio ustawic inne elementy sticky serwisu - poczatkowo 0 wiec jesli inne elemnenty sa sticky to beda dobrze ustawione nawet zanim wczytamy ee */
		--ee-sticky-header-height: 0px;

	}
	
	/* sprawdzono wszystkie rozmiary wiec mozemy przeliczyc wysokosci i zaktualizowac zmienna */
	html.ee {
		
		/* obliczona poprawna pelna wysokosc headera */
		--ee-full-header-height: calc(1px * ( var(--ee--header-extra-height-px) + var(--ee--header-height-px) ));
		
	}
	
	
	/* sticky dla wersji desktop */
	@media only screen and (min-width:769px){
		
		/* tylko, gdy istnieje element sticky desktop */
		html.ee:has( .ee_header.ee_header-sticky-desktop ) {
			
			/* obliczamy aktualna wysokosc headera sticky, ktora mozna uzyc aby odpowiednio pozycjonowac inne elementy sticky pojawiajace sie na stronie */
			/* w zaleznosci od tego czy scrollowano dalej uzywamy odpowiedniuej wysokosci */
			/* upewniamy sie, ze gdy powiekszono font to kasujemy wysokosc sticky */
			--ee-sticky-header-height: calc(1px * ((var(--ee--header-scrolled-height-px) * var(--ee--header-scrolled-scrolled)) + (var(--ee--header-height-px) * (1 - var(--ee--header-scrolled-scrolled)))) * (1 - var(--ee--html-bigger-fontsize)));
			
		}
		
		/* ustawiamy sticky na tym elemencie, jesli nie ustawiono wiekszego rozmiaru fonta - na 0, poniewz sticky header zawsze jest na samej gorze */
		html.ee:not(.ee_bigger-fontsize)  .ee_header.ee_header-sticky-desktop {
			position:sticky !important;
			top:0 !important; 
		}
		
	}
	
	/* sticky dla wersji mobile */
	@media only screen and (max-width:768px){
		
		/* tylko, gdy istnieje element sticky mobile */
		html.ee:has( .ee_header.ee_header-sticky-mobile ) {
			
			/* obliczamy aktualna wysokosc headera sticky, ktora mozna uzyc aby odpowiednio pozycjonowac inne elementy sticky pojawiajace sie na stronie */
			/* w zaleznosci od tego czy scrollowano dalej uzywamy odpowiedniuej wysokosci */
			/* upewniamy sie, ze gdy powiekszono font to kasujemy wysokosc sticky */
			--ee-sticky-header-height: calc(1px * ((var(--ee--header-scrolled-height-px) * var(--ee--header-scrolled-scrolled)) + (var(--ee--header-height-px) * (1 - var(--ee--header-scrolled-scrolled)))) * (1 - var(--ee--html-bigger-fontsize)));
			
		}
		
		/* ustawiamy sticky na tym elemencie, jesli nie ustawiono wiekszego rozmiaru fonta - na 0, poniewz sticky header zawsze jest na samej gorze */
		html.ee:not(.ee_bigger-fontsize)  .ee_header.ee_header-sticky-mobile {
			position:sticky !important;
			top:0 !important;
		}
		
	}
	
	/* ujemny margin dla elementow znajdujacych sie pod headerem */
	html #main .ee_under-header {
		margin-top:calc(0px - var(--ee-full-header-height) );
	}
	/* padding dla elementow znajdujiacych sie pod headerem */
	html #main .ee_under-header.ee_under-header-padding, 
	html #main .ee_under-header .ee_under-header-padding {
		padding-top:var(--ee-full-header-height);
	}
	

/* ee end */



:root {
	
	/* zewnetrzna szerokosc okna przegladarki - razem z miejscem na ewentualny scrollbar */
	/* obliczamy go, ale bedzie to zaktualizowane w js, poniewzz nie kazda przegladarka radzi sobie z dzielemen jednostek - ta wartosc jest ustawiana przez js w head */
	--global--window-outer-width-px: calc(100vw / 1px);
	
	/* bez js zakladamy domyslnie, ze musimy zarezerwowac 20px na ewentualny scrollbar (na mobile 0) - ta wartosc jest ustawiana przez js w head  */
	--global--scrollbar-width-px: 20;

	/* wewnetrzna szerokosc okna przegladarki (zewnetrzna - scrollbar) */
	--global--window-width-px: calc(var(--global--window-outer-width-px) - var(--global--scrollbar-width-px));
	
	/* maksymalna szerokosc zawartosci (bez marginesow) - konfigurowalna */
	--global--content-max-width-px:1200;
	
	/* marginesy dla zawartosci - domyslnie 30px - konfigurowalna */
	--global--content-margin-px:30;
	
	/* szerokosc zawartosci, przy ktorej skala jej elementow bedzie wynosila 1 - domyslnie 1200 ; przy obliczaniu aktualnej bierzemy pod uwage szerokosc dostepna bez scrolla aby zawsze bylo tak samo - konfigurowalna */
	--global--content-scale-base-width-px:1200;
	
	/* szerokosc zawartosci, przy ktorej skala jej elementow przestanie sie zmniejszac - konfigurowalna */
	--global--content-scale-min-width-px:0;
	
	/* szerokosc zawartosci, przy ktorej skala jej elementow przestanie sie zwiekszac - domyslnie 1200 - konfigurowalna */
	--global--content-scale-max-width-px:1200;
	
	/* aktualna skala dla elementow content */
	--global--content-scale:1;
	
	/* maksymalna szerokosc tla (bez marginesow) - domyslnie bez ograniczenia - konfigurowalna */
	--global--background-max-width-px:9999;
	
	/* marginesy miedzy tlem a oknem przegladarki (wewnetrzna czescia bez scrollbara) - konfigurowalna */
	--global--background-margin-px:0;
	
}

/* firefox ma problem z dzieleniem jednostek, dlatego bez JS zakladamy tutaj, ze okno ma szerokosc 1440 */
@-moz-document url-prefix() {:root {	--global--window-outer-width-px: 1440; } }

/* resetujemy ustawienia dla wersji mobile */
@media only screen and (max-width:768px){
	:root {
		--global--scrollbar-width-px: 0;
		--global--content-max-width-px:9999;
		--global--content-margin-px:20;
		--global--content-scale-base-width-px:320;
		--global--content-scale-min-width-px:0;
		--global--content-scale-max-width-px:9999;
		--global--background-max-width-px:9999;
		--global--background-margin-px:0;
	}
}

/* obliczamy poprawne wartosci zmiennych */
:root {
	
	/* aktualna szerokosc zawartosci przy zalozeniu, ze uzywamy szerokosci dostepnej bez scrolla */
	--global--content-width-px: min(var(--global--content-max-width-px), var(--global--window-width-px) - (2 * var(--global--background-margin-px)) - (2 * var(--global--content-margin-px)));
	
	/* skala zawartosci, w oparicu o szerokosc dostepna bez scrolla ale z ograniczeniem min/max */
	--global--content-scale: calc(clamp(var(--global--content-scale-min-width-px), var(--global--content-width-px), var(--global--content-scale-max-width-px)) / var(--global--content-scale-base-width-px));
	
	/* aktualna szerokosc tla przy zalozeniu, ze uzywamy szerokosci dostepnej bez scrolla */
	--global--background-width-px: min(var(--global--background-max-width-px), var(--global--window-width-px) - (2 * var(--global--background-margin-px)));
	
	/* wartosci w px */
	--global--content-width: calc(var(--global--content-width-px) * 1px);
	--global--background-width: calc(var(--global--background-width-px) * 1px);
	--global--window-outer-width: calc(var(--global--window-outer-width-px) * 1px);
	--global--scrollbar-width: calc(var(--global--scrollbar-width-px) * 1px);
	--global--window-width: calc(var(--global--window-width-px) * 1px);
	--global--content-max-width: calc(var(--global--content-max-width-px) * 1px);
	--global--content-margin: calc(var(--global--content-margin-px) * 1px);
	--global--background-max-width: calc(var(--global--background-max-width-px) * 1px);
	--global--background-margin: calc(var(--global--background-margin-px) * 1px);
	
	/* rozmiary odstepow zalezne od skali content */
	--fc--spacing-xxs: calc(var(--spacing-xxs) * var(--global--content-scale));
	--fc--spacing-xs: calc(var(--spacing-xs) * var(--global--content-scale));
    --fc--spacing-s:  calc(var(--spacing-s) * var(--global--content-scale));
    --fc--spacing-m: calc(var(--spacing-m) * var(--global--content-scale));
    --fc--spacing-l:  calc(var(--spacing-l) * var(--global--content-scale));
    --fc--spacing-xl: calc(var(--spacing-xl) * var(--global--content-scale));
    --fc--spacing-xxl: calc(var(--spacing-xxl) * var(--global--content-scale));
	
}

/* ############## */


:root {
	
	/* globalne zaokraglenia */
	--global-radius:5px;
	
	/* rozmiary odstepow (oparte na rem) */
	--spacing-xxs: 0.25rem;
	--spacing-xs: 0.5rem;
    --spacing-s:  1rem;
    --spacing-m:  2rem;
    --spacing-l:  4rem;
    --spacing-xl: 7.5rem;
    --spacing-xxl: 12.5rem;
	
	/* standardowe teksty */
	--global-font-weight:400;
	--global-font-family:Arial;
	--global-line-height:1.7em;
	--global-letter-spacing:0;
	
	/* naglowki typu 1 */
	--heading1-font-family:  Arial;
	--heading1-font-weight:700;
	--heading1-line-height:1em;
	--heading1-letter-spacing:0;
	
	/* naglowki typu 2 */
	--heading2-font-family: Arial;
	--heading2-font-weight:700;
	--heading2-line-height:1em;
	--heading2-letter-spacing:0;
	
	/* domyslne rozmiary tekstu, niezalezne od skalowania tresci/tla - dla normalnych tekstow, nie naglowkow */
	--very-very-very-big-font-size:2rem; /* 32px */
	--very-very-big-font-size:1.75rem; /* 28px */
	--very-big-font-size:1.5rem; /* 24px */
	--bigger-font-size:1.375rem; /* 22px */
	--big-font-size:1.25rem; /* 20px */
	--medium-font-size:1.125rem; /* 18px */
	--default-font-size:1rem; /* 16px */
	--small-font-size:0.875rem; /* 14px */
	--smaller-font-size:0.8125rem; /* 13px */
	--very-small-font-size:0.75rem; /* 12px */
	
	/* colors */
	--color-text: #1b2120;
	--color-text-light: #73817f;
	--color-text-lighter: #aab8b6;
	--color-text-very-light: #d2d2d2;
	--color-text-very-very-light: #eaeaea;
	
	--color-primary: #54baa2;
	--color-primary-alternative: #01ebb4;
	--color-primary-text: #ffffff;
	
	--color-secondary: #bababa;
	--color-secondary-alternative: #d3d3d3;
	--color-secondary-text: #ffffff;






	
	/* domyslne odstepy poziome wewnatrz elementow */
	
	--color-dark-button: #051920;
	--color-dark-button-hover: #214552;
	
	--color-light-button: #afb5b7;
	--color-light-button-hover: #214552;
	
	/* body */
	
	--body-background: #ffffff;
	
	/* header */
	--header-background:#ffffff;
  
	/* footer */
	--footer-background: #ffffff;

  
}


/* mobile */

@media only screen and (max-width:768px){
	
	:root {
		/* rozmiary odstepow */
		--spacing-m:   1.5rem;
		--spacing-l:   2.5rem; 
		--spacing-xl:  3.75rem;
		--spacing-xxl: 5rem;
	}
	

}



/* button */
:root {
	--button-font-size:var(--default-font-size);
	--button-font-weight:600;
	--button-border-size:1px;
	--button-border-style:dashed;
	--button-border-zoom:var(--spacing-xs);
	--button-border-radius:var(--global-radius);
	
	--button-background:linear-gradient(90deg, var(--color-primary), var(--color-primary-alternative), var(--color-primary));
	--button-background-hover:var(--button-background);
	--button-color:var(--color-primary-text);
	--button-color-hover:var(--button-color);
	--button-border:transparent;
	--button-border-hover:var(--color-primary);
	
	--button-secondary-background:linear-gradient(90deg, var(--color-secondary), var(--color-secondary-alternative), var(--color-secondary));
	--button-secondary-background-hover:var(--button-secondary-background);
	--button-secondary-color:var(--color-secondary-text);
	--button-secondary-color-hover:var(--button-secondary-color);
	--button-secondary-border:transparent;
	--button-secondary-border-hover:var(--color-secondary);
	
	--button-transparent-color:var(--color-primary);
	--button-transparent-color-hover:var(--color-primary);
	--button-transparent-border:transparent;
	--button-transparent-border-hover:var(--color-primary);
	
	
	
	--input-font-size:var(--small-font-size);
	--input-border-color:var(--color-text-very-light);
	--input-border-focus-color:var(--color-text);
	--input-shadow-focus-color:rgba(0,0,0,0.4);
	--input-background-color:#ffffff;
	--input-text-color:var(--color-text);
	--input-arrow-color:var(--color-text-very-light);
	--input-arrow-focus-color:var(--color-text);
	
}


/* heading */
:root {
	--heading-background-color:#ffffff;
	--heading-background-contents-color:#ffffff;
	--heading-alternative-background-color:#f2f2f2;
	--heading-alternative-background-contents-color:#f2f2f2;
	--heading-dark-background-color:var(--color-text);
	--heading-dark-background-contents-color:var(--color-text);
	--heading-dark-alternative-background-color:linear-gradient(90deg, var(--color-primary), var(--color-primary-alternative));
	--heading-dark-alternative-background-contents-color:var(--color-primary);
	
	--heading-vertical-padding:var(--spacing-l);
	--heading-size1: clamp(2.5rem, 4.375rem * var(--global--content-scale), 4.375rem);
	--heading-weight: 700;
}



/* text styles */
:root {
	--text-styles-heading1-size:max(2.625rem, 3rem * var(--global--content-scale));
	--text-styles-heading2-size:max(2.25rem, 2.625rem * var(--global--content-scale));
	--text-styles-heading3-size:max(1.875rem, 2.25rem * var(--global--content-scale));
	--text-styles-heading4-size:max(1.6251rem, 1.875rem * var(--global--content-scale));
	--text-styles-heading5-size:max(1.25rem, 1.5rem * var(--global--content-scale));
	--text-styles-heading6-size:max(1rem, 1.25rem * var(--global--content-scale));
}




/* =========================================
   PADDING Z KAŻDEJ STRONY (Wszystkie 4)
   ========================================= */
.p-xxs  { padding: var(--spacing-xxs); }
.p-xs  { padding: var(--spacing-xs); }
.p-s   { padding: var(--spacing-s); }
.p-m   { padding: var(--spacing-m); }
.p-l   { padding: var(--spacing-l); }
.p-xl  { padding: var(--spacing-xl); }
.p-xxl { padding: var(--spacing-xxl); }

/* =========================================
   PADDING POZIOMY (Oś X: lewo i prawo)
   ========================================= */
.px-xxs  { padding-left: var(--spacing-xxs); padding-right: var(--spacing-xxs); }
.px-xs  { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-s   { padding-left: var(--spacing-s);  padding-right: var(--spacing-s); }
.px-m   { padding-left: var(--spacing-m);  padding-right: var(--spacing-m); }
.px-l   { padding-left: var(--spacing-l);  padding-right: var(--spacing-l); }
.px-xl  { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.px-xxl { padding-left: var(--spacing-xxl); padding-right: var(--spacing-xxl); }

/* =========================================
   PADDING PIONOWY (Oś Y: góra i dół)
   ========================================= */
.py-xxs  { padding-top: var(--spacing-xxs); padding-bottom: var(--spacing-xxs); }
.py-xs  { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-s   { padding-top: var(--spacing-s);  padding-bottom: var(--spacing-s); }
.py-m   { padding-top: var(--spacing-m);  padding-bottom: var(--spacing-m); }
.py-l   { padding-top: var(--spacing-l);  padding-bottom: var(--spacing-l); }
.py-xl  { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-xxl { padding-top: var(--spacing-xxl); padding-bottom: var(--spacing-xxl); }

/* =========================================
   POJEDYNCZE STRONY (Góra, Dół, Lewo, Prawo)
   ========================================= */
/* Góra (Top) */
.pt-xxs  { padding-top: var(--spacing-xxs); }
.pt-xs  { padding-top: var(--spacing-xs); }
.pt-s   { padding-top: var(--spacing-s); }
.pt-m   { padding-top: var(--spacing-m); }
.pt-l   { padding-top: var(--spacing-l); }

/* Dół (Bottom) */
.pb-xxs  { padding-bottom: var(--spacing-xxs); }
.pb-xs  { padding-bottom: var(--spacing-xs); }
.pb-s   { padding-bottom: var(--spacing-s); }
.pb-m   { padding-bottom: var(--spacing-m); }
.pb-l   { padding-bottom: var(--spacing-l); }

/* Lewo (Left) */
.pl-xxs  { padding-left: var(--spacing-xxs); }
.pl-xs  { padding-left: var(--spacing-xs); }
.pl-s   { padding-left: var(--spacing-s); }
.pl-m   { padding-left: var(--spacing-m); }
.pl-l   { padding-left: var(--spacing-l); }

/* Prawo (Right) */
.pr-xxs  { padding-right: var(--spacing-xxs); }
.pr-xs  { padding-right: var(--spacing-xs); }
.pr-s   { padding-right: var(--spacing-s); }
.pr-m   { padding-right: var(--spacing-m); }
.pr-l   { padding-right: var(--spacing-l); }