@charset "UTF-8";
/*Tomas Valek, 2021-03-07
https://caniuse.com/
*/

:root {
    --green: #007E3A;			/*RGB: 0, 126, 58*/
	--greenAlpha80: #007E3ACC;
	--greenLight: #009946;
	--greenDark: #0C3E22;
    --textColor: #1a1b1f;
    --letterSpacingLinkIntro: 5px;
	--letterSpacingLink: 2px;
}

@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

/*BASIC CLASSES*/
.noTopMargin {
    margin-top: 0
}

.noBottomMargin {
    margin-bottom: 0
}

.noMargin {
    margin: 0
}

.paddingTop1em{
	padding-top: 1em;
}

.none {
    display: none
}

.order0 {
	order: 0 !important;
}

.order1 {
	order: 1 !important;
}

*,
::before,
::after {
    box-sizing: border-box;
}

b, strong {
    font-weight: bold;
}

a {
	color: var(--textColor);
}

a:hover {
	color: var(--green);
}

.affiliateBtn {
	/*width: 80vw;*/
	margin: 0 auto;
	margin-top: 2em;
	display: flex;
	justify-content: space-evenly;
	text-align: center;
}

.affiliateBtn a {
    position: relative;
    display: inline-block;
	font-size: clamp(1.2rem, 0.9vw, 2rem);
	color: white !important;
	letter-spacing: var(--letterSpacingLinkIntro);
	text-decoration: none !important;
    transition: color 0.3s ease, box-shadow 0.3s ease;
}

.affiliateBtn a:hover {
    box-shadow: 0 0 20px var(--greenAlpha80)
}

/*GENERAL*/
body {
    font-family: system-ui, Ubuntu, sans-serif;
	font-size-adjust: 0.55;
	font-display: swap;
    font-weight: 300;
    color: var(--textColor);
    /*without margins*/
    margin: 0 auto;
}

img {
    /*remove border around Images, IE9*/
    text-decoration: none;
    border: 0px;
}

a {
    text-decoration: none;
    cursor: pointer;
    border: 0;
    outline: 0;
    transition: 0.4s;
}

.btn {
	text-transform: uppercase;
	vertical-align: middle;
	user-select: none;
	padding: 0.5em 1em;
	background-color: var(--green);
	color: white;
	border: none;
	cursor: pointer;
	border-radius: 0.5em;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	font-weight: normal;
}

#intro {
	position: relative;
	height: 100vh;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	transition: border-radius 0.4s ease;
}

/* Stav s radius, když stránka odscrolluje */
#intro.scrolled {
	border-bottom-left-radius: 32px;
	border-bottom-right-radius: 32px;
}

#introTitle {
	width: 90%;
	position: absolute;
	text-align: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: white;
	margin: 0;
	animation: fadeIn 2s;
}

#introTitle h1, #introTitle h2 {
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.3em;
	text-shadow: 0 0 0.2em black;
}

#introTitle h1 {
	/* min ; fluid ; max */
	font-size: clamp(4rem,4.8vw, 6rem);
}

#introTitle h2 {
	font-size: clamp(1.5rem, 2.2vw, 2.8rem);
	font-weight: 300;
	margin-top: clamp(1.5rem, 2.2vw, 2.8rem);
}

#introBtn {
	/*width: 80vw;*/
	margin: 0 auto;
	margin-top: clamp(3rem, 6vw, 10rem);
	display: flex;
	justify-content: space-evenly;
}

#introBtn a {
	font-size: clamp(1.5rem, 2vw, 2.8rem);
	opacity: 0.85;
	letter-spacing: var(--letterSpacingLinkIntro);
}

#intro a:hover {
    opacity: 1.0;
	color: var(--green);
	background-color: white;
}

.scroll-indicator {
  position: absolute;
  bottom: 3em;
  left: 50%; /*start o 50% of screen*/
  transform: translateX(-50%); /*shift 50% of start o 50% of screen*/
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 100;
  pointer-events: none;
}

.scroll-indicator.hidden {
  opacity: 0;
  pointer-events: none;
}

