/*
 * Vlastní styly webu JKV. Bootstrap se upravuje jen přes CSS proměnné (ROZHODNUTI.md, R5).
 * Firemní barvy podle ROZHODNUTI.md, R20.
 */

:root {
	--jkv-purple: #be35dd;
	--jkv-purple-rgb: 190, 53, 221;
	--jkv-yellow: #fffa9c;
	--jkv-purple-dark: #982bb1; /* tmavší fialová pro najetí myší (ROZHODNUTI.md, R25) */
	--jkv-dark: #212529;

	--bs-primary: var(--jkv-purple);
	--bs-primary-rgb: var(--jkv-purple-rgb);
	--bs-link-color: var(--jkv-purple);
	--bs-link-color-rgb: var(--jkv-purple-rgb);
	--bs-link-hover-color: var(--jkv-dark);
	--bs-link-hover-color-rgb: 33, 37, 41;
	--bs-focus-ring-color: rgba(var(--jkv-purple-rgb), .35);
}

.btn-primary {
	--bs-btn-bg: var(--jkv-purple);
	--bs-btn-border-color: var(--jkv-purple);
	--bs-btn-hover-bg: #a22dbc;
	--bs-btn-hover-border-color: #a22dbc;
	--bs-btn-active-bg: #982bb1;
	--bs-btn-active-border-color: #982bb1;
	--bs-btn-disabled-bg: var(--jkv-purple);
	--bs-btn-disabled-border-color: var(--jkv-purple);
}

/* Telefon bez podtržení; při najetí a fokusu se podtržení vrací, aby bylo zřejmé, že jde o odkaz */
a[href^="tel:"] {
	text-decoration: none;
}

a[href^="tel:"]:hover,
a[href^="tel:"]:focus-visible {
	text-decoration: underline;
}

/* Odkaz „Přeskočit na obsah“ */
.skip-link {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 1080;
	padding: .5rem 1rem;
	background: #fff;
	border: 2px solid var(--jkv-purple);
}

/* Hlavička – horní žlutý pruh (navazuje na pozadí loga) a pod ním fialový pruh s menu */
.site-header {
	background: var(--jkv-yellow);
}

.site-header-top {
	padding-block: .75rem;
}

/* logo (odkaz na úvodní stránku) a vedle něj název firmy a motto (bez odkazu) */
.site-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.site-header .navbar-brand {
	margin: 0;
	padding: 0;
}

.site-logo {
	width: auto;
	height: 3.5rem;
}

.site-brand-text {
	display: flex;
	flex-direction: column;
}

.site-name {
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--jkv-dark);
}

/* motto pod názvem firmy – menší písmo, kurzíva */
.site-tagline {
	margin-top: .15rem;
	font-size: .8rem;
	font-style: italic;
	line-height: 1.3;
	color: var(--jkv-dark);
}

/* Menu – fialový pruh, bílý text, položka pod myší a aktivní položka tmavší fialovou */
.site-nav {
	--bs-navbar-padding-y: 0;
	--bs-navbar-color: #fff;
	--bs-navbar-hover-color: #fff;
	--bs-navbar-active-color: #fff;
	background: var(--jkv-purple);
}

.site-nav .navbar-toggler {
	margin-block: .5rem;
	border-color: rgba(255, 255, 255, .6);
}

