/* =========================================================================
   ZŠ a MŠ – Barevné menu
   ========================================================================= */

/* Globální pojistka proti vodorovnému scrollbaru.
   Nějaký celoplošný prvek (menu/vlnky/Elementor sekce) může přetéct o pár px
   přes šířku okna – na macOS jsou scrollbary překryvné a schované, na Windows
   klasické a vidět, takže se u klienta objeví spodní vodorovný posuvník.
   `clip` přetečení uřízne bez posuvníku a – narozdíl od `overflow-x: hidden` –
   NErozbije `position: sticky` (nevytváří scroll kontejner). */
html {
	overflow-x: clip;
}

.zsms-menu {
	/* Defaults; most are overridden by Elementor style controls. */
	--zsms-gap: 28px;
	--zsms-item-color: #3a3a3a;
	--zsms-hover-color: #f39d3b;
	--zsms-icon-size: 22px;
	--zsms-home-color: #e89a3c;
	--zsms-burger-color: #f39d3b;
	--zsms-search-bg: #e89a3c;
	--zsms-search-icon: #ffffff;
	--zsms-panel-bg: #ffffff;
	--zsms-panel-link: #3a3a3a;
	--zsms-arrow: #e89a3c;
	--zsms-wave-height: 18px;
	--zsms-wave-gap: 16px;
	--zsms-wave-period: 56px;
	--zsms-wave-fill: 50px;
	--zsms-wave-fill-color: #f5eee6;
	--zsms-wave-base-color: #e3d8c6;

	display: flex;
	align-items: center;
	gap: var(--zsms-gap);
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.zsms-menu *,
.zsms-search-overlay * {
	box-sizing: border-box;
}

/* ---------- Home ---------- */
.zsms-menu__home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--zsms-home-color);
	font-size: var(--zsms-icon-size);
	line-height: 1;
	flex: 0 0 auto;
	transition: transform .15s ease, opacity .15s ease;
}
.zsms-menu__home:hover { transform: translateY(-1px); opacity: .85; }
.zsms-menu__home svg,
.zsms-menu__home i { width: 1em; height: 1em; font-size: inherit; }

/* ---------- Primary nav ---------- */
.zsms-menu__nav {
	flex: 1 1 auto;
	min-width: 0;
	/* Clip the item row horizontally (no page scrollbar), but let waves hang
	   below. The hover dropdown is position:fixed, so it escapes the clip. */
	overflow-x: clip;
	overflow-y: visible;
}

ul.zsms-menu__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	/* No flex gap — spacing lives in the item padding so the wave segments
	   touch and form one continuous line. */
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zsms-item--top {
	position: relative;
	flex: 0 0 auto;
	padding: 0 calc(var(--zsms-gap) / 2);
}

.zsms-item__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	text-decoration: none;
	/* Per-item colour is shown ALWAYS (the school colour-codes its sections).
	   Falls back to the widget's default colour when an item has no colour. */
	color: var(--zsms-color, var(--zsms-item-color));
	font-weight: 500;
	line-height: 1.2;
	padding: 8px 0;
	transition: color .15s ease, opacity .15s ease;
}

