/*
Theme Name: BNM
Theme URI: https://www.bezpecne-na-motorce.cz/
Description: Dětské téma nad Twenty Twenty-Five pro web Bezpečně na motorce.
             Grafický jazyk vychází z moto-kurzy.cz/trenink-pro-motorkare,
             barvy jsou ale v theme.json, ne natvrdo v blocích.
Author: BNM
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
License: GNU General Public License v2 or later
Text Domain: bnm
*/

/* Vzhled řídí theme.json. Sem patří jen to, co se v theme.json vyjádřit nedá. */

/*
 * Zástupný údaj, který se teprve doplní.
 *
 * Schválně výrazné: na stagingu má být na první pohled vidět, co ještě není
 * rozhodnuté. Kdyby to splývalo s textem, odejde web ven s "cena 0 Kč".
 * Tahle třída z webu zmizí sama, jakmile se do filtru doplní hodnoty.
 */
.bnm-chybi {
	background: var(--wp--preset--color--zvyrazneni);
	color: var(--wp--preset--color--contrast);
	padding: 0 .25em;
	border-radius: 3px;
	font-weight: 700;
	white-space: nowrap;
}
.bnm-chybi::before { content: "⟨"; }
.bnm-chybi::after  { content: "⟩"; }

/*
 * Vyhrazené místo pro widget Google recenzí (Trustindex).
 *
 * Rozhodnutí z 13. 10. 2026: statické recenze opsané ručně se nepoužívají.
 * Nikdo by je neaktualizoval a počet hodnocení by se rozešel se skutečností.
 * Widget se doplní, až bude účet Trustindex propojený s profilem BNM.
 *
 * Styl se uplatní jen na PRÁZDNÝ div. Jakmile Trustindex dovnitř vykreslí
 * recenze, `:empty` přestane platit a rámeček sám zmizí - není co uklízet.
 */
.bnm-trustindex:empty {
	display: block;
	border: 2px dashed var(--wp--preset--color--tlumeny);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	text-align: center;
	color: var(--wp--preset--color--tlumeny);
	font-size: var(--wp--preset--font-size--small);
}
.bnm-trustindex:empty::before {
	content: "Místo pro hodnocení z Googlu. Doplní se widget Trustindex, až bude účet propojený.";
}

/*
 * Karty v řadě mají stejnou výšku.
 *
 * `core/columns` roztáhne sloupce, ale skupinu uvnitř ne - karty pak končí
 * každá jinde a řada vypadá rozvrkočeně. Tohle je jediná cesta, jak to
 * v blokovém tématu říct; `theme.json` výšku bloku nastavit neumí.
 *
 * Platí jen na skupinu, která je JEDINÝM dítětem sloupce - tedy na kartu.
 * Vícedílný sloupec (nadpis + text + tlačítko zvlášť) to nechává být.
 */
.wp-block-columns > .wp-block-column > .wp-block-group:only-child {
	height: 100%;
}

/*
 * Obrázek bez souboru nesmí shodit rozvržení.
 *
 * Dokud nedorazí fotky, jsou v obsahu bloky `core/image` s prázdným zdrojem.
 * Prohlížeč je vykreslí jako rozbitou ikonu o nulové výšce. Tohle z nich
 * udělá šedé místo o rozumném poměru stran, aby bylo vidět, kam fotka přijde.
 */
.wp-block-image img:not([src]),
.wp-block-image img[src=""] {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--pas-jemny);
	border: 2px dashed var(--wp--preset--color--tlumeny);
	border-radius: 6px;
}

/*
 * Odkazy na tmavém pásu.
 *
 * `theme.json` umí nastavit barvu odkazu jen globálně, a ta je `akce`
 * (dnes #0d7a33). Na tmavém pozadí `pas-tmavy` má kontrast pod 3:1 -
 * nečitelné. Na bílém přitom 5,54:1, takže globální hodnota je správná
 * a měnit se nesmí; opravuje se jen tenhle kontext.
 *
 * Bílá na tmavém pásu dává přes 12:1. Podtržení zůstává, aby odkaz zůstal poznat
 * i bez barvy.
 */