.site-nav .nav-link {
	padding: .75rem 1rem;
	font-weight: 600;
	color: #fff;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible,
.site-nav .nav-link.show {
	background: var(--jkv-purple-dark);
	color: #fff;
}

/* aktuální stránka: tmavší podklad a žlutá linka dole */
.site-nav .nav-link.active {
	background: var(--jkv-purple-dark);
	box-shadow: inset 0 -3px 0 var(--jkv-yellow);
}

/* v rozbaleném menu na mobilu a tabletu má i „IT služby“ (tlačítko) celou šířku jako ostatní položky */
@media (max-width: 991.98px) {
	.site-nav .dropdown-toggle {
		width: 100%;
		text-align: start;
	}
}

/* podmenu beze změny: bílé, aktivní položka fialová */
.site-nav .dropdown-menu {
	--bs-dropdown-link-active-bg: var(--jkv-purple);
	--bs-dropdown-link-active-color: #fff;
	margin-top: 0;
	border-top: 3px solid var(--jkv-purple);
}

@media (max-width: 575.98px) {
	.site-logo {
		height: 2.75rem;
	}

	.site-name {
		font-size: 1rem;
	}

	/* na mobilu by motto zabralo několik řádků záhlaví */
	.site-tagline {
		display: none;
	}
}

/* Obsah */
.site-main {
	padding-block: 2rem 3rem;
}

/* Zápatí */
.site-footer {
	padding-block: 2rem;
	background: var(--jkv-dark);
	border-top: 4px solid var(--jkv-purple);
	color: #fff;
}

.site-footer a {
	color: var(--jkv-yellow);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: #fff;
}

/* odkaz na kontaktní formulář bez podtržení (jako telefon); při najetí se podtržení vrací */
.site-footer-write {
	text-decoration: none;
}

.site-footer-write:hover,
.site-footer-write:focus-visible {
	text-decoration: underline;
}

.site-footer-contact {
	margin-bottom: 0;
}

.site-footer-copyright {
	margin-bottom: 0; /* jen spodní okraj, horní je mezera mezi sloupci na mobilu */
	font-size: .875rem;
	color: rgba(255, 255, 255, .75);
}

/* Text stránek */
.page-text {
	max-width: 50rem;
}

.page-text .card-body > :last-child {
	margin-bottom: 0;
}

/* Úvodní stránka – nadpis */
.home-intro {
	margin-bottom: 1.5rem;
}

.home-intro h1 {
	margin-bottom: .25rem;
}

/* Úvodní stránka – slider (ROZHODNUTI.md, R24) */
.home-carousel {
	margin-bottom: 3rem;
	overflow: hidden;
	border-radius: .5rem;
}

.home-carousel .carousel-item {
	position: relative;
	aspect-ratio: 2340 / 1000;
	min-height: 20rem;
}

/* snímky bez fotografie: neutrální plocha ve firemních barvách */
.home-slide-plain {
	background:
		linear-gradient(135deg, rgba(255, 250, 156, .35) 0 18%, transparent 18% 100%),
		var(--jkv-purple);
}

.home-slide-photo {
	background: #fff;
}

.home-slide-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
}

.home-slide-caption {
	position: absolute;
	left: 4.5rem;
	bottom: 3rem;
	max-width: min(32rem, calc(100% - 9rem));
	padding: 1.25rem 1.5rem;
	background: rgba(33, 37, 41, .85);
	border-left: 4px solid var(--jkv-yellow);
	color: #fff;
}

.home-slide-title {
	font-size: 1.5rem;
	margin-bottom: .5rem;
}

.home-slide-caption p {
	margin-bottom: .75rem;
}

.home-carousel .carousel-control-prev,
.home-carousel .carousel-control-next {
	width: 3.5rem;
}

.home-carousel .carousel-control-prev-icon,
.home-carousel .carousel-control-next-icon {
	padding: 1.1rem;
	background-color: rgba(33, 37, 41, .6);
	background-size: 55%;
	border-radius: 50%;
}

.home-carousel .carousel-indicators {
	margin-bottom: .75rem;
}

@media (max-width: 575.98px) {
	.home-carousel .carousel-item {
		min-height: 24rem;
	}

	.home-slide-caption {
		left: 1rem;
		right: 1rem;
		bottom: 2.5rem;
		max-width: none;
		padding: 1rem;
	}

	.home-slide-title {
		font-size: 1.25rem;
	}

	/* šipky by na úzkém displeji zakrývaly text, ovládání zůstává přes indikátory a posun prstem */
	.home-carousel .carousel-control-prev,
	.home-carousel .carousel-control-next {
		top: 0;
		bottom: auto;
		height: 4rem;
	}
}

/* Karty (upoutávky, aktuality) */
.teaser-card,
.news-card {
	border-top: 4px solid var(--jkv-purple);
}

/* samostatné aktuality – stejný blok jako produkty, žlutá místo fialové */
.news-card-yellow {
	border-top-color: var(--jkv-yellow);
}

