/*
Theme Name: ServisWP
Template: astra
Version: 0.3.0
Text Domain: serviswp
*/

/* ==========================================================================
   Web se staví z artboardů serviswp-design/*.dc.html. Kreslené a mřížkové
   bloky se do stránky vyřezávají i s inline styly, takže si vzhled nesou
   samy. Tenhle soubor dělá jen dvě věci:

     1. sundává z Astry a Elementoru to, co by do návrhu mluvilo
     2. dodává základ, který má návrh ve svém <helmet>

   Nic z toho není dekorace — každé pravidlo tu je proto, že se bez něj web
   měřitelně rozešel s návrhem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Šířka obsahu
   Astra drží obsah v .ast-container široké 1180 px i v režimu page-builder.
   Sekce s plnošířkovým pozadím (tmavý pruh, krémový pruh, zelená poptávka)
   se pak ořezávaly a po stranách svítilo bílé.
   -------------------------------------------------------------------------- */

body.elementor-template-full-width .site-content .ast-container,
body.error404 .site-content .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Šablona 404 nemá třídu elementor-template-full-width a Astra ji vykresluje
   v režimu „separate container" — tedy jako článek v bílé kartě s vlastním
   odsazením. Obsah si rozvržení řídí sám. */
/* Astřino `.error404.ast-separate-container #primary { margin-bottom: 4em }`
   má dvě třídy a id — slabší selektor ho nepřebije a stránka je o 68 px vyšší. */
body.error404.ast-separate-container #primary,
body.error404.ast-separate-container .ast-article-single,
body.error404 #primary {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Srovnání výchozích stylů
   Astra i Elementor přidávají vlastní odsazení. Návrh si je řídí sám, takže
   je nulujeme — jinak se každý widget posune o pár pixelů a přes celou
   stránku z toho jsou desítky.
   -------------------------------------------------------------------------- */

.elementor-widget-text-editor p:last-child,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4 {
	margin-bottom: 0;
}

.elementor-widget-html p {
	margin: 0;
}

.elementor-widget-html h1,
.elementor-widget-html h2,
.elementor-widget-html h3,
.elementor-widget-html h4 {
	margin: 0;
}

.elementor-widget-html ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Návrh má u nadpisů text-wrap: pretty. Není to kosmetika — vyvažuje
   poslední řádek, takže se nadpis láme na jiném slově. Bez toho sedí
   všechny rozměry a stejně to vypadá jinak. */
h1,
h2,
h3,
h4 {
	text-wrap: pretty;
}

/* Astra si sahá na <label> ve formulářích (14 px / 500 / #1e293b). Návrh má
   popisky polí ve vlastních <span>ech a label bere z těla. */
.elementor-widget-html label {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	line-height: inherit;
	margin: 0;
}

/* Návrh nechává pole na výchozím 'normal' prohlížeče; Astra jim vnucuje
   vlastní výšku řádku a textarea pak naroste o 14 px.
   POZOR: margin tu nenulovat. Zaškrtávátko má výchozí margin prohlížeče
   (3px 3px 3px 4px) a návrh s ním počítá — bez něj se celý řádek souhlasu
   posune o 4 px doleva a text se láme jinde. */
.elementor-widget-html input,
.elementor-widget-html textarea {
	line-height: normal;
	box-shadow: none;
}

/* Pruh „Zkontrolovat web zdarma“ odesílá adresu do kontroly, takže odkaz
   z návrhu je na webu <button> v <form>u. Astra tlačítkům vnucuje vlastní
   prostrkání, verzálky a stín — návrh nic z toho nemá a jinak by se text
   na tlačítku roztáhl a rozbil šířku pruhu. */
.elementor-widget-html button {
	letter-spacing: normal;
	text-transform: none;
	line-height: normal;
	box-shadow: none;
	transition: none;
	margin: 0;
	min-height: 0;
}

