/*
 * SmartEdu Core — stránka predmetu na Učive (/ucivo/?predmet=…), variant 1a.
 *
 * Obsah je rovno na bielej stránke (bez sivého podkladu), farby sú pevné z návrhu — rovnaké
 * v každom štýlovom variante témy, podobne ako vysvetlenie učiva; biely podklad karty ho drží
 * čitateľný aj v tmavom variante. Farby tlačidiel a typov hier sú oklch() s hex zálohou pre staršie
 * prehliadače (prepočítané z tých istých hodnôt, kontrast 5,5 – 8 : 1). Malý sivý text má
 * #6b6860 (5,6 : 1); svetlejšia #8a877e je len na šípku, na text by nestačila (3,6 : 1).
 * Písmo Figtree (@font-face) je v ucivo.css, ktorý sa načíta vždy pred týmto súborom.
 */

.se-ucivo--predmet {
	--se-uc-text: #1d1c1a;
	--se-uc-jemny: #6b6860;
	--se-uc-sipka: #8a877e;
	--se-uc-ciara: #e4e1da;
	--se-uc-riadok: #eeece6;
	--se-uc-otvorene: #f6f5f1;
	--se-uc-hover-ciara: #c9c5ba;
	--se-uc-hover: #faf9f6;
	--se-uc-zalozky: #f1efea;
	--se-uc-odkaz: #195daa;
	--se-uc-odkaz-hover: #003f8a;

	color: var( --se-uc-text );
	font-family: Figtree, Helvetica, Arial, sans-serif;
}