/* On hover / focus the item goes to the shared hover colour (orange). */
.zsms-item--top:hover > .zsms-item__link,
.zsms-item--top:focus-within > .zsms-item__link {
	color: var(--zsms-hover-color, #f39d3b);
	opacity: 1;
}

/* ---------- Full-width wave line under the menu ----------
   One continuous wavy line across the whole viewport (neutral base colour),
   coloured per item underneath each menu item. Built/positioned by JS. */
.zsms-waveband {
	display: none;
}
.zsms-menu--waves .zsms-waveband {
	display: block;
	position: absolute;
	top: 70%;
	left: var(--zsms-bleed, 0);
	width: var(--zsms-vw, 100%);
	margin-top: var(--zsms-wave-gap, 16px);
	height: var(--zsms-wave-fill, 50px);
	z-index: 9995;
	pointer-events: none;
}

/* The solid fill (#f5eee6): a wavy top edge then a flat block down to the
   bottom — the content area can continue below in the same colour. */
.zsms-waveband__fill {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100%;
	background-color: var(--zsms-wave-fill-color, #f5eee6);
	/* Jedna dlaždice = hotový vlnitý proužek (horní i spodní hrana vlnitá, ve
	   fázi s barevnou čarou). Jedna vrstva → nemůže se rozpadnout na „boule"
	   ani při malé výšce výplně. Roztahuje se na period × výšku pruhu. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='50' viewBox='0 0 56 50' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q14 2 28 9 Q42 16 56 9 L56 42 Q42 49 28 42 Q14 35 0 42 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='50' viewBox='0 0 56 50' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q14 2 28 9 Q42 16 56 9 L56 42 Q42 49 28 42 Q14 35 0 42 Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: var(--zsms-wave-period, 56px) 100%;
	mask-size: var(--zsms-wave-period, 56px) 100%;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

/* The coloured line strokes sit ON the wavy edge (top band only). */
.zsms-waveband__base,
.zsms-waveband__seg {
	position: absolute;
	top: 0;
	height: var(--zsms-wave-height, 18px);
	/* One wave period as a mask; tiled via mask-position so the base line and
	   every coloured segment share the same wave phase and line up perfectly. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='16' viewBox='0 0 56 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q14 1 28 8 Q42 15 56 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='16' viewBox='0 0 56 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q14 1 28 8 Q42 15 56 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: var(--zsms-wave-period, 56px) 100%;
	mask-size: var(--zsms-wave-period, 56px) 100%;
	transition: filter .18s ease, background-color .18s ease;
}
.zsms-waveband__base {
	left: 0;
	right: 0;
	background-color: var(--zsms-wave-base-color, #e3d8c6);
	-webkit-mask-position-x: 0;
	mask-position-x: 0;
}
.zsms-waveband__seg {
	background-color: transparent;
	-webkit-mask-position-x: var(--zsms-wave-offset, 0);
	mask-position-x: var(--zsms-wave-offset, 0);
}
/* Hover only recolours the segment to the shared hover colour (no resizing).
   !important beats the inline per-item colour set by JS. */
.zsms-waveband__seg.is-hovering {
	background-color: var(--zsms-hover-color, #f39d3b) !important;
}

/* ---------- Dropdown panel (hover) — full-width 100vw bar ----------
   position:fixed so it spans the whole viewport and is not clipped by the
   nav's overflow. JS keeps --zsms-top / --zsms-vw / --zsms-pad in sync. */
.zsms-submenu {
	position: fixed;
	top: var(--zsms-top, 64px);
	left: 0;
	width: var(--zsms-vw, 100vw);
	/* Above the waveband (9995) so the open white panel covers the waves and
	   lines up flush with the white header, instead of opening below them. */
	z-index: 9996;
	background: var(--zsms-panel-bg);
	/* Jen spodní stín – záporný spread stáhne rozostření tak, aby nevykukovalo
	   nahoře přes header (offset dolů + spread -20 = feather začne až pod horní
	   hranou panelu). */
	box-shadow: 0 22px 26px -20px rgba(40, 30, 10, .28);
	padding: 28px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	pointer-events: none;
}
/* Opened via JS hover-intent (with a close delay) so the gap between the bar
   and the panel doesn't slam it shut. */
.zsms-item--top.is-hovering > .zsms-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Keyboard access: `:focus-visible` (NOT `:focus-within`) – a mouse click must
   not pin the panel open. `:focus-within` matched after any click, so the panel
   stayed open until focus moved and no amount of hovering closed it.
   Deliberately a SEPARATE rule: an unsupported `:has()` would invalidate the
   whole selector list and take the hover rule down with it. */
.zsms-item--top:has(:focus-visible) > .zsms-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Centred content container — width is set in Elementor (Rozbalovací panel →
   Max. šířka obsahu), so the panel content lines up with the page content. */
.zsms-submenu__container {
	max-width: var(--zsms-panel-maxw, 840px);
	margin: 0 auto;
	padding: 0 24px;
}
.zsms-submenu__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px 40px;
	align-items: start;
}

.zsms-submenu__title {
	font-weight: 700;
	font-size: 1.40em;
	color: var(--zsms-color, var(--zsms-panel-link));
	padding-top: 2px;
	white-space: nowrap;
}

ul.zsms-submenu__list {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Stack items in columns of up to 4; a 5th item starts a new column. */
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
	grid-auto-columns: max-content;
	justify-content: start;
	gap: 4px 56px;
}

/* If a panel has no heading, let the list span the full width. */
.zsms-submenu__inner:not(:has(.zsms-submenu__title)) {
	grid-template-columns: 1fr;
}

.zsms-submenu__list .zsms-item__link {
	padding: 7px 0;
	/* Subpages share their parent's colour (inherited --zsms-color). */
	color: var(--zsms-color, var(--zsms-panel-link));
	font-weight: 500;
}
.zsms-submenu__list .zsms-item__link:hover {
	opacity: .78;
}

.zsms-submenu__arrow {
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-right: 2px solid var(--zsms-color, var(--zsms-arrow));
	border-bottom: 2px solid var(--zsms-color, var(--zsms-arrow));
	transform: rotate(-45deg);
	margin-right: 4px;
}

/* third level – simple indented list */
ul.zsms-submenu__nested {
	list-style: none;
	margin: 4px 0 4px 16px;
	padding: 0;
	grid-column: 1 / -1;
}

/* ---------- Hamburger ---------- */
.zsms-menu__burger,
.zsms-menu__burger:hover,
.zsms-menu__burger:focus,
.zsms-menu__burger:active {
	flex: 0 0 auto;
	/* No theme button chrome ever — no bg, border, shadow (even when active). */
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	padding: 6px;
	color: var(--zsms-burger-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.zsms-menu__burger[hidden] { display: none; }
.zsms-menu__burger-lines {
	display: inline-block;
	width: calc(var(--zsms-icon-size) + 4px);
	height: 14px;
	position: relative;
}
.zsms-menu__burger-lines span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	/* Always the hamburger colour (orange) — never inherit a theme hover colour. */
	background-color: var(--zsms-burger-color) !important;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
/* Higher-specificity + fallback so the lines are always the (orange) hamburger
   colour, even if the theme tries to recolour buttons/spans. */
.zsms-menu .zsms-menu__burger .zsms-menu__burger-lines span {
	background-color: var(--zsms-burger-color, #f39d3b) !important;
}
.zsms-menu__burger-lines span:nth-child(1) { top: 0; }
.zsms-menu__burger-lines span:nth-child(2) { top: 6px; }
.zsms-menu__burger-lines span:nth-child(3) { top: 12px; }

.zsms-menu__burger[aria-expanded="true"] .zsms-menu__burger-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.zsms-menu__burger[aria-expanded="true"] .zsms-menu__burger-lines span:nth-child(2) { opacity: 0; }
.zsms-menu__burger[aria-expanded="true"] .zsms-menu__burger-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Overflow panel (desktop dropdown) ---------- */
.zsms-menu__overflow {
	position: absolute;
	top: 100%;
	right: 0;
	/* Above the waves (z 9995) so the dropdown is never hidden behind them. */
	z-index: 9997;
	margin-top: 14px;
	min-width: 240px;
	max-width: min(92vw, 420px);
	background: var(--zsms-panel-bg);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(40, 30, 10, .16);
	padding: 10px;
	max-height: 75vh;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	pointer-events: none;
}
.zsms-menu__overflow.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
/* Close button only matters in the mobile fullscreen variant — on desktop the
   hamburger itself becomes the X, so hide it hard (defeat theme button styles). */
.zsms-menu__overflow-close { display: none !important; }

ul.zsms-menu__overflow-list,
ul.zsms-menu__overflow-list .zsms-submenu__list,
ul.zsms-menu__overflow-list .zsms-submenu__nested {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* inside overflow the items stack vertically */
.zsms-menu__overflow-list .zsms-item--top {
	display: block;
	position: static;
}
/* No wave segments inside the hamburger dropdown. */
.zsms-menu__overflow-list .zsms-wave { display: none !important; }

.zsms-menu__overflow-list .zsms-item__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 11px 14px;
	border-radius: 10px;
	color: var(--zsms-panel-link);
	transition: background .12s ease;
}
.zsms-menu__overflow-list .zsms-item__link:hover {
	background: rgba(232, 154, 60, .1);
}
.zsms-menu__overflow-list .zsms-item--top > .zsms-item__link {
	color: var(--zsms-color, var(--zsms-panel-link));
	font-weight: 600;
}
/* Chevron indicator for expandable items — only inside the hamburger
   accordion (the top bar stays clean, submenu just appears on hover). */
.zsms-menu__overflow-list .zsms-has-children > .zsms-item__link::after {
	content: "";
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
}

/* overflow sub-menus become click-accordions */
.zsms-menu__overflow-list .zsms-submenu {
	position: static;
	width: auto;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	padding: 0;
	min-width: 0;
	display: none;
}
.zsms-menu__overflow-list .zsms-item--top.is-open > .zsms-submenu { display: block; }
.zsms-menu__overflow-list .zsms-item--top.is-open > .zsms-item__link::after { transform: rotate(-135deg); }
.zsms-menu__overflow-list .zsms-submenu__container {
	max-width: none;
	margin: 0;
	padding: 0;
}
.zsms-menu__overflow-list .zsms-submenu__inner {
	box-shadow: none;
	background: transparent;
	padding: 0 0 10px 6px;
	display: block;
	border-radius: 0;
}
/* The accordion parent link right above already names the group, so the panel's
   repeated heading is redundant here and just adds a gap — hide it. */
.zsms-menu__overflow-list .zsms-submenu__title {
	display: none;
}
.zsms-menu__overflow-list .zsms-submenu__list { gap: 0; }
/* Subpage links have arrow + text (two spans): keep them together on the LEFT.
   Only the top-level items want the label/chevron pushed apart (space-between). */
.zsms-menu__overflow-list .zsms-submenu__list .zsms-item__link {
	justify-content: flex-start;
	gap: 8px;
	padding: 8px 2px;
}

/* ---------- Mobile: fullscreen slide-in panel ---------- */
.zsms-menu--mobile .zsms-menu__overflow {
	position: fixed;
	inset: 0;            /* full viewport via offsets — never wider than the page */
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 92px 26px 36px;
	border-radius: 0;
	box-shadow: none;
	z-index: 99990;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	/* Closed = display:none, so it can never create off-screen overflow
	   (which was causing a scrollbar to toggle → resize flicker). */
	display: none;
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.zsms-menu--mobile .zsms-menu__overflow.is-open {
	display: block;
	animation: zsms-mobile-in .3s cubic-bezier(.4, 0, .2, 1);
}
@keyframes zsms-mobile-in {
	from { opacity: 0; transform: translateY(-16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.zsms-menu--mobile .zsms-menu__overflow-close {
	display: inline-flex !important;
	position: absolute;
	top: 22px;
	right: 22px;
	width: 52px !important;
	height: 52px !important;
	min-width: 0 !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	border-radius: 50% !important;
	background: var(--zsms-search-bg) !important;
	color: var(--zsms-search-icon) !important;
	line-height: 0;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer;
	z-index: 2;
}
.zsms-menu--mobile .zsms-menu__overflow-close svg { display: block; width: 28px; height: 28px; }
/* Force the X white — the theme leaks its accent colour into currentColor. */
.zsms-menu--mobile .zsms-menu__overflow-close svg path { stroke: #fff !important; }

/* Mobile: the menu lives under the burger, so collapse the (empty) item row and
   pull the home / hamburger / search icons close together. */
.zsms-menu--mobile .zsms-menu__nav { display: none; }
.zsms-menu--mobile { gap: 14px !important; }

/* No wavy line in responsive: it's tied to the desktop item row, so hide it once
   the menu collapses under the burger or the simple/footer menu stacks. */
.zsms-menu--mobile .zsms-waveband,
.zsms-menu--simple.zsms-menu--stack .zsms-waveband {
	display: none !important;
}

/* Bigger, comfier tap targets on mobile. */
.zsms-menu--mobile .zsms-menu__overflow-list .zsms-item--top > .zsms-item__link {
	font-size: 20px;
	padding: 16px 2px;
}
.zsms-menu--mobile .zsms-menu__overflow-list .zsms-submenu__list .zsms-item__link {
	font-size: 16px;
	padding: 11px 2px;
}

/* Lock the page behind the open mobile menu. */
body.zsms-menu-open { overflow: hidden; }

/* ---------- Zjednodušený režim (patička) ----------
   Stejný widget, ale bez hamburgeru a bez rozbalování při najetí; položky se
   v responzivu zalomí pod sebe. Barvy se nemění. */
.zsms-menu--no-burger .zsms-menu__burger,
.zsms-menu--no-burger .zsms-menu__overflow {
	display: none !important;
}

/* Žádný mega panel při najetí ani přes :focus-within. */
.zsms-menu--no-dropdown .zsms-submenu {
	display: none !important;
}

/* Bez hamburgeru se položky musí vejít — nech je zalomit na více řádků. */
.zsms-menu--simple ul.zsms-menu__list {
	flex-wrap: wrap;
	row-gap: 4px;
}

/* Responzivní zlom (řídí JS podle „Mobilní zlom") — odkazy jdou pod sebe. */
.zsms-menu--simple.zsms-menu--stack ul.zsms-menu__list {
	flex-direction: column;
	align-items: flex-start;
	flex-wrap: nowrap;
}

/* ---------- Barevný nadpis stránky ----------
   Barvu nastavuje widget inline (podle položky v barevném menu). */
.zsms-title {
	margin: 0;
	color: inherit;
}
.zsms-title__link {
	color: inherit;
	text-decoration: none;
}
.zsms-title__link:hover {
	text-decoration: underline;
}

/* ---------- Search button ---------- */
.zsms-menu__search-btn {
	flex: 0 0 auto;
	/* Force a perfect circle over theme button styles (width/height/aspect). */
	width: calc(var(--zsms-icon-size) + 24px) !important;
	height: calc(var(--zsms-icon-size) + 24px) !important;
	min-width: calc(var(--zsms-icon-size) + 24px);
	min-height: calc(var(--zsms-icon-size) + 24px);
	aspect-ratio: 1 / 1;
	border-radius: 50% !important;
	border: none !important;
	cursor: pointer;
	background: var(--zsms-search-bg) !important;
	color: var(--zsms-search-icon) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 0;
	padding: 0 !important;
	font-size: var(--zsms-icon-size);
	transition: transform .15s ease, box-shadow .15s ease;
}
.zsms-menu__search-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(232, 154, 60, .4);
}
.zsms-menu__search-btn svg,
.zsms-menu__search-btn i {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	margin: 0;
}

/* =========================================================================
   Fullscreen search overlay
   ========================================================================= */
.zsms-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.zsms-search-overlay[hidden] { display: none; }

.zsms-search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(4px);
}

.zsms-search-overlay.is-open .zsms-search-overlay__inner {
	animation: zsms-pop .25s ease;
}
@keyframes zsms-pop {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.zsms-search-overlay__close {
	position: absolute;
	top: 28px;
	right: 32px;
	width: 56px !important;
	height: 56px !important;
	min-width: 0 !important;
	border-radius: 50% !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	background: #e89a3c !important;
	color: #fff !important;
	line-height: 0;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 2;
	transition: background .15s ease, transform .15s ease;
}
.zsms-search-overlay__close svg { display: block; width: 32px; height: 32px; }
.zsms-search-overlay__close svg path { stroke: #fff !important; }
.zsms-search-overlay__close:hover { background: #d2841f !important; transform: rotate(90deg); }

.zsms-search-overlay__inner {
	position: relative;
	z-index: 1;
	width: min(820px, 92vw);
	margin-top: clamp(90px, 16vh, 200px);
}

/* A clean rounded "pill": flat input + solid orange round button. */
.zsms-search-overlay__form {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 2px solid #ecdfca !important;
	border-radius: 999px !important;
	box-shadow: 0 14px 40px rgba(232, 154, 60, .18);
	padding: 10px 10px 10px 28px;
}
.zsms-search-overlay__input {
	flex: 1 1 auto;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	font-size: clamp(22px, 3.4vw, 34px);
	font-weight: 500;
	line-height: 1.2;
	padding: 8px 2px !important;
	margin: 0 !important;
	height: auto !important;
	color: #2b2b2b !important;
	-webkit-appearance: none;
	appearance: none;
}
.zsms-search-overlay__input::placeholder { color: #b9b1a3; opacity: 1; }
/* Hide the native search "clear" cross that some browsers/themes add. */
.zsms-search-overlay__input::-webkit-search-decoration,
.zsms-search-overlay__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.zsms-search-overlay__submit {
	flex: 0 0 auto;
	width: 58px !important;
	height: 58px !important;
	min-width: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	border-radius: 50% !important;
	cursor: pointer;
	background: #e89a3c !important;
	color: #fff !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background .15s ease, transform .15s ease;
}
.zsms-search-overlay__submit:hover { background: #d2841f !important; transform: scale(1.05); }
.zsms-search-overlay__submit svg { display: block; width: 26px; height: 26px; margin: 0; }

.zsms-search-overlay__results {
	margin-top: 26px;
	max-height: 56vh;
	overflow-y: auto;
}
.zsms-search-overlay__hint,
.zsms-search-overlay__empty {
	color: #8a8a8a;
	font-size: 16px;
	padding: 10px 2px;
}

.zsms-result {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 14px 6px;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	text-decoration: none;
	color: inherit;
	transition: background .12s ease;
}
.zsms-result:hover { background: rgba(232, 154, 60, .08); }
.zsms-result__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	background: #f1ece3;
}
.zsms-result__body { min-width: 0; }
.zsms-result__type {
	display: inline-block;
	font-size: 12px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #e89a3c;
	font-weight: 700;
	margin-bottom: 2px;
}
.zsms-result__title {
	font-size: 18px;
	font-weight: 600;
	color: #2b2b2b;
	margin: 0 0 2px;
}
.zsms-result__excerpt {
	font-size: 14px;
	color: #6f6f6f;
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.zsms-result--all {
	justify-content: center;
	font-weight: 700;
	color: #e89a3c;
	border-bottom: 0;
}

body.zsms-search-open { overflow: hidden; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 600px) {
	.zsms-menu { --zsms-gap: 16px; }
}

/* =========================================================================
   ZŠ a MŠ – Tlačítko (ovál + kolečko se šipkou)
   ========================================================================= */
.zsms-btn-wrap { line-height: 0; }

.zsms-btn {
	--zsbtn-oval-bg: #f5a555;
	--zsbtn-oval-bg-hover: #f39a3f;
	--zsbtn-text: #ffffff;
	--zsbtn-circle-bg: #f7b36a;
	--zsbtn-circle-bg-hover: #ffffff;
	--zsbtn-arrow: #ffffff;
	--zsbtn-arrow-hover: #f39a3f;

	display: inline-flex;
	align-items: center;
	gap: 0;
	text-decoration: none;
	vertical-align: middle;
}

.zsms-btn__oval {
	background: var(--zsbtn-oval-bg);
	color: var(--zsbtn-text);
	padding: 0 30px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	height: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
	transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
	z-index: 50;
	position: relative;
}

.zsms-btn__circle {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: var(--zsbtn-circle-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -2px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
	transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
	z-index: 5;
	position: relative;
}

.zsms-btn__arrow {
	font-size: 40px;
	line-height: 1;
	margin: 0;
	padding: 0;
	display: inline-block;
	color: var(--zsbtn-arrow);
	transform: translate(1px, -5px);
	transition: transform .3s ease, color .3s ease;
}

/* Hover na celé skupině */
.zsms-btn:hover .zsms-btn__oval {
	background: var(--zsbtn-oval-bg-hover);
	transform: translateY(-5px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.zsms-btn:hover .zsms-btn__circle {
	transform: translateX(10px) rotate(45deg);
	background: var(--zsbtn-circle-bg-hover);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.zsms-btn:hover .zsms-btn__arrow {
	color: var(--zsbtn-arrow-hover);
}

.zsms-btn:active .zsms-btn__oval,
.zsms-btn:active .zsms-btn__circle {
	transform: translateY(0);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .16);
}