/* Astra zaškrtávátku nuluje margin. Návrh počítá s výchozím marginem
   prohlížeče (3px 3px 3px 4px) — bez těch 4 px vlevo se řádek se souhlasem
   posune a text se láme jinde. Vlastní margin-top 4px si návrh dává inline. */
.elementor-widget-html input[type="checkbox"],
.elementor-widget-html input[type="radio"] {
	margin: 3px 3px 3px 4px;
}

/* --------------------------------------------------------------------------
   3. Kontejnery
   Elementor kontejnerům flex-grow ani flex-shrink nastavit nejde — jsou to
   nastavení, která ignoruje, a pevný sloupec se pak smrskne (500 px vyšlo
   326,7). Generátor proto sype tyhle třídy.
   -------------------------------------------------------------------------- */

.elementor-element.swp-pevny {
	flex-shrink: 0;
}

.elementor-element.swp-roste {
	flex-grow: 1;
}

/* Textové sloupce mají v návrhu max-width. Při obsahu 1116 px se neuplatnily
   (sloupec vycházel užší), po rozšíření na 1256 px už ano. */
.elementor-element.swp-max-560 {
	max-width: 560px;
}

.elementor-element.swp-max-610 {
	max-width: 610px;
}

/* Kontejner s nabídkou a blok s polem v krémovém pruhu jsou děti řádku se
   space-between. Elementor jim dává width: 100 %, takže by se roztáhly přes
   zbytek řádku. ID přebije Elementorem generované třídy. */
#swp-nav,
#swp-kontrola-akce {
	width: auto;
	flex-grow: 0;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4. Základ z návrhu
   Vyříznuté bloky si nesou třídy z <helmet> artboardu. Kdyby tu nebyly,
   přijdou o styl. Schválně pod .elementor-widget-html, ať se .btn a spol.
   nepotkají s ničím z Astry ani z Elementoru.
   -------------------------------------------------------------------------- */

body {
	--brand: #0B7A4B;
	--brand-dark: #095f3b;
	--brand-soft: #e9f3ef;
}

