/*
Theme Name: IT Stav Group
Theme URI: https://itstav.cz
Description: Dětské téma Hello Elementor pro IT Stav Group s.r.o. – firemní barvy, písmo Barlow, značka a sekce subdodavatelů.
Author: IT Stav Group
Template: hello-elementor
Version: 2.6.1
Text Domain: itstav
*/

/* ============================================================ tokeny */
:root {
	--its-modr:      #2B3E55;
	--its-tmava:     #1C2836;
	--its-sedomodra: #5E7288;
	--its-oranzova:  #E4601F;
	--its-cihlova:   #B8460F;
	--its-papir:     #F7F6F3;
	--its-linka:     #E0DDD6;

	--its-sirka: 1080px;
	--its-radius: 8px;
	--its-mezera: clamp(46px, 5vw, 76px);
	--its-hlavicka: 78px;
}

/* ============================================================ základ */
html { scroll-behavior: auto; }

body {
	background: var(--its-papir);
	color: var(--its-modr);
	font-family: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-weight: 600;
	line-height: 1.16;
	color: var(--its-modr);
	margin: 0 0 .5em;
	letter-spacing: -.012em;
}
h1 { font-size: clamp(30px, 3.6vw, 41px); }
h2 { font-size: clamp(25px, 3vw, 33px); }
h3 { font-size: clamp(18px, 1.8vw, 21px); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--its-cihlova); text-underline-offset: 3px; }
a:hover { color: var(--its-oranzova); }
img, svg { max-width: 100%; }

.its-obal { width: 100%; max-width: var(--its-sirka); margin-inline: auto; padding-inline: 24px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ============================================================ logo */
.itstav-logo {
	display: inline-flex;
	align-items: flex-end;
	gap: var(--its-logo-gap, 14px);
	text-decoration: none;
	line-height: 1;
	color: var(--its-logo-color, var(--its-modr));
}
.itstav-logo .itstav-znacka { display: block; flex: none; }
.itstav-logo__text { display: flex; flex-direction: column; padding-bottom: var(--its-logo-bottom, 13px); }
.itstav-logo__l1 { font-weight: 700; font-size: var(--its-logo-fs1, 33px); line-height: .78; letter-spacing: -.005em; }
.itstav-logo__l2 { font-weight: 700; font-size: var(--its-logo-fs2, 12px); line-height: 1; margin-top: var(--its-logo-lead, 6px); }

/* ============================================================ hlavička */
.its-hlavicka {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(247, 246, 243, .93);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--its-linka);
}
.its-hlavicka__obal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--its-hlavicka);
	transition: min-height .25s ease;
}
.its-hlavicka__logo { display: inline-flex; }
.its-hlavicka__logo .itstav-logo {
	transform-origin: left center;
	transition: transform .25s ease;
}

