/*
Theme Name: ZUŠ Žarnovica (GeneratePress Child)
Theme URI: https://zuszarnovica.sk
Description: Child téma pre ZUŠ Žarnovica. Nesie vizuálnu identitu školy, náhradu modulov GP Premium a úpravy prístupnosti podľa WCAG 2.1 AA a vyhlášky č. 78/2020 Z. z.
Author: Základná umelecká škola Žarnovica
Template: generatepress
Version: 3.6.1
Text Domain: zus-child
*/

/* ===============================================================
   TOKENY
   Farebná línia školy ostáva fialová, ale posunutá do hĺbky,
   aby spĺňala kontrast 4,5 : 1 (WCAG 2.1 AA).
   Štyri odborové farby nesú celú úvodnú stránku ako plné plochy
   pod bielym textom, preto sú stmavené tak, aby každá z nich
   mala s bielou aspoň 5,6 : 1.
   =============================================================== */
:root {
	--zus-ink:        #221a20;
	--zus-muted:      #5a4e56;
	--zus-plum:       #5b2350;
	--zus-plum-deep:  #3a1633;
	--zus-tint:       #f5f2f6;
	--zus-surface:    #ffffff;
	--zus-line:       #ded6de;

	--zus-hudobny:    #a63d22;
	--zus-vytvarny:   #7a5209;
	--zus-tanecny:    #0f6b5c;
	--zus-literarny:  #5b2350;

	--zus-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--zus-sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--zus-measure: 68ch;

	/* Velkost loga v hlavicke. Je to premenna preto, lebo na nej zavisi
	   odsadenie znacky (pozri .site-branding) - stred loga ma sediet na
	   strede polozky menu "Aktuality". Keby sa velkost prepisala priamo
	   v ::before, zarovnanie by sa ticho rozbilo. */
	--zus-logo: 84px;
}

/* ===============================================================
   STVORPRUH ODBOROV - nosny prvok identity
   =============================================================== */
.zus-strands {
	display: flex;
	width: 100%;
	height: 5px;
}

.zus-strands span {
	flex: 1 1 25%;
}

.zus-strands span:nth-child(1) { background-color: var(--zus-hudobny); }
.zus-strands span:nth-child(2) { background-color: var(--zus-vytvarny); }
.zus-strands span:nth-child(3) { background-color: var(--zus-tanecny); }
.zus-strands span:nth-child(4) { background-color: var(--zus-literarny); }

.zus-strands--top {
	position: relative;
	z-index: 100;
}

/* ===============================================================
   TYPOGRAFIA
   Nadpisy bezpatkove, tazke a tesne - rovnaka linka ako na uvodnej
   stranke. Pred prebehom boli podstranky patkove a web posobil, akoby
   uvodna stranka a zvysok patrili k dvom roznym webom.
   Patkove pismo ostava ako akcent na cislach (poradie odborov,
   pas so cislami), kde robi pekny kontrast k tazkym nadpisom.
   Ziadne externe fonty - kvoli suhlasu podla zak. 452/2021 Z. z.
   =============================================================== */
body {
	font-family: var(--zus-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--zus-ink);
	background-color: var(--zus-tint);
}

h1, h2, h3, h4, h5, h6,
.site-title {
	font-family: var(--zus-sans);
	font-weight: 800;
	color: var(--zus-ink);
	letter-spacing: -0.02em;
	line-height: 1.14;
	text-wrap: balance;
}

h1, .entry-title {
	font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.85rem);
	margin-bottom: 0.6em;
}

h2 {
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem);
	margin-top: 2em;
	margin-bottom: 0.5em;
	padding-bottom: 0.35em;
	border-bottom: 2px solid var(--zus-line);
}

h3 {
	font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
	margin-top: 1.5em;
	margin-bottom: 0.4em;
}

/* Nazov clanku je v archive tiez h2, ale vseobecne pravidlo pre neho
   (velky odstup zhora a ciara pod nim) tam nepatri - robilo to
   v kartach prazdne miesto a linku, ktora nic neoddeluje. */
