/*
Theme Name: Jóga Brandýs
Theme URI: https://jogabrandys.cz
Description: Child téma Blocksy pro jogabrandys.cz. Obsahuje jen to, co je vázané na vzhled – data a přihlašování řeší plugin jb-booking.
Author: Josef Štěpánek
Template: blocksy
Version: 0.1.0
Requires PHP: 8.0
Text Domain: jogabrandys
*/

/*
 * Blocksy skládá typografii dynamicky a tiskne ji na wp_head s prioritou 10,
 * tedy až za enqueued styly (inc/manager.php). Jeho pravidlo sedí na :root,
 * takže prostý :root v tomhle souboru by prohrál pořadím. Zdvojené :root zvedne
 * specificitu, přepis platí bez ohledu na pořadí a nepotřebuje !important.
 */
:root:root {
	--theme-font-family: "Amor Sans Text Pro", sans-serif;
}

/*
 * Vlastní tokeny pro komponenty pluginu jb-booking (karty termínů, tlačítka
 * přihlášení). Čtou z Blocksy palety, aby změna barvy v Customizeru prošla
 * i do nich. Hexy jsou jen fallback pro případ, že by se paleta nenačetla –
 * schválně tu NENÍ :root:root, aby nastavení z adminu mělo přednost.
 *
 * Pozor: mapování na sloty palety platí, dokud v Customizeru sedí
 * barva 1 = základní růžová #ea5198 a barva 2 = hover #ff0080.
 */
:root {
	--jb-color-accent: var(--theme-palette-color-1, #ea5198);
	--jb-color-accent-hover: var(--theme-palette-color-2, #ff0080);
}

body.home #mapy {
	max-width: 100vw;
  width: 100vw;
}
#mapy {
  pointer-events: none;
  margin: 0;
  margin-block-end: 0;
}
#mapy.clicked {
  pointer-events: auto;
}

.ct-container-full {
	padding-bottom: 0;
}

[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
	--theme-font-size: var(--theme-font-size-1);
	text-transform: none;
}

[data-prefix="single_page"] .entry-header .page-title {
  --theme-font-size: 42px;
}

body:not(.home) .entry-content > .wp-block-paragraph:last-child {
	margin-bottom: 80px;
}

.sub-menu {
  --menu-item-padding: var(--dropdown-items-spacing, 5px) calc(var(--dropdown-items-spacing, 8px) * 1.5);
}
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu {
	--dropdown-items-spacing: 9px;
}

#header .ct-sticky-container > div[data-sticky="yes:slide"] {
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

[data-header*="type-1"] .ct-header [data-transparent-row="yes"][data-row*="middle"] {
  background-image: linear-gradient(0deg,rgba(9,33,64,0) 0%,rgba(255,255,255,0.48) 79%);
}

.faded {
	opacity: 0.15
}

.jb-subscribe__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; /* input and button end up the same height */
	gap: 0.75rem;
	justify-content: center;
}

.jb-subscribe__label {
	align-self: center;
	flex: 0 0 auto;
	margin: 0;
	font-weight: 600;
}

.jb-subscribe__row input[type="email"] {
	flex: 1 1 14rem;  /* wraps to its own line below ~14rem */
	max-width: 22rem; /* stops it from eating the whole row */
	min-width: 0;
	margin: 0;
}

.jb-subscribe__row input[type="submit"] {
	flex: 0 0 auto;
	margin: 0;
	padding-inline: 1.75rem;
	cursor: pointer;
}

.jb-subscribe__note {
	margin-top: 0.5rem;
	font-size: 0.85em;
	opacity: 0.7;
	text-align: center;
}

.jb-form__field label {
	margin: 0;
}

[data-footer*="type-1"] .ct-footer [data-row*="middle"] .widget-title {
  --theme-font-size: 21px;
}

body.home #main .hero-section, body.home .ct-breadcrumbs {
	display: none;
}
body.home [data-vertical-spacing*="top"] {
	padding-top: 0;
}
body.home[data-prefix="single_page"] [class*="ct-container"] > article[class*="post"] {
  --has-boxed: var(--false);
} 

nav[class*="menu"] li[class*="current-menu-"] > .ct-menu-link, nav[class*="menu"] li[class*="current-menu-"] > .ct-sub-menu-parent {
	color: var(--theme-palette-color-1);
}


#home_bg {
  height: 100vh;
  min-height: 730px;
  margin-block-end: 0;
}
#home_bg_mobile {
	margin-block-end: 0;
	display: none;
}
#home_bg video {
	filter: blur(4px) brightness(110%);
	object-fit: cover;
	object-position: 50% 100%;
}
#home_bg_mobile video {
  filter: blur(0px) brightness(110%);
  object-fit: cover;
  object-position: 20% 100%;
}