/* po odrolování se hlavička i logo o kus stáhnou */
.its-hlavicka.je-zmensena {
	--its-hlavicka: 62px;
	box-shadow: 0 8px 22px -18px rgba(28, 40, 54, .75);
}
.its-hlavicka.je-zmensena .itstav-logo { transform: scale(.8); }
.its-hlavicka.je-zmensena .its-menu a { font-size: 15px; }
.its-menu ul { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.its-menu a {
	display: block;
	padding: 5px 0;
	color: var(--its-modr);
	font-weight: 500;
	font-size: 15.5px;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.its-menu a:hover { color: var(--its-oranzova); }
.its-menu .current-menu-item > a { border-bottom-color: var(--its-oranzova); color: var(--its-modr); }

.its-prepinac {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	border: 1px solid var(--its-linka);
	border-radius: var(--its-radius);
	background: transparent;
	cursor: pointer;
}
.its-prepinac span, .its-prepinac span::before, .its-prepinac span::after {
	content: ''; display: block;
	width: 20px; height: 2px;
	background: var(--its-modr);
	border-radius: 2px;
}
.its-prepinac span::before { transform: translateY(-6px); }
.its-prepinac span::after  { transform: translateY(4px); }

@media (max-width: 860px) {
	.its-prepinac { display: flex; }
	.its-menu {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--its-papir);
		border-bottom: 1px solid var(--its-linka);
		padding: 6px 24px 18px;
	}
	.its-menu.je-otevrene { display: block; }
	.its-menu ul { flex-direction: column; align-items: stretch; gap: 0; }
	.its-menu li { border-top: 1px solid var(--its-linka); }
	.its-menu a { padding: 13px 0; font-size: 17px; border-bottom: 0; }
}

/* ============================================================ oznámení */
.its-oznameni {
	background: var(--its-cihlova);
	color: #fff;
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.45;
	padding-block: 15px;
	box-shadow: 0 6px 18px -12px rgba(28, 40, 54, .55);
}
.its-oznameni__obal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
}
.its-oznameni svg { width: 22px; height: 22px; flex: none; color: #fff; }
.its-oznameni p { margin: 0; }
.its-oznameni strong {
	font-weight: 700;
	white-space: nowrap;
	background: rgba(255, 255, 255, .18);
	border-radius: 5px;
	padding: 2px 8px;
	margin-inline: 1px -2px;
}
.its-oznameni a { color: #fff; text-decoration: underline; }

@media (max-width: 600px) {
	.its-oznameni { font-size: 15px; padding-block: 13px; }
	.its-oznameni__obal { align-items: flex-start; gap: 10px; }
	.its-oznameni svg { margin-top: 2px; width: 20px; height: 20px; }
}

/* ============================================== sekce, vše na střed */
.its-hlavni { text-align: center; }
/* Elementor nastavuje kontejnerům text-align: start – na jednostránce chceme všechno na střed */
.its-hlavni .e-con,
.its-hlavni .e-con-inner,
.its-hlavni .elementor-widget { text-align: center; }

.its-sekce, .its-el-sekce { padding-block: var(--its-mezera); }
.its-sekce--tmava { background: var(--its-tmava); color: #D5DCE4; }
.its-sekce--tmava h2, .its-sekce--tmava h3 { color: var(--its-papir); }
.its-sekce--tmava a { color: #F0B694; }

.its-nadpis-sekce { max-width: 620px; margin: 0 auto 38px; }
.its-nadpis-sekce p { color: var(--its-sedomodra); font-size: 18px; }
.its-sekce--tmava .its-nadpis-sekce p { color: #A9B7C4; }

.its-stitek {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--its-oranzova);
	margin-bottom: 10px;
}
.its-stitek::before {
	content: '';
	width: 20px; height: 3px;
	border-radius: 3px;
	background: var(--its-oranzova);
}

/* ============================================================ hero */
.its-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(18px, 2.2vw, 28px) clamp(20px, 2.2vw, 30px);
	border-bottom: 1px solid var(--its-linka);
}
.its-hero::before {
	content: '';
	position: absolute; inset: 0;
	background-image:
		linear-gradient(to right, var(--its-linka) 1px, transparent 1px),
		linear-gradient(to bottom, var(--its-linka) 1px, transparent 1px);
	background-size: 46px 46px;
	opacity: .45;
	mask-image: radial-gradient(90% 80% at 50% 45%, #000 0%, transparent 74%);
	-webkit-mask-image: radial-gradient(90% 80% at 50% 45%, #000 0%, transparent 74%);
	pointer-events: none;
}
/* hero má text vlevo a kresbu vpravo – zbytek stránky zůstává na střed */
.its-hero, .its-hero .e-con, .its-hero .e-con-inner, .its-hero .elementor-widget { text-align: left; }
.its-hero__obal {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(24px, 3.5vw, 54px);
}
.its-hero__obal > .e-con { --width: auto; min-width: 0; }
.e-con.its-hero__text  { flex: 1 1 380px !important; width: auto !important; }
.e-con.its-hero__obraz { flex: 1 1 560px !important; width: auto !important; }

.its-hero h1 { margin-bottom: .3em; max-width: 19ch; }
.its-hero__perex p { margin-bottom: .8em; }
.its-hero__perex {
	font-size: clamp(16px, 1.3vw, 17.5px);
	color: var(--its-sedomodra);
	max-width: 50ch;
}
.its-hero__akce { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.its-ill { width: 100%; height: auto; display: block; margin-inline: auto; }
.its-ill--profese { max-width: 640px; }

/* ============================================================ tlačítka */
.its-tlacitko {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 25px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15.5px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
a.its-tlacitko--plne, a.its-tlacitko--plne:visited { background: var(--its-oranzova); color: #fff !important; }
a.its-tlacitko--plne:hover, a.its-tlacitko--plne:focus { background: var(--its-cihlova); color: #fff !important; }
a.its-tlacitko--obrys, a.its-tlacitko--obrys:visited { border-color: var(--its-modr); color: var(--its-modr) !important; background: transparent; }
a.its-tlacitko--obrys:hover, a.its-tlacitko--obrys:focus { background: var(--its-modr); color: var(--its-papir) !important; }

/* ================================== tlačítko na další blok */
.its-dalsi {
	display: flex;
	justify-content: center;
	margin-top: clamp(20px, 2.6vw, 32px);
}
.its-dalsi__btn {
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	border: 1.6px solid var(--its-linka);
	border-radius: 999px;
	background: transparent;
	color: var(--its-sedomodra);
	cursor: pointer;
	transition: color .16s ease, border-color .16s ease, transform .16s ease;
}
.its-dalsi__btn:hover {
	background: var(--its-oranzova);
	border-color: var(--its-oranzova);
	color: #fff;
	transform: translateY(3px);
}
.its-dalsi__btn svg { width: 19px; height: 19px; }
.its-sekce--tmava .its-dalsi__btn { border-color: rgba(255, 255, 255, .22); color: #A9B7C4; }
.its-sekce--tmava .its-dalsi__btn:hover { background: var(--its-oranzova); border-color: var(--its-oranzova); color: #fff; }

/* ============================================================ kroky */
.its-kroky {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 20px;
	counter-reset: krok;
}
.its-kroky > .e-con { --width: auto; min-width: 0; }
.e-con.its-krok, .its-krok { flex: 1 1 190px !important; width: auto !important; }
.its-krok {
	background: var(--its-papir);
	border: 1px solid var(--its-linka);
	border-radius: var(--its-radius);
	padding: 24px 20px 26px;
	position: relative;
	text-align: center;
}
.its-sekce--tmava .its-krok { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .11); }
.its-krok > .elementor-widget-html { position: absolute; top: 20px; right: 18px; margin: 0; width: auto; }
.its-krok .elementor-widget { margin-bottom: 0 !important; }
.its-krok .elementor-widget-shortcode { line-height: 0; }
.its-krok__cislo {
	counter-increment: krok;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--its-oranzova);
	line-height: 1;
}
.its-krok__cislo::before { content: '0' counter(krok); }
.its-krok h3 { margin: 0 0 7px; }
.its-krok p { color: var(--its-sedomodra); font-size: 15px; line-height: 1.5; margin: 0; }
.its-sekce--tmava .its-krok p { color: #A9B7C4; }
.its-ikona { width: 54px; height: 54px; margin: 0 auto 16px; display: block; }
.its-sekce--tmava .its-ikona { stroke: #D5DCE4; }

/* ============================================================ subdodavatelé */
/* flex, ne grid – poslední neúplná řada se pak vycentruje jako zbytek stránky */
.its-sub-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}
.its-sub-grid > * { flex: 0 0 calc((100% - 18px) / 2); }
@media (min-width: 720px) { .its-sub-grid > * { flex-basis: calc((100% - 36px) / 3); } }
@media (min-width: 960px) { .its-sub-grid > * { flex-basis: calc((100% - 54px) / 4); } }
@media (max-width: 440px) { .its-sub-grid > * { flex-basis: 100%; } }
.its-sub {
	background: #fff;
	border: 1px solid var(--its-linka);
	border-radius: var(--its-radius);
	padding: 22px 16px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.its-sub__logo { height: 72px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
/* jeden box pro všechna loga – rastr i SVG bez vlastních rozměrů */
.its-sub__logo img {
	width: 100%;
	height: 100%;
	max-width: 165px;
	object-fit: contain;
	object-position: center;
}
.its-sub__zastupce {
	display: flex; align-items: center; justify-content: center;
	width: 54px; height: 54px;
	border-radius: var(--its-radius);
	border: 1px dashed var(--its-linka);
	color: var(--its-sedomodra);
	font-weight: 600; font-size: 17px;
	letter-spacing: .04em;
}
.its-sub__nazev { font-size: 17px; margin: 0 0 4px; line-height: 1.25; }
.its-sub__profese {
	font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--its-oranzova); margin: 0 0 10px;
}
.its-sub__popis { color: var(--its-sedomodra); font-size: 14.5px; line-height: 1.5; }
.its-sub-grid.is-prazdna { opacity: .42; }
.its-sub--placeholder { border-style: dashed; background: transparent; }
.its-sub-vyzva {
	margin: 22px auto 0;
	max-width: 620px;
	padding: 14px 18px;
	border: 1px dashed var(--its-oranzova);
	border-radius: var(--its-radius);
	background: rgba(228, 96, 31, .06);
	font-size: 15px;
}

/* ============================================================ údaje */
.its-udaje {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin: 0;
	text-align: center;
}
.its-udaje > div { background: #fff; border: 1px solid var(--its-linka); border-radius: var(--its-radius); padding: 16px 18px; }
.its-udaje dt {
	font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--its-sedomodra); margin-bottom: 4px;
}
.its-udaje dd { margin: 0; font-size: 16px; font-weight: 500; }

/* ============================================================ patička */
.its-paticka {
	background: var(--its-tmava);
	color: #A9B7C4;
	padding-block: 56px 26px;
	font-size: 15px;
	text-align: left;
	scroll-margin-top: 90px;
}
.its-paticka__mrizka {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(160px, 1fr));
	gap: 40px;
	padding-bottom: 36px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.its-paticka h4 {
	color: var(--its-papir);
	font-size: 13px;
	letter-spacing: .11em;
	text-transform: uppercase;
	margin-bottom: 13px;
}
.its-paticka ul { list-style: none; margin: 0; padding: 0; }
.its-paticka li { margin-bottom: 7px; }
.its-paticka a { color: #A9B7C4; text-decoration: none; }
.its-paticka a:hover { color: var(--its-oranzova); }
.its-paticka .menu a { font-weight: 500; }
.its-paticka__perex { margin-top: 16px; max-width: 38ch; }
.its-paticka__kontakt a { font-size: 16px; font-weight: 600; color: var(--its-papir); }
.its-paticka__kontakt a:hover { color: var(--its-oranzova); }
.its-paticka__ico { margin-top: 12px; font-size: 14px; color: #8798A8; }
.its-paticka__osoba { margin-top: 12px; font-size: 14px; color: #8798A8; }

/* kontakt v patičce – jméno, funkce, pak spojení; bez rámečku, splývá se sloupci */
.its-vizitka__jmeno {
	color: var(--its-papir);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}
.its-vizitka__role {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--its-oranzova);
}
.its-vizitka__spojeni { margin-top: 16px; }
.its-vizitka__spojeni li { margin-bottom: 4px; }
.its-vizitka__spojeni li:last-child { margin-bottom: 0; }
.its-vizitka__spojeni a {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 500;
	color: var(--its-papir);
	overflow-wrap: anywhere;
}
.its-vizitka__spojeni svg { flex: none; width: 15px; height: 15px; color: #8798A8; transition: color .18s ease; }
.its-vizitka__spojeni a:hover, .its-vizitka__spojeni a:hover svg { color: var(--its-oranzova); }
@media (min-width: 900px) {
	/* kontaktní sloupec drží šířku, ať se e-mail nezalamuje */
	.its-paticka__mrizka { grid-template-columns: minmax(0, 1.2fr) minmax(120px, .65fr) minmax(130px, .7fr) 240px; }
}
.its-paticka__pravni { padding-top: 22px; font-size: 13px; line-height: 1.6; color: #7C8C9C; }

/* ============================================================ obsah stránek */
.its-stranka { padding-block: var(--its-mezera); }
.its-zahlavi-stranky { border-bottom: 1px solid var(--its-linka); padding-block: 48px 36px; }
.its-zahlavi-stranky p { color: var(--its-sedomodra); font-size: 18px; }

/* ============================================================ zpět nahoru */
.its-nahoru {
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 60;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 999px;
	background: var(--its-modr);
	color: var(--its-papir);
	cursor: pointer;
	opacity: 0; visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, background-color .16s ease, visibility .2s;
	box-shadow: 0 10px 24px -12px rgba(28, 40, 54, .8);
}
.its-nahoru.je-videt { opacity: 1; visibility: visible; transform: none; }
.its-nahoru:hover { background: var(--its-oranzova); }
.its-nahoru svg { width: 20px; height: 20px; }

/* ============================================================ Elementor */
.e-con { --container-max-width: 1080px; }
.e-con > .e-con-inner { max-width: 1080px; }
.its-hero > .e-con-inner,
.its-el-sekce > .e-con-inner { padding-inline: 24px; }
.elementor-widget-heading .elementor-heading-title { color: inherit; font-family: inherit; }
.its-krok .elementor-heading-title { font-size: 18.5px !important; line-height: 1.22 !important; }
.its-nadpis-sekce .elementor-heading-title { font-size: clamp(25px, 3vw, 33px) !important; line-height: 1.16 !important; }
.its-sekce--tmava .elementor-widget-heading .elementor-heading-title { color: var(--its-papir); }
.elementor-widget-text-editor { color: inherit; }

[id] { scroll-margin-top: calc(var(--its-hlavicka) + 22px); }

/* profese textem – na velkém displeji je nesou popisky přímo v kresbě */
.its-profese-seznam { display: none; }

@media (max-width: 880px) {
	/* na úzkém displeji se hero skládá pod sebe a vrací se na střed */
	.its-hero, .its-hero .e-con, .its-hero .e-con-inner, .its-hero .elementor-widget { text-align: center; }
	.its-hero__obal { justify-content: center; }
	.its-hero h1, .its-hero__perex { max-width: 100%; margin-inline: auto; }
	.its-hero__akce { justify-content: center; }
	.its-hero__obraz { margin-top: 10px; }
}
@media (max-width: 600px) {
	.its-nahoru { right: 14px; bottom: 14px; width: 42px; height: 42px; }
	.its-ill--profese { max-width: 100%; }
	.its-ill--profese text { display: none; }
	.its-profese-seznam {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 4px 12px;
		list-style: none;
		margin: 14px 0 0;
		padding: 0;
		font-size: 14px;
		font-weight: 600;
		color: var(--its-sedomodra);
	}
	.its-profese-seznam li + li::before { content: '·'; margin-right: 12px; color: var(--its-linka); }
}
@media (prefers-reduced-motion: reduce) {
	.its-nahoru, .its-dalsi__btn, .its-hlavicka__obal, .its-hlavicka__logo .itstav-logo { transition: none; }
}