/*
Theme Name: MŠ Gabriely Preissové
Theme URI: https://mszabovresky.cz/
Author: MŠ Brno, Gabriely Preissové 8
Description: Blokové téma mateřské školy Gabriely Preissové v Brně-Žabovřeskách. Klidná paleta (tmavě modrá, béžová), pět barevně odlišených tříd s maskoty, důraz na čitelnost a přístupnost. Obsah se spravuje přes ACF — akce, třídy, kontakty i platby se mění z administrace.
Version: 2.5.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mspreissove
Tags: block-patterns, full-site-editing, accessibility-ready, education
*/

/* ============================================================
   1. TOKENY — převzato z design systému
   ============================================================ */
:root {
	/* Základ — klidná trojice */
	--ms-white: #ffffff;
	--ms-beige: #f7f2e9;
	--ms-beige-deep: #efe7d8;
	--ms-navy: #182848;
	--ms-navy-hover: #101c33;
	--ms-navy-tint: #e7ecf4;
	--ms-sky: #28a8e8; /* POUZE v logu */

	/* Neutrály (teplé) */
	--ink: #232b35;
	--ink-muted: #59636e;
	--border: #ddd5c6;
	--border-strong: #b8ad99;

	/* Podbarvení položky menu, na které návštěvník právě je */
	--nav-current-bg: #dcecd6;

	/* Sémantické */
	--ok: #2e7d43;        --ok-tint: #e6f2e9;
	--warn: #8a5a0b;      --warn-tint: #f9efdb;
	--danger: #b3362b;    --danger-tint: #f9e8e6;

	/* Aliasy */
	--text-body: var(--ink);
	--text-muted: var(--ink-muted);
	--surface-page: var(--ms-white);
	--surface-section: var(--ms-beige);
	--action-primary: var(--ms-navy);
	--action-primary-hover: var(--ms-navy-hover);
	--link: var(--ms-navy);
	--focus-ring: var(--ms-navy);

	/* Paleta tříd — POUZE karty tříd a hlavičky jejich podstránek */
	--class-smolicci: #e07118;   --class-smolicci-tint: #fbeadd;   --class-smolicci-ink: #94480b;
	--class-budulinci: #1e9ad3;  --class-budulinci-tint: #e2f2fa;  --class-budulinci-ink: #136287;
	--class-rakosnicci: #eab308; --class-rakosnicci-tint: #fcf3d4; --class-rakosnicci-ink: #7d5f04;
	--class-cipisci: #d92f4b;    --class-cipisci-tint: #fae5e9;    --class-cipisci-ink: #9c1f34;
	--class-kulihrasci: #128c48; --class-kulihrasci-tint: #e2f2e8; --class-kulihrasci-ink: #0b6132;

	/* Písmo */
	--font-display: 'Lexend', system-ui, sans-serif;
	--font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
	--weight-regular: 400; --weight-semibold: 600; --weight-bold: 700;
	--text-1: 13px; --text-2: 15px; --text-3: 17px; --text-4: 20px;
	--text-5: 24px; --text-6: 30px; --text-7: 38px; --text-8: 48px;
	--leading-body: 1.6; --leading-heading: 1.2;
	--measure: 65ch;

	/* Prostor */
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
	--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
	--container: 1200px;
	--tap-min: 44px;

	/* Efekty */
	--radius-control: 8px; --radius-card: 12px; --radius-pill: 999px;
	--shadow-card: 0 1px 3px rgba(30, 58, 95, .10);
	--shadow-raised: 0 4px 12px rgba(30, 58, 95, .12);
	--ease: cubic-bezier(.4, 0, .2, 1);
	--dur: 150ms;
}

/* ============================================================
   2. ZÁKLAD
   ============================================================ */
body {
	font-family: var(--font-body);
	font-size: var(--text-3);
	line-height: var(--leading-body);
	color: var(--text-body);
	background: var(--surface-page);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-heading);
	color: var(--text-body);
}
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--action-primary-hover); }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.ms-measure p { max-width: var(--measure); }
.ms-muted { color: var(--text-muted); }
.ms-center { text-align: center; }

/* Přeskočit na obsah */
.ms-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--ms-navy); color: #fff; padding: var(--sp-3) var(--sp-4);
	border-radius: 0 0 var(--radius-control) 0;
}
.ms-skip:focus { left: 0; color: #fff; }

/* Obsahový kontejner (pro vlastní HTML sekce mimo blokový layout) */
.ms-container {
	max-width: var(--container); margin-left: auto; margin-right: auto;
	padding-left: var(--sp-5); padding-right: var(--sp-5);
	box-sizing: border-box;
}

/* Mřížky */
.ms-grid { display: grid; gap: var(--sp-4); }
.ms-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ms-grid-5 { grid-template-columns: repeat(5, 1fr); }
.ms-grid-hero { grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); }
.ms-grid-foot { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--sp-6); }
@media (max-width: 900px) {
	.ms-grid-3, .ms-grid-hero, .ms-grid-foot { grid-template-columns: 1fr; }
	.ms-grid-5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.ms-hide-m { display: none !important; }
}
/* Mřížka tříd se dolaďuje v sekci 9 — vejde se do ní víc kroků než sem. */

/* ============================================================
   3. HLAVIČKA
   ============================================================ */
.ms-topbar { background: var(--ms-beige); border-bottom: 1px solid var(--border); }
.ms-topbar__in {
	display: flex; align-items: center; justify-content: flex-end;
	gap: var(--sp-4); flex-wrap: wrap; min-height: 44px;
	padding-top: var(--sp-1); padding-bottom: var(--sp-1);
}
.ms-topbar__label { font-size: var(--text-1); color: var(--text-muted); }
.ms-partner {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	min-height: var(--tap-min); padding: 0 var(--sp-2); text-decoration: none;
}
.ms-partner img { width: auto; display: block; }
.ms-partner__name { font-size: var(--text-2); color: var(--ink); font-weight: 600; }
.ms-partner--strava img { height: 22px; }
.ms-partner--twigsee img { height: 18px; }
.ms-partner--rajce img { height: 22px; }

