/* ------------------------------------------------------------------
   gynstart - responzivni vrstva
   Nacita se AZ ZA /style.css, takze prepisuje legacy pravidla.
   Identita zustava: modra #063c6d, bezova #f7e8ac, fialove nadpisy #440077.
   Breakpoint pro prechod do jednoho sloupce: 768px.
   ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #ffffff;
}

/* obrazky a media se nikdy nepretahnou pres sirku rodice */
img, video, iframe, embed, object {
	max-width: 100%;
}

/* Dopocitat vysku smi jen obrazky, ktere ji v HTML nemaji. Legacy sablony pouzivaji
   ctvercove obrazky roztazene pres width/height atribut jako oddelovace a vyplne
   (napr. bod.jpg 96x96 jako linka height="3") - tem se vyska prepsat nesmi. */
img:not([height]), video, iframe {
	height: auto;
}

/* dlouhe URL a slova nesmi rozstrelit layout */
.gs-content, .gs-sidebar {
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   Hlavicka: logo + navigace + banner
   --------------------------------------------------------------- */

.gs-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 22px;
	background: #063c6d;
	padding: 0 16px;
}

/* Poradi na desktopu: prvni radek logo + banner, pod nimi pres celou sirku navigace. */
.gs-logo {
	display: block;
	flex: none;
	line-height: 0;
	order: 1;
}

.gs-logo img {
	display: block;
	border: 0;
}

/* navigace */
.gs-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 20px;
	order: 4;
	flex: 1 1 100%;
	padding-bottom: 4px;
}

.gs-nav a,
.gs-nav a:link,
.gs-nav a:visited {
	display: inline-block;
	color: #ffffff;
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	padding: 8px 0 8px 16px;
	/* odrazka drive resena obrazkem v kazdem odkazu (tl.jpg je 72x72, proto velikost) */
	background: url("/images/tl.jpg") no-repeat 0 50%;
	background-size: 10px 11px;
}

.gs-nav a:hover,
.gs-nav a:focus {
	color: #ffffff;
	text-decoration: underline;
}

.gs-banner {
	flex: 0 1 auto;
	order: 3;
	margin-left: auto;
	padding: 6px 0;
}

/* hamburger - na desktopu skryty */
.gs-nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	order: 2;
	margin-left: auto;
	background: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 5px;
	padding: 10px 14px;
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	min-height: 44px;
}

.gs-nav-toggle:hover,
.gs-nav-toggle:focus {
	background: rgba(255, 255, 255, 0.12);
}

/* ikona hamburgeru - tri prouzky */
.gs-nav-toggle-ikona {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 2px;
	background: #ffffff;
}

.gs-nav-toggle-ikona::before,
.gs-nav-toggle-ikona::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: #ffffff;
}

.gs-nav-toggle-ikona::before { top: -6px; }
.gs-nav-toggle-ikona::after  { top: 6px; }

/* ---------------------------------------------------------------
   Obsah - jemne osvezeni typografie (i na desktopu)
   --------------------------------------------------------------- */

.gs-content {
	line-height: 1.5;
}

.gs-content p {
	line-height: 1.55;
}

/* ---------------------------------------------------------------
   Formulare a tlacitka
   --------------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="search"], input[type="url"], select, textarea {
	max-width: 100%;
	padding: 7px 9px;
	border: 1px solid #b9b9b9;
	border-radius: 4px;
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 13px;
	background: #ffffff;
	color: #2b2b2b;
}

input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, select:focus, textarea:focus {
	outline: 2px solid #063c6d;
	outline-offset: 1px;
	border-color: #063c6d;
}

input[type="submit"], input[type="button"], input[type="reset"], button {
	background: #063c6d;
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	padding: 10px 18px;
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.2;
	cursor: pointer;
}

input[type="submit"]:hover, input[type="button"]:hover,
input[type="reset"]:hover, button:hover {
	background: #0a5395;
}

input[type="checkbox"], input[type="radio"] {
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------
   MOBIL - jeden sloupec
   --------------------------------------------------------------- */

