/**
 * Vzhled hlavičky a patičky (GP Elements).
 *
 * Bloky v obou elementech mají záměrně prázdné "styles" — všechen vzhled
 * je tady. Důvod: ručně psaný atribut "css" na blocích menu se v tomto
 * sestavení GenerateBlocks Pro umí tiše ztratit z výstupu a zároveň dělá
 * z bloku v editoru „neplatný obsah". Takhle zůstává vše klikatelné
 * v GB UI a pravidla jsou na jednom čitelném místě.
 *
 * Barvy se berou z globálních barev GeneratePress (Customizer → Barvy),
 * takže změna palety se propíše i sem.
 */

/* ===========================================================================
 * Utility lišta — odkazy pro současné žáky a rodiče
 * ======================================================================== */

.shs-utility {
	background-color: var(--ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.8125rem;
	/* Stejný důvod jako u .shs-navigace níž — barva na kořeni, ať `inherit`
	   z pravidla pluginu funguje v náš prospěch. */
	color: var(--tint);
}

/*
 * Šířka i odsazení se řídí týmiž proměnnými jako zbytek webu
 * (theme.css → :root). Dřív tu byla `max-width: 1240px` a k ní odsazení
 * navíc — protože box-sizing je border-box, ukusovalo si odsazení
 * z těch 1240 a text hlavičky pak začínal o 13 px vpravo od textu
 * v sekcích pod ní. Připočtením odsazení k šířce sedí levé hrany
 * utility lišty, navigace, sekcí i patičky na sobě.
 */
.shs-utility-inner {
	display: flex;
	justify-content: flex-end;
	max-width: calc(var(--shs-sirka, 1240px) + 2 * var(--shs-okraj, 20px));
	margin: 0 auto;
	padding: 0 var(--shs-okraj, 20px);
}

.shs-utility .gb-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shs-utility .gb-menu-link {
	display: block;
	padding: 0.5rem 0;
	color: var(--tint);
	text-decoration: none;
	font-weight: 500;
}

.shs-utility .gb-menu-link:hover,
.shs-utility .gb-menu-link:focus-visible {
	color: var(--spot);
}


/* ===========================================================================
 * Hlavička
 * ======================================================================== */

.gb-site-header {
	background-color: var(--ink);
	position: relative;
	z-index: 20;
}

/*
 * Pravidla navigace se chytají dvou tříd zároveň:
 *
 *  - `shs-navigace` — globální třída přidělená v editoru (Global Classes),
 *  - `gb-navigation-shsnv` — třída, kterou si blok navigace podle uniqueId
 *    připíná vždy sám, i bez vlastních stylů.
 *
 * Druhá je pojistka. Globální třída jde v editoru jedním kliknutím
 * odebrat — stalo se to 30. 8. a celá hlavička spadla na neostylované
 * odrážky. Třída podle uniqueId zůstává, dokud blok existuje; zmizí jen
 * tehdy, když se navigace smaže a vloží nová.
 */
:is(.shs-navigace, .gb-navigation-shsnv) {
	display: flex;
	align-items: center;
	gap: 2rem;
	max-width: calc(var(--shs-sirka, 1240px) + 2 * var(--shs-okraj, 20px));
	margin: 0 auto;
	padding: 1.125rem var(--shs-okraj, 20px);
	/* Referenční rámec pro panel vyhledávání — vždy pod celou navigací. */
	position: relative;
	/*
	 * GenerateBlocks Pro (classic-menu-style.css) má na odkazech vlastní
	 * pravidlo `.gb-menu--base :where(.menu-item) .gb-menu-link { color:
	 * inherit }` se stejnou specificitou jako naše `.gb-menu-link` níž a
	 * načítá se PO tomto souboru — v nerozhodném souboji tedy vyhrává ono
	 * a odkaz zdědí barvu odjinud (bez tohohle řádku černou). Nastavením
	 * barvy tady na kořeni funguje `inherit` v náš prospěch, ať vyhraje
	 * kterékoli z pravidel.
	 */
	color: rgba(255, 255, 255, 0.92);
}

/*
 * Wordmark — tři řádky nad sebou podle nového návrhu (2026-09):
 * „HOTELOVÁ" / „ŠKOLA" tučně bílé, „VRŠOVICKÁ" běžnou tloušťkou v mátové
 * barvě. Text se píše přirozeně (velká jen první písmena), velká písmena
 * dělá text-transform — čitelnější v administraci než ručně psaný caps lock.
 */
.shs-wordmark {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 0.05em;
	text-decoration: none;
	font-size: 1.375rem;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.shs-wordmark__radek--tucne {
	color: var(--paper);
	font-weight: 700;
}

.shs-wordmark__radek--tenke {
	color: var(--tint);
	font-weight: 400;
}

@media (max-width: 1000px) {
	.shs-wordmark {
		font-size: 1.125rem;
	}
}

/* Hlavní menu se roztáhne a odsune hledání i jazyky doprava. */
:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-container {
	margin-left: auto;
}

:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-item {
	position: relative;
}

/* Odkaz je inline-flex, aby šipka podmenu seděla na řádku vedle textu.
   Při display:block se odsazovala pod popisek. */
:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.5rem 0;
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	white-space: nowrap;
}

/* Šipku u položek s podmenu vykresluje GenerateBlocks samo
   (span.gb-submenu-toggle) — vlastní se nepřidává, byla by druhá. */
:is(.shs-navigace, .gb-navigation-shsnv) .gb-submenu-toggle {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

:is(.shs-navigace, .gb-navigation-shsnv) .gb-submenu-toggle-icon {
	width: 0.7em;
	height: 0.7em;
	transition: transform 160ms ease;
}

:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-item:hover > .gb-menu-link .gb-submenu-toggle-icon,
:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-item:focus-within > .gb-menu-link .gb-submenu-toggle-icon {
	transform: rotate(180deg);
}

:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-link:hover,
:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-link:focus-visible,
:is(.shs-navigace, .gb-navigation-shsnv) .current-menu-item > .gb-menu-link,
:is(.shs-navigace, .gb-navigation-shsnv) .current-menu-ancestor > .gb-menu-link {
	color: var(--spot);
}

/* ---------------------------------------------------------------------------
 * Hledání
 * ------------------------------------------------------------------------- */

.shs-hledat {
	display: flex;
	align-items: center;
	padding-left: 1.25rem;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.92);
}

.shs-hledani {
	/*
	 * Žádné position:relative tady — panel (.shs-hledani__panel) má být
	 * vždy pod celou navigací, ne pod touhle malou ikonou, takže musí
	 * "vidět" skrz až na position:relative u .shs-navigace výše.
	 */
	display: flex;
	align-items: center;
}

.shs-hledani__spoustec {
	display: flex;
	align-items: center;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

/*
 * Jen změna barvy ikony, žádné podbarvení plochy — lupa sedí v hlavičce
 * vedle textového menu, kde by se čtvereček pozadí choval jinak než
 * sousední položky.
 */
.shs-hledani__spoustec:hover,
.shs-hledani__spoustec:focus-visible {
	background: none;
	color: var(--spot);
}

/* Přepínají se ikony lupy a křížku podle stavu panelu. */
.shs-hledani__ikona-zavrit,
.shs-hledani--otevreno .shs-hledani__ikona-hledat {
	display: none;
}

.shs-hledani--otevreno .shs-hledani__ikona-zavrit {
	display: block;
}

/*
 * Na webovém náhledu (desktop) panel visí zarovnaný doprava pod celou
 * navigací, pevná šířka 350px — díky position:relative na
 * .shs-navigace/.gb-navigation-shsnv výše je "top: 100%" vždy přesně
 * hrana navigace, ať má jakoukoli výšku. Na mobilu (viz media query níž)
 * se místo toho roztahuje na celou šířku.
 *
 * right: 20px, ne 0 — .shs-navigace má vlastní padding-right: 20px, takže
 * "right: 0" by ukotvilo panel k vnějšímu okraji navigace (za paddingem),
 * 20px za viditelný konec obsahu (např. přepínač CZ). S 20px panel
 * lícuje přesně s viditelnou pravou hranou hlavičky.
 */
.shs-hledani__panel {
	position: absolute;
	top: 100%;
	right: 20px;
	width: 350px;
	z-index: 40;
	padding: 0.75rem;
	background-color: var(--ink);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.shs-hledani__panel form {
	display: flex;
	gap: 0.5rem;
}

.shs-hledani__panel input[type="search"] {
	flex: 1;
	width: auto;
	max-width: none;
	padding: 0.5rem 0.75rem;
	background-color: transparent;
	border: 1px solid var(--tint);
	color: var(--paper);
	font-family: inherit;
	font-size: 0.9375rem;
}

.shs-hledani__panel input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.shs-hledani__odeslat {
	padding: 0.5rem 1rem;
	background-color: var(--accent);
	border: 0;
	color: var(--paper);
	font-family: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
}

.shs-hledani__odeslat:hover,
.shs-hledani__odeslat:focus-visible {
	background-color: var(--tint);
	color: var(--ink);
}


/* ---------------------------------------------------------------------------
 * Přepínač jazyků
 *
 * Vypisuje se vlastní seznam se stejnými třídami jako blok Menu, takže na
 * něj platí pravidla podmenu níže a chová se úplně stejně jako O škole
 * nebo Obory. Vlastní přepínač GTranslate se skrývá — jeho skript ale musí
 * proběhnout, jinak by nefungoval samotný překlad.
 * ------------------------------------------------------------------------- */

.shs-jazyky {
	display: flex;
	align-items: center;
	padding-left: 1rem;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* Motor překladu — nesmí zmizet z DOM, jen z pohledu. */
.shs-gt-motor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.shs-jazyky-menu {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shs-jazyky-menu > .gb-menu-item {
	position: relative;
}

/*
 * Velikost ani řez se tu záměrně nenastavují: značky jsou stejné jako
 * u bloku Menu (`gb-menu` > `gb-menu-item` > `gb-menu-link`), takže na ně
 * dopadne typografie z Customizeru úplně stejně jako na hlavní navigaci.
 * Vlastní font-size by ji přebil a přepínač by měl jiné písmo než zbytek.
 */
.shs-jazyky-menu .gb-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.5rem 0;
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	white-space: nowrap;
}

.shs-jazyky-menu .gb-menu-link:hover,
.shs-jazyky-menu .gb-menu-link:focus-visible {
	color: var(--spot);
}

.shs-jazyky-menu .gb-submenu-toggle {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.shs-jazyky-menu .gb-submenu-toggle-icon {
	width: 0.7em;
	height: 0.7em;
	transition: transform 160ms ease;
}

.shs-jazyky-menu .gb-menu-item:hover > .gb-menu-link .gb-submenu-toggle-icon,
.shs-jazyky-menu .gb-menu-item:focus-within > .gb-menu-link .gb-submenu-toggle-icon {
	transform: rotate(180deg);
}

/* Otevírá se doleva — jde o poslední prvek v řádku, doprava by přetekl.
   Šířku určuje nejdelší název jazyka, ne pevná hodnota. */
:is(.shs-navigace, .gb-navigation-shsnv) .shs-jazyky-menu .gb-sub-menu {
	position: absolute;
	top: 100%;
	right: -0.5rem;
	left: auto;
	z-index: 30;
	display: block;
	min-width: max-content;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background-color: var(--paper);
	border: 1px solid rgba(38, 55, 79, 0.1);
	box-shadow: 0 12px 32px rgba(38, 55, 79, 0.12);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

:is(.shs-navigace, .gb-navigation-shsnv) .shs-jazyky-menu .gb-menu-item:hover > .gb-sub-menu,
:is(.shs-navigace, .gb-navigation-shsnv) .shs-jazyky-menu .gb-menu-item:focus-within > .gb-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/*
 * Podmenu jazyků je bílý plovoucí panel — musí mít tmavý text bez ohledu
 * na to, že text v hlavičce je teď světlý (zdědil by se odsud).
 */
:is(.shs-navigace, .gb-navigation-shsnv) .shs-jazyky-menu .gb-sub-menu .gb-menu-link {
	display: block;
	padding: 0.4rem 0.9rem;
	color: var(--ink);
	font-weight: 500;
	white-space: nowrap;
}

/* Právě zvolený jazyk se v nabídce nenabízí. V DOM ale zůstává, aby se
   dal po přepnutí vrátit zpět bez znovunačtení stránky. */
:is(.shs-navigace, .gb-navigation-shsnv) .shs-jazyky-menu .gb-sub-menu [aria-current="true"] {
	display: none;
}


/* ---------------------------------------------------------------------------
 * Podmenu — otevírá se na hover i na fokus z klávesnice
 * ------------------------------------------------------------------------- */

:is(.shs-navigace, .gb-navigation-shsnv) .gb-sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 30;
	display: block;
	min-width: 15rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background-color: var(--paper);
	border: 1px solid rgba(38, 55, 79, 0.1);
	box-shadow: 0 12px 32px rgba(38, 55, 79, 0.12);

	/* Skryté, ale stále v toku — proto opacity, ne display:none:
	   dropdown tak jde animovat a čtečky ho najdou při fokusu. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-item:hover > .gb-sub-menu,
:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-item:focus-within > .gb-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Stejná pojistka pro hlavní menu — podmenu je bílé, text musí zůstat tmavý. */
:is(.shs-navigace, .gb-navigation-shsnv) .gb-sub-menu .gb-menu-link {
	padding: 0.5rem 1.25rem;
	color: var(--ink);
	font-weight: 500;
	white-space: normal;
}

/*
 * Stejná specificita jako pravidlo výše (tři třídy) - bez vlastního
 * hover/focus pravidla tu proto vždy vyhrálo ono (je v souboru pozdější),
 * takže se položka podmenu při najetí barevně vůbec nezměnila.
 */
:is(.shs-navigace, .gb-navigation-shsnv) .gb-sub-menu .gb-menu-link:hover,
:is(.shs-navigace, .gb-navigation-shsnv) .gb-sub-menu .gb-menu-link:focus-visible {
	color: var(--spot);
}


/* ---------------------------------------------------------------------------
 * Mobil
 * ------------------------------------------------------------------------- */

:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-toggle {
	display: none;
	margin-left: auto;
	padding: 0.5rem;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
}

@media (max-width: 1000px) {
	:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-toggle {
		display: block;
	}

	:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-container {
		margin-left: 0;
	}

	/*
	 * GB Pro počítá s tím, že mobilní panel menu (.gb-menu-container--mobile)
	 * dostane position:fixed odjinud (inset:0/width:100% z pluginu jinak
	 * nemá žádný efekt a panel zůstává v běžném toku — zmáčknutý flexboxem
	 * hlavičky na pár pixelů širokou proužku). Plugin samotný position
	 * nikde nenastavuje, takže to musí dodat motiv.
	 */
	:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-container--mobile {
		position: fixed;
		background-color: var(--ink);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
	}

	/*
	 * Bez atributu data-gb-mobile-menu-transition plugin sám nikde
	 * neskrývá zavřený stav panelu (žádné display:none/opacity:0 pravidlo
	 * pro chybějící --toggled) — spoléhá na to, že motiv doplní i tohle.
	 */
	:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-container--mobile:not(.gb-menu-container--toggled) {
		display: none;
	}

	:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu {
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		padding: 1rem var(--shs-okraj, 20px) 1.5rem;
		text-align: center;
	}

	:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu > .menu-item {
		width: 100%;
	}

	:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-link {
		justify-content: center;
	}

	/*
	 * Na mobilu plugin po otevření menu přesune fokus na první položku
	 * (kvůli přístupnosti) — díky tomu by `:focus-within` otočil šipku i
	 * u položky, na kterou uživatel vůbec neklikl. Otáčení se tu proto
	 * váže jen na skutečný stav rozbalení (aria-expanded), ne na fokus.
	 */
	:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-item:focus-within > .gb-menu-link .gb-submenu-toggle-icon {
		transform: none;
	}

	:is(.shs-navigace, .gb-navigation-shsnv) .gb-menu-link[aria-expanded="true"] .gb-submenu-toggle-icon {
		transform: rotate(180deg);
	}

	/*
	 * Na mobilu se podmenu rozbaluje pod položkou na celou šířku panelu
	 * (ne úzké odsazené doleva jako plovoucí panel na desktopu).
	 */
	:is(.shs-navigace, .gb-navigation-shsnv) .gb-sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		width: 100%;
		border: 0;
		box-shadow: none;
		padding: 0;
	}

	:is(.shs-navigace, .gb-navigation-shsnv) .gb-sub-menu .gb-menu-link {
		justify-content: center;
	}

	.shs-hledat {
		padding-left: 0;
		border-left: 0;
	}

	/*
	 * Na mobilu se panel místo pevné šířky 280px roztáhne přes celou
	 * navigaci (edge-to-edge včetně paddingu .shs-navigace) - proto tu
	 * right vrací zpět na 0 (na desktopu je kvůli zarovnání na 20px).
	 * Zarovnání obsahu s viditelnou hranou zajišťuje vlastní vnitřní
	 * padding panelu níž.
	 */
	.shs-hledani__panel {
		left: 0;
		right: 0;
		width: auto;
		padding: 0.75rem var(--shs-okraj, 20px);
	}

	/*
	 * Přepínač jazyků je poslední v řádku hlavičky a na úzkém displeji
	 * vyčníval i s rozbalenou nabídkou za pravý okraj okna — stránka pak
	 * šla posouvat do strany. Odsazení zleva tu nemá co držet a nabídka
	 * se zarovná na okraj přepínače místo přesahu.
	 */
	:is(.shs-navigace, .gb-navigation-shsnv) .shs-jazyky {
		padding-left: 0;
	}

	:is(.shs-navigace, .gb-navigation-shsnv) .shs-jazyky-menu .gb-sub-menu {
		right: 0;
	}

	.shs-utility-inner {
		justify-content: flex-start;
	}

	.shs-utility .gb-menu {
		gap: 1rem;
	}
}

/*
 * Na úzkém mobilu se 6 položek utility lišty i s mezerami nevejde na
 * jeden řádek za normálních rozměrů — zmenšuje se písmo a mezery a jako
 * pojistka se nechává vodorovné swipe místo zalomení na druhý řádek.
 */
@media (max-width: 600px) {
	.shs-utility-inner {
		padding: 0 12px;
	}

	.shs-utility .gb-menu {
		flex-wrap: nowrap;
		gap: 0.75rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.shs-utility .gb-menu::-webkit-scrollbar {
		display: none;
	}

	.shs-utility .gb-menu-link {
		white-space: nowrap;
	}

	.shs-utility {
		font-size: 0.6875rem;
	}
}


/* ===========================================================================
 * Patička
 * ======================================================================== */

.shs-paticka {
	background-color: var(--ink);
	color: var(--paper);
	padding: clamp(2.5rem, 5vw, 4.5rem) 20px 1.5rem;
}

.shs-ft-radek-sloupcu {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	max-width: var(--shs-sirka, 1240px);
	margin: 0 auto;
}

.shs-ft-sloupec {
	text-align: center;
}

.shs-ft-soc .shs-soc-radek {
	justify-content: center;
}

/* Stejné pravidlo jako u .shs-ft-sloupec .shs-hodiny - na desktopu
   doleva, na mobilu (sloupce pod sebou) zůstává na střed. */
@media (min-width: 901px) {
	.shs-ft-soc .shs-soc-radek {
		justify-content: flex-start;
	}
}

/*
 * Sloupce patičky mají ručně nastavený padding-left:25% (přidáno přímo
 * v editoru jako dřívější způsob vystředění na desktopu) — na mobilu, kde
 * je na šířku daleko míň místa, ale ubírá skoro čtvrtinu šířky a obsah
 * netiskne doprostřed, jen ho zmáčkne k pravému okraji. Zvýšená
 * specificita (zdvojená třída) tu vyhraje nad stejně specifickou
 * per-blokovou třídou bez potřeby !important.
 */
@media (max-width: 900px) {
	.gb-element-shsftc1.gb-element-shsftc1,
	.gb-element-shsftc2.gb-element-shsftc2,
	.gb-element-shsftc3.gb-element-shsftc3 {
		padding-left: 0;
	}
}

.shs-ft-label {
	margin: 0 0 1rem;
	color: var(--spot);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Cihlová na tmavě modré nemá dost kontrastu na drobné písmo —
   v patičce se proto label rozjasňuje. */
.shs-paticka .shs-ft-label {
	color: #e8836f;
}

.shs-ft-radek {
	margin: 0 0 0.5rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	/* Adresa se zadává na dva řádky (ulice / PSČ a město) — bez tohohle
	   by se zalomení z pole slilo do jednoho řádku. */
	white-space: pre-line;
}

.shs-ft-hodiny {
	margin-top: 1rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.6);
}

.shs-ft-odkaz,
.shs-paticka .gb-menu-link {
	display: block;
	margin-bottom: 0.5rem;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.shs-ft-odkaz:hover,
.shs-ft-odkaz:focus-visible,
.shs-paticka .gb-menu-link:hover,
.shs-paticka .gb-menu-link:focus-visible {
	color: var(--paper);
	text-decoration: underline;
}

.shs-paticka .gb-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sociální sítě — čtvercová tlačítka podle designu */
.shs-soc-radek {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.shs-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 2px;
	color: rgba(255, 255, 255, 0.82);
}

.shs-soc:hover,
.shs-soc:focus-visible {
	background-color: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

.shs-ft-tlacitko {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.75rem 1.5rem;
	background-color: var(--paper);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	border-radius: 2px;
}

.shs-ft-tlacitko:hover,
.shs-ft-tlacitko:focus-visible {
	background-color: var(--tint2);
	color: var(--ink);
}

.shs-ft-spodek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	max-width: var(--shs-sirka, 1240px);
	margin: 3rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.875rem;
}

.shs-ft-copy {
	margin: 0;
	margin-right: auto;
	color: rgba(255, 255, 255, 0.6);
}

.shs-ft-odkaz-maly {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.shs-ft-odkaz-maly:hover,
.shs-ft-odkaz-maly:focus-visible {
	color: var(--paper);
	text-decoration: underline;
}

@media (max-width: 700px) {
	.shs-ft-radek-sloupcu {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}


/* ===========================================================================
 * CTA sekce "Přijďte se k nám podívat" — přechod z tmavě modré přes fotku
 * ======================================================================== */

.shs-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(0deg, rgba(25, 33, 76, 1) 0%, rgba(25, 33, 76, 0.3) 50%, rgba(25, 33, 76, 0.08) 100%);
	pointer-events: none;
	z-index: 1;
}


/* ===========================================================================
 * Hero — šipky/tečky carouselu
 * ======================================================================== */

/* Pod hlavičkou (v klidu 20, při scrollu 100 v "jezdícím" stavu) — viz shs-navigace. */
.shs-hero-sekce .swiper-button-prev,
.shs-hero-sekce .swiper-button-next,
.shs-hero-sekce .swiper-pagination {
	z-index: 5;
}

@media (max-width: 900px) {
	/*
	 * Panel s textem je na mobilu ukotvený dole a zabírá velkou část výšky
	 * sekce — šipky uprostřed celé sekce (výchozí chování swiperu) by tak
	 * ležely přes text. Posouvají se do horní, čistě fotografické části.
	 */
	.shs-hero-sekce .swiper-button-prev,
	.shs-hero-sekce .swiper-button-next {
		top: 76px;
	}
}


/* ===========================================================================
 * Novinky ("Ze života školy") — nadpisy karet
 * ======================================================================== */

.gb-loop-item-03857f54 .gb-text-d101e8b6 a {
	color: var(--ink);
	text-decoration: none;
}

.gb-loop-item-03857f54 .gb-text-d101e8b6 a:hover,
.gb-loop-item-03857f54 .gb-text-d101e8b6 a:focus-visible {
	color: var(--spot);
}


/* ===========================================================================
 * Drobky (breadcrumbs) v záhlaví podstránek — sdílený blok v hlavičce
 * ======================================================================== */

/* Drobky (breadcrumbs) přesunuty do GB Global Styles (od 2026-09-16 se nový
 * styl nepíše ručně do CSS souboru, viz [[feedback-shs-vse-v-gb-editoru]]). */


/* ===========================================================================
 * Navigace mezi články (předchozí/další) na jednotlivém příspěvku
 *
 * Vestavěná GP šablona (generate_post_navigation), ne GB blok - nejde
 * upravit v editoru, proto tady. Předchozí vlevo, další vpravo (výchozí
 * pořadí v HTML sedí), obě jako obrysové tlačítko stejné jako .shs-btn--obrys
 * včetně vlastní trojúhelníkové ikony místo výchozí GP šipky.
 * ======================================================================== */

.post-navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.post-navigation .gp-icon {
	display: none;
}

.nav-previous a,
.nav-next a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--ink);
	border-radius: 6px;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-previous a:is(:hover, :focus-visible),
.nav-next a:is(:hover, :focus-visible) {
	background-color: var(--ink);
	color: var(--paper);
}

.nav-previous a::before,
.nav-next a::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	flex-shrink: 0;
	background-color: currentColor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5l8 7-8 7z'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

/* Předchozí: stejná ikona zrcadlená, aby ukazovala vlevo, a jde AŽ za text
 * (order místo prohození HTML - to je pevné ve výstupu GP šablony). */
.nav-previous a {
	flex-direction: row-reverse;
}

.nav-previous a::before {
	transform: scaleX(-1);
}