/*
 * Spoločné štýly widgetov BM Rollstyl.
 *
 * BEM, prefix .bm-. Vzhľad preberá písma a farby webu (Kirki / šablona
 * Theratio). Žiadne nové farby ani písma - hodnoty, ktoré by mal klient
 * meniť, patria do ovládacích prvkov widgetu, nie sem.
 */

/* ==========================================================================
   bm_hero
   Hodnoty prevzaté z prvého slidu slideru home-1, aby sekcia vyzerala
   rovnako ako predtým. Breakpointy sledujú pôvodné hodnoty slideru:
   desktop / 1200 (notebook) / 1024 (tablet) / 767 (mobil).
   Všetko sa dá prebiť ovládacími prvkami widgetu.
   ========================================================================== */

.bm-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.bm-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0;
	pointer-events: none;
}

.bm-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	padding: 40px 20px;
	text-align: center;
}

.bm-hero__supertitle {
	margin: 0;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
}

/* Nadpis: Titillium Web 300, rovnako ako vrstva 0 slideru. */
.bm-hero__heading {
	margin: 0;
	font-family: "Titillium Web", sans-serif;
	font-size: 90px;
	font-weight: 300;
	line-height: 80px;
	color: #fff;
}

/* Podtitul: Raleway 500, rovnako ako vrstva 1 slideru. */
.bm-hero__subtitle {
	margin: 0;
	font-family: "Raleway", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 32px;
	color: #fff;
}

/* Tlačidlo: Titillium Web 600, veľké písmená, pozadie #1a1a1a. */
.bm-hero__button {
	display: inline-block;
	padding: 18px 36px;
	font-family: "Titillium Web", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 25px;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background-color: #1a1a1a;
	border: 0;
	transition: background-color .25s ease, color .25s ease;
}

.bm-hero__button:hover,
.bm-hero__button:focus {
	color: #fff;
	background-color: #000;
}

.bm-hero__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 1200px) {
	.bm-hero__heading  { font-size: 72px; line-height: 70px; }
	.bm-hero__subtitle { font-size: 15px; line-height: 27px; }
	.bm-hero__button   { font-size: 13px; }
}

@media (max-width: 1024px) {
	.bm-hero__heading  { font-size: 55px; line-height: 51px; }
	.bm-hero__subtitle { font-size: 14px; line-height: 20px; }
	.bm-hero__button   { font-size: 12px; }
}

@media (max-width: 767px) {
	.bm-hero__heading  { font-size: 46px; line-height: 50px; }
	.bm-hero__subtitle { font-size: 14px; line-height: 22px; }
	.bm-hero__button   { font-size: 10px; line-height: 14px; padding: 14px 24px; }
	.bm-hero__inner    { gap: 18px; padding: 32px 16px; }
}

/* ==========================================================================
   bm_pobocky
   Štýl prevzatý zo súčasnej pätičky a kontaktnej sekcie: text #7D7D7D,
   15 px, odkazy sa po prejdení rozsvietia na bielo. Názvy pobočiek
   Titillium Web, texty Raleway - rovnako ako zvyšok webu.
   Na desktope dva stĺpce, na mobile pod sebou.
   ========================================================================== */