.entry-title {
	margin-top: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Mieru citatelneho stlpca urcuje sirka samotnej karty podstranky
   (pozri blok SIRKA TEXTOVYCH PODSTRANOK). Keby si ju drzali este aj
   odstavce, text by koncil v polovici karty, kym ciara pod nadpisom
   by isla az k okraju - presne to na podstrankach posobilo rozbito. */
.entry-content p,
.entry-content li {
	max-width: none;
}

.zus-eyebrow {
	display: block;
	font-family: var(--zus-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zus-muted);
	margin-bottom: 0.6em;
}

/* Odkazy su podciarknute - nerozlisuju sa len farbou (WCAG 1.4.1) */
.entry-content a,
.zus-footer a,
.widget-area a {
	color: var(--zus-plum);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.entry-content a:hover,
.entry-content a:focus {
	text-decoration-thickness: 2px;
}

/* ===============================================================
   HLAVICKA A NAVIGACIA
   Tmavý pás nesie značku aj hlavné menu. Hlavička je prvý nositeľ
   identity, preto ide do plnej farby, nie do bielej.
   =============================================================== */
.site-header {
	background-color: var(--zus-plum-deep);
	border-bottom: 0;
}

/* Pas drzime nizky, aby logo v nom neplavalo. GeneratePress dava
   hlavicke 20 px zhora aj zdola a menu riadok 60 px - spolu z toho
   bola takmer 160 px vysoka plocha na 52 px logo.

   Flex si musime nastavit sami: zakladna CSS GeneratePressu, ktora
   `.inside-header` robi flexom, sa na tomto webe nenacitava (rovnaky
   dovod, preco tu plati content-box). Bez toho by kontakt spadol
   pod znacku namiesto toho, aby stal vedla nej. */
.site-header .inside-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	/* Bocne odsadenie preberá .site-branding nizsie. GeneratePress tu
	   dava 40 px, riadok menu ma 0 - medzi 769 a 1180 px to znacku
	   odsuvalo o 40 px od menu. Nad 1100 px sa obsah aj tak centruje,
	   takze vynulovanie tu nic neposunie (na webe plati content-box). */
	padding-inline: 0;
}

/* GeneratePress vesia na .inside-header clearfix ::before a ::after
   (content: "."). Odkedy je .inside-header flex, su z nich plnohodnotne
   flex polozky - a column-gap 32 px potom odsunul znacku o presne 32 px
   doprava, takze logo nesedelo na osi menu pod nim. Pri flexe je clearfix
   zbytocny, takze sa obe pseudopolozky vypinaju. */
.site-header .inside-header::before,
.site-header .inside-header::after {
	display: none;
}

/* Logo ma sediet **stredom** na strede polozky menu "Aktuality",
   nie lavou hranou na jej lavej hrane.

       20 px      vnutorne odsadenie polozky menu (kvoli podfarbeniu
                  pri prechode mysou) - o tolko je text posunuty od
                  hrany kontajnera
     + 30,8 px    polovica sirky slova "Aktuality"
                  -> stred polozky menu je 50,8 px od hrany kontajnera
     - polovica loga
       ---------
       8,8 px     pri logu 84 px

   Zmerane pri 1280 px: stred polozky menu aj stred loga na 133,27 px.
   Ramcek polozky a jej text maju ten isty stred (odsadenie je
   symetricke), takze na tom, ktory z nich sa berie, nezalezi.

   ⚠️ 30,8 px je odmerana sirka slova "Aktuality" v systemovom pisme
   pri 0,95 rem / 600. Na inom systeme (Mac, Android) sa moze o par
   pixelov lisit - je to opticke zarovnanie, nie vypocet, ktory musi
   sediet na desatinu. Ak sa zmeni polozka menu alebo velkost pisma
   v menu, treba to premerat znova. */
.site-branding {
	padding-inline-start: calc(20px + 30.8px - var(--zus-logo) / 2);
}

.site-branding .main-title,
.site-branding .site-title {
	margin: 0;
	line-height: 1.2;
}

.site-title a,
.site-branding .main-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--zus-sans);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #ffffff;
	text-decoration: none;
}

/* Logo školy — kruh rozdelený na štyri odbory. Dekoratívne:
   názov školy stojí hneď vedľa ako text, takže sa nič nestráca. */
.site-title a::before,
.site-branding .main-title a::before {
	content: "";
	flex: none;
	width: var(--zus-logo);
	height: var(--zus-logo);
	/* Zdroj logo.png ma 144 px. Po zvacseni na 84 px by na displeji
	   s dvojnasobnou hustotou chybalo (84 x 2 = 168 px) a logo by bolo
	   mäkke. Druhy riadok preto na takych displejoch siahne po uz
	   nahratom logo-velke.png (320 px); prvy riadok ostava ako zaloha
	   pre prehliadace bez image-set, aby sa nic nestratilo.
	   Na bezny displej sa velky subor nestahuje. */
	background-image: url("obrazky/logo.png");
	background-image: image-set(
		url("obrazky/logo.png") 1x,
		url("obrazky/logo-velke.png") 2x
	);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.site-title a:hover,
.site-branding .main-title a:hover,
.site-branding .main-title a:focus {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.main-navigation {
	background-color: var(--zus-plum-deep);
	border-bottom: 0;
}

.main-navigation .main-nav ul li a {
	font-family: var(--zus-sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 48px;
	color: #ffffff;
	border-bottom: 3px solid transparent;
}

/* Rozbalovacie menu si drzi vlastne riadkovanie */
.main-navigation .main-nav ul ul li a {
	line-height: 1.4;
}

/* ⚠️ GeneratePress si v Prispôsobiť drží farby menu **z čias bielej hlavičky**
   (tmavofialový text na svetlom podklade) a vypisuje ich do vlozenej CSS
   selektormi so specifickostou (0,4,3):

       .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a

   Toto pravidlo malo povodne (0,3,3), takze **prehravalo**. Polozky v tmavom
   pase preto pri prechode mysou dostavali svetle pozadie a tmavy text, hoci
   pas je tmavy. Na pilulke "English" to bol tmavofialovy text #5b2350 na
   tmavom podklade — **kontrast 1,05 : 1**, prakticky neviditelne.

   Preto tu zamerne kopirujeme strukturu ich selektorov, aby sa specifickost
   vyrovnala; child styl sa nacitava neskor, takze vyhrava.
   Podmenu sa nerieși — tam je svetle pozadie a ich farby sedia s nasimi. */
.main-navigation .main-nav > ul > li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav > ul > li:not([class*="current-menu-"]).sfHover > a,
.main-navigation .main-nav > ul > li:not([class*="current-menu-"]) > a:focus,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.12);
	border-bottom-color: #ffffff;
}

/* Rozbaľovacie menu ostáva svetlé — na tmavom páse by splynulo. */
.main-navigation .main-nav ul ul {
	background-color: var(--zus-surface);
	border: 1px solid var(--zus-line);
}

.main-navigation .main-nav ul ul li a {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--zus-ink);
	border-bottom-color: transparent;
}

.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li a:focus {
	color: var(--zus-plum);
	background-color: var(--zus-tint);
	border-bottom-color: transparent;
}

/* Posledná položka menu je English — v návrhu je to pilulka.

   Menu stojí na floatoch, nie na flexe, takže výšku každej položky
   určuje jej line-height. Ostatné položky majú 48 px, stred textu
   teda 24 px od vrchu. Pilulka to musí trafiť presne, inak sedí
   nižšie a roztáhuje celý riadok:
       6 px margin + 1 px rám + 34/2 = 24 px  -> stred sedí
       6 + 1 + 34 + 1 + 6 = 48 px celkovo      -> riadok nenarastie */