.arrow-bounce {
  animation: waveDown 2.4s ease-in-out infinite;
  opacity: 0;
}

/* Sekvenční zpoždění pro kaskádu */
.arrow-bounce:nth-child(1) {
  animation-delay: 0s;
}
.arrow-bounce:nth-child(2) {
  animation-delay: 0.3s;
}
.arrow-bounce:nth-child(3) {
  animation-delay: 0.6s;
}

/* Vzhled šipky samotné */
.arrow {
  width: 20px;
  height: 20px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.85);
  border-right: 3px solid rgba(255, 255, 255, 0.85);
  transform: rotate(45deg);
}

/* Animace vlny */
@keyframes waveDown {
  0% {
    transform: translateY(-6px);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(12px);
    opacity: 0;
  }
}

/* FADE-IN ANIMATION FOR SECTIONS */
.fade-in-section {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Fallback for when JavaScript is disabled - ensure sections are visible */
.no-js .fade-in-section {
	opacity: 1;
	transform: translateY(0);
}

#content {
    max-width: 1140px;
    margin: 0em auto;
    text-align: center;
    padding: 0 0.5em;
    line-height: 1.75rem;
	letter-spacing: 0.025rem;
}

#content h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
}

#content:first-child {
	margin-top: 2em;
}

/*used by privacyPolicy or terms of use*/
#content.textLeft {
    text-align: left;
}

article {
    margin: 4em 0em 5em 0em;
/*    scroll-margin-top: 5em;*/
    /* whatever is a nice number that gets you past the header */
}

/*https://css-tricks.com/snippets/css/a-guide-to-flexbox/*/
.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center !important;
    justify-content: space-between !important;
}

.flexText {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
    max-width: 50vw;
    text-align: left;
}

.flexNonText {
    width: 45vw;
    max-width: 450px;

/*	height: 30vw; do not use it. Does not respect ratio.
	max-height: 300px;*/
/*	clip: rect(0px, 140px, 140px, 0px);*/
}

#content > article:nth-of-type(odd) .flexNonText {
	order: 0;
    margin-right: 2em;
}

#content > article:nth-of-type(even) .flexNonText {
    order: 1;
    margin-left: 2em;
}

#content article img.flexNonText {
    border-radius: 8px;
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
	transition: transform .2s
}

#content article img.flexNonText:hover {
	transform: scale(1.2);
}

#content article h3 {
	font-size: clamp(1rem, 2vw, 1.4rem);
	font-weight: 700;
}

/*METRICS*/
.metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2em;
  padding: 2em;
  text-align: center;
}

.metric {
  flex: 1 1 120px; /* růst/zmenšení, minimální šířka 120px */
  max-width: 200px;
}

.metric-value {
  font-weight: bold;
  font-size: 2rem;
}

.metric-value span {
  font-size: 1.5rem; /* menší procento */
}

.metric-value {
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.6, 0, 0.4, 1);
}

.metric.animate .metric-value {
  transform: rotateX(360deg);
}

.metric-desc {
  margin-top: 0.5em;
  font-size: 0.9rem;
}

.pictograms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  text-align: center;
  margin-top: 4em;
  margin-bottom: 5em;
}

.pictogram {
  flex: 1 1 160px;
  max-width: 200px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.pictogram img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  margin-bottom: 0.8em;
  transition: transform 0.3s ease;
}

.pictogram img:hover {
  transform: scale(1.05);
}

.pictogram-desc {
  font-size: 0.95em;
}

#howToRegister a {
	text-decoration: underline;
}

#wantGF form {
	text-align: left;
}

input, select, textarea {
	width: 100%;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
	margin-left: 0 !important;
	margin-bottom: 1em;
	background-color: white;
	font-family: Ubuntu, sans-serif;
	box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);
}

input:focus, select:focus, textarea:focus { 
    outline: none !important;
    border-color: var(--green);
    box-shadow: 0px 0px 5px var(--green);
}

input[type=checkbox] {
	width: auto;
	margin-right: 1em;
	filter: hue-rotate(240deg); /*to green*/
	box-shadow: none;
}