.elementor-widget-html a {
	color: var(--brand, #0B7A4B);
	text-decoration: none;
	transition: color 0.15s ease;
}

.elementor-widget-html .btn {
	transition: filter 0.15s ease, background-color 0.15s ease;
}

.elementor-widget-html .btn:hover {
	filter: brightness(0.92);
	text-decoration: none;
}

.elementor-widget-html .btn:focus-visible {
	outline: 3px solid #e2580e;
	outline-offset: 2px;
}

.elementor-widget-html .navlink:hover {
	text-decoration: none;
	color: var(--brand, #0B7A4B);
}

.elementor-widget-html .quiet:hover {
	text-decoration: underline;
}

.elementor-widget-html .fld {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 16px;
	color: #14202b;
}

.elementor-widget-html .fld::placeholder {
	color: #949ea8;
}

.elementor-widget-html .fld:focus {
	outline: 2px solid var(--brand, #0B7A4B);
	outline-offset: -1px;
}

.elementor-widget-html .mono {
	font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
}

.elementor-widget-html .radek {
	border-top: 1px solid #e4e8ec;
	padding: 18px 0;
}

/* --------------------------------------------------------------------------
   5. Nabídka
   Elementor vykresluje li pod ul.elementor-nav-menu, ne přímo pod --main.
   -------------------------------------------------------------------------- */

.elementor-nav-menu--main .elementor-nav-menu a {
	padding: 0;
	line-height: 1.6;
}

.elementor-nav-menu--main .elementor-nav-menu a:hover,
.elementor-nav-menu--main .elementor-nav-menu a.elementor-item-active {
	background: transparent;
}

/* Podstránkové artboardy zvýrazňují aktuální položku zeleně a podtržením.
   Main to nemá (úvodní stránka v menu není), takže si nekonkurují.

   Odstín je světlejší než značka: plná #0B7A4B působila v řádku nabídky
   příliš těžce. Text zůstává nad hranicí čitelnosti (4,6:1 na bílé),
   zesvětlené je hlavně podtržení. */
.elementor-nav-menu--main .elementor-nav-menu a.elementor-item-active {
	color: #0F8F58;
	border-bottom: 2px solid #4FBF87;
	padding-bottom: 2px;
}

/* Telefonní tlačítko v hlavičce je vyříznuté z mobilního artboardu a na
   desktopu se nezobrazuje — tam je místo něj „Nezávazná poptávka". */
#b-telefon {
	display: none;
}

/* --------------------------------------------------------------------------
   6a. Tablet i mobil
   Elementor překlápí nabídku do hamburgeru už na 1024 px (nastavení widgetu
   je „dropdown-tablet"). Do té chvíle musí platit i zbytek mobilní hlavičky,
   jinak zůstane hamburger viset uprostřed vedle rozvržení pro desktop.

   Návrh je kreslený na 1400 px: 1336 obsahu a 32 px po stranách. Elementor
   drží obsah přes max-width, ale odsazení má nulové — pod 1400 px se text
   jinak lepí na okraj okna.
   -------------------------------------------------------------------------- */

@media (max-width: 1399px) {
	.e-con-boxed > .e-con-inner {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (max-width: 1023px) {
	/* ---------------------------------------------------------- hlavička
	   Mobil.dc.html má hlavičku jinak než desktop: jeden řádek 64 px,
	   logo bez podtitulku vlevo, telefon a hamburger vpravo. Elementor
	   sám kontejner na mobilu překlopí do sloupce a naskládá logo, menu
	   i tlačítko pod sebe — proto to celé přebíjím. */
	#swp-hlavicka {
		min-height: 64px !important;
		padding: 0 !important;
	}

	#swp-hlavicka > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px !important;
		/* 44px tlačítko + 10 nahoře a dole = návrhových 64 px */
		padding: 10px 16px !important;
	}

	#b-logo a { gap: 9px !important; }

	#b-logo [style*="width: 40px"] {
		width: 34px !important;
		height: 34px !important;
		border-radius: 7px !important;
	}

	#b-logo [style*="width: 40px"] svg { width: 19px; height: 19px; }
	#b-logo [style*="font-size: 24px"] { font-size: 20px !important; }

	/* podtitulek „servis a správa WordPressu" mobilní návrh nemá */
	#b-logo [style*="font-size: 13px"] { display: none !important; }

	/* Logo se nesmí smrsknout — jinak zbude na značku a „ServisWP" se
	   zalomí pod ni. */
	#swp-hlavicka #b-logo {
		flex: 0 0 auto !important;
		width: auto !important;
	}

	#b-logo > a { flex-wrap: nowrap !important; }
	#b-logo span { white-space: nowrap; }

	#swp-nav {
		width: auto !important;
		flex: 0 0 auto !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 8px !important;
		margin-left: auto !important;
	}

	/* Widget s nabídkou si i na mobilu drží šířku skryté vodorovné nabídky
	   (naměřeno 206,8 px) a odsune přepínač od pravého okraje. Oba prvky
	   proto dostanou natvrdo rozměr tlačítka z návrhu. */
	#swp-nav > .elementor-widget-nav-menu,
	#swp-nav > #b-telefon {
		width: 44px !important;
		flex: 0 0 44px !important;
	}

	/* Widget je i se skrytou nabídkou 82 px vysoký (naměřeno) a natahoval
	   hlavičku na 102 px. Rozbalená nabídka je pozicovaná absolutně, takže
	   se výškou přepínače nic neuřízne. */
	#swp-nav > .elementor-widget-nav-menu {
		height: 44px !important;
		position: relative;
	}

	/* Rozbalená nabídka by jinak zdědila 44px šířku přepínače a nebyla by
	   vidět. Záporné right vyrovná 16px odsazení hlavičky, takže panel
	   sedí přesně přes celou šířku displeje. */
	#swp-nav .elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 44px !important;
		right: -16px !important;
		left: auto !important;
		width: 100vw !important;
		max-width: 100vw !important;
		z-index: 99;
	}

	/* Rozbalená nabídka je bílá jako stránka pod ní a splývá s ní. Světle
	   šedý panel s linkami mezi položkami ji oddělí. */
	#swp-nav .elementor-nav-menu--dropdown {
		background: #F1F4F6;
		border-bottom: 1px solid #C9D2D9;
		box-shadow: 0 10px 24px rgba(12, 22, 32, .12);
	}

	#swp-nav .elementor-nav-menu--dropdown .elementor-item {
		border-bottom: 1px solid #DFE5EA;
		color: #14202B;
	}

	#swp-nav .elementor-nav-menu--dropdown li:last-child .elementor-item {
		border-bottom: 0;
	}

	/* aktuální stránka i tady jen jemně, ne tmavou plochou */
	#swp-nav .elementor-nav-menu--dropdown .elementor-item-active {
		background: #E6F4EC;
		color: #0F8F58;
	}

	#swp-nav .elementor-menu-toggle { margin: 0 !important; }

	/* Text „Nezávazná poptávka" se do řádku nevejde; návrh má místo něj
	   zelené tlačítko s telefonem. */
	#b-telefon { display: block !important; }
	#swp-nav > .elementor-widget-button { display: none !important; }

	/* Elementor kreslí přepínač jako šedý čtverec bez rámečku. */
	#swp-nav .elementor-menu-toggle {
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid #C4CDD5;
		border-radius: 6px;
		background: transparent;
		color: #14202B;
	}

	#swp-nav .elementor-menu-toggle svg,
	#swp-nav .elementor-menu-toggle i {
		width: 22px;
		height: 22px;
		font-size: 22px;
		fill: #14202B;
		color: #14202B;
	}
}

