/* ===========================================================================
   responzivny.css — mobilna vrstva portalu austria.sk
   Plan: RESPONZIVNY-PLAN.md, faza R1.

   PRAVIDLA, PODLA KTORYCH JE TENTO SUBOR NAPISANY

   1. Linkuje sa ZA style.css a mimo media query NEROBI NIC. Desktop nad
      1070 px teda zostava bajt za bajt taky, aky bol, a vrstva sa vypina
      odstranenim jedneho <link> v index.php.

   2. Breakpoint je 1070 px, lebo presne tam layout prestava sedet:
      #page_content 800 + 2x20 padding + #right_content 200 = 1040,
      vonkajsia tabulka ma width="1070". Pod tym vznika vodorovny posuv
      uz dnes. Pri 900 px by tablet so sirkou 1024 dostal rozbity desktop.

   3. display:block na table/tr/td sa dava LEN layoutovym tabulkam podla id
      (#layout, #layout_hlavicka, #layout_obsah). Nikdy nie selektorom
      "table" — tabulky su aj v telach 6436 clankov, ktore pise redakcia
      v TinyMCE, a tie sa rozsypat nesmu.

   4. Pevne sirky v style.css sa tu NEPREPISUJU na mieste, len prebijaju
      vnutri media query. Kto hlada, preco je nieco na desktope 800 px,
      najde to na jednom mieste v style.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   JEDINE VECI MIMO MEDIA QUERY, a to zamerne: burger (checkbox + label)
   a blok vyberu kategorie a spolkovej krajiny (#menu_vyber) - oboje pridava
   module_menu_all.php a na stranke to je vzdy, takze sa to na desktope musi
   skryt. Pravidlo "mimo media query nic nerobime" tym nie je porusene
   — tyka sa prvkov, ktore v style.css existuju. Tu ide o prvky, ktore
   responzivna vrstva sama pridala, a desktop teda vyzera presne tak, ako
   vyzeral.
   --------------------------------------------------------------------------- */

#menu_burger,
#menu_burger_tlacidlo,
#menu_vyber {
	display:	none;
}

/* ---------------------------------------------------------------------------
   DRUHA VEC MIMO MEDIA QUERY: vzhlad zoznamu clankov. Na rozdiel od vsetkeho
   ostatneho v tomto subore to plati aj na desktope, lebo to nie je
   prisposobenie mobilu, ale zmena vzhladu vyziadana pre celu responzivnu
   verziu. Tyka sa len prvkov, ktore pridali moduly tejto vrstvy
   (a.blog_odkaz, div.linka_dalej_box), a prepisu .linka_dalej.
   --------------------------------------------------------------------------- */

/* Nadpis aj perex v zozname su odkaz na clanok. Text sa pritom NESMIE zmenit:
   #page_content a v style.css je bold italic cerveny podciarknuty, takze sa
   tu vsetko vracia na dedenie od rodica (h1, resp. span.perex) a hover
   nerobi nic — jedina viditelna zmena je kurzor.

   Selektor musi byt #page_content a.blog_odkaz: samotna trieda by
   #page_content a neprebila. :visited je v zozname dolezite — bez neho by
   precitany clanok zmenil farbu nadpisu. */
#page_content a.blog_odkaz,
#page_content a.blog_odkaz:link,
#page_content a.blog_odkaz:visited,
#page_content a.blog_odkaz:hover,
#page_content a.blog_odkaz:active {
	font:				inherit;
	color:				inherit;
	background:			none;
	text-decoration:	none;
	cursor:				pointer;
}

/* "Citajte viac ..." je cervene tlacidlo zarovnane doprava. Zarovnanie drzi
   obal, nie samotny odkaz: odkaz musi byt inline-block, aby cervene pozadie
   obopinalo text a nie cely riadok. Tvar je ten isty ako u tlacidla
   "Poslat e-mailom" pod clankom (vyska 28 px, radius 3 px, #990000), aby
   portal nemal dve rozne cervene tlacidla. Kurziva a podciarknutie
   z #page_content a su zrusene — na tlacidle vyzeraju ako chyba. */