.has-pas-tmavy-background-color a,
.has-contrast-background-color a,
.has-pas-tmavy-background-color .wp-block-navigation a {
	color: var(--wp--preset--color--base);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
.has-pas-tmavy-background-color a:hover,
.has-contrast-background-color a:hover {
	text-decoration: none;
}

/*
 * Tlačítko uvnitř tmavého pásu si drží vlastní barvy.
 *
 * 🛑 Pravidlo výš je obecné na `a` a přebíjelo i text tlačítka. Výjimka
 *    vracela jen `text-decoration`, barvu ne - hlavní výzva k akci na tmavém
 *    pásu tak měla BÍLÝ text na oranžové, kontrast 2,63:1. Změřeno
 *    axe-core 13. 10. 2026 na čtrnácti stránkách. Text na oranžovém tlačítku
 *    musí být tmavý (`contrast`), jak to má předloha i skill `bnm-grafika`.
 */
.has-pas-tmavy-background-color .wp-block-button__link,
.has-contrast-background-color .wp-block-button__link {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
/* Obrysové tlačítko na tmavém pásu naopak bílé být musí - jinak zanikne. */
.has-pas-tmavy-background-color .is-style-outline .wp-block-button__link,
.has-contrast-background-color .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}
.has-pas-tmavy-background-color .is-style-outline .wp-block-button__link:hover,
.has-contrast-background-color .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/*
 * Fotky mezi sekcemi.
 *
 * Originály mají poměr 3:2, takže při šířce 1200 px měří 800 px na výšku
 * a zaberou skoro celou obrazovku. Ořez na 16:9 drží rytmus stránky
 * a u akčních fotek z kurzu nic podstatného neukrojí.
 *
 * `object-position` lehce nad střed: na fotkách z kurzu je zajímavý jezdec,
 * ne asfalt pod ním.
 */
.wp-block-image.bnm-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 42%;
	border-radius: 6px;
}

/* Na mobilu je 16:9 moc placaté, tam je čitelnější 4:3. */
@media (max-width: 600px) {
	.wp-block-image.bnm-foto img {
		aspect-ratio: 4 / 3;
	}
}

/*
 * Jeden levý okraj pro celou sekci.
 *
 * 🛑 Tohle byla viditelná vada, ne detail. Když jsem mřížky karet rozšířil
 *    na 1200 px, nadpisy sekcí zůstaly v úzkém sloupci 720 px, který
 *    blokové téma centruje. Nadpis tím začínal o 376 px vpravo od karet pod
 *    ním a stránka vypadala rozsypaně. Filip na to upozornil 13. 10. 2026.
 *
 * Řešení: každý přímý potomek sekce dostane šířku pásu 1200 px, takže
 * nadpisek, nadpis i mřížka začínají na témž místě.
 */
