/* =========================================================================
   MARTYN MODRÝ – barevná vrstva nad šablonou utb-ft
   =========================================================================

   Zásady:
   • Nic nepřepisuje obsah ani rozvržení stránky – jen barvy, stíny a pohyb.
   • Efekty se pověsí buď na obecnou třídu (.mm-karta, .mm-nadpis-sekce …),
     kterou lze v Elementoru zadat do pole „CSS Classes“, nebo na konkrétní
     prvek úvodní stránky přes jeho Elementor ID (.elementor-element-xxxxxxx).
     Pokud se prvek v Elementoru smaže a vytvoří znovu, změní se mu ID –
     pak stačí dopsat nové do příslušného seznamu níže, nebo prvku rovnou
     přidat obecnou třídu.
   • Selektory mají navíc `body` proto, aby specificitou přebily generovanou
     CSS Elementoru (`.elementor-80 .elementor-element.elementor-element-…`).
   • Tisk (sekce #kalendar s harmonogramem prací) zůstává bez efektů –
     viz blok @media print na konci souboru.
   ------------------------------------------------------------------------ */

:root {
	--mm-modra-tmava:    #002A52;
	--mm-modra:          #10314F;
	--mm-modra-svetla:   #1B5E96;
	--mm-akcent:         #C45D11;
	--mm-akcent-svetly:  #F0A020;

	--mm-grad-hlavicka:  linear-gradient( 135deg, #0B2440 0%, #10314F 45%, #1B5E96 100% );
	--mm-grad-akcent:    linear-gradient( 90deg, var(--mm-akcent) 0%, var(--mm-akcent-svetly) 100% );
	--mm-grad-akcent-svisle: linear-gradient( 180deg, var(--mm-akcent-svetly) 0%, var(--mm-akcent) 100% );

	--mm-radius:         14px;
	--mm-stin:           0 2px 12px rgba( 16, 49, 79, 0.09 );
	--mm-stin-hover:     0 10px 28px rgba( 27, 94, 150, 0.18 );
	--mm-prechod:        transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* =========================================================================
   1) HLAVIČKA WEBU – gradient + oranžový akcentní proužek
   ========================================================================= */

.utbft-header-main {
	background-image: var(--mm-grad-hlavicka);
}

/* Proužek na spodní hraně hlavičky. .utbft-header-main má position:relative
   už v rodičovské šabloně. */
.utbft-header-main::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--mm-grad-akcent);
	pointer-events: none;
}

/* Aktivní a najetá položka menu dostane oranžové podtržení pod textem.
   Vodorovné odsazení odpovídá odsazení odkazu v rodičovské šabloně (16px),
   aby proužek lícoval s textem, ne s celým tlačítkem. */
.utbft-nav-menu > li > a {
	position: relative;
}

.utbft-nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 4px;
	height: 2px;
	border-radius: 1px;
	background: var(--mm-grad-akcent);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.utbft-nav-menu > li > a:hover::after,
.utbft-nav-menu > li > a:focus::after,
.utbft-nav-menu > li.current-menu-item > a::after {
	opacity: 1;
}

/* =========================================================================
   2) NADPISY SEKCÍ – svislý oranžový hranolek před textem
   ========================================================================= */

