.joga-rozvrh {
	margin: 1.5em 0;
}
.joga-tabulka {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2em;
}
.joga-tabulka th,
.joga-tabulka td {
	padding: 0.6em 0.8em;
	text-align: left;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.joga-obsazeno {
	opacity: 0.6;
}
.joga-znacka-plno {
	font-weight: 600;
}
.joga-rozvrh,
.joga-kalendar,
.joga-tlacitko-odkaz-obal {
	--joga-barva-tlacitka: #4a7c59;
	--joga-barva-mrizky: #767676;
	--joga-barva-lekce: #e3f0e8;
	--joga-barva-dnes: #dce9f9;
	--joga-barva-text-lekce: #1f3d2b;
	--joga-barva-vikend: #ececec;
	--joga-barva-svatek: #f8d7da;
}
.joga-tlacitko {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-decoration: none;
}
.joga-tlacitko:hover {
	opacity: 0.8;
}
.joga-tlacitko-neaktivni {
	opacity: 0.5;
	cursor: not-allowed;
}
/* Skutečná akční tlačítka (odeslat / přihlásit se) – vždy stejná barevná
   výplň nastavitelná v administraci, dostatečné odsazení, zaoblení,
   viditelný stav při najetí myší a obrys při zaměření klávesnicí. */
.joga-tlacitko-odeslat,
.joga-prihlasit-btn,
.joga-kal-detail-prihlasit,
.joga-kal-detail-polozka-prihlasit {
	background: var(--joga-barva-tlacitka);
	border: 2px solid var(--joga-barva-tlacitka);
	color: #fff;
	font-weight: 600;
	padding: 0.65em 1.4em;
	border-radius: 6px;
}
.joga-tlacitko-odeslat:hover,
.joga-prihlasit-btn:hover,
.joga-kal-detail-prihlasit:hover,
.joga-kal-detail-polozka-prihlasit:hover {
	filter: brightness(0.9);
	opacity: 1;
}
.joga-tlacitko:focus-visible {
	outline: 3px solid var(--joga-barva-tlacitka);
	outline-offset: 2px;
}

/*
 * [joga_tlacitko] – prostý odkaz stylovaný jako tlačítko Odeslat přihlášku
 * (sdílí --joga-barva-tlacitka i hover). Tohle je první místo v pluginu,
 * kde je takhle stylovaný <a>, ne <button> – šablony (např. Namaha) běžně
 * stylují odkazy uvnitř obsahu dost specificky (barva, podtržení), na
 * tlačítka to dřív vliv mít nemohlo. Selektor přes "a." a !important na
 * klíčových vlastnostech tomu jde specificitou i silou nad hlavu.
 */
a.joga-tlacitko-odkaz,
a.joga-tlacitko-odkaz:visited,
a.joga-tlacitko-odkaz:active {
	display: inline-block;
	background: var(--joga-barva-tlacitka) !important;
	border: 2px solid var(--joga-barva-tlacitka) !important;
	color: #fff !important;
	text-decoration: none !important;
	font: inherit;
	font-weight: 600;
	padding: 0.65em 1.4em;
	border-radius: 6px;
	cursor: pointer;
}
a.joga-tlacitko-odkaz:hover,
a.joga-tlacitko-odkaz:focus {
	filter: brightness(0.9);
	color: #fff !important;
	text-decoration: none !important;
}
a.joga-tlacitko-odkaz:focus-visible {
	outline: 3px solid var(--joga-barva-tlacitka);
	outline-offset: 2px;
}
a.joga-tlacitko-odkaz-velke {
	font-size: 1.25em !important;
	padding: 0.8em 1.8em !important;
}
.joga-tlacitko-odkaz-obal {
	margin: 1em 0;
}
.joga-tlacitko-odkaz-obal-vlevo {
	text-align: left;
}
.joga-tlacitko-odkaz-obal-stred {
	text-align: center;
}
.joga-tlacitko-odkaz-obal-vpravo {
	text-align: right;
}

.joga-formular {
	max-width: 480px;
}
.joga-formular-uvod {
	margin-top: -0.5em;
}
.joga-pole-obal {
	margin-bottom: 1em;
}
.joga-formular label {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 600;
}
.joga-formular input[type="text"],
.joga-formular input[type="email"],
.joga-formular input[type="tel"],
.joga-formular select,
.joga-formular textarea {
	width: 100%;
	padding: 0.5em;
	font: inherit;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}
.joga-pole-checkbox-label {
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.joga-pole-checkbox-label input[type="checkbox"] {
	width: auto;
}
.joga-pole-napoveda {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
	margin-top: 0.3em;
}
.joga-pole-chyba {
	display: block;
	font-size: 0.85em;
	color: #c0392b;
	margin-top: 0.3em;
}
.joga-pole-obal-chyba input,
.joga-pole-obal-chyba select,
.joga-pole-obal-chyba textarea {
	border-color: #c0392b;
}
.joga-povinne {
	color: #c0392b;
}
.joga-skryte-pole {
	position: absolute;
	left: -9999px;
	top: -9999px;
}
.joga-zprava {
	padding: 1em;
	border-radius: 4px;
	margin-bottom: 1em;
}
.joga-zprava-uspech {
	background: rgba(0, 128, 0, 0.1);
	border: 1px solid rgba(0, 128, 0, 0.3);
}
.joga-zprava-chyba {
	background: rgba(192, 57, 43, 0.1);
	border: 1px solid rgba(192, 57, 43, 0.3);
}
@media (max-width: 600px) {
	.joga-tabulka thead {
		display: none;
	}
	.joga-tabulka,
	.joga-tabulka tbody,
	.joga-tabulka tr,
	.joga-tabulka td {
		display: block;
		width: 100%;
	}
	.joga-tabulka tr {
		margin-bottom: 1em;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		padding: 0.5em;
	}
	.joga-tabulka td {
		border: none;
		padding: 0.3em 0;
	}
	.joga-tabulka td[data-label]:not([data-label=""])::before {
		content: attr(data-label) ": ";
		font-weight: 600;
	}
}

/* Měsíční kalendář [joga_kalendar] */
.joga-kalendar {
	margin: 1.5em 0 2em;
	position: relative;
}
.joga-kal-hlavicka {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 0.75em;
}
.joga-kal-nazev-mesice {
	margin: 0;
	font-size: 1.6em !important;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: none !important;
	flex: 1;
}
.joga-kal-sipka {
	display: inline-block;
	font-size: 1.4em;
	line-height: 1;
	padding: 0.15em 0.55em;
	text-decoration: none;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 4px;
}
.joga-kal-sipka:hover {
	opacity: 0.8;
}
.joga-kal-sipka-neaktivni {
	opacity: 0.3;
	border-color: transparent;
}
.joga-kal-tabulka {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	border: 2px solid var(--joga-barva-mrizky);
}
.joga-kal-tabulka th {
	padding: 0.4em;
	text-align: center;
	font-weight: 600;
	border-bottom: 2px solid var(--joga-barva-mrizky);
}
/*
 * display: table-cell natvrdo – šablona (Namaha) umí mít vlastní obecné
 * pravidlo na <td> (např. kvůli galeriím/gridům v obsahu stránky), které
 * z něj udělá flex/grid kontejner. Buňka pak svůj obsah (číslo dne,
 * popisek svátku, tečky) zarovná doprostřed místo běžného řádkování
 * shora dolů – tady to vrátíme zpátky na standardní chování tabulkové
 * buňky bez ohledu na to, co si šablona myslí o obecných <td>.
 */
.joga-kal-tabulka td {
	display: table-cell !important;
	position: relative;
	vertical-align: top;
	border: 1px solid var(--joga-barva-mrizky);
	padding: 0.3em;
	height: 6em;
}
/*
 * Klepnutelná plocha přes celou buňku dne (jen na mobilu, viz media query
 * níže) – neviditelná, leží nad obsahem buňky (číslo dne, tečky), aby prst
 * netrefoval jen malou tečku. Na desktopu ji CSS dělá neaktivní, tam se
 * ovládá po jednotlivých termínech jako dosud.
 *
 * background/outline mají schválně "transparent"/"none" i ve :focus
 * a :active (ne jen v klidovém stavu) a tap-highlight je vypnutý úplně –
 * bez toho leží tenhle button přes celou buňku a jakékoli vybarvení při
 * podržení/focusu (výchozí dotykové zvýraznění prohlížeče, případně barva
 * převzatá od šablony webu) by vizuálně zakrylo číslo dne i tečky pod ním.
 * Zvýraznění vybraného dne řeší místo toho výhradně .joga-kal-den-vybrany
 * na samotné buňce (níž), který obsah nijak nepřekrývá.
 */
.joga-kal-den-tlacitko {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	pointer-events: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}
.joga-kal-den-tlacitko:hover,
.joga-kal-den-tlacitko:focus,
.joga-kal-den-tlacitko:active {
	background: transparent !important;
	outline: none;
}
/* Klávesnice (Tab) pořád dostane viditelné zaměření – jen myší/dotykem
   vyvolaný :focus výš žádný obrys nemá, stejné rozlišení jako u ostatních
   tlačítek pluginu (.joga-tlacitko:focus-visible). */
.joga-kal-den-tlacitko:focus-visible {
	background: transparent !important;
	outline: 3px solid var(--joga-barva-tlacitka);
	outline-offset: -3px;
}
.joga-kal-prazdna {
	background: rgba(0, 0, 0, 0.03);
	border-color: var(--joga-barva-mrizky) !important;
}
.joga-kal-cislo {
	display: block !important;
	font-weight: 600;
	margin-bottom: 0.2em;
}
/*
 * Popisek státního svátku pod číslem dne – jen na širší obrazovce (viz
 * media query níž), na mobilu by se do malé buňky s tečkami nevešel a je
 * místo toho vidět v panelu po klepnutí na den (.joga-kal-detail-svatek).
 * Barvu pozadí buňky (.joga-kal-den.joga-kal-svatek) tohle nijak nemění.
 */
.joga-kal-svatek-popisek {
	display: block !important;
	font-style: italic;
	font-size: 0.75em;
	font-weight: 400;
	opacity: 0.75;
	line-height: 1.2;
	margin-bottom: 0.2em;
}
/*
 * Priorita pozadí buňky (odshora dolů = kdo vyhraje, když nastane víc
 * stavů zároveň): den s lekcí, dnešní den, státní svátek, víkend, všední
 * den. V CSS to jde přes pořadí pravidel – kdo je definovaný později,
 * vyhrává. Obrys dnešního dne jeschválně samostatná vlastnost (ne
 * pozadí), takže zůstane vidět, i když lekce "vyhraje" barvu pozadí.
 */
.joga-kal-den.joga-kal-vikend {
	background: var(--joga-barva-vikend);
}
.joga-kal-den.joga-kal-svatek {
	background: var(--joga-barva-svatek);
}
.joga-kal-den.joga-kal-dnes {
	background: var(--joga-barva-dnes);
	outline: 2px solid var(--joga-barva-mrizky);
	outline-offset: -2px;
}
.joga-kal-den.joga-kal-ma-lekci {
	background: var(--joga-barva-lekce);
}
.joga-kal-udalosti {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.joga-kal-udalost {
	display: block;
	width: 100%;
	max-width: 100%;
	text-align: left;
	font: inherit;
	font-size: 0.95em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 2px 4px;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: transparent;
	color: var(--joga-barva-text-lekce);
	cursor: pointer;
	line-height: 1.35;
}
.joga-kal-udalost:hover,
.joga-kal-udalost:focus {
	opacity: 0.8;
}
.joga-kal-udalost .joga-kal-cas {
	font-weight: 600;
	margin-right: 0.3em;
}
.joga-kal-udalost.joga-kal-plne {
	opacity: 0.55;
}
.joga-kal-udalost.joga-kal-zruseno {
	text-decoration: line-through;
	opacity: 0.6;
}
/*
 * Proběhlý termín (už začal) – přeškrtnutý a zašedlý jako zrušený, ale
 * schválně jinou barvou/odstínem (šedá, ne zrušeného typická barva by
 * s ní splývala) a bez štítku, ať jde vizuálně jasně odlišit od zrušeného
 * termínu (viz zadání) – to jsou dva různé důvody, proč se na lekci nedá
 * přihlásit, a nesmí se plést.
 */
.joga-kal-udalost.joga-kal-prosle {
	text-decoration: line-through;
	opacity: 0.55;
	color: #6b6b6b;
}
.joga-kal-stitek {
	display: inline-block;
	margin-left: 0.3em;
	font-style: italic;
	text-decoration: none;
}
.joga-kal-detail {
	margin-top: 1em;
	padding: 1em 3.4em 1em 1em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	position: relative;
}
/*
 * Pevná šířka/výška (ne odvozená z písma × padding jako dřív) – tlačítko
 * tak má spolehlivý, předem známý půdorys 2.75em (~44px, doporučená
 * minimální dotyková plocha), podle kterého jde přesně dopočítat
 * padding-right panelu výš (3.4em = 0.35 + 2.75 + rezerva). Dřív se
 * půdorys tlačítka odvozoval od font-size a paddingu a byl jen těsně pod
 * rezervovaným místem (2.1 vs. 2.2em) – u delšího/zalomeného názvu lekce
 * (a při drobně jiném vykreslení znaku "×" na iOS Safari) to stačilo na
 * vizuální kolizi s nadpisem. Umístění v pravém horním rohu panelu (ne
 * uvnitř nadpisu) i s velkým názvem díky tomu zůstává spolehlivě mimo
 * text bez ohledu na to, kolik řádků nadpis zabere.
 */
.joga-kal-detail-zavrit {
	position: absolute;
	top: 0.35em;
	right: 0.35em;
	width: 2.75em;
	height: 2.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 1.4em;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	padding: 0;
	border-radius: 4px;
}
.joga-kal-detail-nazev {
	margin: 0 0 0.3em;
}
.joga-kal-detail-svatek {
	font-style: italic;
	font-size: 0.85em;
	opacity: 0.75;
	margin: 0 1.6em 0.4em 0;
}
.joga-kal-detail p {
	margin: 0.2em 0;
}
.joga-kal-detail-obsazenost.joga-kal-detail-plne,
.joga-kal-detail-polozka-obsazenost.joga-kal-detail-plne {
	color: #b0342a;
	font-weight: 600;
}

/*
 * Bublina detailu (>= 600px): plovoucí karta umístěná JS podle konkrétního
 * políčka, se šipkou. Potřebuje vlastní neprůhledné pozadí bez ohledu na
 * barvy šablony, protože leží nad ostatním obsahem stránky.
 */
@media (min-width: 600px) {
	.joga-kal-detail-bublina {
		position: absolute;
		z-index: 30;
		margin-top: 0;
		width: max-content;
		max-width: 300px;
		background: #fff;
		color: #1d2327;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	}
	.joga-kal-detail-bublina::before {
		content: "";
		position: absolute;
		top: -9px;
		left: var(--joga-sipka-x, 24px);
		transform: translateX(-50%);
		border: 9px solid transparent;
		border-bottom-color: #fff;
	}
	.joga-kal-detail-bublina.joga-kal-detail-nahore::before {
		top: auto;
		bottom: -9px;
		border-bottom-color: transparent;
		border-top-color: #fff;
	}
	/*
	 * Neviditelný "most" přes mezeru mezi tlačítkem a bublinou (stejně
	 * široký jako bublina) – bez něj kurzor při přejezdu z políčka do
	 * bubliny na chvíli opustí obě a JS by naplánoval zavření. Protože je
	 * to ::after na samotné bublině, prohlížeč mouseenter/mouseleave
	 * bubliny počítá i při najetí na tento most, takže ho žádný další JS
	 * kód řešit nemusí. Šipka (::before) leží nad ním.
	 */
	.joga-kal-detail-bublina::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -16px;
		height: 16px;
		background: transparent;
	}
	.joga-kal-detail-bublina.joga-kal-detail-nahore::after {
		top: auto;
		bottom: -16px;
	}
}
/*
 * Křížek je v bublině zbytečný na zařízení se skutečnou myší – tam se
 * bublina zavírá odjezdem kurzoru, Escapem nebo klikem mimo ni. Na
 * dotykových zařízeních (i širších, např. tablet naležato) žádné z toho
 * spolehlivě nefunguje, takže tam křížek zůstává.
 */
@media (min-width: 600px) and (hover: hover) and (pointer: fine) {
	.joga-kal-detail-bublina .joga-kal-detail-zavrit {
		display: none;
	}
}

/*
 * Pod 600px zůstává mřížka o 7 sloupcích (jen zmenšená), aby šla ovládat
 * jako klasický kalendář a vešla se na šířku ~360 px bez vodorovného
 * scrollování. Buňka ukazuje jen číslo dne + malé tečky podle počtu lekcí,
 * čas a název se tam nevejde – ten je v panelu pod kalendářem po klepnutí.
 */
@media (max-width: 599.98px) {
	.joga-kal-tabulka th {
		padding: 0.2em;
		font-size: 0.7em;
	}
	/* overflow: hidden je tvrdá pojistka – nic z obsahu buňky (tečky,
	   jejich schovaný text) se nesmí vizuálně dostat mimo její hranice,
	   ať se šablona chová u <button> uvnitř obsahu jakkoli. */
	.joga-kal-tabulka td {
		height: auto;
		aspect-ratio: 1 / 1;
		padding: 2px;
		text-align: center;
		overflow: hidden;
	}
	/*
	 * position: relative + z-index vyšší než u .joga-kal-den-tlacitko (níž)
	 * – ať to tlačítko přes celou buňku (viz komentář u něj o :focus/:active)
	 * cokoliv namaluje jako pozadí (nativní vzhled tlačítka v Safari na
	 * iOS, případně styl šablony), číslo dne zůstane vykreslené NAD ním, a
	 * tedy čitelné, ať se tlačítku background podaří potlačit nebo ne.
	 * pointer-events: none – jinak by právě tenhle vyšší z-index bránil
	 * kliknutí "propadnout" na tlačítko pod ním, protože číslo by se stalo
	 * cílem místo něj (nemá žádný posluchač, klik by nikam nevedl).
	 */
	.joga-kal-cislo {
		font-size: 0.8em;
		margin-bottom: 0;
		position: relative;
		z-index: 2;
		pointer-events: none;
	}
	.joga-kal-den:not(.joga-kal-ma-lekci) .joga-kal-cislo {
		opacity: 0.4;
	}
	/*
	 * Den s aktuálně otevřeným panelem (JS: kalOznacBunkuVybranou) – jen
	 * obrys tažený dovnitř (outline-offset záporný), stejný princip jako
	 * u .joga-kal-den.joga-kal-dnes o pár řádků výš. Obrys nic nepřekrývá,
	 * takže číslo dne a tečky zůstávají čitelné i u vybraného dne.
	 */
	.joga-kal-den-vybrany {
		outline: 2px solid var(--joga-barva-tlacitka);
		outline-offset: -2px;
	}
	/* Do malé mobilní buňky s tečkami se popisek svátku nevejde – je
	   místo toho v panelu po klepnutí na den (.joga-kal-detail-svatek).
	   !important nutné, protože základní pravidlo výš má taky !important
	   (kvůli šabloně přebíjející display na <span>/<td>). */
	.joga-kal-svatek-popisek {
		display: none !important;
	}
	.joga-kal-udalosti {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 3px;
		margin-top: 2px;
		overflow: hidden;
		/* Stejný důvod jako u .joga-kal-cislo výš – tečky zůstanou nad
		   tlačítkem přes celou buňku, ať to tlačítko namaluje pozadí
		   jakékoli. pointer-events: none propouští klik na tlačítko pod
		   sebou (jednotlivé tečky mají pointer-events: none taky, viz níž,
		   tohle je navíc i pro samotný <ul> box mezi nimi). */
		position: relative;
		z-index: 2;
		pointer-events: none;
	}
	/* Řádek/položka seznamu nesmí flexboxem "natáhnout" tečku uvnitř –
	   bez tohoto flex položky defaultně nesmí zúžit pod obsah (min-width:
	   auto) a přebírají šířku podle okolí, což by u <li> bez vlastní šířky
	   mohlo tečku roztáhnout. */
	.joga-kal-udalosti li {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
		max-width: none;
		line-height: 0;
	}
	/*
	 * Selektor je schválně přes rodiče (.joga-kal-den .joga-kal-udalost),
	 * aby měl vyšší specificitu než obvyklá obecná pravidla šablon typu
	 * ".entry-content button { width: 100%; }" – bez toho šablona uměla
	 * tečce vnutit width: 100% a s border-radius: 50% na širokém plochém
	 * boxu z ní na mobilu vznikal protáhlý zelený "pruh" místo tečky.
	 * Klíčové rozměrové vlastnosti mají navíc !important jako pojistku.
	 */
	.joga-kal-den .joga-kal-udalost {
		display: block !important;
		width: 6px !important;
		height: 6px !important;
		min-width: 6px !important;
		max-width: 6px !important;
		flex: 0 0 auto !important;
		padding: 0 !important;
		margin: 0;
		border: none !important;
		border-radius: 50% !important;
		background: var(--joga-barva-tlacitka);
		font-size: 0;
		line-height: 0;
		overflow: hidden;
	}
	.joga-kal-den .joga-kal-udalost .joga-kal-cas,
	.joga-kal-den .joga-kal-udalost .joga-kal-nazev,
	.joga-kal-den .joga-kal-udalost .joga-kal-stitek {
		display: none;
	}
	.joga-kal-den .joga-kal-udalost.joga-kal-zruseno {
		background: #b0342a;
	}
	.joga-kal-den .joga-kal-udalost.joga-kal-plne {
		background: #b0342a;
		opacity: 1;
	}
	.joga-kal-den .joga-kal-udalost.joga-kal-prosle {
		background: #9a9a9a;
		opacity: 1;
	}
	/* Tečky jsou teď jen vizuální – tlačítko celé buňky (níž) je jediné,
	   co na mobilu reaguje na klepnutí, ať prst netrefuje jen tečku. */
	.joga-kal-den .joga-kal-udalost {
		pointer-events: none;
	}
	.joga-kal-den-tlacitko {
		pointer-events: auto;
	}
	.joga-kal-detail {
		margin-top: 1em;
	}
	.joga-kal-detail-polozka {
		padding: 0.6em 0;
	}
	.joga-kal-detail-polozka + .joga-kal-detail-polozka {
		border-top: 1px solid rgba(0, 0, 0, 0.15);
	}
	.joga-kal-detail-polozka-nazev {
		font-weight: 700;
		margin: 0 0 0.2em;
	}
}