/*
Theme Name: EduAwans
Author: Dawid Grochalski
*/

:root {

	/* =========================
	   FONTS
	========================= */

	--font-size-1: 66px;
	--font-size-2: 46px;
	--font-size-3: 36px;
	--font-size-4: 26px;
	--font-size-5: 22px;
	--font-size-6: 18px;
	--font-size-7: 16px;
	--font-size-8: 14px;
	--font-size-9: 12px;
	--font-size-10: 10px;

	--primary-font-family: 'Montserrat', sans-serif;


	/* =========================
	   EDUAWANS COLORS
	========================= */

	--main-bg-color: #ffffff;

	--second-bg-color: #f7f9fc;

	--font-color: #1b2a3d;

	/* główny granat */
	--primary-color: #082d63;

	/* pomarańcz EduAwans */
	--highlight-color: #ff8500;

	/* dodatkowe */
	--primary-dark: #041f46;
	--primary-light: #17477f;

	--orange-light: #ffa12b;
	--orange-dark: #e97600;

	--light-blue-bg: #f3f7fc;

	/* Buttons */
	--btn-bg-color: linear-gradient(
		135deg,
		#ff8500 0%,
		#ff9d1c 100%
	);

	--btn-hover-color: linear-gradient(
		135deg,
		#082d63 0%,
		#17477f 100%
	);

	--btn-color: #ffffff;

	--svg-icons-color: var(--primary-color);

	--text-section-after: var(--second-bg-color);

	--banner-after: transparent;

	--banner-bg-color: #ffffff;

	--banner-font-color: var(--primary-color);

	--video-banner-after: #ffffff94;

	--video-banner-font-color: #1b2a3d;

	--slick-dots-color: var(--highlight-color);

	--slick-arrow-bg: var(--primary-color);

	--slick-arrow-color: #ffffff;

	--cta-bg-color: var(--primary-color);

	--contact-form-borders: #d5dce6;

	--template-separator-color: var(--highlight-color);


	/* HEADER */

	--header-bg-color: #ffffff;

	--header-second-bg-color: var(--primary-color);

	--header-color: var(--font-color);


	/* FOOTER */

	--footer-bg-color: #061f45;

	--footer-color: #ffffff;


	/* ICONS */

	--icons-filter: none;


	/* BUTTONS */

	--def-btn-font-size: 17px;

	--def-btn-padding: 16px 45px;


	/* SPACING */

	--small-padding: 50px;

	--big-padding: 100px;

	--desc-margin: 15px 0 0;

	--border-radius: 10px;

	--template-separator-height: 4px;


	/* HEADER */

	--header-padding: 14px 0;

	--logo-size: 180px;

	--logo-scrolled-size: 135px;

	--logo-mobile-size: 130px;

	--logo-scrolled-mobile: 100px;


	/* FOOTER */

	--footer-logo-size: 180px;

	--footer-mobile-logo-size: 130px;


	/* FONT WEIGHTS */

	--fw-type-1: 500;

	--fw-type-2: 600;

	--fw-type-3: 600;

	--fw-type-4: 600;

	--fw-type-5: 600;


	/* TRANSITIONS */

	--transition-fast: 0.3s ease;
}



/* ==================================================
   GLOBAL
================================================== */

html,
body {
	height: 100%;
	margin: 0;

	display: flex;
	flex-direction: column;
}

body {
	color: var(--font-color);
	background: var(--main-bg-color);
}

body > * {
	flex-shrink: 0;
}

main,
#main,
.site-content,
section.wc-page {
	flex: 1 0 auto;
}



/* ==================================================
   TYPOGRAFIA
================================================== */

.er-title-1,
.er-title-2,
.er-title-3,
.er-title-4,
.er-title-5,
.er-title-6,
.er-title-7,
h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: 0.3px;

	font-weight: 600;

	color: var(--primary-color);
}


.er-title-2 {
	text-transform: uppercase;

	font-weight: 700;

	color: var(--primary-color);
}



/* ==================================================
   SEKCJE
================================================== */

section.simple-banner-section {
	padding: 30px 0;
}


section.icons-section .tmp-separator {
	display: none;
}