body .elementor-element.mm-nadpis-sekce .elementor-heading-title,
body .elementor-80 .elementor-element.elementor-element-8e48a23 .elementor-heading-title,   /* Termíny podle vchodu */
body .elementor-80 .elementor-element.elementor-element-1687d8d .elementor-heading-title,   /* Co si připravit */
body .elementor-80 .elementor-element.elementor-element-c45d242 .elementor-heading-title,   /* Buďme si nápomocni */
body .elementor-80 .elementor-element.elementor-element-b5f2728 .elementor-heading-title,   /* Další odkazy */
body .elementor-80 .elementor-element.elementor-element-c4ab314 .elementor-heading-title {  /* Kontakty */
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

body .elementor-element.mm-nadpis-sekce .elementor-heading-title::before,
body .elementor-80 .elementor-element.elementor-element-8e48a23 .elementor-heading-title::before,
body .elementor-80 .elementor-element.elementor-element-1687d8d .elementor-heading-title::before,
body .elementor-80 .elementor-element.elementor-element-c45d242 .elementor-heading-title::before,
body .elementor-80 .elementor-element.elementor-element-b5f2728 .elementor-heading-title::before,
body .elementor-80 .elementor-element.elementor-element-c4ab314 .elementor-heading-title::before {
	content: "";
	flex: none;
	align-self: stretch;
	width: 5px;
	min-height: 0.9em;
	border-radius: 3px;
	background: var(--mm-grad-akcent-svisle);
}

/* =========================================================================
   3) KARTY – zaoblení, stín, nadzvednutí při najetí myší
   ========================================================================= */

body .elementor-element.mm-karta,
body .elementor-80 .elementor-element.elementor-element-c446d88,   /* Vchod 4761 */
body .elementor-80 .elementor-element.elementor-element-621bd35,   /* Vchod 4762 */
body .elementor-80 .elementor-element.elementor-element-bd95f9a,   /* Chraňte elektroniku */
body .elementor-80 .elementor-element.elementor-element-a374800,   /* Lednici neotvírejte */
body .elementor-80 .elementor-element.elementor-element-cd876f4,   /* Výtahy jen do 8:00 */
body .elementor-80 .elementor-element.elementor-element-9cebd36,   /* Kontakt 1 */
body .elementor-80 .elementor-element.elementor-element-42a93f3 {  /* Kontakt 2 */
	position: relative;
	overflow: hidden;
	border-radius: var(--mm-radius);
	box-shadow: var(--mm-stin);
	transition: var(--mm-prechod);
}

body .elementor-element.mm-karta:hover,
body .elementor-80 .elementor-element.elementor-element-c446d88:hover,
body .elementor-80 .elementor-element.elementor-element-621bd35:hover,
body .elementor-80 .elementor-element.elementor-element-bd95f9a:hover,
body .elementor-80 .elementor-element.elementor-element-a374800:hover,
body .elementor-80 .elementor-element.elementor-element-cd876f4:hover,
body .elementor-80 .elementor-element.elementor-element-9cebd36:hover,
body .elementor-80 .elementor-element.elementor-element-42a93f3:hover {
	transform: translateY( -4px );
	box-shadow: var(--mm-stin-hover);
}

/* -------------------------------------------------------------------------
   3a) Karta s gradientní hlavičkou přes celou šířku (Vchod 4761 / 4762).
   Záporné okraje si berou hodnotu z Elementorem nastaveného odsazení karty
   (--padding-*), takže sedí i po změně odsazení v editoru.
   ------------------------------------------------------------------------- */

body .elementor-element.mm-karta__hlavicka,
body .elementor-80 .elementor-element.elementor-element-e5e6c73,   /* nadpis „Vchod 4761“ */
body .elementor-80 .elementor-element.elementor-element-092e78c {  /* nadpis „Vchod 4762“ */
	/* Elementor omezuje widgety v kontejneru na max-width:100 %; bez tohoto
	   uvolnění by se hlavička o záporné okraje jen posunula, ale nerozšířila. */
	width: auto;
	max-width: none;
	margin: calc( var( --padding-top, 30px ) * -1 )
	        calc( var( --padding-right, 32px ) * -1 )
	        0
	        calc( var( --padding-left, 32px ) * -1 );
	padding: 17px var( --padding-right, 32px ) 17px var( --padding-left, 32px );
	background: var(--mm-grad-hlavicka);
	border-width: 0;
}

body .elementor-element.mm-karta__hlavicka .elementor-heading-title,
body .elementor-80 .elementor-element.elementor-element-e5e6c73 .elementor-heading-title,
body .elementor-80 .elementor-element.elementor-element-092e78c .elementor-heading-title {
	color: #FFFFFF;
}

/* -------------------------------------------------------------------------
   3b) Karta s barevným proužkem nahoře (Co si připravit).
   Elementor jim dává 3px modrý horní rámeček – zprůhlední se a proužek
   nakreslí pseudoprvek, aby mohl mít přechod a kopíroval zaoblení rohů.
   ------------------------------------------------------------------------- */

body .elementor-element.mm-karta--pruh,
body .elementor-80 .elementor-element.elementor-element-bd95f9a,
body .elementor-80 .elementor-element.elementor-element-a374800,
body .elementor-80 .elementor-element.elementor-element-cd876f4 {
	border-top-color: transparent;
}

body .elementor-element.mm-karta--pruh::before,
body .elementor-80 .elementor-element.elementor-element-bd95f9a::before,
body .elementor-80 .elementor-element.elementor-element-a374800::before,
body .elementor-80 .elementor-element.elementor-element-cd876f4::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--mm-grad-akcent);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   3c) Pilulky s termíny uvnitř karet „Vchod 4761 / 4762“.
   Cílí na odstavce, které tvoří jen tučný text – to jsou právě data.
   ------------------------------------------------------------------------- */

