/* ------------------------------------------------------------------
   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
   --------------------------------------------------------------- */

/* Zaklad je mobilni podoba (logo + hamburger, navigace se rozbaluje pod nim),
   desktopove rozvrzeni se zapina az v @media (min-width: 769px) nize. */
.gs-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	background: #063c6d;
	padding: 8px 12px;
}

.gs-logo {
	display: block;
	flex: none;
	line-height: 0;
	order: 1;
}

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

/* navigace */
.gs-nav {
	display: none;
	order: 4;
	width: 100%;
}

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

.gs-nav-vlevo,
.gs-nav-dole {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.gs-nav a,
.gs-nav a:link,
.gs-nav a:visited {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: #ffffff;
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: normal;
	text-decoration: none;
	padding: 11px 0 11px 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	/* 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: 5;
	width: 100%;
	text-align: center;
	padding: 6px 0;
}

/* hamburger - na desktopu se skryva nize v @media (min-width: 769px) */
.gs-nav-toggle {
	display: inline-flex;
	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; }

/* ---------------------------------------------------------------
   DESKTOP - hlavicka ve stejnem rozvrzeni jako puvodni web:
   logo | dva odkazy pod sebou | banner a pod nim rada odkazu
   --------------------------------------------------------------- */

@media (min-width: 769px) {

	.gs-header {
		display: grid;
		grid-template-columns: auto auto 1fr;
		grid-template-areas:
			"logo navvlevo banner"
			"logo navvlevo navdole";
		align-items: start;
		gap: 0;
		padding: 0;
	}

	.gs-logo {
		grid-area: logo;
		align-self: stretch;
	}

	/* obal navigace na desktopu nic nepozicuje, radi se primo obe skupiny */
	.gs-nav {
		display: contents;
	}

	.gs-nav-vlevo {
		grid-area: navvlevo;
		flex-direction: column;
		/* sirka a svisle vystredeni tak, aby sloupec s bannerem zacinal
		   na stejnem miste jako v puvodnim rozvrzeni */
		align-self: stretch;
		justify-content: center;
		min-width: 259px;
		padding: 0 16px 0 16px;
	}

	.gs-nav-dole {
		grid-area: navdole;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 18px;
		padding: 0 16px 8px 0;
	}

	.gs-nav a,
	.gs-nav a:link,
	.gs-nav a:visited {
		display: inline-block;
		min-height: 0;
		font-size: 13px;
		padding: 3px 0 3px 15px;
		border-top: 0;
	}

	.gs-banner {
		grid-area: banner;
		width: auto;
		text-align: left;
		padding: 18px 16px 4px 0;
		align-self: start;
	}

	.gs-nav-toggle {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Blok s konferencemi (csup_konf_logo)
   Je vykresleny dvakrat - v postrannim sloupci a nad obsahem - a podle
   sirky displeje se ukazuje jen jeden z nich. Na mobilu patri nahoru,
   protoze postranni bloky se presouvaji az pod zpravy.
   --------------------------------------------------------------- */

.gs-konf-mobil {
	display: block;
	margin: 0 0 10px 0;
}

.gs-konf-sidebar {
	display: none;
}

@media (min-width: 769px) {
	.gs-konf-mobil { display: none; }
	.gs-konf-sidebar { display: block; }
}

/* Vnitrek bloku. Drive to byla tabulka s bgcolor a cellpadding/cellspacing,
   proto se pozadi a mezery nastavuji tady. */
.gs-konf {
	background: #f1da76;
	padding: 4px;
	text-align: center;
}

.gs-konf-obrazek {
	display: block;
	padding: 2px;
}

.gs-konf-obrazek img {
	display: inline-block;
	border: 0;
	max-width: 100%;
	height: auto;
}

.gs-konf-odkaz {
	padding: 2px;
}

.gs-konf-odkaz img {
	border: 0;
	max-width: 100%;
	height: auto;
}

/* QR kod na odkaz do FB skupiny - na mobilu nema smysl (telefonem se vlastni
   displej nenaskenuje) a zabira misto, zustava jen textovy odkaz */
@media (max-width: 768px) {
	.gs-qr {
		display: none;
	}

	/* prvni dva bannery vedle sebe, aby blok nezabral pul obrazovky */
	.gs-konf {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
	}

	.gs-konf-obrazek {
		flex: 0 1 50%;
		max-width: 50%;
	}

	.gs-konf-odkaz {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------
   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 je mobilne resena uz v zakladnich pravidlech vyse */
	.gs-logo img {
		max-height: 60px;
		width: auto;
	}

	/* --- 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-konf-mobil {
		display: block;
		width: 100% !important;
		max-width: 100%;
	}

	/* Postranni bloky maji jit prolozene s obsahem, ale sedi v jine bunce tabulky.
	   display:contents bunku "rozpusti" - jednotlive bloky se stanou primymi
	   polozkami radku a daji se radit spolecne s obsahem. */
	.gs-layout > tbody > tr > td.gs-sidebar {
		display: contents;
	}

	/* Bunka obsahuje i osamocene <br> pro odsazeni na desktopu. Pri display:contents
	   by z nej byla samostatna flex polozka a nahore by svitil prazdny pruh. */
	.gs-layout > tbody > tr > td.gs-sidebar > br {
		display: none;
	}

	/* Zamerne se tu nenastavuje display - konferencni blok je v postrannim sloupci
	   take .gs-blok a ma byt na mobilu skryty (nahore uz je jeho druha kopie).
	   display:block by skryti prebil a blok by se objevil dvakrat. */
	.gs-blok {
		width: 100%;
		max-width: 100%;
	}

	/* Poradi na mobilu: konferencni blok, Pocitani, kalendar, ankety, zpravy
	   z postranniho sloupce, pak hlavni obsah a nakonec zbytek bloku.
	   Obecne pravidlo je prvni, aby ho konkretni tridy nize prebily. */
	.gs-blok { order: 6; }
	.gs-konf-mobil { order: 0; }
	.gs-blok-pocitani { order: 1; }
	.gs-blok-calendar { order: 2; }
	.gs-blok-poll { order: 3; }
	.gs-blok-messagebox { order: 4; }
	.gs-content { order: 5; }

	/* Na strankach s prihlaskou je formular to hlavni, proto jde uplne nahoru
	   a postranni bloky si mezi sebou drzi stejne poradi jako jinde. */
	.gs-obsah-prvni .gs-content { order: -1; }

	/* 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 --- */
	/* Obsah se cte (delsi text), proto 15px a volnejsi radkovani. */
	.gs-content,
	.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 {
		font-size: 15px;
		line-height: 1.55;
	}

	/* Postranni bloky se jen prohlizeji (kratke polozky v seznamu), takze o stupen
	   mensi pismo a sevrenejsi radkovani - jinak zabiraji stejne mista jako clanky.
	   Formularova pole jsou z toho vyjmuta nize, musi zustat 16px kvuli iOS. */
	.gs-sidebar,
	.gs-sidebar td, .gs-sidebar th, .gs-sidebar p, .gs-sidebar li,
	.gs-sidebar div, .gs-sidebar span,
	.gs-sidebar .text, .gs-sidebar .text1, .gs-sidebar .pismo-l,
	.gs-sidebar .odkaz, .gs-sidebar .odkaz_novinky,
	.gs-sidebar a, .gs-sidebar a:link, .gs-sidebar a:visited {
		font-size: 14px;
		line-height: 1.4;
	}

	.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;
	}

	/* Plna sirka jen pro formulare v obsahu (prihlasky na akce apod.).
	   V postrannich blocich jsou kompaktni widgety - napr. Pocitani ma sedm
	   selectu, ktere patri po trech na radek (den/mesic/rok); pri sirce 100 %
	   by se roztahly kazdy na vlastni radek a blok by mel pres pul obrazovky. */
	.gs-content input[type="text"], .gs-content input[type="password"],
	.gs-content input[type="email"], .gs-content input[type="tel"],
	.gs-content input[type="number"], .gs-content input[type="date"],
	.gs-content input[type="search"], .gs-content input[type="url"],
	.gs-content select, .gs-content textarea {
		width: 100%;
	}

	.gs-sidebar input, .gs-sidebar select, .gs-sidebar textarea {
		width: auto;
		max-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; }
}