section.home-products .tmp-separator {
	margin: 0 auto 30px;

	max-width: 120px;

	background: var(--highlight-color);
}



/* ==================================================
   HEADER
================================================== */

header.main-header-section {
	background: var(--header-bg-color);

	box-shadow: 0 3px 15px rgba(8, 45, 99, 0.08);

	border-bottom: 1px solid #edf1f6;
}


header.main-header-section
.desktop-nav
.header-main-row
.menu-links-column
ul.menu > li > a {
	color: var(--primary-color);

	font-weight: 600;

	transition: color var(--transition-fast);
}


header.main-header-section
.desktop-nav
.header-main-row
.menu-links-column
ul.menu > li > a:hover {
	color: var(--highlight-color);
}


header.main-header-section
.desktop-nav
.header-main-row
.menu-links-column
ul.menu > li.current-menu-item > a {
	color: var(--highlight-color);
}


header.main-header-section
.desktop-nav
.header-main-row
.menu-links-column
ul.menu > li.current-menu-item > a::after {
	opacity: 1;

	background: var(--highlight-color);
}



/* ==================================================
   BANNER EDUAWANS
================================================== */

section.new-banner {
	padding: 0;

	margin: 0;

	width: 100%;

	background: #ffffff;

	overflow: hidden;
}


section.new-banner img {
	display: block;

	width: 100%;

	height: auto;

	max-width: 100%;

	margin: 0 auto;

	object-fit: contain;
}



/*
Banner ma przygotowany tekst bezpośrednio na grafice,
więc NIE używamy object-fit: cover, bo ucinałby treść.
*/



/* ==================================================
   PRODUKTY
================================================== */

section.wc-page .er-wc-gallery-single .woocommerce-product-gallery__image a img {
	object-fit: contain;
}

.woocommerce .single-prod-show-more.def-btn a {
	padding: 10px 20px;
	margin-top: 30px;
}

.er-single-product {
	border-top: 4px solid var(--primary-color);
}

/* Na desktopie nie wymuszamy gridu ani width:100% - motyw sam ustawia 3 kolumny. */
section.wc-page .woocommerce ul.products li.product {
	text-align: center;
	background: #fff;
	border: 1px solid #e7edf4;
	border-radius: 10px;
	padding: 20px;
	margin: 5px;
	box-sizing: border-box;
	transition: all var(--transition-fast);
}

section.wc-page .woocommerce ul.products li.product:hover {
	border-color: rgba(255,133,0,.35);
	box-shadow: 0 8px 25px rgba(8,45,99,.10);
	transform: translateY(-5px);
}

section.wc-page .woocommerce ul.products li.product .product-image-box,
section.wc-page .woocommerce ul.products li.product .product-image-box a {
	max-width: 100%;
}

section.wc-page .woocommerce ul.products li.product .product-image-box img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	transition: none;
}

section.wc-page .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--font-size-7);
	min-height: 32px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--font-color);
	margin-top: 10px;
}

.woocommerce ul.products li.product .price {
	color: var(--highlight-color);
	font-size: 18px;
	font-weight: 700;
	margin-top: 10px;
}

/* PRZYCISK NA KARCIE PRODUKTU */
section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart,
section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart a,
section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 15px 35px !important;
	background: var(--btn-bg-color) !important;
	color: #fff !important;
	font-size: var(--def-btn-font-size) !important;
	font-weight: 600 !important;
	line-height: 1.2;
	border: 0 !important;
	border-radius: var(--border-radius) !important;
	text-decoration: none !important;
	text-transform: uppercase;
	box-shadow: 0 4px 15px rgba(255,133,0,.25);
	transition: all var(--transition-fast);
}

section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart *,
section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart a *,
section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart button * {
	color: #fff !important;
	fill: #fff !important;
}

section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart:hover,
section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart a:hover,
section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart button:hover {
	background: var(--btn-hover-color) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(8,45,99,.28);
}

/* fallback standardowego WooCommerce */
.woocommerce ul.products li.product .button {
	padding: 15px 35px;
	background: var(--btn-bg-color) !important;
	color: #fff !important;
	font-size: var(--def-btn-font-size);
	font-weight: 600;
	border: 0;
	border-radius: var(--border-radius);
	text-transform: uppercase;
	box-shadow: 0 4px 15px rgba(255,133,0,.25);
	transition: all var(--transition-fast);
}