body .elementor-element.mm-karta--terminy .elementor-widget-text-editor p > strong:only-child,
body .elementor-80 .elementor-element.elementor-element-c446d88 .elementor-widget-text-editor p > strong:only-child,
body .elementor-80 .elementor-element.elementor-element-621bd35 .elementor-widget-text-editor p > strong:only-child {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: #EAF1F8;
	color: var(--mm-modra);
	font-size: 0.94em;
	font-weight: 600;
	letter-spacing: 0.2px;
}

/* =========================================================================
   4) TLAČÍTKA – jemný gradient a nadzvednutí
   ========================================================================= */

body .elementor-element.mm-tlacitko .elementor-button,
body .elementor-80 .elementor-element.elementor-element-009672a .elementor-button,
body .elementor-80 .elementor-element.elementor-element-f970d4a .elementor-button {
	background-image: var(--mm-grad-hlavicka);
	box-shadow: 0 2px 8px rgba( 16, 49, 79, 0.25 );
}

body .elementor-page .elementor-button {
	transition: var(--mm-prechod);
}

body .elementor-page .elementor-button:hover,
body .elementor-page .elementor-button:focus {
	transform: translateY( -2px );
	box-shadow: 0 6px 16px rgba( 27, 94, 150, 0.28 );
}

/* =========================================================================
   5) VÝPIS AKCÍ [svj_akce] – zvýraznění řádku pod myší
   V klidu vypadá výpis stejně jako dnes; barva se bere z kategorie akce
   (--svj-akce-barva), takže význam barev v legendě zůstává zachovaný.
   ========================================================================= */

.svj-akce--seznam .svj-akce__polozka {
	border-radius: 8px;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.svj-akce--seznam .svj-akce__polozka:hover {
	background-color: color-mix( in srgb, var(--svj-akce-barva) 7%, transparent );
	box-shadow: inset 3px 0 0 var(--svj-akce-barva);
}

.svj-akce__tecka {
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--svj-akce-barva) 18%, transparent );
}

/* =========================================================================
   6) AKORDEON (Elementor „Flexbox“ + Nested Accordion) – nadpisy, po kliknutí
      se rozbalí text (použito na stránce FAQ, ID 99, prvek 2037b4a/bd0051e).

      Cílí na sdílené třídy widgetu (.elementor-widget-n-accordion), NE na
      konkrétní Elementor ID – platí tedy automaticky všude, kde se tenhle
      pár Flexbox + Nested Accordion na webu použije, ne jen na téhle
      stránce. Základní styl widgetu je v pluginovém
      widget-nested-accordion.min.css a hodně věcí řídí přes CSS proměnné
      (--n-accordion-*) na `.elementor-widget-n-accordion` – kde to jde,
      přepisují se ty proměnné, ne jednotlivé vlastnosti.

      Z každé otázky se dělá samostatná zaoblená karta (stejný --mm-radius
      a stín jako u karet na úvodní stránce, viz bod 3) – ohraničení
      i zaoblení titulku/obsahu ve widgetu se proto ve --n-accordion-border-*
      vypíná (width:0), aby nevznikl dvojitý rámeček, a barevný přechod
      v titulku (nastavený přímo na prvku bd0051e) se přepisuje selektorem
      se stejným počtem tříd navíc s `body`, aby specificitou vyhrál.

      Žádné měnící se/poloprůhledné podbarvení titulku – to na první pokus
      i na opravu (plná barva) pořád působilo jako starý "glossy" efekt.
      Pozadí titulku je natrvalo průhledné za všech stavů; že jde otázku
      rozevřít, signalizuje modrý text nadpisu, modrá linka pod ním po
      otevření a hlavně kulaté tlačítko +/− (to se nemění).
   ========================================================================= */