@media (max-width: 768px) {

	/* --- hlavicka --- */
	.gs-header {
		padding: 8px 12px;
		gap: 8px;
	}

	.gs-logo img {
		max-height: 60px;
		width: auto;
	}

	.gs-nav-toggle {
		display: inline-flex;
	}

	/* navigace sbalena, rozbaluje ji hamburger */
	/* poradi na mobilu: logo, hamburger, rozbalena navigace, banner */
	.gs-nav {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
		order: 4;
	}

	.gs-nav.gs-nav-open {
		display: flex;
	}

	.gs-nav a,
	.gs-nav a:link,
	.gs-nav a:visited {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 15px;
		padding: 11px 0 11px 18px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		background-position: 0 50%;
	}

	.gs-banner {
		order: 5;
		width: 100%;
		margin-left: 0;
		text-align: center;
	}

	/* --- rozvrzeni: postranni bloky pod obsah --- */
	.gs-layout,
	.gs-layout > tbody {
		display: block;
		width: 100% !important;
	}

	.gs-layout > tbody > tr {
		display: flex;
		flex-direction: column;
	}

	.gs-layout > tbody > tr > td.gs-content,
	.gs-layout > tbody > tr > td.gs-sidebar {
		display: block;
		width: 100% !important;
		max-width: 100%;
	}

	/* obsah nahoru, postranni bloky pod nej */
	.gs-content { order: 1; }
	.gs-sidebar { order: 2; }

	/* Legacy layout stoji na vnorenych tabulkach se sirkou "auto". Takova tabulka
	   se nikdy nezmensi pod min-content, takze ji sirsi obsah (formularova pole,
	   obrazky s width="100%") roztahne pres displej. table-layout:fixed rozdeli
	   sloupce podle dostupne sirky misto podle obsahu a preteceni tim zmizi. */
	.gs-content table,
	.gs-sidebar table {
		table-layout: fixed;
		width: 100%;
		max-width: 100%;
	}

	/* Datova tabulka kalendare akci je vyjimka: stlacit ctyri sloupce do sirky displeje
	   znamena lamat slova po pismenech, takze radeji dostane vlastni vodorovny scroll.
	   Zamerne jen .stripeMe - podle <th> to poznavat nelze, hlavicku maji i formulare
	   prihlasek, a ty se scrollovat nemaji, ty se maji zalamovat. */
	.gs-content table.stripeMe {
		display: block;
		overflow-x: auto;
		table-layout: auto;
		width: 100%;
	}

	.gs-content table.stripeMe td,
	.gs-content table.stripeMe th {
		min-width: 7em;
	}

	/* zaloha, kdyby neco presto preteklo */
	.gs-content { overflow-x: auto; }

	/* --- citelnost textu --- */
	.gs-content, .gs-sidebar,
	.gs-content td, .gs-content th, .gs-content p, .gs-content li,
	.gs-content div, .gs-content span,
	.gs-content .text, .gs-content .text1, .gs-content .text_zpravy,
	.gs-content .pismo-l, .gs-content .bunka-l, .gs-content .bunka-p,
	.gs-content .odkaz, .gs-content .odkaz_novinky,
	.gs-content a, .gs-content a:link, .gs-content a:visited,
	.gs-sidebar td, .gs-sidebar .text, .gs-sidebar a, .gs-sidebar a:link {
		font-size: 15px;
		line-height: 1.55;
	}

	.gs-content .nadpis, .gs-content .nazev,
	.gs-content .nadpis:link, .gs-content .nadpis:visited {
		font-size: 17px;
		line-height: 1.35;
	}

	.gs-content .nadpis_user, .gs-content .nadpis_user:link {
		font-size: 20px;
	}

	/* odkazy v obsahu jako pohodlny cil pro prst */
	.gs-content a, .gs-sidebar a {
		padding-top: 2px;
		padding-bottom: 2px;
	}

	/* --- formulare na mobilu --- */
	/* 16px zabrani tomu, aby iOS pri kliknuti do pole priblizil stranku */
	input[type="text"], input[type="password"], input[type="email"],
	input[type="tel"], input[type="number"], input[type="date"],
	input[type="search"], input[type="url"], select, textarea {
		font-size: 16px;
		width: 100%;
	}

	input[type="submit"], input[type="button"], input[type="reset"], button {
		min-height: 44px;
		font-size: 15px;
		padding: 12px 20px;
	}

	/* uzke sloupce s popiskem + polem pod sebe */
	.gs-content table[width], .gs-content table {
		max-width: 100%;
	}

	/* Prihlasky na akce (f_zobraz) maji vlastni styly s pevnymi pixelovymi sirkami
	   (#extra_form .input_fullsize {width:695px}) - ty maji vyssi specificitu nez
	   pravidla vyse, proto je tady strop navic. */
	.gs-content input, .gs-content textarea, .gs-content select,
	#extra_form input, #extra_form textarea, #extra_form select,
	#extra_form .input_fullsize {
		max-width: 100% !important;
	}

	/* obsah psany v editoru casto nese pevne sirky primo v HTML */
	.gs-content [width], .gs-content [style*="width"] {
		max-width: 100% !important;
	}

	/* Pri table-layout:fixed urcuje sirku sloupcu prvni radek, takze jedina bunka
	   s pixelovou sirkou (<td width="695">) roztahne celou tabulku pres displej.
	   Pixelove sirky proto uvolnime; procenta necháváme, ta drzi pomer sloupcu. */
	.gs-content td[width]:not([width$="%"]),
	.gs-content th[width]:not([width$="%"]),
	.gs-content col[width]:not([width$="%"]),
	.gs-sidebar td[width]:not([width$="%"]) {
		width: auto !important;
	}
}

/* velmi male displeje */
@media (max-width: 400px) {
	.gs-header { padding: 8px; }
	.gs-logo img { max-height: 48px; }
}