/* Typy hier a tlačidlá výkladov: --se-uc-bg podklad, --se-uc-tx text. */
.se-uc-typ--kviz,
.se-uc-stitok--kviz { --se-uc-bg: #d8edff; --se-uc-tx: #17559b; }
.se-uc-typ--dvojice { --se-uc-bg: #d7f4dc; --se-uc-tx: #00682a; }
.se-uc-typ--pexeso,
.se-uc-stitok--prezentacia { --se-uc-bg: #ffe1d7; --se-uc-tx: #8f331c; }
.se-uc-typ--doplnovacka { --se-uc-bg: #efe5ff; --se-uc-tx: #614092; }
.se-uc-typ--karticky { --se-uc-bg: #c9f5f7; --se-uc-tx: #006871; }
.se-uc-typ--tajnicka { --se-uc-bg: #f9eaca; --se-uc-tx: #764c00; }
.se-uc-typ--vyzva { --se-uc-bg: #ffdfea; --se-uc-tx: #8b2f52; }
.se-uc-stitok--ucivo { --se-uc-bg: #d7f4dc; --se-uc-tx: #005f21; }
.se-uc-stitok--kviz { --se-uc-bg: #daedff; --se-uc-tx: #0b4c92; }

@supports ( color: oklch( 0 0 0 ) ) {
	.se-ucivo--predmet {
		--se-uc-odkaz: oklch( 0.48 0.14 255 );
		--se-uc-odkaz-hover: oklch( 0.38 0.14 255 );
	}

	.se-uc-typ--kviz { --se-uc-bg: oklch( 0.94 0.045 255 ); --se-uc-tx: oklch( 0.45 0.13 255 ); }
	.se-uc-typ--dvojice { --se-uc-bg: oklch( 0.94 0.045 150 ); --se-uc-tx: oklch( 0.45 0.13 150 ); }
	.se-uc-typ--pexeso { --se-uc-bg: oklch( 0.94 0.045 35 ); --se-uc-tx: oklch( 0.45 0.13 35 ); }
	.se-uc-typ--doplnovacka { --se-uc-bg: oklch( 0.94 0.045 300 ); --se-uc-tx: oklch( 0.45 0.13 300 ); }
	.se-uc-typ--karticky { --se-uc-bg: oklch( 0.94 0.045 200 ); --se-uc-tx: oklch( 0.45 0.13 200 ); }
	.se-uc-typ--tajnicka { --se-uc-bg: oklch( 0.94 0.045 85 ); --se-uc-tx: oklch( 0.45 0.13 85 ); }
	.se-uc-typ--vyzva { --se-uc-bg: oklch( 0.94 0.045 0 ); --se-uc-tx: oklch( 0.45 0.13 0 ); }
	.se-uc-stitok--ucivo { --se-uc-bg: oklch( 0.94 0.045 150 ); --se-uc-tx: oklch( 0.42 0.13 150 ); }
	.se-uc-stitok--prezentacia { --se-uc-bg: oklch( 0.94 0.045 35 ); --se-uc-tx: oklch( 0.45 0.13 35 ); }
	.se-uc-stitok--kviz { --se-uc-bg: oklch( 0.94 0.04 255 ); --se-uc-tx: oklch( 0.42 0.13 255 ); }
}

.se-ucivo--predmet [hidden] {
	display: none !important;
}

.se-uc-sr,
.se-ucivo--predmet.je-zalozky .se-uc-rocnik-nadpis {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.se-uc-karta {
	background: #fff;
}

.se-ucivo--predmet a {
	color: var( --se-uc-odkaz );
}

.se-ucivo--predmet a:hover {
	color: var( --se-uc-odkaz-hover );
}

.se-ucivo--predmet a:focus-visible,
.se-ucivo--predmet button:focus-visible,
.se-ucivo--predmet summary:focus-visible {
	outline: 3px solid var( --se-uc-odkaz );
	outline-offset: 2px;
}

/* --- Hlavička a záložky ročníkov ------------------------------------------------- */

.se-uc-hlavicka {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.se-uc-titul {
	min-width: 0;
}

.se-uc-spat {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
}

.se-uc-spat a {
	text-decoration: none;
}

.se-uc-spat a:hover {
	text-decoration: underline;
}

.se-uc-predmet {
	margin: 0;
	color: var( --se-uc-text );
	font-family: inherit;
	font-size: clamp( 2.25rem, 5vw, 3rem );
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.se-uc-suhrn {
	margin: 0.4rem 0 0;
	color: var( --se-uc-jemny );
	font-size: 1rem;
}

/* Lišta záložiek nikdy nepretečie mimo kartu — keď sa ročníky nezmestia, posúva sa do strany.
 * relative: skryté texty záložiek (.se-uc-sr) ostanú v posúvanom páse a neroztiahnu stránku. */
.se-uc-zalozky {
	position: relative;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.se-uc-zalozky-zoznam {
	display: flex;
	gap: 4px;
	width: max-content;
	padding: 4px;
	border-radius: 12px;
	background: var( --se-uc-zalozky );
}

.se-ucivo--predmet .se-uc-zalozka {
	padding: 0.55rem 1.1rem;
	border-radius: 9px;
	color: var( --se-uc-jemny );
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.se-ucivo--predmet .se-uc-zalozka:hover {
	color: var( --se-uc-text );
}

.se-ucivo--predmet .se-uc-zalozka[aria-selected="true"] {
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.12 );
	color: var( --se-uc-text );
}

.se-uc-zalozka-pocet {
	margin-left: 0.3rem;
	color: var( --se-uc-jemny );
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* --- Ročník a sekcie --------------------------------------------------------------- */

.se-uc-rocnik-nadpis {
	margin: 0 0 1rem;
	font-family: inherit;
	font-size: 1.5rem;
}

/* Bez JavaScriptu sú ročníky pod sebou — oddelí ich čiara. */
.se-ucivo--predmet:not( .je-zalozky ) .se-uc-rocnik + .se-uc-rocnik {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var( --se-uc-ciara );
}

.se-uc-sekcia + .se-uc-sekcia {
	margin-top: 2.75rem;
}

.se-uc-sekcia-hlava {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.se-uc-nadpis {
	margin: 0 0 0.75rem;
	color: var( --se-uc-text );
	font-family: inherit;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
}

.se-uc-sekcia-hlava .se-uc-nadpis {
	margin: 0;
}

.se-uc-nadpis-pocet {
	margin-left: 0.2rem;
	color: var( --se-uc-jemny );
	font-size: 1.0625rem;
	font-weight: 500;
}

.se-uc-text-tlacidlo {
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var( --se-uc-odkaz );
	cursor: pointer;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
}

.se-uc-text-tlacidlo:hover {
	color: var( --se-uc-odkaz-hover );
	text-decoration: underline;
}

.se-uc-vyklady + .se-uc-text-tlacidlo {
	margin-top: 0.85rem;
}

/* --- Výklady a prezentácie ---------------------------------------------------------- */

/* Dva stĺpce, len keď má každý aspoň 30rem — inak jeden, aby sa názvy neskracovali na „Ako …“. */
.se-uc-vyklady {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 30rem ), 1fr ) );
	column-gap: 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.se-uc-vyklad {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var( --se-uc-riadok );
}

.se-uc-cislo {
	flex: 0 0 1.75rem;
	color: var( --se-uc-jemny );
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.se-ucivo--predmet .se-uc-vyklad-nazov {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var( --se-uc-text );
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.se-ucivo--predmet .se-uc-vyklad-nazov:hover {
	color: var( --se-uc-odkaz );
	text-decoration: underline;
}

.se-uc-akcie {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}

.se-ucivo--predmet .se-uc-stitok {
	padding: 4px 9px;
	border-radius: 6px;
	background: var( --se-uc-bg );
	color: var( --se-uc-tx );
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
}

.se-ucivo--predmet .se-uc-stitok:hover {
	box-shadow: inset 0 0 0 1px currentColor;
	color: var( --se-uc-tx );
}

/* --- Edu hry podľa tém --------------------------------------------------------------- */

.se-uc-temy {
	border-top: 1px solid var( --se-uc-ciara );
}

.se-uc-tema {
	border-bottom: 1px solid var( --se-uc-ciara );
}

.se-uc-tema[open] {
	background: var( --se-uc-otvorene );
}

.se-uc-tema-riadok {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 2.75rem, auto ) 20px;
	gap: 0.75rem;
	align-items: center;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
}

.se-uc-tema-riadok::-webkit-details-marker {
	display: none;
}

.se-uc-tema:not( [open] ) > .se-uc-tema-riadok:hover {
	background: var( --se-uc-hover );
}

.se-uc-tema-nazov {
	font-size: 1rem;
	font-weight: 600;
}

.se-uc-typy {
	display: flex;
	gap: 4px;
}

.se-uc-typ {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: var( --se-uc-bg );
	color: var( --se-uc-tx );
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.se-uc-tema-pocet {
	color: var( --se-uc-jemny );
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* Trojuholník je nakreslený okrajmi — nezávisí od toho, či písmo má znak ▸. */
.se-uc-sipka {
	justify-self: center;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid var( --se-uc-sipka );
	transition: transform 150ms ease;
}

.se-uc-tema[open] .se-uc-sipka {
	transform: rotate( 90deg );
}

.se-uc-hry {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 10px;
	margin: 0;
	padding: 2px 16px 16px;
	list-style: none;
}

.se-uc-hry > li {
	display: flex;
	margin: 0;
}

.se-ucivo--predmet .se-uc-hra {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var( --se-uc-ciara );
	border-radius: 10px;
	background: #fff;
	color: var( --se-uc-text );
	text-decoration: none;
}

.se-ucivo--predmet .se-uc-hra:hover {
	border-color: var( --se-uc-hover-ciara );
	background: var( --se-uc-hover );
	color: var( --se-uc-text );
}

.se-uc-hra-typ {
	color: var( --se-uc-tx );
	font-size: 0.75rem;
	font-weight: 700;
}

.se-uc-hra-nazov {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
}

.se-ucivo-prazdne {
	margin: 0;
}

/* --- Šírky ---------------------------------------------------------------------------- */

@media ( min-width: 45rem ) {
	.se-uc-hry {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 60rem ) {
	.se-uc-hry {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* Pod 720 px: záložky sa posúvajú do strany, výklad má tlačidlá pod názvom. */
@media ( max-width: 44.99rem ) {
	.se-uc-hlavicka {
		align-items: stretch;
		flex-direction: column;
	}

	.se-uc-vyklad {
		flex-wrap: wrap;
	}

	.se-ucivo--predmet .se-uc-vyklad-nazov {
		flex-basis: calc( 100% - 2.5rem );
		white-space: normal;
	}

	.se-uc-akcie {
		flex-wrap: wrap;
		margin-left: 2.5rem;
	}

	.se-uc-tema-riadok {
		grid-template-columns: minmax( 0, 1fr ) auto 20px;
		padding-inline: 12px;
	}

	.se-uc-typy {
		grid-column: 1;
		grid-row: 2;
	}

	.se-uc-tema-pocet {
		grid-column: 2;
		grid-row: 1;
	}

	.se-uc-hry {
		padding-inline: 12px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.se-uc-sipka {
		transition: none;
	}
}

/* Výklady a prezentácie na jemnom podklade ako úvodný blok domovskej stránky — oddelí ich od Edu hier. */
.se-uc-sekcia--vyklady {
	padding: clamp( 1rem, 3vw, 2rem );
	border-radius: 16px;
	background: var( --wp--preset--color--podklad-jemny, #f1f5f9 );
}

.se-uc-sekcia--vyklady .se-uc-vyklad {
	border-bottom-color: #dfe5ec;
}