body .elementor-widget-n-accordion {
	--n-accordion-padding: 18px 22px;
	--n-accordion-border-width: 0px;
	--n-accordion-border-radius: 0px;
	--n-accordion-icon-size: 15px;
	--n-accordion-icon-gap: 0 14px;
	--n-accordion-item-title-space-between: 14px;
	--n-accordion-title-normal-color: var(--mm-modra);
	--n-accordion-title-hover-color: var(--mm-modra-tmava);
	--n-accordion-title-active-color: var(--mm-modra-tmava);
	--n-accordion-icon-normal-color: var(--mm-modra);
	--n-accordion-icon-hover-color: var(--mm-modra-tmava);
	--n-accordion-icon-active-color: var(--mm-modra-tmava);
}

body .elementor-widget-n-accordion .e-n-accordion-item {
	background: #FFFFFF;
	border: 1px solid #DFE3E8;
	border-radius: var(--mm-radius);
	overflow: hidden;
	box-shadow: var(--mm-stin);
	transition: var(--mm-prechod), border-color 0.18s ease;
}

body .elementor-widget-n-accordion .e-n-accordion-item-title {
	font-weight: 600;
	font-size: 1.05rem;
	border-bottom: 2px solid transparent;
}

/* Bez pozadí a bez gradientu – přebíjí i natvrdo nastavený gradient na
   prvku bd0051e (4 třídy), proto stejná hloubka selektoru + `body` navíc. */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item .e-n-accordion-item-title {
	background-color: transparent;
	background-image: none;
}

body .elementor-widget-n-accordion .e-n-accordion-item:not([open]):hover {
	border-color: var(--mm-modra-svetla);
	box-shadow: var(--mm-stin-hover);
}

/* Modrá linka pod nadpisem – jediný signál otevřeného stavu kromě ikony. */
body .elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
	border-bottom-color: var(--mm-modra);
}

/* Kulaté tlačítko s ikonkou +/− – beze změny mezi stavy. */
body .elementor-widget-n-accordion .e-n-accordion-item-title-icon {
	background: color-mix( in srgb, var(--mm-modra) 10%, white );
	border-radius: 50%;
	padding: 7px;
}

/* Obsah otázky – Elementorův base styl mu dává border přes :where() (nulová
   specificita), takže vlastní rámeček stačí přepsat obyčejným selektorem. */
body .elementor-widget-n-accordion .e-n-accordion-item > .e-con {
	border: none;
	border-top: 1px solid #ECEEF1;
	padding: 16px 22px 22px;
	background: #FFFFFF;
}

@media ( max-width: 767px ) {
	body .elementor-widget-n-accordion {
		--n-accordion-padding: 14px 16px;
	}

	body .elementor-widget-n-accordion .e-n-accordion-item > .e-con {
		padding: 12px 16px 18px;
	}
}