.main-navigation .main-nav > ul > li:last-child > a {
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	margin-block: 6px;
	/* Odstup zlava: pilulka sa predtym dotykala polozky "Uradne hodiny"
	   (obe zacinali na tej istej suradnici, 932 px) a jej podfarbenie pri
	   prechode mysou zacinalo hned za susedom. 18 px ju odlepi a zaroven
	   je to stale menej ako 20 px vnutorneho odsadenia polozky menu,
	   takze riadok menu sa nerozsiri viac, nez treba. */
	margin-inline-start: 18px;
	padding-inline: 0.85rem;
	line-height: 34px;
	font-size: 0.9rem;
}

.main-navigation .main-nav > ul > li:last-child:hover > a,
.main-navigation .main-nav > ul > li:last-child > a:focus {
	border-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.12);
}

.main-navigation .menu-toggle,
.main-navigation .menu-toggle .mobile-menu {
	color: #ffffff;
}

/* Na telefone je hlavicka dva riadky (znacka + tlacidlo Menu), takze
   logo v plnej velkosti by z prvej obrazovky ukrojilo prilis vela. */
@media (max-width: 768px) {
	:root {
		--zus-logo: 56px;
	}

	/* Menu je tu zbalene do tlacidla so **stredovym** textom, takze niet
	   s cim centrovat - odsadenie sa vracia na 20 px. To je zaroven os,
	   na ktorej pri tejto sirke stoji hero text, karty aktualit aj
	   nadpisy v pate, takze na telefone vsetko sedi na jednej osi. */
	.site-branding {
		padding-inline-start: 20px;
	}

	.site-title a,
	.site-branding .main-title a {
		gap: 0.7rem;
		font-size: 1rem;
	}
}

/* ===============================================================
   SIRKA TEXTOVYCH PODSTRANOK
   Karta podstranky bola siroka 1100 px, ale text v nej mal vlastnu
   mieru 68 znakov - koncil v polovici a vpravo ostavala prazdna
   plocha, pricom ciary pod nadpismi isli az k okraju. Karta sa teraz
   zuzi na sirku citatelneho stlpca, takze nadpisy, ciary aj text
   koncia na tej istej osi.
   Uvodna stranka (.home) je z toho vynata - tam su pasy cez celu sirku.
   =============================================================== */
.page:not(.home) .site-main,
.single .site-main,
.search-no-results .site-main {
	max-width: 54rem;
	margin-inline: auto;
}

/* ===============================================================
   OBSAH A TABULKY
   =============================================================== */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.inside-page-header {
	background-color: var(--zus-surface);
}

.entry-content table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 0.97rem;
}

.entry-content table caption {
	caption-side: top;
	text-align: left;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zus-muted);
	padding-bottom: 0.6em;
}

.entry-content th,
.entry-content td {
	padding: 0.6em 0.9em;
	border-bottom: 1px solid var(--zus-line);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th {
	border-bottom: 2px solid var(--zus-plum);
	font-family: var(--zus-sans);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zus-muted);
}

.entry-content tbody th {
	font-weight: 600;
	white-space: nowrap;
}

.zus-last-updated {
	margin-top: 2.5em;
	padding-top: 0.9em;
	border-top: 1px solid var(--zus-line);
	font-size: 0.85rem;
	color: var(--zus-muted);
}

/* ===============================================================
   SEKUNDARNE MENU V BOCNOM PANELI
   =============================================================== */
.zus-secondary-nav {
	margin-bottom: 2em;
	background-color: var(--zus-surface);
	border-top: 3px solid var(--zus-plum);
}

.zus-secondary-nav .zus-secondary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zus-secondary-nav .zus-secondary-menu li {
	margin: 0;
	border-bottom: 1px solid var(--zus-line);
}

.zus-secondary-nav .zus-secondary-menu li:last-child {
	border-bottom: 0;
}

.zus-secondary-nav .zus-secondary-menu a {
	display: block;
	padding: 0.65em 1em;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--zus-ink);
	text-decoration: none;
}

.zus-secondary-nav .zus-secondary-menu a:hover,
.zus-secondary-nav .zus-secondary-menu a:focus {
	background-color: var(--zus-tint);
	color: var(--zus-plum);
	text-decoration: underline;
}

/* ===============================================================
   PATA
   Nesie povinne odkazy dostupne z kazdej podstranky:
   vyhlasenie o pristupnosti, prevadzkovatel, mapa stranky.
   =============================================================== */
.zus-footer {
	background-color: var(--zus-plum-deep);
	color: #ffffff;
	/* Spodne odsadenie je male zamerne: pod patou uz nasleduje len pas
	   s copyrightom, ktory ma rovnake pozadie a vlastnych 20 px zhora.
	   Pri 2 rem bola medzera medzi textom o prevadzkovatelovi a
	   copyrightom 54 px a oba riadky posobili ako dva cudzie bloky.
	   Teraz je 28 px - patria k sebe. */
	padding: 3rem 0 0.5rem;
}

.zus-footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem;
}