/* --------------------------------------------------------------------------
   6. Mobil
   Artboard Mobil.dc.html je 390 px a řeší hlavně obsah stránky. Kontaktní
   lišta ani patička v něm nejsou, takže jejich zúžení je tady.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Inline styly z návrhu přebíjejí běžná pravidla, proto !important.
	   Zásadní je height: návrh má 44px napevno a ve sloupcovém flexu se
	   zapnutým zalamováním se druhá skupina zalomí do dalšího SLOUPCE
	   vpravo, ne pod sebe — stránka pak přetéká o 300 px. */
	#b-lista > div > div {
		height: auto !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 6px !important;
		padding: 10px 18px !important;
		font-size: 14px;
	}

	#b-lista > div > div > div:first-child {
		gap: 16px;
	}

	/* Puntík a věta o havarijní lince patří na jeden řádek. Bez nowrap se
	   dlouhá věta zalomí pod puntík a ten pak visí na samostatné řádce. */
	#b-lista > div > div > div:last-child {
		align-items: flex-start;
		flex-wrap: nowrap !important;
	}

	#b-lista > div > div > div:last-child > span:first-child {
		margin-top: 7px;
		flex-shrink: 0;
	}

	#b-paticka > footer > div {
		padding: 0 18px;
	}

	/* Závěrečný pruh se sovou: na 390 px se vedle sebe nevejde sova,
	   text ani tlačítka, takže se to poskládá pod sebe. */
	#b-paticka > footer > div > div:nth-child(1) {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
		padding: 22px 20px !important;
		margin-bottom: 36px !important;
		text-align: center;
	}

	#b-paticka > footer > div > div:nth-child(1) > img {
		width: 150px !important;
		margin: 0 auto;
	}

	#b-paticka > footer > div > div:nth-child(1) h3 {
		font-size: 22px !important;
	}

	#b-paticka > footer > div > div:nth-child(2) {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	#b-paticka > footer > div > div:nth-child(2) > div:first-child {
		grid-column: 1 / -1;
	}

	#b-paticka > footer > div > div:nth-child(3) {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* Tříslopcová tabulka se na 390 px nevejde a vodorovné posouvání uvnitř
	   rámečku nikdo nenajde. Řádek se proto rozloží pod sebe a ke každé
	   buňce se vypíše popisek sloupce; ten do návrhu doplňuje skript
	   nastroje/serviswp/tabulky-mobil.mjs jako data-hlavicka.

	   POZOR: tohle patří do ručního bloku, ne do generované sekce 9 —
	   ta se při každém běhu mobil-css.mjs přepíše. */
	.elementor-widget-html table.zav,
	.elementor-widget-html table.cmp {
		display: block;
		min-width: 0 !important;
		width: 100% !important;
	}

	/* U tabulky „Co vidíte / Čím to bývá / Co s tím" hlavičku nahradí
	   popisky u buněk. */
	.elementor-widget-html table.zav thead {
		display: none;
	}

	/* U porovnávací tabulky ne — jsou v ní ceny tarifů. Ty se místo toho
	   vypíšou pod sebe nad seznamem funkcí. */
	.elementor-widget-html table.cmp thead,
	.elementor-widget-html table.cmp thead tr {
		display: block;
	}

	.elementor-widget-html table.cmp th {
		display: block;
		width: auto !important;
		padding: 16px 20px !important;
		text-align: left !important;
	}

	.elementor-widget-html table.cmp th:empty {
		display: none;
	}

	.elementor-widget-html table.zav tbody,
	.elementor-widget-html table.cmp tbody {
		display: block;
	}

	.elementor-widget-html table.zav tr,
	.elementor-widget-html table.cmp tr {
		display: block;
		padding: 14px 16px;
		border-bottom: 1px solid #E4E8EC;
	}

	.elementor-widget-html table.zav tr:last-child,
	.elementor-widget-html table.cmp tr:last-child {
		border-bottom: 0;
	}

	.elementor-widget-html table.zav td,
	.elementor-widget-html table.cmp td {
		display: block;
		width: auto !important;
		padding: 0 0 10px;
		border: 0;
	}

	.elementor-widget-html table.zav tr td:last-child,
	.elementor-widget-html table.cmp tr td:last-child {
		padding-bottom: 0;
	}

	.elementor-widget-html table.zav td[data-hlavicka]::before,
	.elementor-widget-html table.cmp td[data-hlavicka]::before {
		content: attr(data-hlavicka);
		display: block;
		margin-bottom: 2px;
		font-family: Archivo, sans-serif;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: #8A96A3;
	}
}