/* =========================================================================
   7) OHLED NA UŽIVATELE, KTEŘÍ NECHTĚJÍ ANIMACE
   ========================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	body .elementor-element.mm-karta,
	body .elementor-80 .elementor-element.elementor-element-c446d88,
	body .elementor-80 .elementor-element.elementor-element-621bd35,
	body .elementor-80 .elementor-element.elementor-element-bd95f9a,
	body .elementor-80 .elementor-element.elementor-element-a374800,
	body .elementor-80 .elementor-element.elementor-element-cd876f4,
	body .elementor-80 .elementor-element.elementor-element-9cebd36,
	body .elementor-80 .elementor-element.elementor-element-42a93f3,
	body .elementor-page .elementor-button,
	body .elementor-widget-n-accordion .e-n-accordion-item,
	.svj-akce--seznam .svj-akce__polozka {
		transition: none;
	}

	body .elementor-element.mm-karta:hover,
	body .elementor-80 .elementor-element.elementor-element-c446d88:hover,
	body .elementor-80 .elementor-element.elementor-element-621bd35:hover,
	body .elementor-80 .elementor-element.elementor-element-bd95f9a:hover,
	body .elementor-80 .elementor-element.elementor-element-a374800:hover,
	body .elementor-80 .elementor-element.elementor-element-cd876f4:hover,
	body .elementor-80 .elementor-element.elementor-element-9cebd36:hover,
	body .elementor-80 .elementor-element.elementor-element-42a93f3:hover,
	body .elementor-page .elementor-button:hover,
	body .elementor-page .elementor-button:focus {
		transform: none;
	}
}

/* =========================================================================
   8) TISK – harmonogram prací (#kalendar) se tiskne černobíle jako dosud
   ========================================================================= */

@media print {
	.utbft-header-main {
		background-image: none;
	}

	.utbft-header-main::after,
	body .elementor-element.mm-karta--pruh::before,
	body .elementor-80 .elementor-element.elementor-element-bd95f9a::before,
	body .elementor-80 .elementor-element.elementor-element-a374800::before,
	body .elementor-80 .elementor-element.elementor-element-cd876f4::before,
	body .elementor-element.mm-nadpis-sekce .elementor-heading-title::before,
	body .elementor-80 .elementor-element.elementor-element-8e48a23 .elementor-heading-title::before,
	body .elementor-80 .elementor-element.elementor-element-1687d8d .elementor-heading-title::before,
	body .elementor-80 .elementor-element.elementor-element-c45d242 .elementor-heading-title::before,
	body .elementor-80 .elementor-element.elementor-element-b5f2728 .elementor-heading-title::before,
	body .elementor-80 .elementor-element.elementor-element-c4ab314 .elementor-heading-title::before {
		display: none;
	}

	body .elementor-element.mm-karta,
	body .elementor-80 .elementor-element.elementor-element-c446d88,
	body .elementor-80 .elementor-element.elementor-element-621bd35,
	body .elementor-80 .elementor-element.elementor-element-bd95f9a,
	body .elementor-80 .elementor-element.elementor-element-a374800,
	body .elementor-80 .elementor-element.elementor-element-cd876f4,
	body .elementor-80 .elementor-element.elementor-element-9cebd36,
	body .elementor-80 .elementor-element.elementor-element-42a93f3,
	body .elementor-element.mm-tlacitko .elementor-button,
	body .elementor-80 .elementor-element.elementor-element-009672a .elementor-button,
	body .elementor-80 .elementor-element.elementor-element-f970d4a .elementor-button {
		box-shadow: none;
		transform: none;
		background-image: none;
	}

	body .elementor-element.mm-karta__hlavicka,
	body .elementor-80 .elementor-element.elementor-element-e5e6c73,
	body .elementor-80 .elementor-element.elementor-element-092e78c {
		margin: 0;
		padding: 0 0 14px;
		background: none;
		border-bottom: 1px solid #E6E9ED;
	}

	body .elementor-element.mm-karta__hlavicka .elementor-heading-title,
	body .elementor-80 .elementor-element.elementor-element-e5e6c73 .elementor-heading-title,
	body .elementor-80 .elementor-element.elementor-element-092e78c .elementor-heading-title {
		color: var(--mm-modra);
	}

	.svj-akce--seznam .svj-akce__polozka:hover {
		background-color: transparent;
		box-shadow: none;
	}

	body .elementor-widget-n-accordion .e-n-accordion-item {
		box-shadow: none;
		border-color: #D5D8DC;
	}

	body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item .e-n-accordion-item-title {
		background-color: transparent;
		background-image: none;
	}

	body .elementor-widget-n-accordion .e-n-accordion-item-title-icon {
		background: transparent;
	}
}