.wp-block-group.alignfull.is-layout-constrained > :not(.alignfull) {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/*
 * Dlouhý text se ale na 1200 px číst nedá - oko ztrácí řádek.
 *
 * Proto se nezužuje box (ten by se zase vycentroval a okraj by utekl), ale
 * přidá se mu odsazení zprava. Levý okraj tak zůstane na pásu a řádek
 * skončí po zhruba 62 znacích, což je čitelná délka.
 *
 * Netýká se odstavců s vlastním zarovnáním - ty si ho řídí samy.
 */
.wp-block-group.alignfull.is-layout-constrained > p:not([class*="has-text-align"]),
.wp-block-group.alignfull.is-layout-constrained > ul:not([class*="has-text-align"]),
.wp-block-group.alignfull.is-layout-constrained > ol:not([class*="has-text-align"]) {
	box-sizing: border-box;
	padding-inline-end: max(0px, calc(var(--wp--style--global--wide-size) - 62ch));
}

/*
 * Na užších obrazovkách pás i tak nevyplní šířku, zúžení není potřeba.
 *
 * 🛑 Selektor musí mít stejnou specificitu jako pravidlo výš, včetně `:not()`.
 *    Media query specificitu NEPŘIDÁVÁ. Bez `:not()` mělo pravidlo (0,3,2)
 *    proti (0,4,2) a prohrálo - na mobilu zůstalo odsazení 643 px a stránka
 *    přetékala vodorovně na 22 adresách. Změřeno 13. 10. 2026 na 360 px.
 */
@media (max-width: 1100px) {
	.wp-block-group.alignfull.is-layout-constrained > p:not([class*="has-text-align"]),
	.wp-block-group.alignfull.is-layout-constrained > ul:not([class*="has-text-align"]),
	.wp-block-group.alignfull.is-layout-constrained > ol:not([class*="has-text-align"]) {
		padding-inline-end: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   Vizuální jazyk podle předlohy moto-kurzy.cz
   Pravidla a důvody jsou ve skillu `bnm-grafika`.
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * Nadpisek sekce.
 *
 * VELKÁ PÍSMENA s prostrkáním, před nimi oranžová čárka. Bez té čárky je to
 * jen malý šedý text; s ní je to značka, že začíná nová sekce.
 */
.bnm-nadpisek {
	display: flex;
	align-items: center;
	gap: .75rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
}
.bnm-nadpisek::before {
	content: "";
	flex: 0 0 auto;
	width: 40px;
	height: 3px;
	background: var(--wp--preset--color--zvyrazneni);
}

/*
 * Hero s fotkou.
 *
 * 🛑 Přechod není ozdoba. Bez něj se čitelnost textu mění podle toho, co je
 *    zrovna pod ním na fotce - na obloze zmizí, na asfaltu drží. Přechod to
 *    sjednotí a text je čitelný vždy.
 */
.bnm-hero {
	position: relative;
	min-height: 72vh;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center 45%;
}
.bnm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(0, 0, 0, .78) 0%,
		rgba(0, 0, 0, .55) 45%,
		rgba(0, 0, 0, .15) 100%);
}
.bnm-hero > * {
	position: relative;   /* nad přechodem */
}
/*
 * 🛑 `!important` tady musí být.
 *    Obsah hera si nese presetové třídy jako `has-tlumeny-color`, které
 *    WordPress generuje s `!important`. Bez stejné zbraně zůstane nadpisek
 *    a drobný text tmavý na tmavé fotce a nepřečteš ho. Filip na to
 *    upozornil 13. 10. 2026.
 */
.bnm-hero h1,
.bnm-hero h2,
.bnm-hero p,
.bnm-hero li,
.bnm-hero .bnm-nadpisek {
	color: #fff !important;
}
/* Drobný text pod tlačítky smí být tlumenější, ale pořád čitelný (7,4:1). */
.bnm-hero p.has-small-font-size:not(.bnm-nadpisek) {
	color: rgba(255, 255, 255, .85) !important;
}
/* Zvýrazněná část nadpisu si drží oranžovou. */
.bnm-hero h1 .bnm-duraz {
	color: var(--wp--preset--color--zvyrazneni) !important;
}
/* Druhý řádek nadpisu oranžově - dvoubarevný nadpis z předlohy. */
.bnm-hero h1 .bnm-duraz {
	color: var(--wp--preset--color--zvyrazneni);
}
/* Tlačítko na fotce: vedlejší musí mít bílý rámeček, tmavý by zanikl. */
.bnm-hero .is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: #fff;
}
.bnm-hero .is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 782px) {
	.bnm-hero {
		min-height: 60vh;
	}
}

/*
 * Karta.
 *
 * Tlustý barevný levý okraj a kulatý odznak. Bez nich je to odstavec
 * v rámečku - a přesně tak vypadal web, než se tohle přidalo.
 */
.bnm-karta {
	border-radius: 10px;
	border-left: 4px solid var(--wp--preset--color--zvyrazneni);
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgba(32, 32, 32, .06), 0 8px 24px rgba(32, 32, 32, .05);
}
/*
 * 🛑 Obsah karty musí začínat na levém okraji karty.
 *
 *    Karta je `is-layout-constrained`, a WordPress k tomu generuje pravidlo
 *    `.is-layout-constrained > :where(…) { max-width: contentSize;
 *    margin-left: auto !important; margin-right: auto !important }`.
 *    Uvnitř karty to znamená dvě vady naráz:
 *
 *    1. Široká karta (hlavní nabídka přes celých 1200 px) zúží nadpis
 *       i text na 720 px a VYCENTRUJE je - nadpis pak začíná o 240 px
 *       vpravo od okraje karty a od fotky pod ní. Filip to nahlásil
 *       13. 10. 2026 snímkem sekce „hlavní nabídka".
 *    2. V kartě, ze které flexbox níž udělá sloupec, se `margin: auto`
 *       chová jinak než v bloku: každé dítě se smrskne na šířku obsahu
 *       a vycentruje se zvlášť. Nadpis, odstavec a odkaz pak začínají
 *       každý jinde - naměřeno 191 / 158 / 175 px uvnitř jedné karty.
 *
 *    Karta je uzavřená plocha s vlastním odsazením; obsah v ní nemá co
 *    centrovat. Proto se obě vlastnosti ruší najednou.
 */
