/*
 * Styl „Hravý“ (Nastavení školy → Vzhled webu). Rozložení stránek zůstává, mění se jen barvy a tvary:
 * barvy částí školy (ZŠ modrá, MŠ cihlová, družina zelená, jídelna žlutá), pastelové dlaždice,
 * kulatější rohy, nadpisy bloků podtržené tahem fixou. Načítá se až po main.css.
 */

body.skin-hravy {
	--radius: 22px;
	--radius-lg: 28px;
	--part: #2F4FB5;
	--part-soft: #E6F1FB;
	--part-ink: #0C447C;
	--part-mark: #FAC775;
}
body.skin-hravy.part-zs { --part: #378ADD; --part-soft: #E6F1FB; --part-ink: #0C447C; --part-mark: #B5D4F4; }
body.skin-hravy.part-ms { --part: #D85A30; --part-soft: #FBE3D6; --part-ink: #712B13; --part-mark: #FAC775; }
body.skin-hravy.part-sd { --part: #639922; --part-soft: #EAF3DE; --part-ink: #27500A; --part-mark: #C0DD97; }
body.skin-hravy.part-sj { --part: #EF9F27; --part-soft: #FAEEDA; --part-ink: #633806; --part-mark: #FAC775; }

/* Hlavní menu: zvýraznění aktuální části její barvou */
.skin-hravy .main-nav__list .current-menu-item > a,
.skin-hravy .main-nav__list .current-menu-ancestor > a,
.skin-hravy .main-nav__list .current_page_parent > a,
.skin-hravy .main-nav__list .current-page-ancestor > a { color: var(--part-ink); box-shadow: inset 0 -4px 0 var(--part); }

/* „Pro rodiče“ je tlačítko: na své stránce bílý text bez podtržení barvou části */
.skin-hravy .main-nav__list .menu-item-pro-rodice.current-menu-item > a,
.skin-hravy .main-nav__list .menu-item-pro-rodice.current-menu-ancestor > a,
.skin-hravy .main-nav__list .menu-item-pro-rodice.current-page-ancestor > a { color: #fff; box-shadow: none; }

/* Záhlaví vnitřní stránky bez obrázku období: barva části a barevné bubliny */
.skin-hravy:not(.has-season) .page-header { background: var(--part-soft); }
.skin-hravy:not(.has-season) .page-header::before {
	left: auto; right: 22%; top: 34px; width: 54px; height: 54px; border-radius: 50%;
	background: var(--part-mark); -webkit-mask-image: none; mask-image: none;
}
.skin-hravy:not(.has-season) .page-header::after {
	right: -60px; top: -90px; width: 300px; height: 300px; background: var(--part-mark); opacity: .55;
}
/* Záhlaví s obrázkem období na stránkách části: podklad v barvě části, aby ladil s barvou nadpisu
   (ZŠ modrá, MŠ cihlová, družina zelená, jídelna žlutá); obrázek zůstává podle období */
.skin-hravy.has-season:is(.part-zs, .part-ms, .part-sd, .part-sj) .page-header { background: var(--part-soft); }
.skin-hravy .page-header__title { color: var(--part-ink); }

/* Nadpisy bloků: pod textem ručně tažený tah fixou v barvě části (text nepřekrývá) */
.skin-hravy .section-head__title { position: relative; display: inline-block; padding-bottom: 10px; }
.skin-hravy .section-head__title::after {
	content: ""; position: absolute; left: -4px; right: -6px; bottom: 0; height: 12px; background: var(--part-mark, #FAC775);
	-webkit-mask: url(../img/swoosh.svg) center / 100% 100% no-repeat; mask: url(../img/swoosh.svg) center / 100% 100% no-repeat;
}
/* Na tmavém podkladu (jídelníček) teplá žlutá */
.skin-hravy .section-head--on-dark .section-head__title::after { background: #FAC775; }

/* Dlaždice podstránek: pastelové, barvy se střídají */
.skin-hravy .subpages > li:nth-child(6n+1) { --t-bg: #FAEEDA; --t-ink: #633806; --t-sub: #854F0B; }
.skin-hravy .subpages > li:nth-child(6n+2) { --t-bg: #E1F5EE; --t-ink: #085041; --t-sub: #0F6E56; }
.skin-hravy .subpages > li:nth-child(6n+3) { --t-bg: #EAF3DE; --t-ink: #27500A; --t-sub: #3B6D11; }
.skin-hravy .subpages > li:nth-child(6n+4) { --t-bg: #FBEAF0; --t-ink: #72243E; --t-sub: #993556; }
.skin-hravy .subpages > li:nth-child(6n+5) { --t-bg: #EEEDFE; --t-ink: #3C3489; --t-sub: #534AB7; }
.skin-hravy .subpages > li:nth-child(6n+6) { --t-bg: #E6F1FB; --t-ink: #0C447C; --t-sub: #185FA5; }
.skin-hravy .subpage { background: var(--t-bg); border-color: transparent; transition: transform .15s; }
.skin-hravy .subpage:hover { border-color: transparent; transform: translateY(-3px); }
.skin-hravy .subpage__title, .skin-hravy .subpage:hover .subpage__title, .skin-hravy .subpage .icon { color: var(--t-ink); }
.skin-hravy .subpage__text { color: var(--t-sub); }

/* Úvodní stránka: rychlé odkazy pastelově, ikony v bílém čtverečku */
.skin-hravy .quicklinks > li:nth-child(4n+1) { --t-bg: #FAECE7; --t-ink: #712B13; --t-sub: #993C1D; }
.skin-hravy .quicklinks > li:nth-child(4n+2) { --t-bg: #EAF3DE; --t-ink: #27500A; --t-sub: #3B6D11; }
.skin-hravy .quicklinks > li:nth-child(4n+3) { --t-bg: #E6F1FB; --t-ink: #0C447C; --t-sub: #185FA5; }
.skin-hravy .quicklinks > li:nth-child(4n+4) { --t-bg: #EEEDFE; --t-ink: #3C3489; --t-sub: #534AB7; }
.skin-hravy .quicklink { background: var(--t-bg); border-color: transparent; transition: transform .15s; }
.skin-hravy .quicklink:hover { border-color: transparent; transform: translateY(-3px); }
.skin-hravy .quicklink .icon-tile { background: #fff; color: var(--t-ink); }
.skin-hravy .quicklink__title { color: var(--t-ink); }
.skin-hravy .quicklink__text { color: var(--t-sub); }

/* Úvodní stránka: části školy v jejich barvách */
.skin-hravy .part--zs { --p: #378ADD; --p-soft: #E6F1FB; --p-ink: #0C447C; }
.skin-hravy .part--ms { --p: #D85A30; --p-soft: #FBE3D6; --p-ink: #712B13; }
.skin-hravy .part--sd { --p: #639922; --p-soft: #EAF3DE; --p-ink: #27500A; }
.skin-hravy .part--sj { --p: #EF9F27; --p-soft: #FAEEDA; --p-ink: #633806; }
.skin-hravy .part { background: var(--p-soft, var(--surface)); border-color: transparent; }
.skin-hravy .part:hover { border-color: var(--p, var(--blue)); }
.skin-hravy .part__title { color: var(--p-ink, var(--ink)); }
.skin-hravy .part--solid { background: var(--p, var(--green)); border-color: transparent; }
.skin-hravy .part--solid .part__title, .skin-hravy .part--solid .part__text { color: #fff; }

/* Úvodní fotka: žlutá podložka za fotkou, víc natočená */
.skin-hravy .hero { background: #E6F1FB; }
.skin-hravy .hero__visual::before { background: #FAC775; transform: rotate(3.5deg); }

/* Karty akcí: datum v barevném štítku */
.skin-hravy .event-badge { background: var(--ev, var(--part)); color: #fff; border-radius: 16px; }
.skin-hravy .card { border-radius: var(--radius); }

/* Tlačítka kulatá */
.skin-hravy .btn { border-radius: 999px; }