/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/



/*Add your own styles here:*/
/* ==========================================================================
   Wersja MOBILNA sekcji startowej (Digitalizacja / Online System / Rozwiązania IT)
   Blok HTML w treści strony startowej (ID 3262), element Code Block Enfolda.
   Desktop bez zmian - poniżej 768px chowamy LayerSlider i pokazujemy trzy
   pozycje jedna pod drugą: niebieskie tło, napis "elaboro" u góry,
   falka nachodząca na każdą ikonę z osobna.
   ========================================================================== */
/* Kontener LayerSlidera ma z Enfolda biale tlo (klasa main_color) - widac je
   jako bialy prostokat wszedzie tam, gdzie slider jeszcze nie namalowal slajdu
   (podglad z panelu, moment przed inicjalizacja JS). Dajemy granat z projektu. */
#top #layer_slider_1 { background-color: #2b3b88; }

.ela-mobile-hero { display: none; }
#top #ela-mobile-hero-block { display: none; }
/* na desktopie chowamy tez kontener Enfolda, ktory owija blok
   (inaczej zostaje po nim bialy pasek pod niebieskim sliderem) */
#top #main > div:has(#ela-mobile-hero-block),
#top .container_wrap:has(#ela-mobile-hero-block) { display: none; }

@media only screen and (max-width: 767px) {

	/* slider desktopowy poza ekranem telefonu.
	   LayerSlider po inicjalizacji JS przenosi swoj kontener poza #layer_slider_1,
	   dlatego chowamy tez jego wlasne klasy - inaczej zostaje ciemny pas
	   i poziome przewijanie (kontener ma sztywne 1410px). */
	#top #layer_slider_1,
	#top .avia-layerslider,
	#top .ls-wp-container,
	#top .ls-wp-fullwidth-container,
	#top .ls-container { display: none !important; }

	/* w wersji mobilnej wystarczy logo w bloku - chowamy to z naglowka */
	#top.page-id-3262 #header .logo,
	#top.page-id-3262 #header_main .av-logo-container .logo { display: none; }

	#top #ela-mobile-hero-block { display: block; }
	#top #main > div:has(#ela-mobile-hero-block),
	#top .container_wrap:has(#ela-mobile-hero-block) { display: block; }

	/* niebieskie tło jak na slajdzie desktopowym */
	#top #ela-mobile-hero-block .avia_codeblock,
	.ela-mobile-hero {
		background: #2b3b88 url(/wp-content/uploads/2022/10/tlo_elaboro_2jpg.jpg) center center / cover no-repeat;
	}

	.ela-mobile-hero {
		display: block;
		overflow: hidden;
		padding: 26px 16px 30px;
		text-align: center;
	}

	/* napis "elaboro" u góry */
	.ela-mobile-hero__logo {
		display: block;
		width: 190px;
		max-width: 60%;
		height: auto;
		margin: 0 auto 22px;
	}

	.ela-mobile-hero__item {
		position: relative;
		display: block;
		max-width: 280px;
		margin: 0 auto 18px;
		text-decoration: none;
		border: 0;
	}

	.ela-mobile-hero__img {
		position: relative;
		z-index: 2;
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	/* falka wjeżdża NA ikonę - przechodzi przed nią, jak wstęga na desktopie */
	.ela-mobile-hero__falka {
		position: absolute;
		z-index: 3;
		top: 26%;
		left: -80%;
		width: 260%;
		max-width: none;
		height: auto;
		margin: 0;
		pointer-events: none;
	}

	.ela-mobile-hero__item:last-child { margin-bottom: 4px; }

	/* falka wjezdza na kolejne ikony - jedna po drugiej */
	.ela-mobile-hero__falka {
		transform: translateX(-125%);
		opacity: 0;
		will-change: transform, opacity;
		animation: ela-falka-wjazd 1.05s cubic-bezier(.22,.72,.3,1) both;
	}
	.ela-mobile-hero__item:nth-of-type(1) .ela-mobile-hero__falka { animation-delay: .45s; }
	.ela-mobile-hero__item:nth-of-type(2) .ela-mobile-hero__falka { animation-delay: 1.15s; }
	.ela-mobile-hero__item:nth-of-type(3) .ela-mobile-hero__falka { animation-delay: 1.85s; }

	/* ikona delikatnie podjezdza tuz przed swoja falka (bez zmiany krycia - zawsze widoczna) */
	.ela-mobile-hero__img { animation: ela-ikona-wjazd .8s cubic-bezier(.22,.72,.3,1) both; }
	.ela-mobile-hero__item:nth-of-type(1) .ela-mobile-hero__img { animation-delay: .1s; }
	.ela-mobile-hero__item:nth-of-type(2) .ela-mobile-hero__img { animation-delay: .8s; }
	.ela-mobile-hero__item:nth-of-type(3) .ela-mobile-hero__img { animation-delay: 1.5s; }

}

@keyframes ela-falka-wjazd {
	0%   { transform: translateX(-125%); opacity: 0; }
	22%  { opacity: 1; }
	100% { transform: translateX(0); opacity: 1; }
}
@keyframes ela-ikona-wjazd {
	from { transform: translateY(14px); }
	to   { transform: none; }
}
/* uzytkownicy z wylaczonymi animacjami widza stan koncowy */
@media (prefers-reduced-motion: reduce) {
	.ela-mobile-hero__falka,
	.ela-mobile-hero__img {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}


/* ==========================================================================
   Strona KONTAKT (ID 3423) - blok Code Block "ela-kontakt" + formularz Enfolda
   Kolory firmowe: granat #2b3b88, akcent #008DD2 (pobrane z logo i grafik).
   ========================================================================== */
.ela-kontakt__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --- naglowek strony --- */
.ela-kontakt__hero {
	background: #2b3b88 url(/wp-content/uploads/2022/10/tlo_elaboro_2jpg.jpg) center center / cover no-repeat;
	color: #fff;
	padding: 64px 0 72px;
	text-align: center;
}
.ela-kontakt__kicker {
	margin: 0 0 6px;
	font-size: 13px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255,255,255,.72);
}
#top .ela-kontakt__hero h1.ela-kontakt__title,
.ela-kontakt__title {
	margin: 0 0 14px;
	color: #fff !important;
	font-size: 44px;
	line-height: 1.1;
	font-weight: 700;
}
.ela-kontakt__lead {
	max-width: 640px;
	margin: 0 auto 26px;
	color: rgba(255,255,255,.88);
	font-size: 17px;
	line-height: 1.6;
}
.ela-kontakt__lead--dark { color: #4a4a4a; }

.ela-kontakt__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ela-kontakt__btn {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 40px;
	color: #fff !important;
	font-size: 15px;
	text-decoration: none !important;
	transition: background .2s ease, border-color .2s ease;
}
.ela-kontakt__btn:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.ela-kontakt__btn--primary { background: #008DD2; border-color: #008DD2; }
.ela-kontakt__btn--primary:hover { background: #0079b5; border-color: #0079b5; }

/* --- karty z danymi --- */
.ela-kontakt__body { background: #f6f8fb; padding: 56px 0 60px; }
.ela-kontakt__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.ela-kontakt__card {
	background: #fff;
	border-radius: 10px;
	padding: 28px 26px 26px;
	box-shadow: 0 2px 14px rgba(43,59,136,.08);
	border-top: 3px solid #008DD2;
}
.ela-kontakt__card h2 {
	margin: 0 0 12px;
	font-size: 19px;
	color: #2b3b88;
	letter-spacing: .02em;
}
.ela-kontakt__card p { margin: 0 0 10px; line-height: 1.7; color: #4a4a4a; }
.ela-kontakt__note { font-size: 14px; color: #8a8f98; }
.ela-kontakt__link { color: #008DD2 !important; text-decoration: none !important; border-bottom: 1px solid rgba(0,141,210,.35); }
.ela-kontakt__link:hover { border-bottom-color: #008DD2; }

.ela-kontakt__meta {
	display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center;
	margin: 30px 0 0; color: #7a808a; font-size: 14px;
}
.ela-kontakt__areas {
	display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
	margin: 22px 0 0;
}
.ela-kontakt__areas a {
	color: #2b3b88 !important; text-decoration: none !important;
	font-size: 15px; border-bottom: 1px solid rgba(43,59,136,.25);
}
.ela-kontakt__areas a:hover { border-bottom-color: #2b3b88; }

/* --- naglowek nad formularzem --- */
.ela-kontakt--form { background: #fff; padding: 56px 0 6px; text-align: center; }
.ela-kontakt__h2 { margin: 0 0 12px; color: #2b3b88; font-size: 30px; }

/* --- formularz Enfolda na tej stronie --- */
#top .ela-kontakt-form { max-width: 900px; margin: 0 auto 60px; padding: 0 24px; }
#top .ela-kontakt-form input[type="text"],
#top .ela-kontakt-form textarea,
#top .ela-kontakt-form select {
	border: 1px solid #dde3ec; border-radius: 6px; background: #fff; color: #333;
}
#top .ela-kontakt-form input[type="submit"] {
	background: #008DD2; border-color: #008DD2; color: #fff; border-radius: 40px; padding: 13px 30px;
}
#top .ela-kontakt-form input[type="submit"]:hover { background: #0079b5; border-color: #0079b5; }

/* --- telefon --- */
@media only screen and (max-width: 767px) {
	.ela-kontakt__hero { padding: 44px 0 48px; }
	.ela-kontakt__title { font-size: 32px; }
	.ela-kontakt__lead { font-size: 16px; }
	.ela-kontakt__grid { grid-template-columns: 1fr; gap: 16px; }
	.ela-kontakt__body { padding: 36px 0 40px; }
	.ela-kontakt__btn { width: 100%; text-align: center; }
	.ela-kontakt--form { padding: 40px 0 4px; }
	.ela-kontakt__h2 { font-size: 25px; }
}

/* formularz: czytelne etykiety i pola na bialym tle */
#top .ela-kontakt-form label { color: #2b3b88; font-weight: 500; }
#top .ela-kontakt-form input[type="text"],
#top .ela-kontakt-form textarea,
#top .ela-kontakt-form select { color: #333 !important; background-color: #fff !important; }

/* --- Strona KONTAKT (3423): niebieskie tlo zamiast bialego --- */
#top.page-id-3423 #main,
#top.page-id-3423 #main .container_wrap,
#top.page-id-3423 #main .entry-content-wrapper,
#top.page-id-3423 #main .flex_column {
	background-color: transparent;
}
#top.page-id-3423 #main {
	background: #2b3b88 url(/wp-content/uploads/2022/10/tlo_elaboro_2jpg.jpg) center top / cover no-repeat;
	background-attachment: scroll;
}
#top.page-id-3423 .ela-kontakt__hero { background: transparent; }
#top.page-id-3423 .ela-kontakt__body { background: transparent; }
#top.page-id-3423 .ela-kontakt--form { background: transparent; }
/* karty zostaja biale - kontrast na granacie */
#top.page-id-3423 .ela-kontakt__card {
	background: #fff;
	box-shadow: 0 14px 34px rgba(10,20,60,.28);
}
/* teksty lezace bezposrednio na granacie */
#top.page-id-3423 .ela-kontakt__lead--dark { color: rgba(255,255,255,.88); }
#top.page-id-3423 .ela-kontakt__meta { color: rgba(255,255,255,.75); }
#top.page-id-3423 .ela-kontakt__areas { color: rgba(255,255,255,.85); }
#top.page-id-3423 .ela-kontakt__areas a { color: #fff !important; border-bottom-color: rgba(255,255,255,.45) !important; }
#top.page-id-3423 .ela-kontakt__areas a:hover { border-bottom-color: #fff; }
#top.page-id-3423 .ela-kontakt__h2 { color: #fff; }
#top.page-id-3423 .ela-kontakt--form .ela-kontakt__lead { color: rgba(255,255,255,.85); }
/* formularz jako biala karta */
#top.page-id-3423 .ela-kontakt-form {
	background: #fff;
	border-radius: 14px;
	padding: 34px 30px 10px;
	box-shadow: 0 16px 40px rgba(10,20,60,.3);
}
@media only screen and (max-width: 767px) {
	#top.page-id-3423 .ela-kontakt-form { padding: 24px 18px 6px; margin-left: 16px; margin-right: 16px; }
}