.zus-footer h2 {
	font-family: var(--zus-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 1em;
	padding: 0 0 0.7em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.zus-footer p,
.zus-footer li {
	font-size: 0.92rem;
	line-height: 1.6;
	color: #ffffff;
	max-width: none;
}

.zus-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zus-footer li {
	margin-bottom: 0.45em;
}

.zus-footer a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.zus-footer a:hover,
.zus-footer a:focus {
	text-decoration-thickness: 2px;
}

.zus-footer-note {
	max-width: 1100px;
	margin: 2.5rem auto 0;
	padding: 1.2rem 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 0.85rem;
	color: #ffffff;
	text-align: center;
}

/* Text sa zuzuje na mieru citatelneho stlpca (rovnakych 54 rem ako
   textove podstranky). Vycentrovana veta cez celu sirku 1100 px by
   siahala od okraja po okraj a posobila by ako pas, nie ako poznamka.
   Deliaca ciara nad textom ostava siroka 1100 px, aby sedela so
   stlpcami paty nad nou. */
.zus-footer-note p {
	max-width: 54rem;
	margin-inline: auto;
}

/* Tlacidlo "Nastavenia cookies" stoji v stlpci "Povinne informacie"
   ako posledna polozka, hned za "Zasadami pouzivania cookies" - obe
   veci sa tykaju toho isteho a clovek ich hlada na jednom mieste.
   Vyzera preto presne ako jeho susedia v stlpci: biely podciarknuty
   text, ziadny ram, ziadne pozadie. Predtym to bola pilulka nalepena
   do vety o prevadzkovatelovi, kde posobila ako cudzi prvok.

   Citacka obrazovky ho aj tak ohlasi ako **tlacidlo**, nie ako odkaz -
   co je spravne, otvara dialog.

   ⚠️ Plugin cookie-law-info dopisuje kazdemu prvku s triedou
   `cli_settings_button` farby z nastaveni listy priamo do atributu
   style (biele pozadie + tmavy text). Inline styl prebije len
   `!important` - preto su tu dve. */
.zus-cookie-settings {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none !important;
	color: #ffffff !important;
	font: inherit;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

.zus-cookie-settings:hover,
.zus-cookie-settings:focus {
	background: none !important;
	text-decoration-thickness: 2px;
}

/* Tlacidla v samotnej liste cookies dostavaju ten isty tvar, aby lista
   a pata hovorili rovnakou recou. Farby lista nechava - biele tlacidlo
   na tmavom pase ma kontrast 15,6 : 1 a "Odmietnut" ma zamerne rovnaku
   vahu ako "Prijat vsetky" (ziadny tmavy vzor). */
#cookie-law-info-bar .cli-plugin-button,
#cliSettingsPopup .cli-plugin-button {
	border-radius: 999px;
}

.site-info {
	background-color: var(--zus-plum-deep);
	color: #ffffff;
	font-size: 0.85rem;
}

.site-info a {
	color: #ffffff;
}

/* Podpis tvorcu webu pod copyrightom.

   Ma byt tichy, ale nie necitatelny: rgba(255,255,255,0.72) sa na
   --zus-plum-deep sklada na ~#c8bec6, co je s pozadim **8,80 : 1** -
   hlboko nad hranicou 4,5 : 1 (WCAG 1.4.3). Odkazy su podciarknute,
   takze sa od okoliteho textu neodlisuju len farbou (WCAG 1.4.1).

   12,5 px je spodna hranica, ktoru si projekt urcil uz 12. 9. pre
   drobne pismo v pate. */
.zus-podpis {
	display: block;
	margin-top: 0.6em;
	font-size: max(0.78rem, 12.5px);
	color: rgba(255, 255, 255, 0.72);
}

.zus-podpis a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Pri prechode mysou sa kazdy odkaz rozsvieti vo vlastnej znackovej
   farbe. Obe su prevzate zo stylov tych webov, ale posunute tak, aby
   na slivkovom pozadi presli kontrastom 4,5 : 1 (WCAG 1.4.3 plati aj
   pre stav :hover):

     LumaWeb        --ac  #7eb3ff  -> 7,28 : 1   pouzite tak, ako je
                    (--ac2 #4a7eff by dalo len 4,26 : 1)
     voidsolutions  --red-bright #ff3b3f -> 4,43 : 1, tesne pod hranicou
                    -> #ff4f52 (o 10 % svetlejsie) -> 4,84 : 1

   Vypocitane, nie odhadnute. Ak sa farby niekedy menia, treba ich
   znova prepocitat proti --zus-plum-deep. */
.zus-podpis a[href*="lumaweb"]:hover,
.zus-podpis a[href*="lumaweb"]:focus {
	color: #7eb3ff;
}

.zus-podpis a[href*="voidsolutions"]:hover,
.zus-podpis a[href*="voidsolutions"]:focus {
	color: #ff4f52;
}

/* ===============================================================
   PRISTUPNOST (WCAG 2.1 AA)
   =============================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--zus-plum);
	outline-offset: 2px;
}

.zus-footer a:focus-visible,
.site-info a:focus-visible,
.zus-cookie-settings:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.zus-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.8em 1.4em;
	background-color: var(--zus-surface);
	color: var(--zus-plum);
	font-weight: 700;
	text-decoration: underline;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}


.zus-skip-link:focus {
	left: 0;
}

.entry-content li + li {
	margin-top: 0.35em;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===============================================================
   RESPONZIVNOST
   =============================================================== */
@media (max-width: 900px) {
	.zus-footer-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
}

@media (max-width: 560px) {
	.zus-footer-inner {
		grid-template-columns: 1fr;
	}

	body {
		font-size: 16px;
	}
}

/* ===============================================================
   UVODNA STRANKA - variant "Stvorpruh"
   Styri odbory nie su polozkou v menu, su hlavnym vstupom do webu.
   Preto su plnymi farebnymi plochami cez celu sirku obrazovky,
   nie kartami s tenkym pruzkom.
   Skola nema fotobanku - zvysok stranky stoji na typografii.
   =============================================================== */
.zus-front {
	padding-bottom: 0;
}

/* Pas cez celu sirku vnutri centrovaneho kontajnera.

   box-sizing je tu nutny: na tomto webe plati content-box, takze
   bez neho by sa vodorovne odsadenie pripocitalo k 100vw a pas by
   na uzkej obrazovke pretiekol o svoje vlastne odsadenie.
   Prejavovalo sa to na mobile useknutym pravym okrajom. */
.zus-bleed,
.zus-odbory,
.zus-kontakt-pas {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* --- Hero --- */
.zus-hero {
	background-color: var(--zus-tint);
	padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
	border-bottom: 0;
}

.zus-eyebrow {
	margin: 0 0 1rem;
	font-family: var(--zus-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zus-muted);
}

.zus-hero-title {
	font-family: var(--zus-sans);
	font-size: clamp(2.4rem, 1.1rem + 5.2vw, 4.4rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.025em;
	max-width: 16ch;
	margin: 0 0 0.35em;
	color: var(--zus-ink);
}

.zus-hero-title em {
	font-style: normal;
	color: var(--zus-plum);
}

.zus-hero-lead {
	font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem);
	line-height: 1.6;
	color: var(--zus-muted);
	max-width: 46ch;
	margin: 0 0 2rem;
}

.zus-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.zus-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem 1.75rem;
	font-family: var(--zus-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: var(--zus-plum);
	background-color: transparent;
	border: 2px solid var(--zus-plum);
	border-radius: 999px;
}

.zus-button:hover,
.zus-button:focus {
	background-color: var(--zus-surface);
	color: var(--zus-plum-deep);
	border-color: var(--zus-plum-deep);
	text-decoration: underline;
}

.zus-button--primary {
	color: #ffffff;
	background-color: var(--zus-plum);
}

.zus-button--primary:hover,
.zus-button--primary:focus {
	background-color: var(--zus-plum-deep);
	border-color: var(--zus-plum-deep);
	color: #ffffff;
}

/* --- Spolocne sekcie --- */
.zus-section {
	background-color: var(--zus-surface);
	padding: clamp(2.5rem, 1.4rem + 3vw, 4.5rem) clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
	border-bottom: 0;
}

.zus-section--tint {
	background-color: var(--zus-tint);
}

.zus-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-bottom: 2rem;
}

.zus-section-title {
	font-family: var(--zus-sans);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--zus-ink);
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}

.zus-section-head .zus-section-title {
	margin-bottom: 0;
}

.zus-section-more {
	font-size: 0.95rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--zus-plum);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Styri odbory: hlavny vstup do webu --- */
.zus-odbory {
	list-style: none;
	margin-block: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	background: none;
	border: 0;
}

.zus-odbor {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
}

.zus-odbor a {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: 20rem;
	padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
	color: #ffffff;
	text-decoration: none;
	transition: transform 0.25s ease;
}

.zus-odbor--hudobny a   { background-color: var(--zus-hudobny); }
.zus-odbor--vytvarny a  { background-color: var(--zus-vytvarny); }
.zus-odbor--tanecny a   { background-color: var(--zus-tanecny); }
.zus-odbor--literarny a { background-color: var(--zus-literarny); }

.zus-odbor a:hover,
.zus-odbor a:focus {
	transform: translateY(-6px);
}

.zus-odbor a:hover .zus-odbor-nazov,
.zus-odbor a:focus .zus-odbor-nazov {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.15em;
}

.zus-odbor a:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -8px;
}

.zus-odbor-cislo {
	display: block;
	font-family: var(--zus-serif);
	font-size: 3rem;
	line-height: 1;
	opacity: 0.6;
	margin-bottom: auto;
}

.zus-odbor-nazov {
	font-family: var(--zus-sans);
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	color: #ffffff;
}

.zus-odbor-popis {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

/* --- Rozcestnik pre rodicov --- */
.zus-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.25rem;
}

.zus-card {
	margin: 0;
	padding: 1.5rem;
	background-color: var(--zus-surface);
	border: 2px solid var(--zus-line);
	border-radius: 4px;
}

.zus-card-znacka {
	display: block;
	width: 2.5rem;
	height: 4px;
	margin-bottom: 1rem;
	background-color: var(--zus-plum);
}

.zus-card-nazov {
	font-family: var(--zus-sans);
	font-size: 1.19rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.zus-card-nazov a {
	color: var(--zus-ink);
	text-decoration: none;
}

.zus-card-nazov a:hover,
.zus-card-nazov a:focus {
	color: var(--zus-plum);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.zus-card-popis {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--zus-muted);
}

/* --- Aktuality --- */
.zus-novinky {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.5rem;
}

.zus-novinka {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.25rem 1.25rem 1.5rem;
	background-color: var(--zus-surface);
	border: 2px solid var(--zus-line);
	border-top: 6px solid var(--zus-plum-deep);
	border-radius: 4px;
}

/* Farba vrchnej hrany sa strieda podla poradia. Clanky nemaju
   kategorie (120 zo 121 je "Nezaradene"), takze farba nic
   neoznacuje - je to cisto rytmus, ktory vracia styri odbory
   aj do mriezky aktualit. */
.zus-novinka:nth-child(4n+1) { border-top-color: var(--zus-hudobny); }
.zus-novinka:nth-child(4n+2) { border-top-color: var(--zus-vytvarny); }
.zus-novinka:nth-child(4n+3) { border-top-color: var(--zus-tanecny); }
.zus-novinka:nth-child(4n+4) { border-top-color: var(--zus-literarny); }

.zus-novinka-datum {
	margin: 0 0 0.75rem;
	font-family: var(--zus-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--zus-muted);
}

.zus-novinka-nazov {
	font-family: var(--zus-sans);
	font-size: 1.19rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.zus-novinka-nazov a {
	color: var(--zus-ink);
	text-decoration: none;
}

.zus-novinka-nazov a:hover,
.zus-novinka-nazov a:focus {
	color: var(--zus-plum);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.zus-novinka-popis {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--zus-muted);
}

/* Pohyb vypnut tam, kde si to clovek zelal v systeme (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
	.zus-odbor a,
	.zus-odbor a:hover,
	.zus-odbor a:focus {
		transition: none;
		transform: none;
	}
}

/* --- Kontaktny pas --- */
.zus-kontakt-pas {
	background-color: var(--zus-plum-deep);
	color: #ffffff;
	padding: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem) 20px;
}

.zus-kontakt-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.zus-kontakt-nadpis {
	font-family: var(--zus-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 1.8rem;
	padding: 0;
	border: 0;
}

.zus-kontakt-mriezka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.zus-kontakt-mriezka h3 {
	font-family: var(--zus-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 0.7em;
	padding: 0 0 0.6em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.zus-kontakt-mriezka p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #ffffff;
	max-width: none;
}

.zus-kontakt-mriezka a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.zus-kontakt-mriezka a:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

/* ===============================================================
   ARCHIV AKTUALIT - karty namiesto dlheho zoznamu
   =============================================================== */
.blog .site-main,
.archive .site-main,
.search-results .site-main {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: start;
}

.blog .site-main > .paging-navigation,
.archive .site-main > .paging-navigation,
.search-results .site-main > .paging-navigation,
.blog .site-main > .page-header,
.archive .site-main > .page-header,
.search-results .site-main > .page-header {
	grid-column: 1 / -1;
}

/* Karta archivu vyzera rovnako ako karta aktualit na uvodnej stranke.
   Bez toho boli vo vypise "vsetky aktuality" len biele obdlzniky, kym
   na uvodnej stranke mali farebnu hranu - ten isty obsah, dva rozne
   prvky. Ram aj polomer su prevzate z .zus-novinka, aby to bola naozaj
   tá istá karta, nielen podobná.
   Bezpecne aj pri content-box: .inside-article je blok so sirkou auto,
   takze ram sa odpocita zvnutra a mriezku nerozsiri. */
.blog .site-main > article > .inside-article,
.archive .site-main > article > .inside-article,
.search-results .site-main > article > .inside-article {
	border: 2px solid var(--zus-line);
	border-top: 6px solid var(--zus-plum-deep);
	border-radius: 4px;
	transition: border-color 180ms ease-out;
}

/* Farba sa strieda po styroch, presne ako v .zus-novinka. Clanky nemaju
   kategorie (120 zo 121 je "Nezaradene"), takze farba nic neoznacuje -
   je to rytmus, ktory vracia styri odbory aj do vypisu.
   :nth-of-type pocita len <article>, takze hlavicka archivu ani
   strankovanie rytmus neposunu. */
.blog .site-main > article:nth-of-type(4n+1) > .inside-article,
.archive .site-main > article:nth-of-type(4n+1) > .inside-article,
.search-results .site-main > article:nth-of-type(4n+1) > .inside-article {
	border-top-color: var(--zus-hudobny);
}

.blog .site-main > article:nth-of-type(4n+2) > .inside-article,
.archive .site-main > article:nth-of-type(4n+2) > .inside-article,
.search-results .site-main > article:nth-of-type(4n+2) > .inside-article {
	border-top-color: var(--zus-vytvarny);
}

.blog .site-main > article:nth-of-type(4n+3) > .inside-article,
.archive .site-main > article:nth-of-type(4n+3) > .inside-article,
.search-results .site-main > article:nth-of-type(4n+3) > .inside-article {
	border-top-color: var(--zus-tanecny);
}

.blog .site-main > article:nth-of-type(4n+4) > .inside-article,
.archive .site-main > article:nth-of-type(4n+4) > .inside-article,
.search-results .site-main > article:nth-of-type(4n+4) > .inside-article {
	border-top-color: var(--zus-literarny);
}

/* Pri prechode mysou sa meni len bocny a spodny ram - keby sa menil
   `border-color`, prepisal by aj farebnu hranu a karta by pri najazde
   stratila farbu odboru. */
.blog .site-main > article > .inside-article:hover,
.archive .site-main > article > .inside-article:hover,
.search-results .site-main > article > .inside-article:hover,
.blog .site-main > article > .inside-article:focus-within,
.archive .site-main > article > .inside-article:focus-within,
.search-results .site-main > article > .inside-article:focus-within {
	border-right-color: var(--zus-plum);
	border-bottom-color: var(--zus-plum);
	border-left-color: var(--zus-plum);
}

.blog .site-main .entry-title,
.archive .site-main .entry-title {
	font-size: 1.3rem;
	line-height: 1.28;
}

/* ---------------------------------------------------------------
   Strankovanie archivu

   Cisla stran mali 14 az 28 px sirky a 21 px vysky. Minimum pre
   dotykovy ciel je 24 x 24 px (WCAG 2.5.8) a archiv ma 13 stran -
   na telefone je to hlavna cesta cez aktuality. Dostavaju 44 px,
   co je pohodlne pre palec, a tvar pilulky ako zvysok webu.

   "Citat dalej" sa zamerne **nemeni**: stoji na konci vety v perexe
   ("... Koncert si ... Citat dalej"), takze spada pod vynimku
   "Inline" v 2.5.8 a zvacsenie by rozbilo riadkovanie odstavca.
   --------------------------------------------------------------- */
.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

/* box-sizing je tu nutny: na webe plati content-box, bez neho by sa
   odsadenie pripocitalo k min-width a z cisla "1" by bola 68 px siroka
   pilulka. */
.paging-navigation .page-numbers {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.7rem;
	/* "Ďalšia →" ma sipku vo vlastnom <span>. Vo flexe je z textu aj
	   zo sipky samostatna polozka a medzera medzi nimi sa zahodi -
	   bez tohto sa vypise "Ďalšia→". */
	gap: 0.35em;
	border: 1px solid var(--zus-line);
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--zus-ink);
	text-decoration: none;
	transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

/* Tri bodky nie su odkaz - nesmu vyzerat klikatelne. */
.paging-navigation .page-numbers.dots {
	min-width: 0;
	padding: 0 0.2rem;
	border-color: transparent;
	color: var(--zus-muted);
}

.paging-navigation a.page-numbers:hover,
.paging-navigation a.page-numbers:focus {
	border-color: var(--zus-plum);
	background-color: var(--zus-tint);
	color: var(--zus-plum);
}

/* Strana, na ktorej prave stojime. Biela na --zus-plum je 11,66 : 1. */
.paging-navigation .page-numbers.current {
	background-color: var(--zus-plum);
	border-color: var(--zus-plum);
	color: #ffffff;
}

/* Nazvy clankov cierne ako na uvodnej stranke, fialova az na podnet.
   Predtym boli fialove a karta posobila ako zoznam odkazov. */
.blog .site-main .entry-title a,
.archive .site-main .entry-title a,
.search-results .site-main .entry-title a {
	color: var(--zus-ink);
	text-decoration: none;
}

.blog .site-main .entry-title a:hover,
.blog .site-main .entry-title a:focus,
.archive .site-main .entry-title a:hover,
.archive .site-main .entry-title a:focus,
.search-results .site-main .entry-title a:hover,
.search-results .site-main .entry-title a:focus {
	color: var(--zus-plum);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* ===============================================================
   RESPONZIVNOST UVODNEJ STRANKY
   =============================================================== */
@media (max-width: 1000px) {
	.zus-odbory {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zus-odbor a {
		min-height: 15rem;
	}

	.zus-kontakt-mriezka {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.blog .site-main,
	.archive .site-main,
	.search-results .site-main {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.zus-odbory {
		grid-template-columns: 1fr;
	}

	.zus-odbor a {
		min-height: 11rem;
	}

	.zus-hero-actions .zus-button {
		width: 100%;
		text-align: center;
	}
}

/* Pas cez celu sirku ma `width: 100vw`, a 100vw je **vratane** zvisleho
   posuvnika (1280 px), kym obsah ma 1265 px - pas teda pretecie o 7,5 px
   na kazdej strane.

   `hidden` to skryje, ale robi z dokumentu vodorovne posuvatelnu plochu:
   zmerane, pri 1280 px sa dal posunut o 8 px. `clip` orezava rovnako,
   ale posuvatelnu plochu **nevytvara**, takze posun uz nie je mozny.

   ⚠️ Musi byt na `html` **aj** na `body` - so samotnym `html` posun
   ostava (overene, scrollWidth ostal 1273). Az obe dokopy dali
   scrollWidth == clientWidth == 1265 a posun 0.

   ⚠️ `overflow-x: clip` pri `overflow-y: visible` **nerobi** z prvku
   posuvatelnu plochu ani vo zvislom smere (pravidlo o prepocte `visible`
   na `auto` plati len v dvojici s hidden/scroll/auto, nie s clip).
   Overene: zvisle rolovanie, pripnuta cookie lista aj tlacidlo
   "na zaciatok" fungujú ďalej.

   `hidden` ostava ako prvy riadok - v prehliadaci bez podpory `clip`
   sa druhy riadok zahodi a sprava sa to ako predtym. */
html {
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	overflow-x: clip;
}

/* Skip-link GeneratePressu — viditelny az pri zamerani klavesnicou (WCAG 2.4.1) */
.skip-link.screen-reader-text:focus {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 0.8em 1.4em;
	background-color: var(--zus-surface);
	color: var(--zus-plum);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: underline;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Nadpis archivu / stranky aktualit */
.zus-archiv-header {
	grid-column: 1 / -1;
	background-color: var(--zus-surface);
	padding: 1.6rem 1.8rem;
	margin-bottom: 0;
	border-bottom: 3px solid var(--zus-plum);
}

.zus-archiv-header .entry-title {
	margin: 0;
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
}

/* ===============================================================
   OCHRANA PROTI PRETECENIU MRIEZKY
   Bunky mriezky maju predvolene min-width:auto, takze jedno dlhe
   slovo (napr. 285-znakova URL v perexe) roztiahne cely stlpec
   a obsah vytlaci mimo stranku.
   =============================================================== */
.zus-novinka,
.zus-odbor,
.zus-card,
.zus-footer-col,
.zus-kontakt-mriezka > div,
.blog .site-main > article,
.archive .site-main > article,
.search-results .site-main > article {
	min-width: 0;
}

.zus-novinka-popis,
.zus-novinka-nazov,
.zus-odbor-popis,
.zus-card-popis,
.zus-footer li,
.entry-content p,
.entry-content li,
.entry-summary p {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ===============================================================
   POHYB
   Jeden zorchestrovany moment pri nacitani uvodnej stranky
   + drobne reakcie na podnet. Ziadne poskakovanie pri scrollovani.
   Cely blok vypina @media (prefers-reduced-motion: reduce) vyssie.
   =============================================================== */
@keyframes zus-vstup {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes zus-pruh-rast {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* Stvorpruh sa pri nacitani rozvinie zlava doprava */
.zus-strands--top span {
	transform-origin: left center;
	animation: zus-pruh-rast 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zus-strands--top span:nth-child(1) { animation-delay: 0ms; }
.zus-strands--top span:nth-child(2) { animation-delay: 90ms; }
.zus-strands--top span:nth-child(3) { animation-delay: 180ms; }
.zus-strands--top span:nth-child(4) { animation-delay: 270ms; }

/* Hero nabieha po castiach */
.zus-hero .zus-eyebrow  { animation: zus-vstup 520ms ease-out 240ms both; }
.zus-hero-title         { animation: zus-vstup 620ms ease-out 320ms both; }
.zus-hero-lead          { animation: zus-vstup 620ms ease-out 430ms both; }
.zus-hero-actions       { animation: zus-vstup 620ms ease-out 540ms both; }

/* Odbory: nadvihnutie rieši pravidlo .zus-odbor a:hover vyššie —
   tu by sa posun zdvojil, preto tu už nič nie je. */

/* Karty pre rodicov a novinky */
.zus-card {
	transition: border-color 180ms ease-out, background-color 180ms ease-out;
}

.zus-card:hover,
.zus-card:focus-within {
	border-color: var(--zus-plum);
	background-color: #faf8fb;
}

.zus-novinka {
	transition: border-color 180ms ease-out;
}

.zus-novinka:hover,
.zus-novinka:focus-within {
	border-color: var(--zus-plum);
}

/* Tlacidla a navigacia */
.zus-button {
	transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

.main-navigation .main-nav ul li a {
	transition: background-color 160ms ease-out, border-bottom-color 160ms ease-out, color 160ms ease-out;
}

.zus-secondary-nav .zus-secondary-menu a {
	transition: background-color 160ms ease-out;
}

/* ===============================================================
   FACEBOOK - nacitanie az na kliknutie
   =============================================================== */
.zus-fb-mriezka {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.zus-fb-karta {
	margin: 0;
	min-width: 0;
	padding: 1.5rem 1.4rem;
	background-color: var(--zus-tint);
	border-top: 4px solid var(--zus-plum);
}

.zus-fb-nazov {
	font-family: var(--zus-serif);
	font-size: 1.2rem;
	font-weight: 400;
	margin: 0 0 0.35em;
}

.zus-fb-popis {
	margin: 0 0 1.1rem;
	font-size: 0.92rem;
	color: var(--zus-muted);
}

.zus-fb-ramik {
	background-color: var(--zus-surface);
	border: 1px solid var(--zus-line);
	padding: 1.2rem;
}

.zus-fb-oznam {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--zus-muted);
}

/* Po kliknutí ide odsadenie preč — rámec Facebooku si potom vezme celú
   šírku karty. Skript triedu pridáva **pred** meraním šírky, aby poslal
   Facebooku skutočný rozmer, nie o 38 px menší. */
.zus-fb-ramik--nacitane {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	min-height: 620px;
}

/* Náhrada, keď prehliadač Facebook zablokuje (ochrana proti sledovaniu,
   doplnok na blokovanie reklamy). Leží **pod** rámcom — načítaný Facebook
   ju prekryje svojou bielou stránkou, zablokovaný rámec ostane priehľadný
   a vidno ju. Zo skriptu sa tie dva stavy rozoznať nedajú (viď zus.js),
   takže sa nedeteguje nič — len sa vrství. */
.zus-fb-zaloha {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	margin: 0;
	padding: 1.5rem;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--zus-muted);
	background-color: var(--zus-surface);
	border: 1px solid var(--zus-line);
}

.zus-fb-zaloha a {
	color: var(--zus-plum);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.zus-fb-ramcek {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 100%;
	height: 620px;
	border: 0;
}

.zus-fb-odkaz {
	margin: 1rem 0 0;
	font-size: 0.9rem;
}

.zus-fb-odkaz a {
	color: var(--zus-plum);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ===============================================================
   VYHLADAVANIE V PATE
   =============================================================== */
.zus-footer-hladanie {
	background-color: var(--zus-plum-deep);
	padding: 0 20px 2rem;
}

.zus-footer-hladanie-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.zus-hladanie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.zus-hladanie label {
	font-family: var(--zus-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	flex: 0 0 100%;
	margin-bottom: 0.3rem;
}

.zus-hladanie input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	padding: 0.7em 0.9em;
	font: inherit;
	font-size: 0.95rem;
	color: var(--zus-ink);
	background-color: #ffffff;
	border: 2px solid #ffffff;
}

.zus-hladanie button {
	padding: 0.7em 1.5em;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--zus-plum-deep);
	background-color: #ffffff;
	border: 2px solid #ffffff;
	cursor: pointer;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}

.zus-hladanie button:hover,
.zus-hladanie button:focus {
	background-color: var(--zus-tint);
}

.zus-hladanie input[type="search"]:focus-visible,
.zus-hladanie button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

@media (max-width: 620px) {
	.zus-fb-mriezka {
		grid-template-columns: 1fr;
	}
}

/* ===============================================================
   MOBIL — DOLADENIE PO KONTROLE 12. 9. 2026
   Nálezy z merania v skutočnej emulácii telefóna (360 px, CDP).
   =============================================================== */

/* Zoznam zamestnancov je v obsahu zapísaný v <pre>. Predformátovaný text sa
   nezalamuje, takže na telefóne sa údaj „hra na ..." odrezal za pravým okrajom
   a nedalo sa prečítať, kto čo učí. pre-wrap ponechá vložené konce riadkov,
   ale dlhé riadky už zalomí. */
.entry-content pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Posúvateľná oblasť pre tabuľky v obsahu. Obal dopĺňa zus_obal_tabuliek()
   vo functions.php; tu je len správanie. Tabuľky, ktoré sa na displej zmestia,
   sa nespúšťajú — obal sa posúva len vtedy, keď je tabuľka naozaj širšia. */
.zus-tabulka {
	max-width: 100%;
	overflow-x: auto;
}

.zus-tabulka > table {
	margin: 0;
}

.zus-tabulka:focus-visible {
	outline: 3px solid var(--zus-plum);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	/* Nadpisy stĺpcov v päte a v kontaktnom páse vychádzali na 11,5 px.
	   Verzálky s rozpáleným písmom sú pri tejto veľkosti na telefóne na
	   hranici čitateľnosti. Na väčších displejoch ostávajú tak, ako boli
	   schválené — obmedzenie sa týka len úzkych obrazoviek. */
	.zus-footer h2 {
		font-size: max(0.75rem, 12.5px);
	}

	.zus-kontakt-mriezka h3 {
		font-size: max(0.72rem, 12.5px);
	}

	/* Telefón a e-mail sú na telefóne to najčastejšie klepnutie. Ako riadkové
	   odkazy mali cieľ vysoký 20 px, preto dostávajú zvislé odsadenie. */
	.zus-kontakt-mriezka a,
	.zus-footer p a,
	.zus-podpis a {
		display: inline-block;
		padding: 0.3em 0;
	}

	/* Odkazy v päte boli vysoké 20 px. Na dotyk je to málo — zvislé odsadenie
	   zdvihne cieľ nad 24 px (WCAG 2.5.8), rozostup riadkov ostáva rovnaký,
	   lebo o rovnakú hodnotu klesá spodný okraj položky. */
	.zus-footer li {
		margin-bottom: 0.15em;
	}

	/* Tlacidlo nastaveni cookies je v tom istom zozname, takze potrebuje
	   ten isty dotykovy ciel ako odkazy vedla neho. */
	.zus-footer li a,
	.zus-footer li .zus-cookie-settings {
		display: inline-block;
		padding: 0.32em 0;
	}
}