.ms-head { background: #fff; border-bottom: 1px solid var(--border); }
.ms-head__in {
	display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
	padding-top: var(--sp-3); padding-bottom: var(--sp-3);
}
.ms-logo { margin-right: auto; display: flex; align-items: center; text-decoration: none; }
.ms-logo img { height: 52px; width: auto; }
.ms-head__contact { display: flex; align-items: center; gap: var(--sp-4); }
.ms-mail {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	color: var(--ms-navy); font-weight: var(--weight-bold);
	text-decoration: none; font-size: var(--text-2);
}
.ms-mail:hover { text-decoration: underline; }

/* Navigace — barevný pruh nad položkou podle jejího pořadí.
   Pruh jde přes celou šířku položky, mezi pruhy zůstává úzká mezera.
   Aktuální stránka se navíc podbarví, aby ji poznal i ten, kdo barvy
   nerozlišuje (samotná barva pruhu by na to nestačila). */
.ms-nav { border-top: 1px solid var(--border); background: #fff; }
.ms-menu {
	display: flex; width: 100%; list-style: none; margin: 0; padding: 0;
	gap: var(--sp-1);
}
.ms-menu > li { flex: 1 1 auto; display: flex; }
.ms-menu > li > a {
	flex: 1; display: flex; align-items: center; justify-content: center;
	min-height: var(--tap-min);
	padding: calc(var(--sp-4) + 5px) var(--sp-3) var(--sp-4);
	text-decoration: none; white-space: nowrap;
	font-size: var(--text-3); font-weight: var(--weight-bold);
	color: var(--ink); position: relative; text-align: center;
	transition: background-color var(--dur) var(--ease);
}
.ms-menu > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0;
	height: 5px; width: auto; border-radius: 0 0 3px 3px;
	background: var(--uc, var(--ms-navy));
	transform: none; transition: none;
}
.ms-menu > li > a:hover,
.ms-menu > li > a:focus-visible { background: var(--ms-beige); }
.ms-menu > li.current-menu-item > a,
.ms-menu > li.current_page_item > a,
.ms-menu > li.current-menu-ancestor > a { background: var(--nav-current-bg); }
/* Výchozí barva zaručuje, že nově přidaná položka menu nikdy nezůstane
   s tmavým pruhem — dřív devátá položka vypadla z výčtu. */
.ms-menu > li { --uc: #c0392b; }
.ms-menu > li:nth-child(3)  { --uc: #e08a1e; }
.ms-menu > li:nth-child(4)  { --uc: #2e8fd0; }
.ms-menu > li:nth-child(5)  { --uc: #6aa84f; }
.ms-menu > li:nth-child(6)  { --uc: #e6c02e; }
.ms-menu > li:nth-child(7)  { --uc: #5b3f9e; }
.ms-menu > li:nth-child(8)  { --uc: #b02a37; }
.ms-menu > li:nth-child(9)  { --uc: #e08a1e; }
.ms-menu > li:nth-child(10) { --uc: #2e8fd0; }
.ms-menu > li:nth-child(11) { --uc: #6aa84f; }
.ms-menu > li:nth-child(12) { --uc: #e6c02e; }
/* Podmenu — jednoduché rozbalení */
.ms-menu li { position: relative; }
.ms-menu .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; z-index: 20;
	min-width: 220px; margin: 0; padding: var(--sp-2) 0; list-style: none;
	background: #fff; border: 1px solid var(--border);
	border-radius: 0 0 var(--radius-card) var(--radius-card);
	box-shadow: var(--shadow-raised);
}
.ms-menu li:hover > .sub-menu, .ms-menu li:focus-within > .sub-menu { display: block; }
.ms-menu .sub-menu a {
	display: block; padding: var(--sp-2) var(--sp-4); min-height: var(--tap-min);
	display: flex; align-items: center; font-size: var(--text-2);
	color: var(--ink); text-decoration: none;
}
.ms-menu .sub-menu a:hover { background: var(--ms-beige); }
/* --- Tlačítko menu (burger) ---
   V HTML je vždycky, ale s atributem `hidden`. Odkryje ho až JavaScript,
   takže bez JS zůstane menu rozbalené a web je použitelný. */
.ms-nav__in { display: flex; align-items: stretch; }
.ms-nav__panel { flex: 1; min-width: 0; }

.ms-burger { display: none; }
.ms-burger[hidden] { display: none !important; }

@media (max-width: 900px) {
	.ms-nav__in { display: block; }

	/* Tlačítko sdílí řádek s logem, ale drží se u pravého okraje — mezi
	   logem a jím zůstane volné místo, takže se nečte jako součást značky.
	   Kontakt na úzkých displejích spadne na vlastní řádek pod ně. */
	.ms-logo { margin-right: auto; }

	/* Zavřené menu nenechává v hlavičce prázdný pruh. Bez JavaScriptu
	   se třída `is-mobile` nepřidá a navigace zůstane vypsaná. */
	.ms-nav.is-mobile { display: none; }
	.ms-nav.is-mobile.is-open { display: block; }

	/* Volné místo mezi logem a tlačítkem vytváří `margin-right: auto` na logu.
	   Rozestupy v řádku držíme menší, aby se na tabletu telefon a e-mail
	   vešly vedle a hlavička kvůli tlačítku nenarostla o řádek. */
	.ms-head__in { gap: var(--sp-4); }

	/* Plná firemní modrá. Bílé tlačítko se světlým obrysem se vedle barevného
	   logotypu pořád ztrácelo — takhle je na první pohled jasné, že jde
	   o ovládací prvek, ne o část značky. */
	.ms-burger {
		display: inline-flex; align-items: center; gap: var(--sp-3);
		min-height: var(--tap-min); padding: var(--sp-2) var(--sp-4);
		background: var(--ms-navy); cursor: pointer;
		border: 1px solid var(--ms-navy); border-radius: var(--radius-control);
		font-family: var(--font-body); font-size: var(--text-3);
		font-weight: var(--weight-bold); color: #fff;
		box-shadow: var(--shadow-card);
		transition: background-color var(--dur) var(--ease);
	}
	.ms-burger:hover,
	.ms-burger[aria-expanded="true"] {
		background: var(--ms-navy-hover); border-color: var(--ms-navy-hover);
	}


	/* Tři linky složené z jednoho prvku a jeho dvou pseudoprvků. */
	.ms-burger__box {
		position: relative; display: block; width: 26px; height: 20px; flex-shrink: 0;
	}
	.ms-burger__line,
	.ms-burger__line::before,
	.ms-burger__line::after {
		position: absolute; left: 0; width: 26px; height: 3px; border-radius: 3px;
		background: #fff;
		transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
	}
	.ms-burger__line { top: 50%; margin-top: -1.5px; }
	.ms-burger__line::before { content: ""; top: -8px; }
	.ms-burger__line::after { content: ""; top: 8px; }

	/* Otevřené menu — z linek se stane křížek. Stav čteme z aria-expanded
	   samotného tlačítka: to platí bez ohledu na to, kde v hlavičce leží. */
	.ms-burger[aria-expanded="true"] .ms-burger__line { transform: rotate(45deg); }
	.ms-burger[aria-expanded="true"] .ms-burger__line::before { transform: translateY(8px) rotate(-90deg); }
	.ms-burger[aria-expanded="true"] .ms-burger__line::after { opacity: 0; }

	.ms-nav.is-mobile .ms-nav__panel { padding-bottom: var(--sp-3); }

	/* Položky pod sebou, barevný proužek se přesouvá zleva.
	   Mezera mezi položkami je tu nulová — oddělují je linky, ne mezery. */
	.ms-menu { flex-direction: column; gap: 0; }
	.ms-menu > li { flex: none; }
	.ms-menu > li > a {
		justify-content: flex-start; text-align: left; white-space: normal;
		padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
		border-top: 1px solid var(--border); font-size: var(--text-3);
	}
	.ms-menu > li:first-child > a { border-top: 0; }
	.ms-menu > li > a::after {
		left: 0; right: auto; top: 8px; bottom: 8px;
		width: 4px; height: auto; border-radius: 4px; transform: none;
		transition: opacity var(--dur) var(--ease);
		opacity: 0;
	}
	.ms-menu > li > a:hover::after,
	.ms-menu > li > a:focus-visible::after,
	.ms-menu > li.current-menu-item > a::after,
	.ms-menu > li.current_page_item > a::after,
	.ms-menu > li.current-menu-ancestor > a::after { width: 4px; opacity: 1; }

	.ms-menu .sub-menu { position: static; display: block; border: 0; box-shadow: none; padding: 0; }
	.ms-menu .sub-menu a { padding-left: var(--sp-7); }
}

/* ============================================================
   4. HERO A HLAVIČKA PODSTRÁNKY
   ============================================================ */
.ms-hero {
	position: relative;
	background:
		linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,.25) 62%, rgba(255,255,255,0) 80%),
		#eaf3f7 var(--ms-hero-img) center bottom / cover no-repeat;
}
.ms-hero__in { padding-top: var(--sp-8); padding-bottom: calc(var(--sp-8) * 2.5); }
.ms-hero__kicker {
	margin: 0 0 var(--sp-3); font-size: var(--text-3); font-weight: var(--weight-bold);
	letter-spacing: .02em; text-transform: uppercase; color: var(--ms-navy);
}
.ms-hero__title {
	margin: 0; font-size: var(--text-8); color: var(--ms-navy);
	text-wrap: balance; max-width: 18ch;
}
@media (max-width: 720px) { .ms-hero__title { font-size: var(--text-7); } }

.ms-pagehead { background: var(--ms-beige); border-bottom: 1px solid var(--border); }
.ms-pagehead__in { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.ms-pagehead h1 { margin: 0; font-size: var(--text-7); }
.ms-pagehead p { margin: var(--sp-3) 0 0; font-size: var(--text-4); color: var(--text-muted); }

/* Sekce s béžovým podkladem a listovým vzorem */
.ms-section-leaves {
	background: var(--ms-beige) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%232c5a39' stroke-width='1.5' stroke-linecap='round' opacity='.14'%3E%3Cpath d='M28 44c-9 -6 -9 -20 0 -26 9 6 9 20 0 26zM28 44v10'/%3E%3Cpath d='M104 30c-7 -5 -7 -16 0 -21 7 5 7 16 0 21zM104 30v9'/%3E%3Cpath d='M70 104c-9 -6 -9 -20 0 -26 9 6 9 20 0 26zM70 104v10'/%3E%3Cpath d='M12 108c8 -4 16 -4 22 2M23 110v8'/%3E%3Cpath d='M118 96c-8 -4 -16 -4 -22 2M107 98v9'/%3E%3C/g%3E%3C/svg%3E");
	border-top: 1px solid var(--border);
}

/* Karty tříd vytažené přes hero */
.ms-classes-pull { margin-top: calc(var(--sp-8) * -1.5); position: relative; z-index: 2; }
/* Vytažení karet přes hero se na mobilu dolaďuje v sekci 9. */

/* ============================================================
   5. KOMPONENTY
   ============================================================ */

/* --- Tlačítko --- */
.ms-btn {
	font-family: var(--font-body); font-weight: var(--weight-bold);
	font-size: var(--text-2); line-height: 1.2;
	border-radius: var(--radius-control);
	padding: var(--sp-2) var(--sp-4); min-height: var(--tap-min);
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--sp-2); cursor: pointer; text-decoration: none;
	box-sizing: border-box;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
	background: var(--action-primary); color: #fff; border: 1px solid var(--action-primary);
}
.ms-btn:hover { background: var(--action-primary-hover); color: #fff; }
.ms-btn--lg { font-size: var(--text-3); padding: var(--sp-3) var(--sp-5); }
.ms-btn--secondary { background: #fff; color: var(--ms-navy); border-color: var(--ms-navy); }
.ms-btn--secondary:hover { background: var(--ms-navy-tint); color: var(--ms-navy); }
.ms-btn--quiet {
	background: transparent; color: var(--ms-navy); border-color: transparent;
	text-decoration: underline; text-underline-offset: 2px;
}
.ms-btn--quiet:hover { background: transparent; color: var(--ms-navy-hover); }
.ms-btn[disabled], .ms-btn.is-disabled { opacity: .45; cursor: not-allowed; }

/* --- Telefonní odkaz --- */
.ms-phone {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	min-height: var(--tap-min); text-decoration: none;
	color: var(--ms-navy); font-family: var(--font-body);
}
.ms-phone:hover { color: var(--ms-navy-hover); }
.ms-phone svg { flex-shrink: 0; }
.ms-phone__txt { display: flex; flex-direction: column; line-height: 1.3; }
.ms-phone__num { font-size: var(--text-3); font-weight: var(--weight-bold); }
.ms-phone:hover .ms-phone__num { text-decoration: underline; text-underline-offset: 2px; }
.ms-phone--strong .ms-phone__num { font-size: var(--text-4); }
.ms-phone__label { font-size: var(--text-2); color: var(--text-muted); }

/* --- Štítek --- */
.ms-badge {
	display: inline-flex; align-items: center; border-radius: var(--radius-pill);
	padding: 2px var(--sp-3); font-family: var(--font-body);
	font-size: var(--text-2); font-weight: var(--weight-bold); line-height: 1.5;
	background: var(--ms-navy-tint); color: var(--ms-navy);
}
.ms-badge--ok { background: var(--ok-tint); color: var(--ok); }
.ms-badge--warn { background: var(--warn-tint); color: var(--warn); }
.ms-badge--danger { background: var(--danger-tint); color: var(--danger); }

/* --- Karta třídy --- */
.ms-classcard {
	display: block; text-decoration: none; color: var(--ink); background: #fff;
	border: 2px solid var(--c); border-radius: 22px; overflow: hidden;
	box-shadow: var(--shadow-card); font-family: var(--font-body);
	transition: box-shadow var(--dur) var(--ease),
	            transform var(--dur) cubic-bezier(.34, 1.56, .64, 1);
}
.ms-classcard:hover { box-shadow: var(--shadow-raised); transform: translateY(-6px); color: var(--ink); }
.ms-classcard__top {
	background: var(--tint); padding: var(--sp-5) var(--sp-4) var(--sp-4);
	display: flex; justify-content: center;
}
.ms-classcard__top img {
	height: 104px; width: auto;
	transition: transform var(--dur) cubic-bezier(.34, 1.56, .64, 1);
}
.ms-classcard:hover .ms-classcard__top img { transform: scale(1.08) rotate(-3deg); }
.ms-classcard__body { padding: var(--sp-4); text-align: center; }
.ms-classcard__name {
	margin: 0; font-family: var(--font-display); font-weight: 600;
	font-size: var(--text-5); color: var(--cink);
}
.ms-classcard__age {
	margin: var(--sp-2) auto 0; display: inline-block; font-size: var(--text-1);
	font-weight: var(--weight-bold); color: var(--cink); background: var(--tint);
	border-radius: 999px; padding: 2px 12px;
}
.ms-classcard__teachers { margin: var(--sp-2) 0 0; font-size: var(--text-2); }
.ms-classcard__note { margin: var(--sp-2) 0 0; font-size: var(--text-2); color: var(--text-muted); }

/* Barvy tříd */
.ms-c-smolicci   { --c: var(--class-smolicci);   --tint: var(--class-smolicci-tint);   --cink: var(--class-smolicci-ink); }
.ms-c-budulinci  { --c: var(--class-budulinci);  --tint: var(--class-budulinci-tint);  --cink: var(--class-budulinci-ink); }
.ms-c-rakosnicci { --c: var(--class-rakosnicci); --tint: var(--class-rakosnicci-tint); --cink: var(--class-rakosnicci-ink); }
.ms-c-cipisci    { --c: var(--class-cipisci);    --tint: var(--class-cipisci-tint);    --cink: var(--class-cipisci-ink); }
.ms-c-kulihrasci { --c: var(--class-kulihrasci); --tint: var(--class-kulihrasci-tint); --cink: var(--class-kulihrasci-ink); }

/* --- Karta aktuality --- */
.ms-newscard {
	display: block; text-decoration: none; color: var(--ink); background: #fff;
	border: 1px solid var(--border); border-radius: var(--radius-card);
	padding: var(--sp-5); box-shadow: var(--shadow-card);
	transition: box-shadow var(--dur) var(--ease); font-family: var(--font-body);
}
.ms-newscard:hover { box-shadow: var(--shadow-raised); color: var(--ink); }
.ms-newscard__meta { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }
.ms-newscard__date { font-size: var(--text-2); color: var(--text-muted); }
.ms-newscard__title {
	margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-4);
}
.ms-newscard:hover .ms-newscard__title { text-decoration: underline; text-underline-offset: 3px; }
.ms-newscard__perex { margin: var(--sp-2) 0 0; font-size: var(--text-2); color: var(--text-muted); }

/* --- Seznam akcí ---
   auto-fit místo pevných tří sloupců: když jsou naplánované jen dva měsíce,
   roztáhnou se přes celou šířku místo toho, aby vpravo zůstal prázdný sloupec. */
.ms-eventgrid {
	display: grid; gap: var(--sp-5); align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (max-width: 640px) { .ms-eventgrid { grid-template-columns: 1fr; } }
.ms-eventgrid > section { display: flex; flex-direction: column; }
.ms-eventgrid h3 {
	margin: 0 0 var(--sp-3); font-family: var(--font-display); font-weight: 600;
	font-size: var(--text-4); color: var(--ms-navy);
}
.ms-events {
	list-style: none; margin: 0; padding: 0; font-family: var(--font-body);
	border: 1px solid var(--border); border-radius: var(--radius-card);
	overflow: hidden; background: #fff; flex: 1;
}
.ms-event {
	display: flex; gap: var(--sp-4); align-items: flex-start;
	padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border);
}
.ms-event:first-child { border-top: 0; }
.ms-event__date {
	width: 56px; flex-shrink: 0; text-align: center; background: var(--ms-navy-tint);
	border-radius: var(--radius-control); padding: var(--sp-1) 0; line-height: 1.2;
}
.ms-event__day { display: block; font-size: var(--text-4); color: var(--ms-navy); font-weight: 700; }
.ms-event__mon { font-size: var(--text-1); color: var(--ms-navy); }
.ms-event__body { flex: 1; }
.ms-event__title { font-size: var(--text-3); font-weight: 700; }
.ms-event__meta { font-size: var(--text-2); color: var(--text-muted); }

/* --- Informační dlaždice --- */
.ms-notice {
	display: flex; gap: var(--sp-3); align-items: flex-start; text-decoration: none;
	color: var(--ink); background: #fff; border: 1px solid var(--border);
	border-radius: var(--radius-card); padding: var(--sp-4);
	transition: background-color var(--dur) var(--ease); font-family: var(--font-body);
}
.ms-notice:hover { background: var(--ms-navy-tint); color: var(--ink); }
.ms-notice__icon { color: var(--ms-navy); flex-shrink: 0; margin-top: 2px; }
.ms-notice__title { display: block; font-size: var(--text-3); font-weight: var(--weight-bold); }
.ms-notice__text { display: block; font-size: var(--text-2); color: var(--text-muted); margin-top: var(--sp-1); }
.ms-notice__link {
	display: inline-block; margin-top: var(--sp-2); font-size: var(--text-2);
	font-weight: var(--weight-bold); color: var(--ms-navy);
	text-decoration: underline; text-underline-offset: 2px;
}

/* --- Rozbalovací seznam --- */
.ms-accordion {
	border: 1px solid var(--border); border-radius: var(--radius-card);
	overflow: hidden; background: #fff; font-family: var(--font-body);
}
.ms-accordion__item { border-top: 1px solid var(--border); }
.ms-accordion__item:first-child { border-top: 0; }
.ms-accordion__btn {
	display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
	width: 100%; min-height: var(--tap-min); padding: var(--sp-3) var(--sp-4);
	background: #fff; border: 0; cursor: pointer; font-family: var(--font-body);
	font-size: var(--text-3); font-weight: var(--weight-bold); color: var(--ink); text-align: left;
}
.ms-accordion__btn[aria-expanded="true"] { background: var(--ms-beige); }
.ms-accordion__btn svg { flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.ms-accordion__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ms-accordion__meta { font-weight: 400; color: var(--text-muted); font-size: var(--text-2); }
.ms-accordion__panel { padding: var(--sp-3) var(--sp-4) var(--sp-4); font-size: var(--text-3); }
.ms-accordion__panel[hidden] { display: none; }

/* --- Formuláře --- */
.ms-field { display: flex; flex-direction: column; gap: var(--sp-1); font-family: var(--font-body); }
.ms-field > label { font-size: var(--text-2); font-weight: var(--weight-bold); color: var(--ink); }
.ms-field__hint { font-size: var(--text-2); color: var(--text-muted); }
.ms-field__err { font-size: var(--text-2); color: var(--danger); font-weight: var(--weight-bold); }
.ms-input, .ms-select {
	font-family: var(--font-body); font-size: var(--text-3); color: var(--ink);
	padding: var(--sp-2) var(--sp-3); min-height: var(--tap-min);
	border-radius: var(--radius-control); border: 1px solid var(--border-strong);
	background: #fff; box-sizing: border-box; width: 100%;
}
.ms-input:disabled, .ms-select:disabled { background: var(--ms-beige); opacity: .6; }
.ms-check, .ms-radio-item {
	display: flex; gap: var(--sp-3); align-items: flex-start;
	min-height: var(--tap-min); cursor: pointer; font-size: var(--text-3);
	padding: var(--sp-2) 0; font-family: var(--font-body);
}
.ms-radio-item { align-items: center; padding: 0; }
.ms-check input, .ms-radio-item input {
	width: 22px; height: 22px; accent-color: var(--ms-navy); flex-shrink: 0;
}
.ms-check input { margin-top: 2px; }
.ms-check__hint { display: block; font-size: var(--text-2); color: var(--text-muted); }
.ms-fieldset { border: 0; margin: 0; padding: 0; font-family: var(--font-body); }
.ms-fieldset > legend {
	font-size: var(--text-2); font-weight: var(--weight-bold);
	padding: 0; margin-bottom: var(--sp-1);
}
.ms-formcard {
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
	padding: var(--sp-5); box-shadow: var(--shadow-card);
}
.ms-formcard__stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* --- Kalkulačka plateb --- */
.ms-calc {
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
	padding: var(--sp-5); font-family: var(--font-body); max-width: 520px;
	box-shadow: var(--shadow-card);
}
.ms-calc h3 { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-weight: 600; font-size: var(--text-5); }
.ms-calc__controls { display: flex; flex-direction: column; gap: var(--sp-4); }
.ms-calc__days-label { display: block; font-size: var(--text-2); font-weight: var(--weight-bold); margin-bottom: var(--sp-1); }
.ms-calc input[type="range"] { width: 100%; accent-color: var(--ms-navy); height: 44px; }
.ms-calc dl { margin: var(--sp-4) 0 0; border-top: 1px solid var(--border); padding-top: var(--sp-3); font-size: var(--text-2); }
.ms-calc dl > div { display: flex; justify-content: space-between; padding: 2px 0; }
.ms-calc dl dt, .ms-calc dl dd { margin: 0; }
.ms-calc__total { padding: var(--sp-2) 0 0 !important; font-size: var(--text-4); font-weight: var(--weight-bold); }
.ms-calc__total dd { color: var(--ms-navy); }
.ms-calc__note { margin: var(--sp-3) 0 0; font-size: var(--text-1); color: var(--text-muted); }

/* --- Karta / panel --- */
.ms-card {
	background: #fff; border: 1px solid var(--border);
	border-radius: var(--radius-card); padding: var(--sp-5);
}
.ms-card--warn { background: var(--warn-tint); }
.ms-card h2 { margin: 0 0 var(--sp-3); font-size: var(--text-5); }

/* --- Kroky (1-2-3) --- */
.ms-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.ms-step { display: flex; gap: var(--sp-4); align-items: flex-start; }
.ms-step__n {
	width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
	background: var(--ms-navy); color: #fff; display: flex;
	align-items: center; justify-content: center;
	font-family: var(--font-display); font-weight: 600; font-size: var(--text-4);
}
.ms-step__title { display: block; font-size: var(--text-4); font-family: var(--font-display); font-weight: 600; }

/* --- Detail třídy (podstránka) --- */
.ms-classdetail {
	background: #fff; border: 1px solid var(--border);
	border-radius: var(--radius-card); overflow: hidden;
}
.ms-classdetail__head {
	background: var(--tint); border-bottom: 3px solid var(--c);
	padding: var(--sp-4) var(--sp-5); display: flex; gap: var(--sp-4);
	align-items: center; flex-wrap: wrap;
}
.ms-classdetail__head img { height: 84px; width: auto; flex-shrink: 0; }
.ms-classdetail__titles { margin-right: auto; }
.ms-classdetail__titles h2 { margin: 0; font-size: var(--text-6); color: var(--cink); }
.ms-classdetail__titles p { margin: 2px 0 0; font-size: var(--text-2); color: var(--text-muted); }
.ms-classdetail__body { padding: var(--sp-5); }

/* Fotky */
.ms-photo { width: 100%; object-fit: cover; border-radius: var(--radius-card); display: block; }
.ms-photo--43 { aspect-ratio: 4/3; }
.ms-photo--169 { aspect-ratio: 16/9; }

/* ============================================================
   6. PATIČKA
   ============================================================ */
/* Bez `height: auto` drží obrázek výšku z atributu (205 px) a na užší
   obrazovce se svisle roztáhne — krajina pak vypadá jako bílý pruh. */
.ms-foot-img { width: 100%; height: auto; display: block; }
.ms-foot { background: var(--ms-navy); color: #c8d3e2; }
.ms-foot__in { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.ms-foot h2, .ms-foot h3, .ms-foot h4 {
	margin: 0 0 var(--sp-3); font-family: var(--font-display);
	font-weight: 600; font-size: var(--text-3); color: #fff;
}
.ms-foot p { margin: 0 0 var(--sp-2); font-size: var(--text-2); }
.ms-foot a { color: #fff; }
.ms-foot a:hover { color: #fff; }
.ms-foot__links { list-style: none; margin: 0; padding: 0; }
.ms-foot__links li { margin: 0 0 var(--sp-2); }
.ms-foot__links a { font-size: var(--text-2); }
.ms-foot__map {
	display: block; border-radius: var(--radius-card); overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .25);
}
.ms-foot__map img { width: 100%; display: block; }
.ms-foot__bar { border-top: 1px solid rgba(255, 255, 255, .18); }
.ms-foot__bar-in { padding-top: var(--sp-3); padding-bottom: var(--sp-3); font-size: var(--text-1); }
.ms-foot__bar-in a { color: #c8d3e2; }

/* ============================================================
   7. OBSAH STRÁNEK / PŘÍSPĚVKŮ
   ============================================================ */
.ms-prose > * + * { margin-top: var(--sp-4); }
.ms-prose p, .ms-prose li { max-width: var(--measure); }
.ms-prose h2 { font-size: var(--text-6); margin-top: var(--sp-7); }
.ms-prose h3 { font-size: var(--text-5); margin-top: var(--sp-6); }
.ms-prose img { max-width: 100%; height: auto; border-radius: var(--radius-card); }
.ms-prose table { border-collapse: collapse; width: 100%; }
.ms-prose th, .ms-prose td { border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); text-align: left; }
.ms-prose th { background: var(--ms-beige); }

@media print {
	.ms-topbar, .ms-nav, .ms-foot-img, .ms-foot { display: none; }
}

/* ============================================================
   8. KALENDÁŘ AKCÍ, TŘÍDY, ZÁPIS — doplněno ve verzi 2.0
   ============================================================ */

/* Název a podrobnosti akce musí být pod sebou, ne na jednom řádku. */
.ms-event__title, .ms-event__meta { display: block; }
.ms-event__body { min-width: 0; }
.ms-event .ms-badge { margin-top: var(--sp-2); }

/* Datum akce — zarovnání drží i u dvouciferných dnů. */
.ms-event__date { display: block; }
.ms-event__mon { display: block; text-transform: lowercase; font-size: var(--text-2); }

/* Zrušená akce zůstává vidět, ale je jasné, že se nekoná. */
.ms-event--zruseno .ms-event__title,
.ms-event--zruseno .ms-event__meta { text-decoration: line-through; }
.ms-event--zruseno .ms-event__date { background: var(--danger-tint); }
.ms-event--zruseno .ms-event__day,
.ms-event--zruseno .ms-event__mon { color: var(--danger); }

/* Písmenné označení třídy vedle jejího jména. */
.ms-classdetail__letter {
	display: inline-block; margin-left: var(--sp-2); padding: 2px 8px;
	border-radius: 999px; background: var(--ms-navy-tint); color: var(--ms-navy);
	font-family: var(--font-body); font-size: var(--text-1); font-weight: 400;
	vertical-align: middle;
}

/* Přehled údajů u akce — dvousloupcový popisný seznam. */
.ms-deflist { margin: 0; }
.ms-deflist > div {
	display: flex; gap: var(--sp-4); padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border);
}
.ms-deflist > div:first-child { border-top: 1px solid var(--border); }
.ms-deflist dt { width: 120px; flex-shrink: 0; color: var(--text-muted); margin: 0; }
.ms-deflist dd { margin: 0; font-weight: 600; }

/* Termín u kroku zápisu — musí být vidět na první pohled. */
.ms-step__termin {
	display: block; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
	background: var(--ms-navy-tint); border-radius: var(--radius-control);
	font-size: var(--text-2); font-weight: 600; color: var(--ms-navy);
}

/* Text jen pro odečítače obrazovky — u odkazů otevíraných do nového okna. */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
	.ms-deflist > div { flex-direction: column; gap: var(--sp-1); }
	.ms-deflist dt { width: auto; }
}

/* ============================================================
   9. RESPONZIVITA — doladěno ve verzi 2.1
   Postup: nejprve mobil (360 px), pak tablet. Cíl je, aby web fungoval
   palcem jedné ruky — většina rodičů ho otevírá cestou z práce.
   ============================================================ */

@media (max-width: 900px) {
	/* Horní lišta služeb je doplněk, ne hlavní navigace — na mobilu
	   ji necháme, ale bez popisku, aby nezabírala řádek navíc. */
	.ms-topbar__in { justify-content: center; gap: var(--sp-3); }
	.ms-topbar__label { display: none; }

	/* Logo a telefon vedle sebe, telefon nesmí spadnout pod ohyb. */
	.ms-head__in { gap: var(--sp-4); }
	.ms-logo img { height: 44px; }
	.ms-head__contact { margin-left: auto; }

	/* Sekce mají na mobilu menší odsazení — jinak vzniká prázdná obrazovka. */
	.ms-hero__in { padding-top: var(--sp-7); padding-bottom: calc(var(--sp-8) * 1.6); }

	/* Vytažení karet přes hero musí povolit, jinak se s přibylým tlačítkem
	   dotknou karty spodní hrany textu. */
	.ms-classes-pull { margin-top: calc(var(--sp-7) * -1); }
}

@media (max-width: 640px) {
	/* Dvě karty tříd vedle sebe. Pět karet pod sebou je přes tři obrazovky
	   scrollování — dvousloupcová mřížka je zkrátí na půl. */
	.ms-grid-5 { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
	.ms-classcard__top { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
	.ms-classcard__top img { height: 76px; }
	.ms-classcard__body { padding: var(--sp-3); }
	.ms-classcard__name { font-size: var(--text-4); }

	/* Vypnutá animace nadskočení — na dotyku nemá smysl a jen brzdí. */
	.ms-classcard:hover { transform: none; }
	.ms-classcard:hover .ms-classcard__top img { transform: none; }
}

@media (max-width: 560px) {
	.ms-container { padding-left: var(--sp-4); padding-right: var(--sp-4); }

	.ms-hero__in { padding-bottom: calc(var(--sp-8) * 1.3); }
	.ms-classes-pull { margin-top: calc(var(--sp-6) * -1); }

	.ms-pagehead h1 { font-size: var(--text-6); }
	.ms-pagehead p { font-size: var(--text-3); }

	/* Kroky zápisu — číslo zůstává, ale nesmí ukrojit půl řádku. */
	.ms-step { gap: var(--sp-3); }

	/* Patička: údaje pod sebou s větším rozestupem, ať jdou přečíst. */
	.ms-grid-foot { gap: var(--sp-5); }
}

@media (max-width: 420px) {
	.ms-hero__title { font-size: var(--text-6); max-width: none; }
	.ms-logo img { height: 38px; }

	/* Pod 420 px se dvousloupcová mřížka tříd rozpadá — jedna karta na řádek,
	   ale s maskotem vlevo vedle textu, ne nad ním. */
	.ms-grid-5 { grid-template-columns: 1fr; }
	.ms-classcard { display: flex; align-items: center; }
	.ms-classcard__top { padding: var(--sp-3); flex-shrink: 0; }
	.ms-classcard__top img { height: 64px; }
	.ms-classcard__body { text-align: left; flex: 1; }
}

/* Kdo si vypnul animace v systému, nedostane je ani tady. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   10. DOLADĚNÍ PO VIZUÁLNÍ KONTROLE (verze 2.1)
   ============================================================ */

/* Odkazy v patičce byly vysoké 18 px — prstem se do nich trefoval jen ten,
   kdo měl štěstí. Minimum pro dotyk je 44 px. */
.ms-foot__links a,
.ms-foot p > a,
.ms-foot__bar-in a {
	display: inline-flex; align-items: center;
	min-height: var(--tap-min); padding: var(--sp-1) 0;
}
.ms-foot__links { display: flex; flex-direction: column; }
.ms-foot__bar-in {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 0 var(--sp-5); justify-content: space-between;
}
.ms-foot__legal { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }

/* E-mail v hlavičce a samostatné odkazy „Všechny aktuality“ jsou samy o sobě
   výzvou k akci, ne odkazem uvnitř věty — platí pro ně stejné minimum. */
.ms-mail { min-height: var(--tap-min); }
.ms-more-link {
	display: inline-flex; align-items: center; min-height: var(--tap-min);
	font-weight: var(--weight-bold);
}

/* Překladač GTranslate se na mobilu pokládal přes odkazy na Strava.cz
   a Twigsee. Dostane vlastní řádek nad lištou služeb. */
@media (max-width: 900px) {
	.gtranslate_wrapper, #gt_float_wrapper {
		position: static !important;
		display: flex; justify-content: center;
		padding: var(--sp-2) var(--sp-4) 0;
	}
}

/* Cookie lišta: „Odmítnout" musí být stejně nápadné jako „Přijmout".
   Plugin dává souhlasu plnou barvu a odmítnutí šedý obrys — to je přesně
   ten nerovný poměr, který zákon zakazuje. */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background-color: var(--ms-navy) !important;
	border: 1px solid var(--ms-navy) !important;
	color: #fff !important;
	font-weight: var(--weight-bold) !important;
	min-height: var(--tap-min);
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background-color: var(--ms-navy-hover) !important;
}

/* Hlavní výzva v hero sekci — jedna primární akce na obrazovku. */
.ms-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 0; }

/* Complianz vykresluje na místě zablokovaného obsahu (mapa, video) hlášku
   bílým písmem na bílém podkladu — nepřečte ji nikdo. */
.cmplz-blocked-content-notice,
.cmplz-blocked-content-container .cmplz-blocked-content-notice {
	background: var(--ms-navy-tint) !important;
	color: var(--ink) !important;
	font-size: var(--text-2) !important;
	padding: var(--sp-4) !important;
	border-radius: var(--radius-control);
}
.cmplz-blocked-content-notice a { color: var(--ms-navy) !important; text-decoration: underline; }

/* ============================================================
   11. HORNÍ LIŠTA A KONTAKT V HLAVIČCE (verze 2.2)
   ============================================================ */

/* Přepínač jazyka je řádnou součástí lišty, ne plovoucím prvkem přes obsah.
   Plugin vykresluje `.gt_switcher` s `.gt_selected` (aktuální jazyk)
   a `.gt_option` (rozbalovací nabídka). Sjednocujeme ho s písmem webu
   a zvětšujeme na dotykovou velikost. */
.ms-topbar__lang { display: flex; align-items: center; }
.ms-topbar__lang .gt_switcher { width: auto !important; font-family: var(--font-body) !important; }

.ms-topbar__lang .gt_switcher .gt_selected { background: none !important; }
.ms-topbar__lang .gt_switcher .gt_selected a {
	width: auto !important; min-width: 108px; box-sizing: border-box !important;
	min-height: var(--tap-min); display: flex !important; align-items: center; gap: var(--sp-2);
	padding: 0 28px 0 var(--sp-2) !important;
	border: 0 !important; background: none !important;
	font-size: var(--text-2) !important; font-weight: var(--weight-bold);
	color: var(--ink) !important;
}
.ms-topbar__lang .gt_switcher .gt_selected a:hover { background: none !important; }

/* Plugin dává přepínači `overflow: hidden` a rozbalenou nabídku nechává
   v toku — lišta se pak roztáhla a nabídka se ořízla po dvou položkách.
   Nabídku proto vytahujeme nad obsah. */
.ms-topbar__lang .gt_switcher { position: relative; overflow: visible !important; }
.ms-topbar__lang .gt_switcher .gt_option {
	position: absolute !important; top: 100%; right: 0; left: auto;
	min-width: 100%; max-height: none !important; overflow: visible !important;
	border-radius: 0 0 var(--radius-control) var(--radius-control);
	box-shadow: var(--shadow-raised);
}
.ms-topbar__lang .gt_switcher .gt_option a {
	min-height: var(--tap-min); display: flex !important; align-items: center; gap: var(--sp-2);
	font-size: var(--text-2) !important; padding: 0 var(--sp-3) !important;
	white-space: nowrap;
}
.ms-topbar__lang .gt_switcher img { flex-shrink: 0; }

/* Prázdný kontejner po plovoucí variantě, kdyby ji někdo znovu zapnul. */
body > .gtranslate_wrapper:empty { display: none; }

@media (max-width: 900px) {
	/* Lišta se srovná na střed a jazyk dostane vlastní místo na kraji. */
	.ms-topbar__in { justify-content: center; gap: var(--sp-2); }
	.ms-topbar__lang { margin-left: auto; }
}

@media (max-width: 560px) {
	/* Logo nahoře samo, pod ním telefon a e-mail na plné šířce.
	   E-mail se na mobilu neschovává — je to druhá nejčastější cesta,
	   jak rodiče školku kontaktují. */
	/* První řádek: logo a vedle něj tlačítko menu.
	   Druhý řádek: telefon a e-mail přes celou šířku. */
	.ms-head__in { gap: var(--sp-2); }
	.ms-logo { flex: 0 1 auto; min-width: 0; }
	.ms-logo img { max-width: 100%; }
	.ms-head__contact {
		flex: 1 1 100%; flex-wrap: wrap;
		gap: 0 var(--sp-4); margin-left: 0;
		padding-bottom: var(--sp-1);
	}
	.ms-mail { font-size: var(--text-2); }

	/* Odkazy na služby se na úzké obrazovce vejdou jen jako loga. */
	.ms-topbar__in { justify-content: flex-start; }
	.ms-partner__name { display: none; }
}