/* --------------------------------------------------------------------------
   7. Tabulky z podstránek
   Artboardy Opravy a Sprava mají ve svém <helmet> vlastní styly tabulek,
   které Main nemá.
   -------------------------------------------------------------------------- */

/* Astra dává tabulce margin-bottom 1.5em (u 17px textu 25,5 px). Návrh
   žádný nemá — na Opravách i Správě z toho byla stránka o 26 px vyšší. */
.elementor-widget-html table {
	margin: 0;
	border: 0;
	border-spacing: 0;
}

/* Astra rámuje buňky ze všech stran. Návrh má jen spodní linku, takže se
   ve sloupcích objevily svislé čáry navíc a řádky narostly o rámeček. */
.elementor-widget-html table th,
.elementor-widget-html table td {
	border: 0;
}

.elementor-widget-html table.zav,
.elementor-widget-html table.cmp {
	width: 100%;
	border-collapse: collapse;
}

.elementor-widget-html table.zav th {
	text-align: left;
	padding: 14px 22px;
	background: #12202e;
	color: #ffffff;
	font-family: 'Archivo', sans-serif;
	font-size: 15px;
	font-weight: 600;
}

.elementor-widget-html table.zav td {
	padding: 18px 22px;
	border-bottom: 1px solid #edf0f3;
	vertical-align: top;
	font-size: 15px;
}

