/* zaklad.css - spolecny zaklad stylu pro nove/prevedene stranky (nezavisly na styly.css).
   Stranka nacita nejdriv zaklad.css, potom vlastni css (napr. latina.css). */

/* zaklad: 125 % = 20 px pri vychozim nastaveni prohlizece, respektuje uzivatelovo zvetseni pisma */
html {
	font-size: 125%;
	-webkit-text-size-adjust: 100%;
}
body {
	background-color: #f3ead8;
	text-align: center;
	font-family: "Times New Roman CE", "Times New CE", "Times CE", "Times New Roman", times, serif;
	line-height: 1.4;
}
/* barvy sdilene tabulkami a seznamy (rejstrik osob, aktuality) */
:root {
	--papir: #fffdf6;        /* podklad radku */
	--zebra: #f8f0dc;        /* kazdy druhy radek */
	--cara: #d8cdb4;         /* tenka oddelovaci cara */
	--cara-hlavni: #d9a441;  /* silna cara (pod hlavickou, okraje seznamu) */
	--hlavicka: #fff3c4;     /* hlavicka tabulky */
}
/* sirka sloupce s textem: cca 45 em, na uzkych displejich 100 % */
div.body {
	max-width: 45em;
	margin: 25px auto 0 auto;
	padding: 0 0.5em;
	overflow-wrap: break-word;
}
h1 {
	font-size: 1.375em;
	line-height: 1.3;
}
a { text-decoration: underline; color: #ff0000; }
a:visited { color: #a000a0; }
a:hover { color: #b00000; }  /* za :visited, aby hover platil i u navstivenych odkazu */

hr { margin-top: 3px; margin-bottom: 3px; }
.paticka hr { width: 150px; margin-top: 5px; margin-bottom: 4px; }

/* clanek: textovy blok s carou dole */
.clanek {
	border-bottom: 1px solid black;
	padding-bottom: 10px;
	margin-bottom: 10px;
	text-align: left;
}
.clanek p { padding: 0; margin: 3px 0 7px 0; }

/* "Zpet do vesnice": stejne tlacitko na vsech novych strankach (odkaz na "/", uvnitr logo + text) */
a.do-vesnice,
a.do-vesnice:visited {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
	margin: 0.5em 0;
	padding: 0.5em 1.2em 0.6em 1.2em;
	border: 2px solid #ff0000;
	border-radius: 0.6em;
	background-color: #fff;
	color: #ff0000;
	font-weight: bold;
	text-decoration: none;
}
a.do-vesnice img {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}
a.do-vesnice:hover,
a.do-vesnice:focus-visible {
	background-color: #fff3c4;
	border-color: #b00000;
	color: #b00000;
}

/* ---------- "Pro zvidave a hnidopichy" (prevzato z recenze.css, aby to slo pouzit na kazde strance) ----------
   <section class="pro-zvidave"> je ramecek s nadpisem, kratkym uvodem a menu ul.na-strance;
   za nim nasleduji <aside class="zvidave"> s nadpisem h2 (id = cil odkazu z menu). */
.pro-zvidave {
	display: flow-root;
	text-align: left;
	margin: 1.6em 0 1em 0;
	padding: 0.7em 1em 0.8em 1em;
	background: #f4efe3;
	border: 1px solid #d8cfb8;
	border-radius: 0.4em;
}
section.pro-zvidave h2 { margin-top: 0; }
section.pro-zvidave p { margin: 0 0 0.4em 0; }
.pro-zvidave ul.na-strance {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1.2em;
	margin: 0.3em 0 0 0;
	padding: 0;
}
.pro-zvidave ul.na-strance li { margin: 0; padding: 0; }

aside.zvidave {
	text-align: left;
	margin-top: 1.2em;
}
aside.zvidave h2 {
	font-size: 1.3em;
	line-height: 1.3;
	margin: 0.4em 0 0.4em 0;
	scroll-margin-top: 0.5em;
}
aside.zvidave ul {
	margin: 0.4em 0 0.8em 0;
	padding-left: 1.5em;
}
aside.zvidave li { margin-bottom: 0.45em; }
aside.zvidave p { margin: 0.4em 0; }

/* ---------- "Pro starsi ctenare" (odkaz z detske stranky na starsi, delsi stranku pro dospele) ----------
   <aside class="pro-starsi"><p>...</p></aside>, pouzitelne na kazde strance */
aside.pro-starsi {
	display: flow-root;
	text-align: left;
	margin: 1.6em 0 1em 0;
	padding: 0.7em 1em 0.8em 1em;
	background: #f4efe3;
	border: 1px solid #d8cfb8;
	border-radius: 0.4em;
}
aside.pro-starsi p { margin: 0; }

@media screen and (max-width: 34em) {
	.pro-zvidave ul.na-strance { flex-direction: column; }
}

/* ---------- menu odkazu do sekci pod nadpisem stranky (stranky s vice nadpisy) ----------
   <nav class="na-strance" aria-label="Obsah stranky"><ul><li><a href="#id">...</a></li>...</ul></nav>
   vzhled shodny s menu ul.na-strance v ramecku .pro-zvidave (recenze) */
nav.na-strance {
	display: flow-root;
	text-align: left;
	margin: 0 0 1em 0;
	padding: 0.7em 1em 0.8em 1em;
	background: #f4efe3;
	border: 1px solid #d8cfb8;
	border-radius: 0.4em;
}
nav.na-strance ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1.2em;
	margin: 0;
	padding: 0;
}
nav.na-strance li { margin: 0; padding: 0; }
@media screen and (max-width: 34em) {
	nav.na-strance ul { flex-direction: column; }
}

/* ---------- sekce uvnitr clanku uzavira obtekani obrazku (misto <hr class="clear">): <section> ---------- */
div.zivotopis .clanek section { display: flow-root; }

/* stranka, kde obrazek obteka vice sekci a nadpisu: <div class="body zivotopis volne-obrazky">
   sekce se neuzaviraji, obtekani uzavre az konec clanku */
div.zivotopis.volne-obrazky .clanek { display: flow-root; }
div.zivotopis.volne-obrazky .clanek section { display: block; }

/* ---------- uvodni slovo pod nadpisem stranky (zluty pruh vlevo): <p class="uvod"> ----------
   spolecna verze, lokalni p.uvod v recenze.css, postavy.css a autori.css maji stejny vzhled */
p.uvod {
	text-align: left;
	max-width: 40em;
	margin: 0.6em 0 1em 0;
	padding-left: 0.8em;
	border-left: 0.3em solid #d9a441;
	font-size: 1.1em;
}

/* paticka: odkaz "zpet do vesnice" a tiraz (bez cary) */
.paticka p.zpet { margin: 1em 0; }
.paticka footer {
	margin-top: 1.5em;
}
.paticka footer p { margin: 0.3em 0 1em 0; }

/* listovani (novinky.php, osoby.php): odkazy jako tlacitka, na uzkem displeji se zalamuji */
nav.strankovani {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4em;
	margin: 1em 0;
}
nav.strankovani a,
nav.strankovani strong,
nav.strankovani span {
	display: inline-block;
	box-sizing: border-box;
	min-width: 2.2em;
	padding: 0.35em 0.7em;
	text-align: center;
	border: 2px solid transparent;
	border-radius: 0.4em;
}
nav.strankovani a {
	background-color: #fff;
	border-color: #bbb;
}
nav.strankovani a:hover,
nav.strankovani a:focus-visible {
	background-color: #fff3c4;
	border-color: #ff0000;
}
nav.strankovani strong {
	background-color: #fff3c4;
	border-color: #ff0000;
}

/* ---------- obrazky s popiskem (spolecne pro recenze a zivotopisy autoru) ----------
   <figure class="obrazek vlevo|vpravo"><img ...><figcaption>...</figcaption></figure>
   (stejna pravidla jsou i v recenze.css, tam zatim zustavaji) */
figure.obrazek {
	margin: 0.2em 0 0.7em 0;
	padding: 2px;
	border: 1px solid gray;
	max-width: 55%;
	background: white;
	text-align: center;
}
figure.obrazek.vpravo { float: right; margin-left: 1em; }
figure.obrazek.vlevo  { float: left;  margin-right: 1em; }

/* pruhledny obrazek (kresba) bez ramecku a bileho pozadi: <figure class="obrazek vpravo bez-ramu"> */
figure.obrazek.bez-ramu {
	padding: 0;
	border: none;
	background: transparent;
}
figure.obrazek img { max-width: 100%; height: auto; border: none; }
figure.obrazek figcaption {
	font-size: 0.875em;
	font-style: italic;
	line-height: 1.3;
	text-align: center;
}

/* ---------- "dalsi stranky" v paticce (nav.dalsi), jako v autori-asterixe.html ---------- */
nav.dalsi { margin: 2em 0 1em 0; }
nav.dalsi ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav.dalsi li { margin: 0.35em 0; }

/* ---------- zivotopisy autoru (div.body.zivotopis) ---------- */
div.zivotopis h1 {
	font-size: 1.6em;
	text-align: left;
	margin: 0 0 0.6em 0;
}
div.zivotopis .clanek {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0.5em;
}
div.zivotopis .clanek p { margin: 0.4em 0 0.8em 0; }
div.zivotopis .clanek h2 {
	font-size: 1.3em;
	line-height: 1.3;
	margin: 1.2em 0 0.4em 0;
}
div.zivotopis .clanek ul,
div.zivotopis .clanek ol {
	margin: 0.4em 0 0.8em 0;
	padding-left: 1.5em;
}
div.zivotopis .clanek ol { padding-left: 2em; }
div.zivotopis .clanek ol[type="I"] { padding-left: 3.6em; }
div.zivotopis .clanek li { margin-bottom: 0.45em; }
div.zivotopis p.zdroje {
	text-align: left;
	clear: both;
	margin: 1.4em 0 1em 0;
}
div.zivotopis div.paticka { clear: both; }
div.egmont ol { padding-left: 3.6em !important; }

/* obrazek uprostred textu (bez obtekani), ramecek jen kolem obrazku: <figure class="obrazek stred"> */
div.zivotopis figure.obrazek.stred {
	clear: both;
	width: fit-content;
	max-width: 100%;
	margin: 0.8em auto;
}

/* uzky displej: ramecek zustava kolem obrazku a text ho obteka (neroztahuje se na celou sirku); plati pro recenze i zivotopisy */
@media screen and (max-width: 34em) {
	figure.obrazek.vpravo,
	figure.obrazek.vlevo {
		max-width: 45%;
		margin-top: 0.2em;
		margin-bottom: 0.5em;
	}
	figure.obrazek.vpravo { float: right; margin-left: 0.7em; margin-right: 0; }
	figure.obrazek.vlevo  { float: left;  margin-right: 0.7em; margin-left: 0; }
}