.woocommerce ul.products li.product .button:hover {
	background: var(--btn-hover-color) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(8,45,99,.28);
}

/* ==================================================
   DEFAULT BUTTONS
================================================== */

.def-btn a {
	background: var(--btn-bg-color);

	color: #ffffff;

	border-radius: 9px;

	box-shadow: 0 5px 15px rgba(255, 133, 0, 0.20);

	transition: all var(--transition-fast);
}


.def-btn a:hover {
	background: var(--btn-hover-color);

	color: #ffffff;

	transform: translateY(-2px);

	box-shadow: 0 8px 20px rgba(8, 45, 99, 0.25);
}



/* ==================================================
   CTA
================================================== */

section.main-cta {
	position: relative;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#061f45 0%,
			#082d63 55%,
			#17477f 100%
		);

	color: #ffffff;

	text-align: center;

	padding: 80px 0;
}


section.main-cta::before {
	content: "";

	position: absolute;

	width: 350px;

	height: 350px;

	border-radius: 50%;

	background: rgba(255, 133, 0, 0.08);

	top: -180px;

	right: -100px;
}


section.main-cta::after {
	content: "";

	position: absolute;

	width: 250px;

	height: 250px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.04);

	bottom: -130px;

	left: -80px;
}


section.main-cta > * {
	position: relative;

	z-index: 2;
}


section.main-cta,
section.main-cta .desc *,
section.main-cta .line-btn a {
	color: #ffffff;
}


section.main-cta h2,
section.main-cta h3 {
	color: #ffffff;
}


section.main-cta .def-btn a {
	color: #ffffff;

	background: linear-gradient(
		135deg,
		#ff8500,
		#ff9d1c
	);

	box-shadow: 0 5px 18px rgba(255, 133, 0, 0.30);

	border-radius: 9px;

	transition: all var(--transition-fast);
}


section.main-cta .def-btn a:hover {
	background: #ffffff;

	color: var(--primary-color);

	transform: translateY(-3px);
}



/* ==================================================
   FOOTER
================================================== */

footer {
	border-top: 4px solid var(--highlight-color);

	background: var(--footer-bg-color);

	color: var(--footer-color);

	padding-top: 50px;

	box-shadow: 0 -3px 15px rgba(8, 45, 99, 0.08);

	margin-top: auto;

	flex-shrink: 0;
}


footer a {
	color: #ffffff;

	transition: color var(--transition-fast);
}


footer a:hover {
	color: var(--highlight-color);
}


footer h3,
footer h4,
footer h5 {
	color: #ffffff;
}


footer.main-footer-section-t3-v1
.footer-newsletter
form
.nws-wrapper
button[type="submit"] {
	background: var(--highlight-color);
}


footer.main-footer-section-t3-v1
.footer-newsletter
form
.nws-wrapper
button[type="submit"]
.icon svg {
	fill: #ffffff;
}



/* ==================================================
   FORMS
================================================== */

input,
textarea,
select {
	border-color: var(--contact-form-borders);

	border-radius: 8px;
}


input:focus,
textarea:focus,
select:focus {
	border-color: var(--highlight-color);

	outline: none;

	box-shadow: 0 0 0 3px rgba(255, 133, 0, 0.10);
}



/* ==================================================
   DESKTOP
================================================== */

@media screen and (min-width: 1200px) {

	header.main-header-section
	.desktop-nav
	.header-main-row
	.menu-links-column
	ul.sub-menu > li:hover {
		background-color: #f5f8fc;
	}

}



/* ==================================================
   <= 1499
================================================== */

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

	:root {

		--font-size-1: 64px;
		--font-size-2: 44px;
		--font-size-3: 34px;
		--font-size-4: 24px;
		--font-size-5: 20px;
		--font-size-6: 18px;
		--font-size-7: 16px;
		--font-size-8: 14px;
		--font-size-9: 12px;
		--font-size-10: 10px;

		--def-btn-font-size: 15px;

		--def-btn-padding: 17px 35px;
	}

}