.bnm-karta.is-layout-constrained > *,
.bnm-karta > * {
	max-width: 100%;
	margin-inline: 0 !important;
}

/* Odznak je kolečko, ne pás - ve sloupcovém flexu se nesmí roztáhnout. */
.bnm-karta > .bnm-odznak {
	align-self: flex-start;
}

.bnm-odznak {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	/* `color-mix` drží odznak v barvě značky i po změně palety. */
	background: color-mix(in srgb, var(--wp--preset--color--zvyrazneni) 16%, transparent);
	color: var(--wp--preset--color--zvyrazneni);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
}

/*
 * Pás čísel: svislé oddělovače mezi dlaždicemi.
 * Na mobilu se dlaždice skládají pod sebe, tam by čára rušila.
 */
@media (min-width: 783px) {
	.bnm-cisla .wp-block-column + .wp-block-column {
		border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--tlumeny) 25%, transparent);
		padding-left: var(--wp--preset--spacing--40);
	}
}

/* Nadpis sekce o bolesti je červený - odlišuje problém od řešení. */
.bnm-bolest h2 {
	color: var(--wp--preset--color--vystraha);
}

/*
 * Karty v řadě: stejná výška a tlačítko dole.
 *
 * Bez tohohle končí odkaz v každé kartě jinde, protože text má různou délku,
 * a řada vypadá rozsypaně. `margin-top:auto` odtlačí poslední prvek dolů,
 * takže všechny odkazy a tlačítka stojí v jedné přímce.
 */
.wp-block-columns > .wp-block-column > .bnm-karta,
.wp-block-columns > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.wp-block-columns > .wp-block-column > .bnm-karta > :last-child,
.wp-block-columns > .wp-block-column > .wp-block-group > :last-child {
	margin-top: auto;
}
/* Odkaz na konci karty vypadá jako tlačítko - je to výzva, ne poznámka. */
.bnm-karta > p:last-child > a:only-child {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--30);
	padding: .7rem 1.5rem;
	border: 2px solid var(--wp--preset--color--akce);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}
.bnm-karta > p:last-child > a:only-child:hover {
	background: var(--wp--preset--color--akce);
	color: var(--wp--preset--color--base);
}

/* ═══════════════════════════════════════════════════════════════════════
   Opravy a dotažení, 14. 10. 2026
   Každé pravidlo má důvod změřený v prohlížeči, ne „aby to vypadalo líp".
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * Obsah hera začíná na levém okraji pásu.
 *
 * 🛑 Hero je `alignfull` + `constrained`, uvnitř je další `constrained`
 *    skupina. Pravidlo o jednom levém okraji dá té skupině šířku pásu
 *    (1200 px), ale WordPress jejím dětem vnutí `contentSize` 720 px
 *    a `margin-inline: auto` - nadpisek, H1 i tlačítka tím skončily
 *    vycentrované uprostřed pásu, zhruba 360 px od jeho okraje.
 *    Skill `bnm-grafika` kap. 2: „Text zarovnaný vlevo, ne na střed.
 *    Na střed se dává hero, které nemá co říct."
 *
 *    Šířka 46rem drží řádek podnadpisu pod 62 znaky, aniž by se text
 *    vycentroval.
 */
.bnm-hero {
	/* Obsah hera je jediné dítě a musí vyplnit šířku pásu. */
	flex-direction: column;
	justify-content: center;
}
.bnm-hero > * {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
}
.bnm-hero > .wp-block-group > * {
	max-width: 46rem;
	margin-inline: 0 !important;
}

