/*** ============= ***
Tento dokument obsahuje css pre index.php, kurzy.php, kontakt.php znacky.php
*** ============= ***/

.article {display: flex; flex-direction: column; gap: 25px; padding: 75px 0; margin: auto; max-width: 692px;}
.article h2 {display: block; text-align: center; padding: 15px;}
		h2 span {
			display: block;
			font-size: 14px;
			font-weight: 500;
			margin-top: 5px;
		}
.article h3 {display: block; padding: 0 25px;}
.article p {padding: 0 25px;}
.article ul {display: block; padding: 0 50px;}
.article li {margin-bottom: 10px;}

.article-link {display: flex; flex-direction: column; gap: 10px; max-width: max-content; margin: auto;}
	.article-link span {display: block; text-align: center; font-weight: 600;}
		.article-link a {
			display: inline-block;
			min-width: 100px;
			font-weight: 600;
			text-align: center;
			padding: 10px 15px;
			border-radius: 5px;
			background: #e1e3e5;
			color: #39464a;
		}
		.article-link a svg {vertical-align: middle; margin-left: 15px;}
		.article-link a:hover {background: #39464a; color: #fff;}
		.article-link a:hover svg {transform: scale(1.2); transition: transform 0.2s;}

/*** dopravné značky ***/


.znacky-btns {max-width: 872px; display: none; flex-wrap: wrap; justify-content: center; padding: 45px 0 0 0; margin: auto;}
.znacky-btns.open {display: flex;}

.znacky-btns button {
	width: 200px;
	height: 60px;
	padding: 8px 15px;
	margin: 5px;
	border: 0;
	color: #0a1e25;
	font-weight: 600;
	background: #e1e3e5;
	cursor: pointer;
	border-radius: 5px;
}
#znacky-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 8px 15px;
	margin: 75px auto 0 auto;
	border: solid 1px #dadee3;
	font-weight: 600; color: #0a1e25;
	border-radius: 5px;
	cursor: pointer;
}
#znacky-menu svg {transform: rotate(270deg) scale(1);}
#znacky-menu:hover {background: #39464a; color: #fff; border-color: #39464a;}
#znacky-menu:hover svg {fill: #fff; transform: rotate(270deg) scale(1.35); transition: transform 0.2s;}

	.znacky-btns button:hover {background: #39464a; color: #fff;}
	.znacky-btns button.active {background: #39464a; color: #fff; border-color: #39464a;}

.znacky {display: none; padding: 45px 0 75px 0; margin: auto;}
.znacky h2 {display: block; text-align: center; padding: 15px;}
.znacky-category {display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: auto; max-width: 732px;}

.sign 		{display: block; position: relative; text-align: center;}
.sign img	{width: 22vw; max-width: 130px; height: auto; aspect-ratio: 1/1;}
.sign b 	{display: block;}

	.sign p {
	  display: none;
	  position: absolute;
	  bottom: 75%;
	  left: 50%;
	  transform: translateX(-50%);
	  background: #fff;
	  color: #0a1e25;
	  padding: 8px 12px;
	  border-radius: 6px;
	  font-size: 14px;
	  white-space: normal;
	  width: 130px;
	  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
	  z-index: 10;
	}

	/* šípka */
	.sign p::after {
	  content: '';
	  position: absolute;
	  top: 100%;
	  left: 50%;
	  transform: translateX(-50%);
	  border-width: 6px;
	  border-style: solid;
	  border-color: #fff transparent transparent transparent;
	}

.sign:hover img {transform: scale(1.1); transition: transform 0.2s;}
.sign:hover p {display: block;}

/*** Hlavné odkazy hore na hlavnmej stránke ***/

.main-links {
	display: flex;
	flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
	gap: 25px;
	margin: 0 auto;
    padding: 75px 0;
}

.main-links a {display: block; color: #0a1e25;}

	.info-links {
		display: block;
		border-radius: 5px;
		width: 120px;
		height: auto;
		border: 1px solid #cfd4d6;
		padding: 10px 10px;
		border-radius: 10px;
		text-align: center;
		font-weight: 500;
	}
	
	.info-links img 	{display: block; margin: auto; padding: 10px 0; width: 35px; height: 35px; aspect-ratio: 1/1;}
	.info-links span 	{display: block; width: 120px; height: 70px;}
	.info-links svg 	{display: block; margin: auto; width: 100%; height: 35px; fill: #39464a; background: #e1e3e5; border-radius: 5px;}

	.info-links:hover svg {fill: #fff; background: #39464a;}
	.info-links:hover img {transform: scale(1.35); transition: transform 0.2s;}

/*** repas ***/

#repas {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	justify-content: center;
    align-content: center;
    align-items: center;
	max-width: 726px;
	margin: auto;
	border: 1px solid #cfd4d6;
	border-radius: 5px;
	color: #0a1e25;
}

#repas img 		{display: block; margin: 10px 15px; aspect-ratio: 4/5;}
#repas h2 		{display: block; margin: 10px 0; padding: 5px 15px 5px 5px; border-right: 1px solid #cfd4d6;}
#repas span 	{display: block; font-size: 14px; font-weight: 500;}
#repas p 		{display: block; margin: 0 15px; padding: 10px;}

#repas button {display: block; width: 132px; cursor: pointer; border-radius: 5px; border: 0; background: #e1e3e5; padding: 10px 15px; margin: 15px; color: #39464a; font-weight: 600;}
#repas button:hover {background: #39464a; color: #fff;}

	#repas ul 	 	{display: none; list-style: none; margin: auto; padding: 15px 0;}
	#repas ul li 	{display: flex; align-items: center; line-height: 20px; padding: 10px;}
	#repas ul li b 	{padding: 0 10px 0 0;}

/*** zľavy na hlavnej stránke ***/

.main-sales {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;	
	align-content: center;
	align-items: center;
	color: #0a1e25;
	gap: 15px;
	margin: 0 auto;
	padding: 75px 0;
}

	.main-sales h2 		{display: block;}
	.main-sales ul 		{display: block; max-width: 730px; padding: 0 15px;}
	.main-sales ul li	{display: block; background: #0c813b; color: #fff; border-radius: 5px; padding: 10px 10px; margin: 10px 0;}

	#no-sales {display: none; margin: auto;}

/*** kurzy a testy ***/

.kurzy-testy {
		max-width: 800px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		gap: 25px; margin: 0 auto; padding: 75px 0 0 0;
	}

	.long-link {
		width: 337px;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center; 
		background-size: 100%;
		color: #fff;
		font-weight: 700;
		padding: 15px 10px;
		border-radius: 5px;
	}
		.long-link h2 	{max-width: 300px; line-height: 20px; font-size: 18px;}
		.long-link span {display: block; font-weight: 400; font-size: 14px;}
		.long-link svg 	{display: block; transform: rotate(180deg) scale(1); padding: 10px; width: auto; height: 35px; fill: #fff; border-radius: 5px;}
		.long-link:hover svg {fill: #fff; transform: scale(1.5) rotate(180deg); transition: transform 0.2s;}
		.long-link:hover  {background-size: 110%; transition: background-size 0.3s ease-in-out;}
		
	/*** prihláška na kurz zobrazenie pre malé zariadenia ***/
	
	#kurz-small   {background: url("../img/prihlaska.webp"); background-size: cover; box-shadow: 2px 2px 5px #00000005; padding: 15px; border-radius: 5px;}
	#kurz-small p {display: block; color: #fff; font-weight: 700; font-size: 18px; text-align: center; padding: 5px 0 15px 0; margin-bottom: 10px;}
	#kurz-small b {font-size: 16px; font-weight: 700; color: #fff;}
	
	#kurz-small div {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: center;
		max-width: 200px; font-size: 14px; margin: auto; padding: 5px 15px;
	}
	
		#kurz-small a {
			display: block;    
			max-width: 180px;
			margin: 15px auto;
			background: #c20d04;
			background: linear-gradient(180deg, rgba(194, 13, 4, 1) 0%, rgba(143, 10, 10, 1) 100%);
			text-align: center;
			line-height: 25px;
			font-weight: 500;
			padding: 10px 15px;
			border-radius: 5px;
			color: #fff;
		}

/*** kontakt stránka ***/

#kontakt {
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    max-width: max-content;
    margin: 0 auto;
    padding: 75px 0;
    gap: 75px;
}
#kontakt iframe {display: inline-block; width: 570px; height: 470px; background: #fff; border-radius: 5px; padding: 10px;}
#kontakt-info 	{display: inline-block; max-width: 300px; padding: 0 15px;}

.kontakt-mapa 	{text-align: center;}
.kontakt-mapa p {display: block; text-align: left; max-width: 450px; margin: 25px auto; padding: 15px;}

	.kontakt-box 		{display: inline-block; width: 300px; margin: 15px 0;}
	.kontakt-box h3		{padding: 5px 0;}
	.kontakt-box p {
			display: flex;
			line-height: 20px;
			flex-direction: row;
			flex-wrap: wrap;
			align-content: center;
			justify-content: space-between;
			align-items: center;
		}.kontakt-box span 	{}
	
		.kontakt-box a {
			display: inline-block;
			min-width: 100px;
			font-weight: 600;
			text-align: center;
			padding: 10px 15px;
			margin: 5px 5px;
			border-radius: 5px;
			background: #e1e3e5;
			color: #39464a;
		}
		.kontakt-box a svg {vertical-align: middle; margin-left: 15px;}
		.kontakt-box a:hover {background: #39464a; color: #fff;}
		.kontakt-box a:hover svg {transform: scale(1.2); transition: transform 0.2s;}
	
	#otvaracie-hodiny p {margin: 5px 0; padding: 5px 10px; background: #e1e3e5; border-radius: 5px;}
	
@media screen and (max-width: 768px) {
	#repas 		 {max-width: 440px; justify-content: center;}
	#repas h2	 {border: 0;}
	#repas p 	 {border-top: 1px solid #cfd4d6; text-align: center;}
	#repas ul li { border-top: 1px solid #cfd4d6;}
	#kontakt 		{gap: 25px;}
	#kontakt iframe {width: 300px; height: 300px;}
	#priebeh-kurzu {max-width: 350px; flex-direction: column; align-content: center;}
	#priebeh-kurzu h2 {text-align: center;}
}
@media screen and (max-width: 692px) {
	.main-links {max-width: 340px;}
}

/***
nastavenie východzej hodnoty pre zahajenie kurzu 
platí pre veľké obrazovky (tam je zahájenie kurzu v hlavičke) 
a zobrazí sa pod 632px display.
***/ .show-on-small {display: none;}

@media screen and (max-width: 632px) {
	.kurzy-testy {flex-direction: column; margin: 0 15px;}
	.show-on-small {display: block;}
}
@media screen and (max-width: 480px) {
	#repas {max-width: 300px;}
	#priebeh-kurzu {max-width: 300px;}
	.long-link {width: 300px;}
	.znacky-category {gap: 5px;}
}

@media screen and (max-width: 360px) {
	.long-link {width: auto;}
	#priebeh-kurzu {max-width: auto;}
}