input[type=submit] {
	padding: 1em 2em;
	margin-top: 1em;
	transition: 0.4s;
	letter-spacing: var(--letterSpacingLink);
	word-wrap: break-word;
	white-space: normal;
}

input[type=submit]:hover {
	background-color: var(--greenLight);
}


.loader {
	display:none;
	margin-right: 10em;
	text-align: center;
	border: 2px solid #f3f3f3;
	border-radius: 50%;
	border-top: 2px solid var(--green);
	width: 10em;
	height: 10em;
	animation: loader 2s linear infinite;
}

#afterSubmitText img {
	width: 150px;
}
  
@keyframes loader {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#afterSubmitText, #afterSubmitTextErr {
	display: none;
}

footer {
    color: white;
	padding-top: 5.5em;
	padding-bottom: 1em;
    margin-top: 3em;
	background-size: 100% 100%;
	background-image: url(../images/footer.svg);
}

footer a {
	color: white;
    text-decoration: underline !important;
}

footer a:hover {
	color: white;
}	

footer p {
    text-align: center;
    font-size: small;
}

footer div.flex {
    text-align: center;
    font-size: small;
    justify-content: center !important;
    padding: 0 1em !important;
}

footer div.flex p {
    margin-top: 0;
    padding: 0 1em;
}

/*To max width 1024px*/
@media (max-width: 1024px) {
	#howToRegister img:first-child {
		transform: none;
	}
}

/*To max width 960px*/
@media (max-width: 960px) {
    nav {
        display: none
    }

    .flex {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center !important;
		justify-content: space-between !important;
	}

    .flexText {
        max-width: 100%;
        text-align: center;
    }

    .flexNonText:not(.loader) {
        width: 100%;
        max-width: 500px;
    }

	#intro {
		background-attachment: scroll; /*TODO zkontrolovat, zda něčemu pomůže*/
	}

	#intro.scrolled {
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
	}

	#introTitle h1 {
		/* min ; fluid ; max */
		font-size: clamp(2rem, 7vw, 7rem);
	}

	#introTitle h2 {
		font-size: clamp(1.2rem, 3vw, 3rem);
	}
		
	#introBtn {
		display: flex;
		justify-content: space-evenly;
	}

	#introBtn a {
		font-size: clamp(1.2rem, 3vw, 3rem);
	}
	
    #content {
        margin: 0em auto;
        padding: 0 0.2em;
    }

	#content > article:nth-of-type(2n+1) .flexNonText {
		order: 0;
		margin-left: 0;
		margin-right: 0;
	}
	
	#content > article:nth-of-type(2n) .flexNonText {
		order: 0;
		margin-left: 0;
		margin-right: 0;
	}

    #content article img.flexNonText {
        border-radius: 5px;
        box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
		transform: none !important; /*Disable scale*/
    }

	#content article img.flexNonText:hover {
		transform: none;
	}

	#wantGF form {
		margin: 0 auto !important;
	}

	#wantGF .flexNonText {
		order: 1 !important;
	}

	#afterSubmitText, #afterSubmitTextErr, .loader {
		margin-top: 2em;
	}

	footer {
		margin-top: 2em;
		padding-top: 3em;
		background-image: url(../images/footerMin.svg);
	}
}

/*
//////////////OVERRIDES
*/

/*Override swiper*/
.swiper-pagination {
    position: static;
}

/*Override cookie consent 3*/
#cc-main {
	/** Primary button **/
	--cc-btn-primary-bg: var(--green);
	--cc-btn-primary-border-color: var(--green);
	--cc-btn-primary-hover-bg: var(--greenLight);
	--cc-btn-primary-hover-border-color: var(--greenLight);

	/** Toggles **/
	--cc-toggle-on-bg: var(--cc-btn-primary-bg);

	/** Secondary button **/
	--cc-btn-secondary-bg: transparent;
	--cc-btn-secondary-border-color: transparent;
	--cc-btn-secondary-hover-bg: rgba(0, 128, 0, 0.05); /* jemný hover */
	--cc-btn-secondary-hover-border-color: transparent;
}