#page_content .linka_dalej_box {
	text-align:			right;
	margin:				8px 0 0 0;
}

#page_content a.linka_dalej,
#page_content a.linka_dalej:link,
#page_content a.linka_dalej:visited,
#page_content a.linka_dalej:hover,
#page_content a.linka_dalej:active {
	display:			inline-block;
	width:				auto;
	height:				28px;
	margin:				0;
	padding:			0 12px;
	font:				bold 14px/28px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color:				#ffffff;
	text-decoration:	none;
	border:				none;
	border-radius:		3px;
	background-color:	#990000;
}

#page_content a.linka_dalej:hover {
	background-color:	#7a0000;
}

@media (max-width: 1069px) {

	/* --- hlavicka -------------------------------------------------------- */

	/* Logo je <img> bez sirky v markupe, berie si vlastnu velkost. */
	#layout_hlavicka img,
	#layout > tbody > tr > td > a > img {
		max-width:	100%;
		height:		auto;
	}

	/* Hladanie na plnu sirku. #box_search ma 300 px a vstup 215 px, co sa
	   na 360 px displeji zmesti, ale zostane z toho uzke pole pri sirokom
	   okraji — radsej cela sirka. Tlacidlo si 80 px ponecha. */
	#box_search {
		/* V style.css je display:inline (sedi vpravo v cele hlavicky). Ako
		   inline box ignoruje sirku a percenta vnutri sa pocitaju z <form>,
		   nie z neho - preto tu musi byt blok. */
		display:	block;
		width:		auto !important;
		max-width:	100%;
		padding:	0 16px;
		/* Bez border-box sa 16 px padding pripocita ZA sirku, takze percento
		   v sirke vstupu nizsie sa pocita z vacsieho boxu a tlacidlo sa
		   zalomi pod pole. S nim sa pole aj tlacidlo zmestia na jeden riadok. */
		box-sizing:	border-box;
	}

	#box_search #search_input {
		width:			calc(100% - 100px);
		max-width:		100%;
		box-sizing:		border-box;
		height:			28px;
	}

	/* --- burger ---------------------------------------------------------- */

	/* Checkbox zostava skryty aj na mobile — klikatelny je label. Nie
	   display:none, ale odsunutie z obrazovky: display:none by ho v starsich
	   prehliadacoch vyradilo z tab navigacie a menu by sa nedalo otvorit
	   klavesnicou. */
	#menu_burger {
		display:	block;
		position:	absolute;
		left:		-9999px;
		width:		1px;
		height:		1px;
	}

	#menu_burger_tlacidlo {
		display:			block;
		margin:				8px 16px;
		padding:			12px 16px;
		background:			#990000;
		color:				#ffffff;
		font:				bold 16px/20px Arial, Helvetica, sans-serif;
		text-transform:		uppercase;
		letter-spacing:		1px;
		border-radius:		3px;
		cursor:				pointer;
		-webkit-user-select: none;
		user-select:		none;
	}

	/* Ikona troch ciar je v CSS, nie v markupe — PHP subor tak zostava
	   v ASCII a nemoze sa pokazit kodovanim (cast modulov je cp1250). */
	#menu_burger_tlacidlo::before {
		content:		"\2630";
		font-size:		20px;
		padding-right:	10px;
		vertical-align:	-1px;
	}

	/* Otvorene menu: krizik namiesto troch ciar, nech je vidno, co klik urobi. */
	#menu_burger:checked + #menu_burger_tlacidlo::before {
		content:	"\2715";
	}

	/* --- menu pod burgerom ----------------------------------------------- */

	#menu {
		display:	none;
	}

	#menu_burger:checked ~ #menu {
		display:	block;
		padding:	0 16px 8px 16px;
	}

	#menu table,
	#menu tbody,
	#menu tr,
	#menu td {
		display:	block;
		width:		auto !important;
	}

	/* Svisle oddelovace medzi polozkami. Pod sebou nemaju zmysel. */
	#menu .menu_oddelovac {
		display:	none;
	}

	/* Vyber kategorie a spolkovej krajiny z module_menu_all.php. Nadpisy
	   (<h1>) a polozky (<h2><a>) chytaju pravidla #menu h1 a #menu h2 a
	   nizsie, takze tu staci blok odkryt a oddelit linkou od zoznamu
	   stranok - su to dva rozne druhy navigacie. */
	#menu #menu_vyber {
		display:		block;
		margin-top:		14px;
		padding-top:	4px;
		border-top:		1px solid #dddddd;
	}

	/* Nazov skupiny (<h1>) a polozky (<h2> s odkazom). Na desktope je odkaz
	   bold 10 px s padding-left 7 px, co sa prstom netrafi — na mobile je
	   z neho blok s vyskou nad 40 px. */
	#menu h1 {
		font:			bold 15px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
		margin:			14px 0 4px 0;
		padding:		0;
	}

	#menu h2 {
		margin:		0;
		padding:	0;
	}

	#menu h2 a,
	#menu h2 a:hover {
		display:		block;
		font:			bold 15px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
		padding:		11px 7px;
		border-bottom:	1px solid #eeeeee;
	}

	/* --- rozpad layoutu ------------------------------------------------- */
	/* Atribut width="1070" v markupe zostava kvoli desktopu, prebijeme ho. */

	#layout,
	#layout > tbody,
	#layout > tbody > tr,
	#layout > tbody > tr > td,
	#layout_hlavicka,
	#layout_hlavicka > tbody,
	#layout_hlavicka > tbody > tr,
	#layout_hlavicka > tbody > tr > td,
	#layout_obsah,
	#layout_obsah > tbody,
	#layout_obsah > tbody > tr,
	#layout_obsah > tbody > tr > td {
		display:	block;
		width:		auto !important;
		max-width:	100%;
	}

	/* colspan prestane mat vyznam, ked su cely bloky — ziadne stopy po mriezke */
	#layout > tbody > tr > td,
	#layout_obsah > tbody > tr > td {
		text-align:	left;
	}

	/* Hlavicka je na mobile vycentrovana: logo, riadok ISSN + ikony socialnych
	   sieti aj hladanie. Na desktope ich drzi mriezka (logo vlavo, hladanie
	   vpravo), v jednom stlpci pod sebou by boli nalavo s prazdnom vedla seba.

	   Logo ma vlastne id, lebo pravidlo nad tymto dava vsetkym celam #layout
	   text-align:left a ma vyssiu specificitu (id + 3 typy) nez samotne
	   #layout_logo - preto je tu cela selektorova cesta aj s nim. */
	#layout > tbody > tr > td#layout_logo {
		text-align:	center;
	}

	/* Len PRVY riadok hlavicky (ISSN + ikony, hladanie). Druhy riadok je
	   burger a menu - tam zostava zarovnanie zlava, aby polozky pod sebou
	   tvorili zoznam. */
	#layout_hlavicka > tbody > tr:first-child > td {
		text-align:	center;
	}

	/* ISSN a ikony socialnych sieti su vo vlastnej tabulke. Tabulka je blokovy
	   box, takze ju text-align rodica necentruje - musi mat auto margin.
	   Jediny "> table" v hlavicke je prave tato. */
	#layout_hlavicka > tbody > tr:first-child > td > table {
		margin:	0 auto;
	}

	/* --- slider (R3) ----------------------------------------------------- */
	/* fadeshow() v js/slider_fadein2.js si cely box zapisuje document.write-om
	   s rozmerom INLINE v style="" — 1070 x 600 prichadza ako argument
	   z module_theme_image.php. Inline styl prebije kazdy selektor, takze tu
	   musi byt !important. Tie rozmery NEMEN v module ani v JS: su to rozmery
	   pre desktop a obrazky su na ne narezane. */

	#content_slider {
		padding:	0;
	}

	/* V slider_nav.css je inline-block, co by pri 100 % sirke necentrovalo. */
	#slider_wrapper {
		display:	block;
		width:		100%;
	}

	/* #master0 je box s overflow:hidden. Vysku NEMOZE dostat height:auto —
	   vsetky jeho deti su position:absolute, takze box by zrolol na nulu
	   a slider by zmizol. Drzi ju pomer stran: height:0 + padding-top je
	   stary trik ZAMERNE, nie aspect-ratio — to na starsom Androide alebo
	   Safari pod 15 nefunguje a slider by tam nebol vidno vobec, co je
	   horsia chyba ako o nic. Obrazky su vsetky 1070x600 (odmerane
	   getimagesize nad 8 subormi v www/files), teda 600/1070 = 56.0748 %. */
	#slider_wrapper > div[id^="master"] {
		width:			100% !important;
		height:			0 !important;
		padding-top:	56.0748%;
	}

	/* Dve fade plochy, ktore sa prelinaju. Maju inline pevne rozmery a tie
	   treba vymenit za rozopretie o cely box: percentualna height sa totiz
	   pocita z height rodica, a ta je nula — padding do nej nevstupuje.
	   top/bottom sa ale pocitaju z PADDING boxu, takze plocha vyjde spravne. */
	#slider_wrapper > div[id^="master"] > div {
		top:		0 !important;
		right:		0 !important;
		bottom:		0 !important;
		left:		0 !important;
		width:		auto !important;
		height:		auto !important;
	}

	#slider_wrapper img {
		display:	block;
		width:		100%;
		height:		auto;
	}

	/* Sipky su na desktope skryte a odkryva ich :hover na wrapperi. Na dotyku
	   hover neexistuje, takze by sa nezobrazili NIKDY — tu su vidno vzdy
	   a mensie, aby na 360 px neprekryli pol obrazku. */
	.slider_nav .slider_arrow {
		opacity:		1;
		visibility:		visible;
		width:			34px;
		height:			34px;
		line-height:	34px;
		font-size:		20px;
		margin-top:		-17px;
	}

	.slider_arrow_left	{ left:		8px; }
	.slider_arrow_right	{ right:	8px; }

	#slider_wrapper.dots-top .slider_dots {
		top:	10px;
	}

	/* --- leaderboard ----------------------------------------------------- */
	/* Bannery maju width/height ATRIBUTY v markupe (1070 x 200/250/300).
	   Pravidlo pre hlavicku ich chyta cez #layout > … > a > img, ale to visi
	   na vnoreni tabuliek — radsej explicitne, nech to prezije presun bloku. */

	#leaderboard img {
		max-width:	100%;
		height:		auto;
		/* Banner ma inline `border: 1px solid` a bez border-box by sa ten
		   ramcek pripocital ZA max-width - 2 px pretekali von zo stranky. */
		box-sizing:	border-box;
	}

	/* --- obsahovy a pravy stlpec ---------------------------------------- */
	/* Pravy stlpec sa tym dostane POD obsah. Je to rozhodnute (plan, bod 4
	   otvorenych otazok): na mobile je najprv clanok a potom kategorie. */

	#page_content {
		width:		auto !important;
		max-width:	100%;
		padding:	16px;
		margin:		0;
	}

	#right_content {
		width:			auto !important;
		max-width:		100%;
		padding:		0 16px;
		border-bottom:	0;
	}

	/* --- zachranna siet pre obsah --------------------------------------- */
	/* Obrazky v telach clankov maju pevne sirky z TinyMCE. Toto ich zmensi
	   vizualne; stahuju sa ale stale cele, co je samostatna praca (plan,
	   kap. 5 Rizika). Obsah v DB sa nemeni. */

	#page_content img,
	#right_content img {
		max-width:	100%;
		height:		auto;
	}

	/* To iste ako pri leaderboarde: obrazok s ramcekom z TinyMCE by inak
	   presahoval o hrubku ramceka. Pruzok ankety v #right_content sa sem
	   zamerne nedava - ma pevnu vysku 10 px a border-box by ju zjedol. */
	#page_content img {
		box-sizing:	border-box;
	}

	/* Siroka tabulka v tele clanku dostane posuv SAMA, nie cela stranka. */
	#page_content table {
		max-width:	100%;
	}

	/* Vlozene mapy a videa v telach clankov. Google Maps pride z CMS ako
	   <iframe ... width="800" height="600">, co na telefone pretekalo von
	   zo stranky. Atribut width je len predvolena sirka, max-width ju
	   prebije.

	   Vyska zostava, ako ju zadala redakcia - iframe nema pomer stran, ktory
	   by sa dal dopocitat, a mapa vysoka 600 px je pouzitelna. Pri videach
	   to znamena ciernejsie okraje, ale vzdy je lepsie vidiet cely obsah
	   nez ho mat vytlacene z obrazovky. */
	#page_content iframe,
	#page_content embed,
	#page_content object {
		max-width:	100%;
	}

	/* --- zoznam clankov -------------------------------------------------- */
	/* Perex vedla fotky skladaju moduly module_content_main_blog_*.php do
	   <table class="blog_zoznam">: prva cela obrazok 300 px, druha text.
	   Na mobile z prvej cely vysla uzka kolona a obrazok sa v nej stlacil
	   na par desiatok pixelov, takze sa riadok rozpada pod seba — obrazok
	   na celu sirku, pod nim datum, nadpis a perex.

	   Je to VYMENOVANA TRIEDA, nie selektor "table" (pravidlo 3): tabulky
	   v telach 6436 clankov z TinyMCE sa rozpadat nesmu. Trieda je v tych
	   siestich moduloch zoznamu, inde nie.

	   cellspacing="10" v blokovom rezime prestane platit, odstup medzi
	   clankami drzi margin tabulky. */
	#page_content table.blog_zoznam,
	#page_content table.blog_zoznam > tbody,
	#page_content table.blog_zoznam > tbody > tr,
	#page_content table.blog_zoznam > tbody > tr > td {
		display:	block;
		width:		auto !important;
		max-width:	100%;
	}

	#page_content table.blog_zoznam {
		margin:		0 0 18px 0;
	}

	#page_content table.blog_zoznam > tbody > tr > td {
		padding:	0;
	}

	/* Obrazok ma width="300" v markupe. Zachranna siet vyssie ho na 360 px
	   displeji zmensi, ale na sirsom (tablet 768 px) by zostal 300 px pri
	   lavom okraji — tu ma byt cela sirka vzdy. */
	#page_content table.blog_zoznam img {
		display:	block;
		width:		100%;
		height:		auto;
	}

	/* Perex v zoznamoch clankov. Na desktope je italic 16px/20px, co je na
	   telefone drobne a natlacene - tu je vacsi a vzdusnejsi. Prepisuje sa
	   len font-size a line-height, nie cely `font:` shorthand zo style.css,
	   aby kurziva a rodina pisma zostali. Ta ista trieda je aj v perexe
	   clanku (module_content_main_blog_article.php), takze sa zvacsi aj tam
	   - je to to iste pismo v tej istej roli. */
	#page_content .perex {
		font-size:		18px;
		line-height:	26px;
	}

	/* --- anketa v pravom stlpci ------------------------------------------ */
	/* Pruzok vysledku je gif 2x10 px natiahnuty ATRIBUTOM width na
	   percento*1.5. Zachranna siet vyssie mu dava height:auto, cim sa
	   obnovil jeho vlastny pomer stran 1:5 - zo 75 px sirokeho pruzku sa
	   stal 375 px vysoky stlpec a anketa vyzerala ako stlpcovy graf nahor.
	   Vyska pruzku musi zostat pevnych 10 px; width z markupu nesie
	   hodnotu, takze ten sa nedotyka. */
	#right_content img.surveyimg {
		height:	10px;
	}

	/* --- nic nesmie pretekat von ---------------------------------------- */
	/* POZOR, je to zaplata, nie oprava: overflow-x:hidden necha pretekajuci
	   prvok ODREZAT namiesto toho, aby sa objavil posuv. Ked teda v dalsich
	   fazach nieco vyzera odstrihnute vpravo, je to tymto — najdi ten prvok
	   a daj mu sirku, nedavaj mu vynimku tu. */
	html, body {
		max-width:	100%;
		overflow-x:	hidden;
	}
}