/* ==================================================
   <= 1199
================================================== */

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

	:root {

		--font-size-1: 60px;
		--font-size-2: 40px;
		--font-size-3: 30px;
		--font-size-4: 22px;
		--font-size-5: 18px;
		--font-size-6: 16px;
		--font-size-7: 14px;
		--font-size-8: 13px;
		--font-size-9: 12px;
		--font-size-10: 10px;
	}


	.def-btn a {
		padding: 14px 45px;
	}

}



/* ==================================================
   TABLET
================================================== */

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

	:root {

		--font-size-1: 54px;
		--font-size-2: 36px;
		--font-size-3: 28px;
		--font-size-4: 20px;

		--def-btn-font-size: 14px;

		--small-padding: 60px;

		--big-padding: 100px;
	}


	body {
		font-size: var(--font-size-7);
	}


	section.main-cta {
		padding: 65px 25px;
	}

}



/* ==================================================
   MOBILE
================================================== */

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

	:root {

		--font-size-1: 36px;
		--font-size-2: 26px;
		--font-size-3: 20px;
		--font-size-4: 18px;
		--font-size-5: 16px;
		--font-size-6: 15px;
		--font-size-7: 14px;

		--def-btn-font-size: 14px;

		--def-btn-padding: 14px 25px;

		--small-padding: 40px;
	}


	/* BANNER */

	section.new-banner {
		width: 100%;

		overflow: hidden;
	}


	section.new-banner img {
		display: block;

		width: 100%;

		height: auto;

		object-fit: contain;
	}


	/* PRODUCTS */

	section.wc-page .woocommerce ul.products li.product {
		width: 100%;
		margin: 10px 0;
		padding: 15px;
		border-radius: 10px;
		box-sizing: border-box;
		box-shadow: 0 4px 10px rgba(8,45,99,.06);
	}

	section.wc-page .woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px;
		line-height: 1.3;
		min-height: unset;
		margin-top: 10px;
	}

	.woocommerce ul.products li.product .price {
		font-size: 16px;
		margin-top: 8px;
	}

	section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart,
	section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart a,
	section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart button,
	.woocommerce ul.products li.product .button {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		text-align: center;
		padding: 14px 15px !important;
		margin-top: 12px;
		font-size: 15px !important;
		font-weight: 600 !important;
		border: 0 !important;
		border-radius: 8px !important;
		background: var(--btn-bg-color) !important;
		color: #fff !important;
		box-shadow: 0 3px 10px rgba(255,133,0,.25);
		transition: all .3s ease;
	}

	section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart:hover,
	section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart a:hover,
	section.wc-page .woocommerce ul.products li.product .er-wc-add-to-cart button:hover,
	.woocommerce ul.products li.product .button:hover {
		background: var(--btn-hover-color) !important;
		color: #fff !important;
		transform: translateY(-1px);
		box-shadow: 0 5px 15px rgba(8,45,99,.25);
	}

	section.main-cta {
		padding: 50px 20px;
	}


	footer {
		padding: 35px 15px;

		text-align: center;
	}


	footer img {
		max-width: var(--footer-mobile-logo-size);

		margin-bottom: 10px;
	}



	/* ==================================================
	   MOBILE PRODUCTS SLIDER
	================================================== */

	.mobile-slider-products {

		display: flex;

		overflow-x: auto;

		scroll-snap-type: x mandatory;

		-webkit-overflow-scrolling: touch;

		scroll-padding: 15px;

		padding: 10px 0 20px 10px;

		margin: 0;

		gap: 15px;
	}


	.mobile-slider-products li.product {

		flex: 0 0 85%;

		scroll-snap-align: start;

		border-radius: 12px;

		box-shadow: 0 5px 18px rgba(8, 45, 99, 0.07);

		background: #ffffff;

		padding: 15px;

		transition: transform 0.3s ease;
	}


	.mobile-slider-products li.product:hover {

		transform: translateY(-3px);
	}


	.mobile-slider-products::-webkit-scrollbar {

		display: none;
	}


	.mobile-slider-products {

		scrollbar-width: none;

		-ms-overflow-style: none;
	}

}