/* ------------------------------------------------------------------------- */
/* ZAKLADNI STYLY A ROZLOZENI GRIDU */
/* ------------------------------------------------------------------------- */

body {
	/* Ponechame nastavenou sirku 750px (max-width gridu) */
	max-width: 750px;
	width: 90%;
	margin: 0 auto;
	font-size: 1em;
	font-family: sans-serif;
	background-color: #f8f8f8;
	color: #333;
	line-height: 1.6;
}

/* Nastavime pro nav a .postheader maximalni sirku 
odpovidajici sloupci .main (3fr / 4fr * 750px) */

nav, .postheader {
	/* Flexibilni sirka: 3fr (75%) z celkove max-width 750px */
	max-width: 75%; 

	/* Vypoctena sirka pro 750px je 562.5px. Muzete pouzit i calc(): */
	/* max-width: calc((3 / 4) * 750px); */

	/* Centrovani: Zarovname je s levym sloupcem Gridu, ktery je zarovnan doleva */
	margin-left: 0;
	margin-right: auto;
}

nav {
	padding-top: 1em;
	padding-bottom: 1em;
}

/* Ponechame ostatni styly .postheader beze zmeny */
.postheader {
	padding: 1em;
	background-color: beige;
	color: black;
	font-size: 0.8rem;
	font-family: monospace;
}

/* Ostatni zakladni styly (h1, h2, p, atd.) zustavaji nezmeneny */

h1 {
	font-family: serif;
	color: black;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

h2, h3 {
	font-family: serif;
	font-style: italic;
	color: black;
}

nav {
	padding-top: 1em;
	padding-bottom: 1em;
}

p {
	margin: 0 0 1em 0;
}

.poem {
	margin-left: 1em;
	font-style: italic;
}

blockquote .poem {
	margin-left: 1em;
}

blockquote {
	font-style: italic;
}

.refs {
	padding: 0em 0.5em 0em 0.5em;
}

pre {
	display: block;
	overflow-x: scroll;
	white-space: pre;
	padding: 2em 1em;
	background-color: black;
	color: white;
}

code {
	background-color: beige;
	padding: 1pt;
}

ul {
	list-style-type: square;
}

.reflist {
	list-style-type: none;
	padding-left: 1em;
	padding-bottom: 1em;
	margin: 0;
	color: tomato;
}

sup {
	font-size: 0.8rem;
	/* vertical-align: super; */
	/* vertical-align: 0.2em; */
	vertical-align: 0.15rem;
	line-height: 0;
}

.footnote-toggle {
	text-decoration: none;
	color: tomato;
}

a {
	color: tomato;
}

a:hover, a:active {
	color: tan;
}

img {
	max-width: 100%;
}

.aside_bq {
	color: tomato;
}

footer {
	padding: 1em 0;
	color: grey;
}

/* ------------------------------------------------------------------------- */
/* NOVe STYLY PRO MARGINaLIE (Grid Layout) */

.grid {
	/* Celkova sirka vcetne mista pro marginalie */
	max-width: 750px; 
	margin: 0 auto;
	padding: 2rem 0; 

	display: grid;
	/* Rozlozeni: 75% hlavni obsah, 25% marginalie */
	grid-template-columns: 3fr 1fr; 
	gap: 2rem; 
	position: relative; /* Kontext pro absolutni pozicovani poznamek */
}

.main {
	grid-column: 1;
}

.marginalia {
	grid-column: 2;
	position: relative; /* Pozice relativni, ale poznamky jsou absolutni vuci .grid */
	min-width: 150px; 
}

/* ------------------------------------------------------------------------- */
/* STYLY PRO POZNaMKY A REFERENCE */

/* Reference (odkaz v textu) */
.note-ref { 
	text-decoration: none;
	color: tomato; 
	font-size: 0.8rem; 
	/* vertical-align: super; */
	vertical-align: 0.15rem;
	line-height: 0;
}

/* Marginalie - Absolutne pozicovana */
/* PrEPRACUJEME STYLY PRO POZNaMKY (.note) */

.note { 
	position: absolute; 
	right: 0;
	width: 100%; 

	/* Vertikalni padding zmensen */
	padding: 0.25em 0.8em; 

	/* border-left: 3px solid tomato; */ 
	/* background-color: #FFE4E0; */ 
	color: tomato;
	font-size: 0.75em;
	font-family: sans-serif;
	/* font-size: 0.85em; */ 
	/* color: #333; */ 
	margin: 0; 

	/* ODSTRANENO: display: flex; a align-items: baseline; */

	/* Zajistuje, ze obsah <p> (a float) nepretece ven */
	overflow: hidden; 
}

/* Stylovani nadpisu <h4> v poznamce */
.note h4 {
	/* KLICOVA ZMENA: Pouziti float pro obtekani textem */
	float: left;

	margin: 0; 
	padding: 0;
	padding-right: 0.5em; /* Mezera mezi cislem a textem */

	/* Zajisteni, ze se float aplikuje spravne */
	display: inline-block; 
}

/* Stylovani prvniho odstavce <p> v poznamce */
.note p:first-of-type {
	/* Resetovani marginu pro tesne navazani na h4 */
	margin-top: 0;
}

/* Skryjeme puvodni fallback/vyskakovaci styly */
.footnote {
	display: none !important;
}
.footnotes.hidden {
	display: none !important;
}

/* ------------------------------------------------------------------------- */
/* RESPONZIVNi DESIGN (Fallback pod text) */
/* ------------------------------------------------------------------------- */

@media (max-width: 900px) { 

	/* Vratime sirku na plnou, kdyz je Grid v jednom sloupci */
	nav, .postheader {
		max-width: 100%;
		margin-left: auto; /* Centrovani */
		margin-right: auto;
	}
	.grid {
		grid-template-columns: 1fr; /* Jeden sloupec */
		gap: 1rem;
	}
	.marginalia {
		grid-column: 1;
		position: static; /* Poznamky se vraci do toku dokumentu */
	}
	.note {
		position: static; /* Poznamky se chovaji jako blokove prvky */
		width: 95%;
		margin-top: 1.0rem; 
		/* margin-top: 1.5rem; */ 
		border-left: none;
		/* border-top: 3px solid tomato; /* Misto leveho okraje */ */

		/* Zrusime flexbox a vratime se k normalnimu bloku */
		display: block;
	}
	.note h4, .note p:first-of-type {
		/* Resetovani flex chovani pro mobilni zobrazeni */
		flex-shrink: initial;
		flex-grow: initial;
		display: block; 
	}
	.note h4 {
		padding-right: 0.5em;
		/* margin-bottom: 0.25em; /* Mala mezera pod hlavickou */ */
		margin-bottom: 0; /* zadna mezera pod hlavickou */
	}
}