.bm-pobocky {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

/*
 * Zarovnanie mapiek, ked su pobocky vedla seba.
 * Mriezka dava stlpcom rovnaku vysku (align-items: stretch), ale obsah
 * tecie zhora, takze pobocka s riadkom navyse (odkaz na stranku pobocky)
 * posunula svoju mapu nizsie. Karta je preto flex stlpec a textova cast
 * pohlti rozdiel vysky, cim sa mapa pritlaci k spodku. Mapy maju pevny
 * pomer stran a stlpce su rovnako siroke, takze rovnaka vyska vyjde sama
 * a zarovna sa aj ich horna hrana.
 * Nepouzivame margin-top: auto na mape - zrusilo by minimalnu mezeru 20 px.
 */
.bm-pobocka {
	display: flex;
	flex-direction: column;
}

.bm-pobocka__info {
	flex: 1 1 auto;
}

/*
 * Popisek nad názvom (eyebrow).
 * Titillium Web, veľké písmená, prestrkané - rovnaký tón ako ostatné
 * malé označenia na webe (sociálne ikony, nadtitulky sekcií).
 */
.bm-pobocka__eyebrow {
	margin: 0 0 6px;
	font-family: "Titillium Web", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	/* #6B6B6B = 4,85:1 na bielej (AA). #9F9E9E malo 2,67:1 a propadalo. */
	color: #6b6b6b;
}

.bm-pobocka__nazov {
	margin: 0 0 12px;
	font-family: "Titillium Web", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	color: #fff;
}

.bm-pobocka__riadok {
	margin: 0;
	font-family: "Raleway", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: #7d7d7d;
}

.bm-pobocka__riadok + .bm-pobocka__riadok {
	margin-top: 6px;
}

.bm-pobocka__odkaz {
	color: #7d7d7d;
	text-decoration: none;
	transition: color .25s ease;
}

.bm-pobocka__odkaz:hover,
.bm-pobocka__odkaz:focus {
	color: #fff;
}

.bm-pobocka__odkaz:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/*
 * Miesto pre mapu.
 *
 * padding-bottom drží pomer strán ešte pred vložením iframu, takže
 * stránka pri jeho vložení neposkočí (žiadny layout shift).
 * Výšku sa dá zmeniť ovládacím prvkom "Pomer strán mapy".
 */
.bm-pobocka__mapa {
	flex: 0 0 auto;
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 75%;
	margin-top: 20px;
	/* overflow: hidden prenesie zaoblenie aj na iframe vnutri */
	overflow: hidden;
	border-radius: 8px;
	background-color: #262626;
}

.bm-pobocka__mapa iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 767px) {
	.bm-pobocky {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ==========================================================================
   bm_kroky
   Titillium Web na čísla a nadpisy, Raleway na text - ako zvyšok webu.
   ========================================================================== */

.bm-kroky {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}

.bm-krok__cislo {
	margin: 0 0 10px;
	font-family: "Titillium Web", sans-serif;
	font-size: 48px;
	font-weight: 300;
	line-height: 1;
	/* #6b6b6b = 5,33:1 na bielej (AA). #9f9e9e malo 2,67:1 a propadalo. */
	color: #6b6b6b;
}

.bm-krok__nazov {
	margin: 0 0 10px;
	font-family: "Titillium Web", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.bm-krok__text {
	margin: 0;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}

@media (max-width: 1024px) {
	.bm-kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 767px) {
	.bm-kroky { grid-template-columns: 1fr; gap: 28px; }
	.bm-krok__cislo { font-size: 40px; }
}

/* ==========================================================================
   bm_faq
   Natívne <details> / <summary>. Vzhľad podľa akordeónu šablóny
   (.ot-accordions .acc-toggle / .acc-content): tenká linka medzi
   položkami, znamienko vpravo, text odpovede pod otázkou.
   ========================================================================== */

.bm-faq {
	display: block;
}

.bm-faq__item {
	border-bottom: 1px solid #e5e5e5;
}

.bm-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
}

/* Skryje natívny trojuholník v prehliadačoch. */
.bm-faq__summary::-webkit-details-marker { display: none; }
.bm-faq__summary::marker { content: ""; }

.bm-faq__summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bm-faq__otazka {
	margin: 0;
	font-family: "Titillium Web", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

/* Znamienko + / - kreslené CSS, bez ikonového fontu. */
.bm-faq__znak {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.bm-faq__znak::before,
.bm-faq__znak::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 2px;
	background-color: currentColor;
	transform: translateY(-50%);
	transition: transform .2s ease, opacity .2s ease;
}

.bm-faq__znak::after {
	transform: translateY(-50%) rotate(90deg);
}

.bm-faq__item[open] .bm-faq__znak::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.bm-faq__odpoved {
	padding: 0 0 20px;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}

.bm-faq__odpoved p { margin: 0 0 12px; }
.bm-faq__odpoved p:last-child { margin-bottom: 0; }
.bm-faq__odpoved ul,
.bm-faq__odpoved ol { margin: 0 0 12px 20px; }

@media (max-width: 767px) {
	.bm-faq__otazka { font-size: 16px; }
	.bm-faq__summary { padding: 14px 0; }
}

/* Odkaz na stránku pobočky - zobrazuje sa len mimo tej stránky. */
.bm-pobocka__viac {
	margin-top: 10px;
}

.bm-pobocka__viac .bm-pobocka__odkaz {
	text-decoration: underline;
}

/* ==========================================================================
   Kontrast na tmavých a svetlých sekciách
   ==========================================================================
   Šablóna má a { color: #1a1a1a } aj h1..h6 { color: #1a1a1a }.
   Farba na obale widgetu sa dedí len tam, kde žiadne pravidlo farbu
   nedeklaruje - nadpisy a odkazy ju deklarovanú majú, takže dedenie
   prebijú a na čiernom pozadí vyjdú takmer čierne.

   Preto sa tieto dve triedy dávajú sekcii cez pole CSS Classes:
     .bm-sekcia-tmava   na sekcie s čiernym pozadím
     .bm-sekcia-svetla  na sekcie s bielym pozadím

   Namerané podľa WCAG: biely nadpis na čiernej 21,00:1,
   odkaz #d8d8d8 na čiernej 14,73:1 (hover 21,00:1),
   odkaz #1a1a1a na bielej 17,40:1. Všetko AAA.
   ========================================================================== */

.bm-sekcia-tmava h1,
.bm-sekcia-tmava h2,
.bm-sekcia-tmava h3,
.bm-sekcia-tmava h4,
.bm-sekcia-tmava h5,
.bm-sekcia-tmava h6 {
	color: #fff;
}

.bm-sekcia-tmava a {
	color: #d8d8d8;
	text-decoration: underline;
}

.bm-sekcia-tmava a:hover,
.bm-sekcia-tmava a:focus {
	color: #fff;
}

.bm-sekcia-svetla a {
	color: #1a1a1a;
	text-decoration: underline;
}

.bm-sekcia-svetla a:hover,
.bm-sekcia-svetla a:focus {
	color: #555;
}

/*
 * Prvky, ktoré nie sú nadpis ani odkaz, a na tmavom pozadí by propadli.
 * Namerané: #9f9e9e na čiernej 7,86:1 (AAA), #6b6b6b na bielej 5,33:1 (AA).
 */
.bm-sekcia-tmava .bm-pobocka__eyebrow,
.bm-sekcia-tmava .bm-krok__cislo {
	color: #9f9e9e;
}

/*
 * Odkaz sa nepozná len podľa farby, ale aj podčiarknutím.
 * Tlačidlá a odkazy vo vlastných widgetoch si podčiarknutie riešia samé,
 * preto sa im tu nevnucuje.
 */
.bm-sekcia-tmava .bm-hero__button,
.bm-sekcia-svetla .bm-hero__button,
.bm-sekcia-tmava .elementor-button,
.bm-sekcia-svetla .elementor-button,
.bm-sekcia-tmava .octf-btn,
.bm-sekcia-svetla .octf-btn {
	text-decoration: none;
}

/* ==========================================================================
   Podčiarknuté odkazy v bežnom texte
   ==========================================================================
   Trieda .bm-text-odkazy sa dáva sekcii cez pole CSS Classes, len na
   stránkach pobočiek (nie na Domov). Podčiarkne iba odkazy v texte:
   nativný Text Editor a textové polia našich widgetov, ktoré odkaz
   obsahovať môžu (bm_karty, bm_faq; ostatné text escapujú). Tlačidlá, karta
   pobočky, galéria, menu, hlavička, pätička ani Side Panel sa nemenia.

   Pravidlá vyššie (.bm-sekcia-tmava a / .bm-sekcia-svetla a) podčiarknutie
   nastavujú tiež, ale prebije ich .elementor a { text-decoration: none }
   z Elementoru (rovnaká váha, načíta sa neskôr). Tu je o triedu viac.

   Farba zostáva zo sekcie, nová nie je. Pri hover podčiarknutie zmizne
   ako všade v šablóne (a:hover { text-decoration: none }), pri fokuse
   z klávesnice zostane.
   ========================================================================== */

.bm-text-odkazy .elementor-widget-text-editor a:not(.elementor-button),
.bm-text-odkazy .bm-karta__text a,
.bm-text-odkazy .bm-faq__odpoved a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.bm-text-odkazy .elementor-widget-text-editor a:not(.elementor-button):hover,
.bm-text-odkazy .bm-karta__text a:hover,
.bm-text-odkazy .bm-faq__odpoved a:hover {
	text-decoration: none;
}

/* ==========================================================================
   Kotvy pod fixnou hlavičkou
   ==========================================================================
   Hlavička sa pri scrollovaní mení na section.is-stuck s position: fixed,
   takže by prekryla cieľ kotvy. Web žiadne scroll-margin nemá, čo sa
   týka všetkých kotiev v menu, nie len #kontakt.
   Hodnota vychádza z výšky lepivej hlavičky (logo 80 px plus odsadenie).
   ========================================================================== */

.elementor-section[id] {
	scroll-margin-top: 110px;
}

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

/* ==========================================================================
   bm_karty
   ========================================================================== */

.bm-karty {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	/* Vonkajsia medzera = 2x zakladny rytmus stranky (20px). Prebija ju
	   ovladac "Vonkajsia medzera nad/pod mriezkou" v zalozke Rozlozenie. */
	margin-top: 40px;
	margin-bottom: 40px;
}

.bm-karta {
	padding: 24px;
	border: 0 solid #d8d8d8;
	border-radius: 8px;
}

.bm-karty--ramec-linka .bm-karta { border-width: 1px; }
.bm-karty--ramec-vrch .bm-karta  { border-top-width: 2px; padding-left: 0; padding-right: 0; }
.bm-karty--ramec-bez .bm-karta   { padding-left: 0; padding-right: 0; }

.bm-karta__stitok {
	margin: 0 0 10px;
	font-family: "Titillium Web", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.bm-karta__nazov {
	margin: 0 0 12px;
	font-family: "Titillium Web", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

.bm-karta__text {
	margin: 0;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}

.bm-karta__text p { margin: 0 0 10px; }
.bm-karta__text p:last-child { margin-bottom: 0; }
.bm-karta__text ul,
.bm-karta__text ol { margin: 0 0 10px 18px; }

.bm-karta__doplnok {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid currentColor;
	font-family: "Raleway", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	opacity: .95;
}

.bm-karta__doplnok-nazov {
	font-family: "Titillium Web", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.bm-karta__odkaz-obal { margin: 14px 0 0; }

@media (max-width: 1024px) {
	.bm-karty {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		margin-top: 32px;
		margin-bottom: 32px;
	}
}

@media (max-width: 767px) {
	.bm-karty {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 24px;
		margin-bottom: 24px;
	}
	.bm-karta { padding: 20px; }
	.bm-karta__nazov { font-size: 20px; }
}

/* ==========================================================================
   bm_fakty
   ========================================================================== */

.bm-fakty {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.bm-fakty--linky .bm-fakt {
	padding-left: 24px;
	border-left: 1px solid #3a3a3a;
}

.bm-fakty--linky .bm-fakt:first-child {
	padding-left: 0;
	border-left: 0;
}

.bm-fakt__cislo {
	margin: 0 0 6px;
	font-family: "Titillium Web", sans-serif;
	font-size: 44px;
	font-weight: 300;
	line-height: 1.1;
}

.bm-fakt__jednotka {
	display: inline-block;
	margin-left: 6px;
	font-size: 18px;
	font-weight: 600;
}

.bm-fakt__popis {
	margin: 0;
	font-family: "Raleway", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.bm-fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.bm-fakty--linky .bm-fakt:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 767px) {
	.bm-fakt__cislo { font-size: 34px; }
	.bm-fakty { gap: 20px; }
}

/* ==========================================================================
   bm_cta
   ========================================================================== */

.bm-cta { text-align: center; }

.bm-cta__nadpis {
	margin: 0 0 12px;
	font-family: "Titillium Web", sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
}

.bm-cta__text {
	margin: 0 auto 22px;
	max-width: 760px;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	line-height: 1.7;
}

.bm-cta__tlacidlo-obal { margin: 0 0 16px; }

.bm-cta__tlacidlo {
	display: inline-block;
	padding: 16px 34px;
	font-family: "Titillium Web", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background-color: #1a1a1a;
	transition: background-color .25s ease;
}

.bm-cta__tlacidlo:hover,
.bm-cta__tlacidlo:focus { background-color: #000; color: #fff; }

.bm-cta__kontakt {
	margin: 0;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.bm-cta__oddelovac { margin: 0 10px; }

@media (max-width: 767px) {
	.bm-cta__nadpis { font-size: 24px; }
	.bm-cta__tlacidlo { padding: 14px 24px; font-size: 13px; }
}

/* ==========================================================================
   bm_kroky - obrysové čísla
   Veľké číslo ako grafický motiv. Žiadna nová farba, len obrys
   v farbe textu. Výplň zostáva priehľadná.
   ========================================================================== */

.bm-kroky--obrysove .bm-krok__cislo {
	font-size: 72px;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px currentColor;
	/* Záložná farba pre prehliadače bez -webkit-text-stroke. */
	-webkit-text-fill-color: transparent;
}

/*
 * Keď prehliadač text-stroke nepodporuje, color: transparent by číslo
 * schovalo. Preto sa obrys zapína len tam, kde je podpora.
 */
@supports not (-webkit-text-stroke: 1px black) {
	.bm-kroky--obrysove .bm-krok__cislo {
		color: inherit;
		-webkit-text-fill-color: currentColor;
	}
}

@media (max-width: 767px) {
	.bm-kroky--obrysove .bm-krok__cislo { font-size: 56px; }
}

/* ==========================================================================
   bm_pobocky - kompaktná varianta
   Do úzkeho stĺpca vedľa textu: bez mapy, s tlačidlom.
   ========================================================================== */

.bm-pobocky--kompakt {
	grid-template-columns: 1fr;
	padding: 28px;
	border: 1px solid #3a3a3a;
	border-radius: 8px;
}

.bm-pobocky--kompakt .bm-pobocka__nazov { font-size: 20px; }

.bm-pobocka__tlacidlo-obal { margin: 18px 0 0; }

.bm-pobocka__tlacidlo {
	display: inline-block;
	padding: 14px 26px;
	font-family: "Titillium Web", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	color: #1a1a1a;
	background-color: #fff;
	transition: background-color .25s ease, color .25s ease;
}

.bm-pobocka__tlacidlo:hover,
.bm-pobocka__tlacidlo:focus { background-color: #d8d8d8; color: #1a1a1a; }

@media (max-width: 767px) {
	.bm-pobocky--kompakt { padding: 20px; }
}

/* ==========================================================================
   Zlúčená sekcia "pobočka + formulár" na stránkach pobočiek
   --------------------------------------------------------------------------
   V DOM je prvý stĺpec s formulárom, druhý s pobočkou. Na mobile tak vyjde
   požadované poradie (formulár navrchu) z prirodzeného poradia, bez CSS.
   Na desktope sa stĺpce vizuálne prehodia cez order.
   ========================================================================== */

@media (min-width: 768px) {
	.bm-formular-pobocka .bm-col-formular { order: 2; }
	.bm-formular-pobocka .bm-col-pobocka  { order: 1; }
}

/* ==========================================================================
   Formulár .bm-form (CF7 "Pobočka - cenová kalkulácia")
   --------------------------------------------------------------------------
   Rozsah je trieda .bm-form, ktorú má len tento formulár. Formuláre na
   Domove a na /chcem-exterierove-zaluzie/ používajú .main-form zo šablóny,
   takže sa ich tieto pravidlá nedotknú.
   Farby a písma sú prevzaté zo šablóny: Raleway pre text, Titillium Web pre
   popisky a tlačidlo, tlačidlo rovnaké ako .octf-btn (#1a1a1a, 13 px,
   veľké písmená, prestrkanie 0,5 px). Žiadne tiene ani prechody.
   ========================================================================== */

.bm-form__rad {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	/* Rovnaky rytmus ako medzera pod ostatnymi polami, inak sa riadok
	   Meno + Telefon lepi na pole E-mail. */
	margin-bottom: 16px;
}

.bm-form .bm-form__pole {
	margin: 0 0 16px;
}

.bm-form__rad .bm-form__pole {
	margin-bottom: 0;
}

.bm-form__pole label {
	display: block;
	font-family: "Titillium Web", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .3px;
	color: #1a1a1a;
}

.bm-form__hviezda {
	color: #8c2b2b;
}

/*
 * Pole majú plný rámec #8c8c8c = 3,36:1 na bielej, teda nad hranicou 3:1
 * pre netextové prvky (WCAG 1.4.11). Šablóna dáva poliam len spodnú linku
 * rgba(0,0,0,.1), čo je 1,1:1 a hranicu nesplní, preto to tu prebíjame.
 */
.bm-form .bm-form__pole input[type="text"],
.bm-form .bm-form__pole input[type="email"],
.bm-form .bm-form__pole input[type="tel"],
.bm-form .bm-form__pole textarea {
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid #8c8c8c;
	border-bottom: 1px solid #8c8c8c;
	border-radius: 8px;
	background: #fff;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #1a1a1a;
}

.bm-form .bm-form__pole textarea {
	min-height: 104px;
	resize: vertical;
}

.bm-form .bm-form__pole input:focus,
.bm-form .bm-form__pole textarea:focus {
	border-color: #1a1a1a;
	outline: 2px solid #1a1a1a;
	outline-offset: 1px;
}

.bm-form__akcia {
	margin: 20px 0 0;
}

.bm-form__tlacidlo {
	display: block;
	width: 100%;
	padding: 18px 24px;
	border: 1px solid #1a1a1a;
	/* Hranate, stejne jako .octf-btn v sablone. Pole, karty a mapy maju 8 px. */
	border-radius: 0;
	background: #1a1a1a;
	color: #fff;
	font-family: "Titillium Web", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.43;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.bm-form__tlacidlo:hover,
.bm-form__tlacidlo:focus {
	background: #fff;
	color: #1a1a1a;
	border-color: #1a1a1a;
}

.bm-form__tlacidlo:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

/* hlásky CF7 nech sú čitateľné aj v tomto formulári */
.bm-form .wpcf7-not-valid-tip {
	font-family: "Raleway", sans-serif;
	font-size: 14px;
	color: #8c2b2b;
}

@media (max-width: 767px) {
	.bm-form__rad {
		grid-template-columns: 1fr;
		gap: 0;
		margin-bottom: 0;
	}
	.bm-form__rad .bm-form__pole {
		margin-bottom: 16px;
	}
}

/* ==========================================================================
   Spodny riadok paticky
   --------------------------------------------------------------------------
   Zakonny text a odkaz na zasady boli dva 50 % stlpce vedla seba. Teraz su
   pod sebou a zarovnane na stred strany, na desktope aj na mobile.
   Stlpce maju sirku 100 % uz v Elementor datach, tu sa riesi len zarovnanie.
   ========================================================================== */

.bm-paticka-spodek {
	text-align: center;
}

.bm-paticka-spodek .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.bm-paticka-spodek .elementor-icon-list-item,
.bm-paticka-spodek .elementor-icon-list-item a {
	justify-content: center;
}

/* ==========================================================================
   bm_galeria
   --------------------------------------------------------------------------
   Rady bez orezu: v rade maju vsetky fotky rovnaku vysku, sirka podla pomeru
   stran (--bm-ar = sirka / vyska). flex-grow podla pomeru strán + aspect-ratio
   dava rovnaku vysku v rade; object-fit: cover dorovna len zaokruhlenie
   o par px kvoli medzeram. Na mobile jeden stlpec s prirodzenym pomerom.
   Zaoblenie 8 px a medzera 16 px su vychodzie hodnoty ovladacich prvkov,
   rovnake ako karty a povodna galeria.
   ========================================================================== */

/*
 * margin-bottom 1.5em = standard galerie zo style.css sablony (.gallery).
 * Widgety na webe medzi sebou medzeru nemaju, odstup tvori obsah widgetu.
 * Ovladac "Vonkajsia medzera pod galeriou" ho prebije.
 */
.bm-galeria {
	--bm-galeria-gap: 16px;
	display: flex;
	flex-direction: column;
	gap: var(--bm-galeria-gap);
	margin-bottom: 1.5em;
}

.bm-galeria__rad {
	display: flex;
	gap: var(--bm-galeria-gap);
}

.bm-galeria__polozka,
.bm-galeria__vypln {
	flex: var(--bm-ar, 1) 1 0%;
	min-width: 0;
	aspect-ratio: var(--bm-ar, 1);
}

.bm-galeria__polozka {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
}

.bm-galeria__odkaz {
	display: block;
	width: 100%;
	height: 100%;
}

.bm-galeria__odkaz:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bm-galeria .bm-galeria__obrazok {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

@media (max-width: 767px) {
	.bm-galeria__rad {
		flex-direction: column;
	}
	.bm-galeria__polozka {
		flex: none;
		width: 100%;
	}
	.bm-galeria__vypln {
		display: none;
	}
}

/* ==========================================================================
   Kompatibilita s Elementorom 4: mobilná hlavička (Header Mobile, #2888)
   Stĺpce loga (3a762e9) a ikon (dc13405) majú v dátach mobilnú šírku
   52 % / 48 %. Elementor 3.14.1 ju do CSS nevypisoval, takže na pôvodnom
   webe mali na mobile 100 % - logo na vlastnom riadku, lupa a menu pod ním.
   Elementor 4 ju vypisuje a hlavička sa zúži do jedného riadku so zmenšeným
   logom. Vraciame pôvodný vzhľad bez zásahu do databázy.
   ========================================================================== */

@media (max-width: 767px) {
	.header-mobile .elementor-2888 .elementor-element.elementor-element-3a762e9,
	.header-mobile .elementor-2888 .elementor-element.elementor-element-dc13405 {
		width: 100%;
	}
}