/*
 * Odsazení pod lepivou hlavičkou při skoku na kotvu.
 *
 * Odkaz `#objednavka` jinak zarovná cíl pod horní okraj okna a formulář
 * začíná schovaný za hlavičkou. 6rem pokrývá hlavičku i na mobilu.
 */
:target {
	scroll-margin-top: 6rem;
}
html {
	scroll-behavior: smooth;
}

/*
 * Viditelný fokus na všem, nejen na tlačítkách.
 *
 * `theme.json` umí obrys jen u tlačítka. Kdo chodí po webu klávesnicí,
 * potřebuje vidět i odkazy v menu, v patičce a v kartách.
 * `:focus-visible`, ne `:focus` - jinak obrys bliká i po kliknutí myší.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	border-radius: 2px;
}
.has-pas-tmavy-background-color :focus-visible,
.bnm-hero :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/*
 * Karta reaguje na myš.
 *
 * Karta, která vede na jinou stránku, musí dát najevo, že je klikatelná.
 * Posun o 2 px a hlubší stín stačí; větší pohyb na stránce s dvaceti
 * kartami ruší.
 */
.bnm-karta {
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bnm-karta:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(32, 32, 32, .07), 0 14px 32px rgba(32, 32, 32, .10);
}

/* Odkaz-tlačítko na konci karty se chová jako tlačítko i při najetí. */
.bnm-karta > p:last-child > a:only-child {
	transition: background-color .18s ease, color .18s ease;
}

/*
 * 🛑 Kdo má v systému zapnuté omezení pohybu, nesmí dostat žádný.
 *    Není to zdvořilost - u části lidí pohyb na obrazovce spouští nevolnost.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.bnm-karta:hover {
		transform: none;
	}
}

/*
 * Widget Google recenzí (Trustindex) se na mobilu nevejde.
 *
 * Vykresluje karty s pevnými šířkami a při 360 px přetékal o 7 px, takže
 * se celá stránka dala posouvat do strany. Cizí widget nejde přepsat
 * zevnitř; omezí se zvenčí.
 */
/*
 * 🛑 Do widgetu se nesmí sahat zevnitř. Pravidlo `.bnm-trustindex * {
 *    max-width: 100% }` mu na 390 px srazilo výšku na nulu - recenze se
 *    načetly, ale nebyly vidět. Widget si výšku počítá sám z šířky svých
 *    karet; když jim ji přepíšeme, výpočet mu nevyjde.
 *
 *    Omezení proto platí jen na obal: `overflow-x: auto` nechá karty, jak
 *    jsou, a případný přesah se posouvá uvnitř rámečku, ne celou stránkou.
 */
.bnm-trustindex {
	max-width: 100%;
}

/*
 * 🛑 `overflow-x: auto` tu bylo a muselo pryč. Vyrobilo posuvnou oblast,
 *    do které se klávesnicí nedá dostat (axe: scrollable-region-focusable,
 *    15 adres na mobilu). Přesah widgetu mezitím zmizel sám, protože se
 *    opravilo jeho skládání - viz pojistka v `functions.php`. Clip na
 *    `body` níž drží pojistku proti vodorovnému posuvu celé stránky.
 */

/*
 * Vložený formulář SimpleShopu má šedý text 1,88:1.
 *
 * Drobné řádky („Zabezpečeno…", odkaz na obchodní podmínky) kreslí cizí
 * skript barvou #b3b3b3 na náš jemný pás. To je pod hranicí čitelnosti
 * i pro člověka s dobrým zrakem. Nejde o cizí rámec, je to náš DOM,
 * takže se to opravit smí i dá.
 */
[data-simpleshopform] {
	color: var(--wp--preset--color--contrast);
}
[data-simpleshopform] *:not(input):not(select):not(textarea):not(button) {
	color: inherit;
}
[data-simpleshopform] a {
	color: var(--wp--preset--color--akce);
}

/*
 * Vložený formulář SimpleShopu.
 *
 * Je to `iframe` cizího původu; bez omezení šířky přetéká na mobilu stejně
 * jako widget recenzí.
 */
