/**
 * Vital Breath – štýly pre verejnú časť webu.
 * Načítava sa cez vb_front_styles() vo functions.php.
 */

/* -----------------------------------------------------------------------
 * Tlačidlo v karte diagnózy (.vb-card-btn)
 *
 * Pôvodne to bolo nenápadné textové tlačidlo (trieda .text-btn). Cieľová
 * skupina je aj staršia generácia, preto je teraz plnej šírky, modré a
 * dostatočne veľké, aby sa naň dalo pohodlne trafiť aj na dotyku.
 * -------------------------------------------------------------------- */
.vb-card-btn {
	width: 100%;
}

.vb-card-btn .elementor-button {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 16px 22px;
	border: 0;
	border-radius: 8px;
	background-color: var(--theme-palette-color-1, #006bcc);
	color: var(--theme-palette-color-6, #fff);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: background-color .18s ease;
}

/* Aj obyčajný :focus – ten nastane po kliknutí myšou a po klepnutí prstom.
 * Bez neho by Elementor kit tlačidlo prefarbil na svoju svetlejšiu modrú. */
.vb-card-btn .elementor-button:hover,
.vb-card-btn .elementor-button:focus,
.vb-card-btn .elementor-button:focus-visible {
	background-color: var(--theme-palette-color-4, #0a4b89);
	color: var(--theme-palette-color-6, #fff);
}

/* viditeľný focus pre ovládanie klávesnicou */
.vb-card-btn .elementor-button:focus-visible {
	outline: 3px solid var(--theme-palette-color-4, #0a4b89);
	outline-offset: 3px;
}

/* šípka v tlačidle: veľkosť rieši jednotne vb-icons.css (1.2em = cca 20 px),
 * tu ju len necháme bielu ako text (img fallback pre staré obrázkové ikony) */
.vb-card-btn .elementor-button img {
	width: 1.2em;
	height: 1.2em;
	filter: brightness(0) invert(1);
}

/* na mobile o kúsok kompaktnejšie, ale stále dobre trafiteľné */
@media (max-width: 767px) {
	.vb-card-btn .elementor-button {
		padding: 15px 18px;
		font-size: 16px;
	}
}

/* -----------------------------------------------------------------------
 * Všeobecné FAQ na domovskej stránke (.vb-faq-general)
 *
 * Otázky sú <h3>, aby na stránke sedelo poradie nadpisov (h2 „Časté otázky“
 * → h3 otázky). Veľkosť písma na tomto webe určuje téma, nie Elementor,
 * takže h3 by inak vyšlo 26 px – zmenšujeme ho na veľkosť, akú majú otázky
 * na samostatnej stránke FAQ.
 * -------------------------------------------------------------------- */
.vb-faq-general .elementor-tab-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.vb-faq-general .elementor-tab-title {
		font-size: 17px;
	}
}

/* -----------------------------------------------------------------------
 * Odkaz „Viac o programe“ v karte cenníka (.vb-viac-link)
 *
 * Karta už má dve tlačidlá cez celú šírku (zakúpiť + video). Tretie by
 * bolo priveľa, takže je to nenápadný textový odkaz – ale s dostatočnou
 * výškou, aby sa naň dalo trafiť aj prstom.
 * -------------------------------------------------------------------- */
.vb-viac-link .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--theme-palette-color-1, #006bcc);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

/* :focus musí byť v zozname tiež – po klepnutí prstom by z textového odkazu
 * inak ostal plný modrý blok s bielym textom (pozadie dáva Elementor kit). */
.vb-viac-link .elementor-button:hover,
.vb-viac-link .elementor-button:focus,
.vb-viac-link .elementor-button:focus-visible {
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: var(--theme-palette-color-4, #0a4b89);
	text-decoration: underline;
}

.vb-viac-link .elementor-button:focus-visible {
	outline: 2px solid var(--theme-palette-color-4, #0a4b89);
	outline-offset: 2px;
}

.vb-viac-link .elementor-button img {
	width: 1em;
	height: 1em;
}

/* -----------------------------------------------------------------------
 * Krátke doplnkové programy na úvodnej stránke (#kratke-programy)
 *
 * Sekcia diagnóz je trojstĺpcová mriežka. Tento blok má len dve karty,
 * takže by inak ostala vpravo diera. Necháme im rovnakú šírku ako majú
 * karty vyššie – (100 % − dve medzery) / 3 – a celý pár vycentrujeme.
 * -------------------------------------------------------------------- */
@media (min-width: 1025px) {
	#kratke-programy {
		grid-template-columns: repeat(2, calc((100% - 60px) / 3));
		justify-content: center;
	}
}

/* =======================================================================
 * Jednotné správanie prvkov na celom webe (doplnené 9. 9. 2026)
 * ==================================================================== */

/* -----------------------------------------------------------------------
 * 1) Žiadne nadskakovanie tlačidiel pri prejdení myšou
 *
 * Blocksy má pri hoveri predvolene posun nahor (--theme-button-transform:
 * translate3d(0,-3px,0)). Vypíname ho globálne aj pre Elementor tlačidlá.
 * -------------------------------------------------------------------- */
:root {
	--theme-button-transform: none;
}

.ct-button:hover,
.ct-button-ghost:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:focus-visible,
.elementor-button:active,
.elementor-button-wrapper:hover .elementor-button,
.elementor-widget-button:hover .elementor-button,
.elementor-button.elementor-animation-grow:hover,
.elementor-button.elementor-animation-float:hover,
.elementor-button.elementor-animation-shrink:hover,
.elementor-button.elementor-animation-sink:hover,
.vb-card-btn:hover .elementor-button,
.vb-viac-link:hover .elementor-button,
.mepr-submit:hover,
.mepr-button:hover,
.btn:hover {
	transform: none !important;
}

/* -----------------------------------------------------------------------
 * 2) Šípka v tlačidle má všade rovnakú veľkosť a sedí na optickom strede
 *
 * Veľkosť ikony v tlačidlách určuje jednotne vb-icons.css (1.2em z písma
 * tlačidla, t. j. cca 19–20 px). Tu riešime už len zarovnanie.
 *
 * Zarovnanie: Elementor balí ikonu do .elementor-button-icon. V tlačidle
 * s display:flex je z toho obalu položka flexu vysoká na celý riadok textu
 * a SVG v nej sedí na účiare, takže šípka vyjde asi 4 px nad stred textu.
 * Nech si obal ikonu vycentruje sám. Týka sa len našich flexových tlačidiel –
 * inline-block tlačidlá (napr. „Zakúpte si program online“) sú správne už teraz
 * a zámerne sa ich nedotýkame.
 * -------------------------------------------------------------------- */
.vb-card-btn .elementor-button .elementor-button-icon,
.vb-viac-link .elementor-button .elementor-button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vb-card-btn .elementor-button .elementor-button-icon svg,
.vb-viac-link .elementor-button .elementor-button-icon svg {
	display: block;
	/* téma dáva vnoreným SVG margin-bottom -2px (posun na účiaru).
	 * Pri centrovaní flexom sa počíta okrajový box, takže by to šípku
	 * zhodilo o 1 px nadol. Vo flexe ten posun nepotrebujeme. */
	margin: 0;
}

/* -----------------------------------------------------------------------
 * 3) Tlačidlo „Pozrite si prvé video zadarmo“ cez celú šírku karty
 *
 * Widget je roztiahnutý, ale samotný odkaz je inline-block, takže
 * v širších kartách (posledný riadok cenníka) končil v strede.
 * -------------------------------------------------------------------- */
.btn-outline .elementor-button,
.vb-card-btn .elementor-button {
	width: 100%;
	justify-content: center;
}

/* -----------------------------------------------------------------------
 * 4) Nikde ostré rohy – médiá majú rovnaké zaoblenie ako zvyšok webu
 *
 * Premennú --vb-radius (10 px) definuje vb-memberpress.css a je to zaoblenie,
 * ktoré web používa najčastejšie. Tu ju zámerne nepredefinujeme, len uvádzame
 * rovnakú náhradnú hodnotu pre prípad, že by sa ten súbor nenačítal.
 * -------------------------------------------------------------------- */

.elementor-widget-image img,
.elementor-widget-theme-post-featured-image img,
.elementor-image-gallery img,
.elementor-widget-gallery img,
.e-gallery-image,
.elementor-widget-video .elementor-wrapper,
.elementor-widget-video .elementor-custom-embed-image-overlay,
.elementor-widget-video .elementor-custom-embed-image-overlay img,
.elementor-widget-video iframe,
.elementor-widget-video video,
.vb-video,
.vb-video__prehravac,
.wp-block-video video,
.wp-block-image img,
video {
	border-radius: var(--vb-radius, 10px);
	overflow: hidden;
}

/* video v lightboxe
 *
 * Zaoblenie nesmie dostať .elementor-video-container – ten je široký cez celé
 * okno a zároveň nižší ako video, takže by video orezal a rohy by ostali ostré.
 * Orezáva až .elementor-video-wrapper, ktorý sedí presne na videu; musí mať
 * height:auto, inak by odrezal spodok aj s lištou ovládania.
 * Samotné <video> zaobliť nejde – Chrome cez zaoblené rohy vykreslí obraz. */
.elementor-lightbox .elementor-video-container {
	border-radius: 0 !important;
	overflow: visible !important;
}

.elementor-lightbox .elementor-video-wrapper:has(> video) {
	height: auto !important;
	max-height: none !important;
	line-height: 0;
	border-radius: var(--vb-radius, 10px) !important;
	overflow: hidden !important;
}

.elementor-lightbox .elementor-video-wrapper > video {
	display: block;
	border-radius: 0 !important;
}

/* vložený prehrávač a obrázok sa dajú zaobliť priamo */
.elementor-lightbox .elementor-video-wrapper > iframe,
.elementor-lightbox .elementor-lightbox-image {
	border-radius: var(--vb-radius, 10px) !important;
}

/* kontajnery s fotkou v pozadí (sekcia „O nás“ na úvode)
 * Elementor ich kreslí cez vygenerované CSS, nie inline štýlom, takže sa
 * musia adresovať priamo. Trieda .vb-obrazok je pre ďalšie takéto bloky. */
.elementor-8 .elementor-element.elementor-element-2ce2c6c,
.elementor-element.vb-obrazok {
	border-radius: var(--vb-radius, 10px);
	overflow: hidden;
}

/* -----------------------------------------------------------------------
 * 5) Vlastné tlačidlo prehrávania na náhľade videa
 *
 * Predvolené má Elementor veľký biely trojuholník s tieňom. Nahrádzame ho
 * modrým krúžkom s bielym trojuholníkom – v rovnakom štýle ako ostatné
 * tlačidlá, bez tieňa.
 * -------------------------------------------------------------------- */
.elementor-custom-embed-play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--theme-palette-color-1, #006bcc);
	box-shadow: none;
	transition: background-color .18s ease;
}

.elementor-custom-embed-play i,
.elementor-custom-embed-play svg {
	display: none !important;
}

.elementor-custom-embed-play::after {
	content: "";
	display: block;
	margin-left: 4px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

.elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play,
.elementor-custom-embed-image-overlay:focus-within .elementor-custom-embed-play {
	background-color: var(--theme-palette-color-4, #0a4b89);
}

@media (max-width: 767px) {
	.elementor-custom-embed-play {
		width: 54px;
		height: 54px;
	}

	.elementor-custom-embed-play::after {
		border-width: 9px 0 9px 15px;
	}
}

/* -----------------------------------------------------------------------
 * 6) Odkaz z obsahu nesmie skončiť pod lepivou hlavičkou
 *
 * Týka sa najmä bočnej navigácie na stránke FAQ a kotiev v obchodných
 * podmienkach. scroll-margin sa uplatní len pri skoku na kotvu.
 * -------------------------------------------------------------------- */
[id] {
	scroll-margin-top: 120px;
}

@media (max-width: 767px) {
	[id] {
		scroll-margin-top: 90px;
	}
}

/* -----------------------------------------------------------------------
 * 7) Veľkosti nadpisov
 *
 * Nadpis stránky bol menší ako nadpisy sekcií. Otáčame poradie: page title
 * väčší, H2 o kúsok menšie.
 * -------------------------------------------------------------------- */
.page-title,
.entry-header .page-title,
.hero-section .page-title {
	font-size: clamp(2rem, 3.4vw, 3rem) !important;
	line-height: 1.15 !important;
}

h2,
.entry-content h2,
.page-content h2 {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

/* -----------------------------------------------------------------------
 * 8) Video v karte diagnózy nemá byť tak ďaleko od nadpisu
 * -------------------------------------------------------------------- */
.elementor-widget-video {
	margin-bottom: 0 !important;
}

/* -----------------------------------------------------------------------
 * 9) Skok na kotvu nesmie skončiť pod lepivou hlavičkou
 *
 * scroll-padding rieši natívne skoky; plynulé posúvanie si Elementor robí
 * vlastným skriptom, ten prepisuje vb-programy.js.
 * -------------------------------------------------------------------- */
html,
body {
	scroll-padding-top: 120px;
}

@media (max-width: 767px) {
	html,
	body {
		scroll-padding-top: 90px;
	}
}

/* -----------------------------------------------------------------------
 * 10) Tlačidlo sa pri prejdení myšou nesmie ani pohnúť
 *
 * Elementor kit dáva každému tlačidlu 1 px rámik
 * (.elementor-kit-17 .elementor-button, špecificita 0,2,0) a ten istý rámik
 * znova pri hoveri (.elementor-kit-17 .elementor-button:hover, 0,3,0).
 * Tlačidlo v karte diagnózy má rámik zrušený len v pokoji (0,2,0), takže
 * pri hoveri ho dostane späť, narastie o 2 px (54,95 → 56,95) a obsah karty
 * poskocí. Vyzerá to, akoby sa tlačidlo zatriaslo. Rušíme rámik vo všetkých
 * stavoch, aby sa rozmer nikdy nemenil.
 * -------------------------------------------------------------------- */
.vb-card-btn .elementor-button,
.vb-card-btn .elementor-button:hover,
.vb-card-btn .elementor-button:focus,
.vb-card-btn .elementor-button:focus-visible,
.vb-card-btn .elementor-button:active {
	border: 0 !important;
}

/* -----------------------------------------------------------------------
 * 11) Písmo na mobile (10. 9. 2026)
 *
 * Blocksy si do global.css generuje @media (max-width: 689.98px) pravidlo
 * :root { --theme-font-size: 14px }, takže text na telefóne bol menší ako
 * na počítači. Klientka žiadala zväčšiť a ako vzor uviedla avid.com, ktorý
 * má 16 px. Vraciame rovnakú veľkosť, akú má web na počítači.
 * global.css sa načítava ako prvé, náš súbor až za ním, takže stačí
 * obyčajné pravidlo bez !important.
 * -------------------------------------------------------------------- */
@media (max-width: 689.98px) {
	:root {
		--theme-font-size: 16px;
	}
}

/* -----------------------------------------------------------------------
 * 12) Recenzia bez fotky nenecháva prázdne miesto (10. 9. 2026)
 *
 * Karta recenzie počíta s profilovou fotkou, ale zatiaľ ju nemá ani jedna
 * z jedenástich. Prázdny obrázkový widget si aj tak bral 30 px výšky.
 * Skryjeme ho, kým v ňom nie je obrázok – keď fotky pribudnú, zobrazí sa sám.
 * -------------------------------------------------------------------- */
.e-loop-item .elementor-widget-image-box:not(:has(img)) {
	display: none;
}

/* -----------------------------------------------------------------------
 * 13) Bezplatný program sa má odlíšiť od platených (10. 9. 2026)
 *
 * „Dych, ktorý vypne stres“ stál v mriežke medzi platenými programami
 * s úplne rovnakým vzhľadom, takže si ho nikto nevšimol. Klientka žiadala
 * „vymyslieť niečo pútavé, keďže to je ZADARMO“. Karta dostáva farebný
 * rámik a odznak, pozadie ostáva biele ako pri ostatných kartách (15. 9.). Karty sú dve: 91c829c v cenníku,
 * debc6ee na úvodnej stránke v sekcii Krátke doplnkové programy.
 * -------------------------------------------------------------------- */
.elementor-element.elementor-element-91c829c,
.elementor-element.elementor-element-debc6ee {
	position: relative;
	border-color: var(--theme-palette-color-1, #006bcc) !important;
	border-width: 2px !important;
	background-color: #fff !important;
}

.elementor-element.elementor-element-91c829c::after,
.elementor-element.elementor-element-debc6ee::after {
	content: "ZADARMO";
	position: absolute;
	top: 14px;
	right: 14px;
	left: auto;
	bottom: auto;
	width: auto;
	height: auto;
	z-index: 2;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--theme-palette-color-1, #006bcc);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.4;
	pointer-events: none;
}

/* -----------------------------------------------------------------------
 * 10) Väčšie písmo na mobile aj tam, kde má Elementor pevnú veľkosť
 * (Martina 26. 8.: písmo je v mobile malé; doplnené 11. 9. 2026)
 *
 * Premenná --theme-font-size (vyššie) nepomôže prvkom, ktorým Elementor
 * dáva vlastnú veľkosť. Tu ich dorovnávame: bežný text 16 px, otázky
 * 17 px ako vo FAQ na úvode, podnadpisy a drobné popisky aspoň 14–15 px.
 * -------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* odpovede na stránke FAQ – Elementor im od tabletu nižšie dáva 14 px */
	.elementor-572 .elementor-element.elementor-widget-toggle .elementor-toggle .elementor-tab-content {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	/* otázky na stránke FAQ */
	.elementor-572 .elementor-element.elementor-widget-toggle .elementor-toggle .elementor-toggle-title {
		font-size: 17px;
	}

	/* podnadpis v nadpise karty programu (úvod 60 %, cenník 66 % z nadpisu)
	 * – inline štýl sa bez !important prebiť nedá */
	.elementor-heading-title > span[style*="font-size:60%"],
	.elementor-heading-title > span[style*="font-size:66%"] {
		font-size: 15px !important;
	}

	/* „Medzinárodne certifikovaní odborníci…“ a „Online podpora“ */
	body .elementor-8 .elementor-element.elementor-element-3b57850 .elementor-icon-list-item > .elementor-icon-list-text,
	body .elementor-8 .elementor-element.elementor-element-7395ce6,
	body .elementor-572 .elementor-element.elementor-element-8193b49 {
		font-size: 16px;
	}

	/* súhlas pod kontaktným formulárom (inline 12 px) */
	.elementor-widget-form p[style*="font-size: 12px"] {
		font-size: 14px !important;
	}
}

/* Jednotný, jemný focus formulárových polí na celom webe (17. 9. 2026).
   Blocksy kreslí pri focuse 3px outline + zmenený border, MemberPress ešte tieň –
   spolu pôsobili ako hrubý dvojitý rámik. Ostáva tenký modrý rámik a jemný tieň. */
input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"], [type="number"], [type="search"], [type="date"], [type="time"]):focus,
input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"], [type="number"], [type="search"], [type="date"], [type="time"]):focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible,
.mp_wrapper input:focus, .mp_wrapper select:focus, .mp_wrapper textarea:focus, .mepr-form input:focus {
	outline: 0 !important;
	outline-offset: 0 !important;
	border: 1px solid var(--vb-blue, #006bcc) !important;
	box-shadow: 0 0 0 2px var(--vb-blue-soft, rgba(0, 105, 204, .12)) !important;
}