#form_wrap {
	margin-top: -85vh;
	margin-bottom: 15vh;
}

#cykly { margin-top: 0 !important; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }

.ct-icon { fill: var(--theme-link-initial-color); }
.ct-back-to-top[data-shape="circle"] .ct-icon { fill: #fff; }

/*
 * Telefon na výšku spadne pod 768px, na šířku už ne – tam rozhoduje nízká
 * výška okna, aby se mobilní úprava chytila i po otočení displeje.
 */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
	#home_bg {
		min-height: 100vh;
	}
	
	.ct-footer .ct-widget {
		text-align: center;
	}
	.ct-footer [data-column] {
		justify-self: center;
	}
	.jb-form {
		padding-left: 0;
		padding-right: 0;
	}
	.jb-subscribe__row {
		padding-left: 1em;
		padding-right: 1em;
	}
	.center {
		text-align: center;
	}
	
	#home_bg_mobile {
		display: block;
	}
	#form_wrap {
		margin-top: calc(-100vh + 105px);
		margin-bottom: 0;
	}
	#form_wrap > div {
		border-radius: 0 !important;
		padding-bottom: 40px !important;
	}
	#prihlasit .wp-block-buttons { display: none; }
} 

[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu {
  --dropdown-width: 308px;
}

.jb-cycles { justify-items: center; ;}
.jb-cycles__item { max-width: 480px;}

/*
 * Přihlašovací formulář leží na úvodní fotce. Plná výplň by fotku zakryla,
 * průhledná by znečitelnila text – mléčné sklo nechá prosvítat obojí.
 */
#form_wrap > div {
	padding: clamp(1.2rem, 4vw, 2.5rem);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 16px;
	/* Bez rozmazání musí podklad krýt sám, jinak by text na fotce zanikl. */
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.06);
}

/*
 * Rozmazání podkladu umí i Safari, ale jen s předponou. Kde ho prohlížeč
 * neumí, zůstane krytější podklad z pravidla výš a stránka drží čitelnost.
 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#form_wrap > div {
		-webkit-backdrop-filter: blur(16px) saturate(70%);
		backdrop-filter: blur(16px) saturate(70%);
	}
}

.ct-featured-image:not(.alignfull) {
  width: 320px;
  float: right;
  margin: 0em 2em 2em 2em;
  max-width: 100%;
}

@media (max-width: 768px) {
 
	.ct-featured-image:not(.alignfull) {
		width: 100%;
		float: none;
		margin: 1em 0;
	}

}

/*
 * Hláška po přihlášení k odběru novinek.
 *
 * Stejný tvar jako hlášky u přihlášení na lekce (.jb-form__message): tlumené
 * podbarvení v barvě webu, zaoblení a barevný okraj. Tady je okraj kolem
 * dokola, ne jen zleva jako v pluginu – text je na střed a samotný pruh vlevo
 * by k němu neseděl.
 *
 * Barvy jdou přes tokeny jb, aby hláška držela s formulářem i po změně palety
 * v Customizeru. Vnitřní odstavec má vlastní okraje od tématu, ty by uvnitř
 * rámečku dělaly druhé odsazení.
 */
.mc4wp-alert {
	text-align: center;
	padding: 0.7em 0.9em;
	border: 1px solid;
	border-radius: 6px;

	/*
	 * Formulář novinek jede přes celou šířku, takže by se hláška roztáhla
	 * od kraje ke kraji. Čtyřicet em je šířka přihlašovacího formuláře, ať
	 * jsou obě hlášky na webu stejně široké; na úzké obrazovce ustoupí
	 * procentům a nechá si po stranách mezeru.
	 */
	max-width: min(40rem, 100% - 2rem);
	margin-inline: auto;
}

.mc4wp-alert p {
	margin: 0;
}

.mc4wp-alert + .mc4wp-alert {
	margin-block-start: 0.5em;
}

.mc4wp-success {
	border-color: var(--jb-color-accent, #ea5198);
	background: rgba(234, 81, 152, 0.08);
	background: color-mix(in srgb, var(--jb-color-accent, #ea5198) 8%, transparent);
}

/* Chyba i upozornění musí být poznat od úspěchu na první pohled, tedy barvou. */
.mc4wp-error,
.mc4wp-notice {
	border-color: #b32d2e;
	background: rgba(179, 45, 46, 0.08);
}