/* CSS pro daný web
 * Verze 3.9.2019
 * dokumentace na:
 * https://docs.google.com/spreadsheets/d/1HV7JUECJavTNSYOburjemgWhfErRqC8b9kI4I-YvLwg/edit#gid=0
 */

/* Základní barevnost webu - staci vzdy hromadne nahradit ctrl+h
 * Primární: 00686d
 * Sekundární: c3cdc9
 * Background hlavičky, doplňková: ebf2f8
 * Inverzní text: fcfcfc (inverzní k primární barvě)
 */

/* Barevnost */
header {
  background-image: url('../pics/header.jpg'); 
  background-color: #ebf2f8; /* pozadí pod obrázkem hlavičky - musí být čitelný text a loga !!! */
  background-size: auto 700px;
  background-position: calc(50% + 500px) calc(50% + 220px); /* vypočítané dle použitého obrázku */
}
#titulka header {
  background-size: auto 600px;
  background-position: calc(50% + 625px) center; /* vypočítané dle použitého obrázku */
}
@media screen and (max-width: 39.9375em) {
  header h1, #titulka header h1, header h2, #titulka header h2, header h3, #titulka header h3 {color: #00686d!important; /* primary */ }
  header {background-color: #ebf2f8!important; }
}
header h1, header h2 {color: #00686d; /* primary */ }
#titulka header h1 { color: #00686d; /* primary */ }
#titulka header h2 { color: #00686d; /* primary */ }
#titulka header h3 { color: #00686d; /* primary */ }
nav { background: #c3cdc9; /* secondary */ }
nav .menu a { background-color: #c3cdc9; /* secondary */ }
nav .menu a:hover, nav a.active, nav .menu .is-active a { background-color: #00686d; /* primary */ }
#tiraz {
  background-color: #00686d; /* primary */
  color: #fcfcfc; /* inverzní text */
}
#tiraz a { color: #fcfcfc; /* inverzní text */ }
#tiraz h3 { color: #fcfcfc; /* inverzní text */ }
a.toc-item, span.toc-item { color: #0c101a; background-color: rgba(195, 205, 201, 0.90); /* secondary v rgba, pro menu s tmavým písmem na šedém pozadí použijeme např. color: #333333; background-color: rgba(206, 209, 215, 0.95); */ }
a.toc-item.active { background-color: #00686d; /* primary */ }
a.toc-item:hover { background-color: #00686d; /* primary */ }
.toc_kapitola .cap-num { color: #00686d; /* primary */ }
.toc_kapitola a.toc-item:hover { background-color: #00686d; /* primary */ }
.separated::before, .toc-section.toc-section.toc-section h2 { background-color: #00686d; /* primary */ }	
h2 {color: #00686d} /* specialni */
.t1, .t1 strong, .t1 em {background: #00686d!important; color: #fafafa;} /* primary */
.t2, .t2 strong, .t2 em {background: #c3cdc9!important; color: #fafafa;} /* secondary */
.t3, .t3 strong, .t3 em {background: #ebf2f8!important; color: #333333;} /* doplnkova */
sup a, sup a:visited { color: #c3cdc9!important; } /* secondary */
sup a:hover { color: #fff!important; }
/* KONEC - Barevnost */

/* ************************** */
/* Barevnost vysouvacího menu */
nav .submenu::before {	border-top-color: #c3cdc9; /* kontrastni - tečky*/ }
/* vysouvací menu tmavé */
/*
nav .submenu { background-color: #767676 !important; }
nav .submenu a { background-color: #767676 !important; color: #eee !important; }
nav .submenu a:hover {	background-color: #c3cdc9 !important; color: #fff !important; }
*/
/* vysouvací menu dle barevnosti webu */
/*
nav .submenu { background-color: #00686d !important; }
nav .submenu a {	background-color: #00686d !important; color: #c3cdc9 !important; }
nav .submenu a:hover {	color: #fff !important; }
*/

/*  *********
 *  Vlastní styly
 *  ********* */



.definice, .priklad, .veta, .problem{
	background-color: #e8fdff; /* definice */
	border: 3px solid #c3cdc9;
	border-radius: 10px;
	margin: 1em 0;
	padding: 0;
}
.definice > div, .priklad > div, .priklad > div:last-child > div > div, .veta > div, .problem > div, .problem > div:last-child > div > div {
	padding: .5em;
}
.definice > div:first-child, .priklad > div:first-child, .priklad > div:last-child > div > div:first-child, .veta > div:first-child, .problem > div:first-child, .problem > div:last-child > div > div:first-child {
	font-weight: bold;
	background-color: #002d2f;
	color: #eee;
	border-radius: 7px 7px 0 0;
}
.priklad > div:last-child > div, .problem > div:last-child > div {
	padding: 0;
}
.priklad > div:last-child > div > div:first-child::before {
	content: "Řešení";
}
.problem > div:last-child > div > div:first-child::before {
	content: "Výsledek";
}
.priklad > div:last-child > div, .problem > div:last-child > div {
	margin: 1em 0 .5em 0;
	border: 3px solid #e8fdff;
	border-radius: 10px;
}

.priklad > div:last-child, .priklad > div:last-child > div > div:last-child, .problem > div:last-child, .problem > div:last-child > div > div:last-child {
	display: none;
}

.priklad > div:first-child, .priklad > div:last-child > div > div:first-child, .problem > div:first-child, .problem > div:last-child > div > div:first-child {
	border-radius: 7px;
	cursor: pointer;
}

.show + div {
	display: block!important;
}
.show {
	border-radius: 7px 7px 0 0!important;
}
i[data-open="setup"] {
	cursor: pointer;
}
.flex {
	display: flex;
}
.ml1 {
	margin-left: 1rem;
}

/* jednotlive pozadi ramecku*/
.priklad {
	background-color: #e8fdff;
}
.veta {
	background-color: #e8fdff;
}
.problem {
	background-color: #e8fdff;
}
/* reseni */
.priklad > div:last-child > div > div {
	background-color: #d3e6e8;
}
/* vysledek */
.problem > div:last-child > div > div {
	background-color: #dbeaec;
}

/* nadpisy */
.priklad > div:first-child {
	background-color: #00595d;
	transition: background-color 1s;
}
.priklad > div:first-child:hover {
	background-color: #1c696d;
}
.veta > div:first-child {
	background-color: #00858c;
}
.problem > div:first-child {
	background-color: #00a2aa;
	transition: background-color 1s;
}
.problem > div:first-child:hover {
	background-color: #2db3bb;
}
/* reseni */
.priklad > div:last-child > div > div:first-child {
	background-color: #00686d;
	transition: background-color 1s;
}
.priklad > div:last-child > div > div:first-child:hover {
	background-color: #20787d;
}
/* vysledek */
.problem > div:last-child > div > div:first-child {
	background-color: #45bbc1;
	transition: background-color 1s;
}
.problem > div:last-child > div > div:first-child:hover {
	background-color: #5acdd3;
}
/* sipka */
.priklad > div:first-child::after, .problem > div:first-child::after, .priklad > div:last-child > div > div:first-child::after, .problem > div:last-child > div > div:first-child::after {
	content: "";
	background-image: url(../pics/sipka.svg);
	width: 1em;
	height: 1em;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: -0.1em;
	margin-left: .5em;
	transition: transform .5s;
}
.show::after {
	transform: rotate(180deg);
}