.news-card-yellow .btn-primary {
	--bs-btn-color: var(--jkv-dark);
	--bs-btn-bg: var(--jkv-yellow);
	--bs-btn-border-color: var(--jkv-dark);
	--bs-btn-hover-color: var(--jkv-yellow);
	--bs-btn-hover-bg: var(--jkv-dark);
	--bs-btn-hover-border-color: var(--jkv-dark);
	--bs-btn-active-color: var(--jkv-yellow);
	--bs-btn-active-bg: var(--jkv-dark);
	--bs-btn-active-border-color: var(--jkv-dark);
}

/* Akční nabídky – karty letáků stejné jako produkty v Aktualitách */
.leaflet-link {
	display: block;
}

.leaflet-image {
	width: 100%;
	height: 22rem;
	padding: 1rem;
	object-fit: contain;
	background: #fff;
	transition: opacity .15s ease-in-out;
}

.leaflet-link:hover .leaflet-image {
	opacity: .85;
}

/* webová stránka letáku – produkty jako karty (ROZHODNUTI.md, R47) */
.leaflet-back {
	margin-bottom: .5rem;
}

.leaflet-intro {
	margin-bottom: 1.5rem;
}

.leaflet-product .card-img-top {
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #fff;
}

.leaflet-product-features {
	padding-left: 1.1rem;
	font-size: .9rem;
}

.leaflet-product-price {
	padding-top: .75rem;
	border-top: 1px solid var(--bs-border-color);
}

/* cena ve firemní fialové, velkým tučným písmem (kontrast vyhovuje jako u nadpisů bloků) */
.leaflet-product-price-value {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--jkv-purple);
}

/* nadpis bloku (Akční nabídky, Kontakt) – velký tučný text ve firemní fialové (u velkého písma kontrast vyhovuje) */
.block-title {
	margin-bottom: .25rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--jkv-purple);
}

/* podnadpis bloku (např. platnost akce) – pod nadpisem, menší a klidnější */
.block-subtitle {
	margin-bottom: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--jkv-dark);
}

/* Aktuality */
.news-article,
.news-section {
	margin-bottom: 3rem;
}

.news-gallery {
	margin-bottom: 1rem;
}

.news-gallery img {
	width: 100%;
	height: 100%;
	max-height: 14rem;
	object-fit: contain;
}

/* obrázky vedle textu – o 25 % menší než v galerii */
.news-side-images img {
	display: block;
	width: 75%;
	margin-left: auto;
}

/* na mobilu je obrázek pod textem, na střed a v rozumné velikosti */
@media (max-width: 767.98px) {
	.news-side-images img {
		width: auto;
		max-width: min(100%, 16rem);
		margin-inline: auto;
	}
}

.news-card-image {
	width: 100%;
	height: 12rem;
	padding: 1rem;
	object-fit: contain;
	background: #fff;
}

/* Kontakt */
.contact-info {
	font-size: 1.125rem;
}

.contact-map {
	margin: 0;
	padding: 1rem 1rem 0;
}

.contact-map a {
	display: block;
	transition: opacity .15s ease-in-out;
}

.contact-map a:hover {
	opacity: .85;
}

/* povinné uvedení autorů mapových podkladů */
.contact-map-attribution {
	margin-top: .25rem;
	font-size: .75rem;
	text-align: right;
	color: var(--bs-secondary-color);
}

/* Dodávka a správa Money S3 */
.money-intro,
.money-packages {
	margin-bottom: 2rem;
}

.money-official {
	margin-bottom: 2.5rem;
}

.money-table {
	max-width: 40rem;
}

.money-table td {
	text-align: right;
}

/* Kontaktní formulář */
.contact-form-card {
	margin-top: 1.5rem;
	scroll-margin-top: 1rem;
}

.contact-form {
	max-width: 56rem;
	margin-inline: auto;
}

.contact-gdpr {
	max-width: 56rem;
	margin-inline: auto;
}

/* pole-past pro roboty – mimo obrazovku (ne display:none, to by část robotů poznala) */
.contact-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* JKV-Help */
.help-logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.help-logos img:first-child {
	max-width: min(100%, 18rem);
}