@charset "UTF-8";
/*Tomas Valek, 2021-02-09
Caskadovy styl pro www.dashcamtravel.com
*/

:root {
	--blue: #2565AE;
	--blueLight: #357FD4;
	--blueDark: #1D4E87;
	--blueLink: #0066cc;
	--textColor: #1a1b1f;
	--letterSpacingLink: 5px;
}

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

.noBottomMargin {
	margin-bottom: 0
}

.noMargin {
	margin: 0
}

.none {
	display: none
}

/* 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);
}

/*FONTS*/
@font-face {
	font-family: myFont;
	src: url('../font/ethnocentricIt.woff2');
	font-display: swap;
}

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

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

h1 {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 175%;
	scroll-margin-top: 5em;
	margin-top: 2em;
	margin-bottom: 2em;
}

h2 {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 125%;
	scroll-margin-top: 5em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

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

a {
	color: var(--blueLink);
	text-decoration: none !important;
	cursor: pointer !important;
	border: 0 !important;
	outline: 0 !important;
	transition: 0.4s;
}

/* NAVIGATION */
nav.main-nav {
	width: 100%;
	padding: 1.5em 0;
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;         /* umožní zalomení, ale jako bloky */
	gap: 3vw;                /* mezera mezi links a buttons */
}

/* odkazy vlevo / nahoře */
.nav-links {
	display: flex;
	gap: 3.5vw;
	flex-wrap: wrap;
	justify-content: center;
}

.nav-links a {
	color: var(--textColor);
	text-transform: uppercase;
	letter-spacing: var(--letterSpacingLink);
	font-weight: 400;
	font-size: min(3vw, 100%);
}

/* tlačítka jako jeden blok */
.nav-buttons {
	display: inline-flex;
	gap: 3vw;
	vertical-align: middle;
}

ul.no-bullets {
	list-style-type: none;
	/* Remove bullets */
	padding: 0;
	/* Remove padding */
	margin: 0;
	/* Remove margins */
}

/*
 * Animated buttons (Download + Donate)
 */

.animated-button {
	/* výchozí barvy = DOWNLOAD */
	--btn-main: #0b1b3d;                     /* levá část */
	--btn-accent: #08142b;                   /* pravá část */
	--btn-border: var(--blueLight);          /* svítící okraj */
	--btn-hoverOverlay: #8592ad;             /* overlay při hoveru */

	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding: 20px 30px;
	border-radius: 15px;
	background: linear-gradient(-30deg, var(--btn-main) 50%, var(--btn-accent) 50%);
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: var(--letterSpacingLink);
	white-space: nowrap;
	user-select: none;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ikona = barva textu */
.animated-button svg {
	position: relative;
	display: inline-block;
	margin-top: -1em;
	margin-bottom: -0.8em;
	vertical-align: middle;
	fill: currentColor;
	height: 1.3125rem;
	width: auto;
}

/* HOVER OVERLAY – společný pro všechna tlačítka */
.animated-button::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--btn-hoverOverlay);
	opacity: 0;
	transition: .2s opacity ease-in-out;
}

.animated-button:hover::before {
	opacity: 0.2;
}

/* ANIMOVANÉ ČÁRY NA OKRAJÍCH */
.animated-button span {
	position: absolute;
}

/* top */
.animated-button span:nth-child(1) {
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to left, rgba(8,20,43,0), var(--btn-border));
	animation: animateTop 2s linear infinite;
}

/* right */
.animated-button span:nth-child(2) {
	top: 0;
	right: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(to top, rgba(8,20,43,0), var(--btn-border));
	animation: animateRight 2s linear -1s infinite;
}

/* bottom */
.animated-button span:nth-child(3) {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, rgba(8,20,43,0), var(--btn-border));
	animation: animateBottom 2s linear infinite;
}

/* left */
.animated-button span:nth-child(4) {
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(to bottom, rgba(8,20,43,0), var(--btn-border));
	animation: animateLeft 2s linear -1s infinite;
}

/* původní animace, beze změn */
@keyframes animateTop {
	0%   { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}

@keyframes animateRight {
	0%   { transform: translateY(100%); }
	100% { transform: translateY(-100%); }
}

@keyframes animateBottom {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@keyframes animateLeft {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(100%); }
}

/* DONATE – PayPal gold */
#donate.animated-button {
	--btn-main:   #ffbf00;                    /* PayPal gold */
	--btn-accent: #ffdd55;                    /* světlejší diagonála */
	--btn-border: #ffdd55;                    /* zlaté čáry */
	/* PŮVODNĚ: rgba(255,191,0,0.25) – skoro není vidět  */
	--btn-hoverOverlay: rgba(0, 0, 0, 0.18);  /* TMAVŠÍ overlay, dobře viditelný */
	color: #111;                               /* tmavý text + ikona */
}