.bnm-objednavka iframe,
iframe[id^="SimpleShop"] {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

/*
 * Obrázky se nikdy nesmí roztáhnout přes svůj sloupec.
 * Pojistka proti tomu, aby jediná široká fotka rozhodila celou stránku.
 */
img,
svg,
video,
iframe {
	max-width: 100%;
}

/*
 * Poslední pojistka proti vodorovnému posuvníku.
 *
 * `overflow-x: clip` na `body`, ne `hidden`: `hidden` na `body` v některých
 * prohlížečích zruší `position: sticky` u hlavičky, `clip` ne.
 */
body {
	overflow-x: clip;
}

/*
 * Časté otázky.
 *
 * 🛑 Blok `core/details` je bez stylu holý `<details>`: trojúhelníček
 *    prohlížeče, nulové odsazení, žádná dělicí čára. Vedle sebe pak osm
 *    otázek vypadá jako odrážkový seznam, ne jako sekce, kterou někdo
 *    navrhl. Změřeno na úvodní stránce 14. 10. 2026.
 *
 * Otázka je řádek s vlastním plusem vpravo, který se po otevření otočí.
 * Značka prohlížeče se vypíná dvakrát, protože Safari poslouchá jen
 * `::-webkit-details-marker`.
 */
.wp-block-details {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--tlumeny) 22%, transparent);
}
.wp-block-details:first-of-type {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--tlumeny) 22%, transparent);
}
.wp-block-details > summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: var(--wp--preset--spacing--30) 3rem var(--wp--preset--spacing--30) 0;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	transition: color .15s ease;
}
.wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details > summary:hover {
	color: var(--wp--preset--color--akce);
}
/* Znaménko plus, které se po otevření otočí na minus. */
.wp-block-details > summary::after {
	content: "";
	position: absolute;
	inset-inline-end: .5rem;
	top: 50%;
	width: 14px;
	height: 2px;
	background: var(--wp--preset--color--zvyrazneni);
	transform: translateY(-50%);
}
.wp-block-details > summary::before {
	content: "";
	position: absolute;
	inset-inline-end: calc(.5rem + 6px);
	top: 50%;
	width: 2px;
	height: 14px;
	background: var(--wp--preset--color--zvyrazneni);
	transform: translateY(-50%) scaleY(1);
	transform-origin: center;
	transition: transform .18s ease;
}
.wp-block-details[open] > summary::before {
	transform: translateY(-50%) scaleY(0);
}
.wp-block-details > :not(summary) {
	margin-block: 0 var(--wp--preset--spacing--30);
	max-width: 62ch;
	color: var(--wp--preset--color--tlumeny);
}

/*
 * Lepivá hlavička.
 *
 * Stránky kurzů měří přes pět tisíc pixelů. Kdo je dočte do půlky, nemá
 * se jak dostat zpátky k nabídce, aniž by jel myší nahoru. Hlavička je
 * nízká (72 px i s logem), takže z obrazovky neukrojí nic podstatného.
 *
 * `backdrop-filter` ponechává fotku pod hlavičkou lehce vidět; prohlížeče,
 * které ho neumí, dostanou plnou bílou z `background-color`.
 */
body > .wp-site-blocks > header.wp-block-group {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
@supports not (backdrop-filter: blur(10px)) {
	body > .wp-site-blocks > header.wp-block-group {
		background-color: var(--wp--preset--color--base);
	}
}

/*
 * Nadpisek uvnitř karty není nadpisek sekce.
 *
 * V kartách „Co se dá objednat právě teď" nesl popisek zelenou `akce`,
 * tedy barvu odkazů - vypadal jako odkaz, který nejde kliknout. Patří mu
 * stejná role jako nadpisku sekce: tlumená, prostrkaná, velkými.
 */
.bnm-karta > p.has-akce-color:first-child,
.bnm-karta > p.has-akce-color + h3 ~ p.has-akce-color {
	color: var(--wp--preset--color--tlumeny);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Obrázky se nikdy nenačítají dřív, než je potřeba, kromě toho prvního.
 * Fotka v heru je `background-image`, takže ji lazy-loading netrápí;
 * tohle platí na fotky mezi sekcemi.
 */
.wp-block-image.bnm-foto img {
	background: var(--wp--preset--color--pas-jemny);
}

/* ═══════════════════════════════════════════════════════════════════════
   Průvodce výběrem kurzu (/kviz)
   Chování je v `kviz.js`, tohle je jen vzhled. Bez skriptu se nic z toho
   nezobrazí - `#bnm-kviz` je v markupu skrytý a odkrývá ho až skript.
   ═══════════════════════════════════════════════════════════════════════ */

.bnm-kviz {
	max-width: 46rem;
}
/* Výchozí stav: průvodce skrytý, statický seznam vidět. Skript to prohodí. */
.bnm-kviz--skryty {
	display: none;
}

/* Ukazatel postupu. Bez něj člověk neví, jestli odpovídá na druhou ze čtyř
   otázek, nebo z dvaceti - a to je rozdíl mezi „dokončím to" a „zavřu to". */
.bnm-kviz__postup {
	height: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--tlumeny) 20%, transparent);
	margin-bottom: var(--wp--preset--spacing--40);
	overflow: hidden;
}
.bnm-kviz__pruh {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--zvyrazneni);
	transition: width .25s ease;
}