.elementor-widget-html table.cmp th,
.elementor-widget-html table.cmp td {
	text-align: left;
	padding: 14px 20px;
	border-bottom: 1px solid #edf0f3;
	vertical-align: middle;
}

.elementor-widget-html table.cmp td.val,
.elementor-widget-html table.cmp th.val {
	text-align: center;
	width: 190px;
}

.elementor-widget-html table.cmp tr.grp td {
	background: #f1f4f6;
	font-family: 'Archivo', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #2b3945;
	padding: 12px 20px;
	border-bottom: 1px solid #e4e8ec;
}

.elementor-widget-html table.cmp td.mid,
.elementor-widget-html table.cmp th.mid {
	background: var(--brand-soft, #e9f3ef);
}

/* --------------------------------------------------------------------------
   9. Mobil
   Generováno skriptem nastroje/serviswp/mobil-css.mjs z artboardů — seznam
   pevných šířek se tím drží s návrhem. Ručně to needituj, uprav skript.

   Princip: řady se smí zalamovat, mřížky mají jeden sloupec a všechno, co je
   v návrhu širší než 300 px, jde na plnou šířku. Kreslené koláže stojí na
   absolutním pozicování a na úzkém displeji se rozsypou, takže se vynechají.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.elementor-widget-html [style*="max-width: 1400px"] {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.elementor-widget-html [style*="display: flex"] {
		flex-wrap: wrap;
	}

	.elementor-widget-html [style*="display: grid"] {
		grid-template-columns: 1fr !important;
	}

	/* Dvojice tlačítek vedle sebe má v návrhu flex-shrink: 0, takže se
	   nezalomí a přeteče. Ikonky a barevné tečky mají flex-shrink: 0 taky,
	   ale nejsou to flex kontejnery, takže se jich to netýká. */
	.elementor-widget-html [style*="flex-shrink: 0"][style*="display: flex"] {
		flex-shrink: 1 !important;
		max-width: 100% !important;
	}

	.elementor-widget-html [style*="width: 300px"],
	.elementor-widget-html [style*="width: 330px"],
	.elementor-widget-html [style*="width: 350px"],
	.elementor-widget-html [style*="width: 352px"],
	.elementor-widget-html [style*="width: 362px"],
	.elementor-widget-html [style*="width: 380px"],
	.elementor-widget-html [style*="width: 420px"],
	.elementor-widget-html [style*="width: 460px"],
	.elementor-widget-html [style*="width: 470px"],
	.elementor-widget-html [style*="width: 500px"],
	.elementor-widget-html [style*="width: 540px"],
	.elementor-widget-html [style*="width: 560px"],
	.elementor-widget-html [style*="width: 590px"],
	.elementor-widget-html [style*="width: 610px"],
	.elementor-widget-html [style*="width: 620px"],
	.elementor-widget-html [style*="width: 700px"],
	.elementor-widget-html [style*="width: 720px"],
	.elementor-widget-html [style*="width: 760px"],
	.elementor-widget-html [style*="width: 820px"],
	.elementor-widget-html [style*="width: 1400px"],
	.elementor-widget-html [style*="width: 1440px"] {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: auto !important;
	}

	.elementor-widget-html [style*="height: 360px"],
	.elementor-widget-html [style*="height: 404px"],
	.elementor-widget-html [style*="height: 468px"],
	.elementor-widget-html [style*="height: 478px"],
	.elementor-widget-html [style*="height: 570px"] {
		display: none !important;
	}

	/* tabulky se posouvají uvnitř svého rámečku, ne přes celou stránku */
	.elementor-widget-html [style*="border-radius: 8px; overflow: hidden"] {
		overflow-x: auto !important;
	}

	/* blok s polem v krémovém pruhu má na desktopu pevnou šířku podle obsahu */
	#swp-kontrola-akce {
		width: 100% !important;
		flex-shrink: 1 !important;
	}
}