#intro {
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: var(--blue);
	background-image: url(../images/bg.webp);
}

img#introLogo {
	display: block;
	/*40% of width, but max 200px. Height: auto*/
	width: 40%;
	max-width: 230px;
	margin: 0 auto;
	padding-top: 2em;
}

#introAppName,
#introCarCam,
#introFrom {
	text-transform: uppercase;
	text-align: center;
	color: white;
	text-shadow: 1px 1px 0px black;
}

#introFrom {
	text-shadow: 0.5px 0.5px 0px black;
}

#introAppName {
	margin-top: 0.5em;
	font-family: myFont, sans-serif;
	font-size: min(5.5vw, 300%);
	letter-spacing: 0.3em;
}

#introCarCam {
	font-family: myFont, sans-serif;
	font-size: min(5vw, 250%);
	letter-spacing: 0.3em;
}

#introFrom {
	font-size: min(2vw, 110%);
	letter-spacing: 0.7em;
	font-weight: 400;
}

#introGooglePlay {
	text-align: center;
	margin-top: 2em;
}

#introGooglePlay img {
	/*60% of width, but max 300px. Height: auto*/
	width: 300px;
	max-width: 60%;
}

#introGooglePlay a:hover {
	filter: brightness(150%) !important;
	opacity: 1;
}

#youtubeIntroWrap {
	position: relative;
	margin: 2em auto;
	padding-bottom: 1em;
	text-align: center;
}

#youtubeIntro {
	width: 98vw;
    max-width: 640px;
	border-radius: 15px; /*Same like download*/
}

#longStoryShortDeviceImage {
	width: 98vw;
	max-width: 800px;
	margin-top: 1em;
}

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

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

section {
	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;
}

/*pocita se od 1, ne od nuly!
/*even=lichy=1,3,5
odd=sudy=0,2,4*/
#content>*:nth-child(odd) .flexNonText {
	order: 0;
	margin-right: 2em;
}

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

#content section img.flexNonText {
  border-radius: 8px;
  transition: transform .2s;
}

#content section img.flexNonText:not(.noShadow) {
  box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
}

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

.flexSpaceLeft {
	margin-left: 15px;
}

.flexSpaceRight {
	margin-right: 15px;
}

#socialMedia {
	text-align: center
}

#socialMedia img {
	height: 12vw;
	max-height: 50px;
	min-height: 35px;
	margin: 0 1.5em 0 1.5em;
}

#driveSafe {
	text-align: center;
	margin: 2em 0;
	font-family: myFont, sans-serif;
	font-size: 100%;
	letter-spacing: 0.7em;
}

.footer-social {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    text-align: center;
    font-size: small;        /* stejná velikost jako footer text */
}

.footer-social a {
    display: inline-block;
    margin: 0 0.8em;
}

/* Ikony zarovnané na výšku textu a vizuálně jako text */
.footer-social img {
    height: 2em;             /* stejná výška jako text */
    width: auto;
    vertical-align: middle;
	color: white;
    opacity: 0.95;
    transition: opacity 0.2s, transform 0.2s;
}

/* Jemný hover, ne moc „křiklavý“ */
.footer-social img:hover {
    opacity: 1;
    transform: scale(1.05);
}

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

footer a {
	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;
}

/* Container */
.footer-donate-chip {
    margin: 1.2em 0 0.8em 0;
    text-align: center;
}

/* CHIP styl – zmenšené Donate CTA */
.footer-donate-chip a {
    display: inline-block;
    padding: 0.45em 1.2em;
    border-radius: 12px;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    font-weight: 500;
    text-transform: uppercase;

    /* stejné barvy jako hlavní DONATE tlačítko */
    background: linear-gradient(
        -30deg,
        #ffbf00 50%,
        #ffdd55 50%
    );

    color: #111;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* Hover — jemný efekt jako nahoře */
.footer-donate-chip a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.05); /* jemné ztmavení */
    opacity: 0;
    transition: 0.25s;
}

.footer-donate-chip a:hover::before {
    opacity: 1;
}

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

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

/*Override cookie consent*/
#cm {
	font-size: 90% !important;
	padding: 1em !important;
	box-shadow: 0 0 10px rgb(0 0 0 / 40%) !important;
	font-family: Ubuntu, sans-serif !important;
	font-size: 110 !important;
	font-weight: 300 !important;
}