.bnm-kviz__nadpisek {
	color: var(--wp--preset--color--tlumeny);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--20);
}
.bnm-kviz__otazka {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--40);
}
.bnm-kviz__otazka:focus-visible {
	outline: none;   /* fokus je tu jen kvůli čtečce, ne na ukázání */
}

/*
 * Odpověď je celá klikatelná plocha, ne jen slovo.
 * Na mobilu je to jediný rozdíl mezi „trefím to palcem" a „netrefím".
 */
.bnm-kviz__odpovedi {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}
.bnm-kviz__odpoved {
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--tlumeny) 30%, transparent);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.bnm-kviz__odpoved:hover {
	border-color: var(--wp--preset--color--zvyrazneni);
	background: color-mix(in srgb, var(--wp--preset--color--zvyrazneni) 7%, transparent);
	transform: translateX(2px);
}

.bnm-kviz__zpet {
	margin-top: var(--wp--preset--spacing--40);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--tlumeny);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}
.bnm-kviz__zpet:hover {
	color: var(--wp--preset--color--contrast);
}

.bnm-kviz__popis {
	color: var(--wp--preset--color--tlumeny);
	margin-bottom: var(--wp--preset--spacing--40);
}
.bnm-kviz__akce {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}
/* Tlačítka výsledku vypadají stejně jako tlačítka jinde na webu. */
.bnm-kviz__tlacitko {
	display: inline-block;
	padding: 1rem 2.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--zvyrazneni);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.bnm-kviz__tlacitko:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.bnm-kviz__tlacitko--obrys {
	background: transparent;
	border: 2px solid var(--wp--preset--color--contrast);
	padding: calc(1rem - 2px) calc(2.25rem - 2px);
}
.bnm-kviz__tlacitko--obrys:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.bnm-kviz__alternativa {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--tlumeny);
	font-size: var(--wp--preset--font-size--small);
}

@media (prefers-reduced-motion: reduce) {
	.bnm-kviz__odpoved:hover {
		transform: none;
	}
	.bnm-kviz__pruh {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   Kontaktní formulář (Contact Form 7)
   Plugin kreslí holá pole bez stylu. Vzhled drží paletu a tvar tlačítek
   zbytku webu, aby formulář nevypadal jako přilepený cizí kus.
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * 🛑 Trojí `!important` tu není nedbalost.
 *    Obal formuláře je přímým potomkem sekce přes celou šířku, takže mu
 *    pravidlo „jeden levý okraj pro celou sekci" dává šířku pásu 1200 px,
 *    a WordPress k tomu jeho dětem vnucuje `contentSize` 720 px se středícím
 *    `margin: auto !important`. Rámeček formuláře byl pak 1200 px široký
 *    a pole v něm vycentrovaná - mezi okrajem rámečku a polem zbývalo
 *    240 px prázdna. Změřeno 14. 10. 2026.
 */
.bnm-formular.wp-block-group {
	max-width: 42rem !important;
	/*
	 * Levý okraj formuláře musí sedět s nadpisem sekce nad ním. `margin: 0`
	 * ho posadilo na odsazení sekce (48 px), zatímco nadpis stojí na pásu
	 * 1200 px (120 px). Tenhle výpočet dorovná rozdíl a na úzké obrazovce,
	 * kde pás není kam centrovat, vyjde nula.
	 */
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-inline-end: 0 !important;
}
.bnm-formular > *,
.bnm-formular form > * {
	max-width: 100% !important;
	margin-inline: 0 !important;
}
/* Pole jsou odstavce; mezera mezi nimi patří formuláři, ne bloku. */
.bnm-formular form > * + * {
	margin-block-start: 0;
}

/*
 * 🛑 Contact Form 7 si do formuláře sám dopisuje `<br>` za každý popisek
 *    (automatické odstavcování). V pružném sloupci z nich jsou plnohodnotné
 *    položky vysoké 24 px, takže mezi popiskem a polem vznikla mezera přes
 *    30 px a formulář se roztáhl na dvojnásobek. Rozestupy řídí `gap`.
 */
.bnm-pole br {
	display: none;
}

.bnm-formular {
	padding: var(--wp--preset--spacing--50);
	border-radius: 10px;
	border-left: 4px solid var(--wp--preset--color--zvyrazneni);
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgba(32, 32, 32, .06), 0 8px 24px rgba(32, 32, 32, .05);
}

.bnm-pole {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin-block: 0 var(--wp--preset--spacing--30);
}
.bnm-pole label {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}
/* 🛑 Hvězdička u povinného pole nesmí být jediný signál - je skrytá před
   čtečkou (`aria-hidden`) a tu informaci nese `required` na poli samotném. */
.bnm-pole__povinne {
	color: var(--wp--preset--color--vystraha);
}
.bnm-pole__napoveda {
	color: var(--wp--preset--color--tlumeny);
	font-size: var(--wp--preset--font-size--small);
}

.bnm-formular input[type="text"],
.bnm-formular input[type="email"],
.bnm-formular input[type="tel"],
.bnm-formular select,
.bnm-formular textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .9rem;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--tlumeny) 35%, transparent);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	/* 🛑 16 px minimálně: Safari na iPhonu při menším písmu sám přiblíží
	   stránku, jakmile člověk klikne do pole, a rozvržení se rozsype. */
	font-size: max(1rem, 16px);
	transition: border-color .15s ease;
}
.bnm-formular textarea {
	resize: vertical;
	min-height: 8rem;
}
.bnm-formular :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--zvyrazneni);
}

.bnm-pole--souhlas {
	flex-direction: row;
	align-items: flex-start;
	gap: .6rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--tlumeny);
}
.bnm-pole--souhlas input[type="checkbox"] {
	margin-top: .2em;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--wp--preset--color--akce);
	flex: 0 0 auto;
}
.bnm-pole--souhlas .wpcf7-list-item {
	margin: 0;
}

.bnm-formular .wpcf7-submit {
	padding: 1rem 2.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--zvyrazneni);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.bnm-formular .wpcf7-submit:hover:not([disabled]) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
/*
 * 🛑 Contact Form 7 drží odesílací tlačítko vypnuté, dokud člověk nezaškrtne
 *    souhlas. Vypadalo ale pořád stejně oranžově a klikání nikam nevedlo -
 *    návštěvník nemá jak poznat, co se po něm chce. Vypnuté tlačítko musí
 *    být vypnuté i na pohled.
 */
.bnm-formular .wpcf7-submit[disabled] {
	background: color-mix(in srgb, var(--wp--preset--color--tlumeny) 25%, transparent);
	color: var(--wp--preset--color--tlumeny);
	cursor: not-allowed;
}

/* Hlášky pluginu: výchozí jsou šedé rámečky bez vazby na paletu. */
.bnm-formular .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--30);
	border-width: 2px;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
}
.bnm-formular .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--vystraha);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.bnm-formular .wpcf7-not-valid {
	border-color: var(--wp--preset--color--vystraha);
}
.bnm-formular form.invalid .wpcf7-response-output,
.bnm-formular form.unaccepted .wpcf7-response-output,
.bnm-formular form.failed .wpcf7-response-output {
	border-color: var(--wp--preset--color--vystraha);
	color: var(--wp--preset--color--vystraha);
}
.bnm-formular form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--akce);
	color: var(--wp--preset--color--akce);
}