#cm_title {
	display: none !important;
}

#cm_text {
	margin-bottom: 1em !important;
	color: var(--textColor) !important;
}

#cs_inner,
#cm_secondary_btn {
	color: var(--textColor) !important;
}

#cm_primary_btn,
#cm_secondary_btn,
#cs_acceptall_btn,
#cs_save__btn {
	padding: .6rem .8rem !important;
	margin-bottom: 0 !important;
}

#cm_primary_btn,
#cs_acceptall_btn {
	color: white !important;
	background: var(--blue) !important;
	transition: 0.4s;
}

#cm_secondary_btn {
	background-color: transparent !important;
}

#cm_primary_btn:hover,
/*#cm_secondary_btn:hover,*/
#cs_acceptall_btn:hover,
#cs_close_btn:hover {
	background-color: var(--blueLight) !important;
}

#cs_title {
	font-size: 100% !important;
	text-transform: uppercase !important;
}

.cs_block {
	padding: 0 !important;
	border: none !important;
}

input:checked~.sc_toggle:not(.sc_readonly) {
	background: var(--blue) !important;
}

.cs_block:hover:not(.block__expand) {
	background-color: transparent !important;
}

#cs_close_btn {
	background: var(--blue) !important;
	color: white !important;
}

/*To width 960px*/
@media (max-width: 960px) {
	.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 {
		aspect-ratio: 16 / 9;
		width: 100%;
		max-width: 500px;
	}

	#intro {
		background-attachment: scroll;
	}

	#introAppName,
	#introCarCam,
	#introFrom {
		text-shadow: 0.5px 0.5px 0px black;
	}

	#content {
		margin: 0em auto;
		padding: 0 0.2em;
	}

	#content>*:nth-child(odd) .flexNonText {
		order: 1;
		margin-left: 0;
		margin-right: 0;
	}

	#content>*:nth-child(even) .flexNonText {
		order: 1;
		margin-left: 0;
		margin-right: 0;
	}

	#content section img:not(#socialMedia img, #longStoryShortDeviceImage, .noShadow) {
		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 section img.flexNonText:hover {
		transform: none;
	}

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

@media screen and (max-width: 900px) {
	#cm {
		width: 100% !important;
		font-size: 85% !important;
		padding: 0.5em !important;
	}

	#cm_primary_btn,
	#cm_secondary_btn {
		width: fit-content !important;
		float: none !important;
	}

	#cm_secondary_btn {
		margin-left: 1.5em !important;
	}
}

@media screen and (max-width: 800px) {
	nav.main-nav {
		padding-top: 3vw;
		flex-direction: column;   /* vše pod sebe */
		gap: 2vw;
	}

	.nav-links {
		justify-content: center;
	}

	.nav-buttons {
        flex-direction: row;      /* vedle sebe */
        align-items: center;
        justify-content: center;
        gap: 1em;                 /* menší mezera než 3vw, ať se vejdou */
        margin-top: 0.5em;
        flex-wrap: nowrap;        /* nepřelamovat pod sebe */
    }

	#cm {
		font-size: 70% !important;
	}

	#cm_primary_btn,
	#cm_secondary_btn {
		width: 100% !important;
		float: left;
	}

	#cm_secondary_btn {
		margin-left: 0 !important;
	}

	#cs_save__btn {
		margin-top: 1em !important;
	}

	iframe#howToUseYourPhoneAsDashCamYT {
		width: 98vw;
		height: calc(98vw/1.77);
	}
}

@media screen and (max-width: 640px) {
	#youtubeIntro {
		width: 98%;
	}

	/* menší padding = menší výška tlačítek */
    .animated-button {
        padding: 14px 22px;
        border-radius: 12px;       /* mírně menší radius */
        font-size: 0.85rem;        /* menší text */
        letter-spacing: 4px;       /* proporčně menší */
    }

    /* ikona také menší */
    .animated-button svg {
        height: 1.1rem;            /* místo 1.3125rem */
        margin-top: -0.8em;
        margin-bottom: -0.65em;
    }

    /* zachováme tenký okraj animovaných linek */
    .animated-button span:nth-child(1),
    .animated-button span:nth-child(3) {
        height: 1.5px;
    }

    .animated-button span:nth-child(2),
    .animated-button span:nth-child(4) {
        width: 1.5px;
    }
}

@media screen and (max-width: 360px) {
	#youtubeIntro {
		height: 98%;
	}
}