/* Doplněk k template_css.css pro HTML, které generuje Joomla 6 (šablona bez Bootstrapu). */

/* skryté popisky (J6 je označuje třídou visually-hidden) */
.visually-hidden, .element-invisible {
	position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
	margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important; border: 0 !important;
}

/* drobečková navigace: J6 má ol.breadcrumb bez oddělovačů, J3 dělila položky šipkou arrow.png */
.mod-breadcrumbs { list-style: none; margin: 0; padding: 0; }
.mod-breadcrumbs li { display: inline; }
.mod-breadcrumbs .mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
	content: url(../images/pathway-arrow.png); padding: 0 4px;
}

/* menu: J6 skrývá podmenu aktivní položky skriptem a nabízí tlačítko se šipkou (ikonový font chybí) */
ul.mod-menu ul.mod-menu__sub { display: block !important; }
.mod-menu__toggle-sub { display: none !important; }

/* ikony bez ikonového fontu nezobrazovat (v J3 byly také prázdné) */
span[class^="icon-"], span[class*=" icon-"] { display: none; }

/* informace o článku (J6: dl.article-info) */
dl.article-info { margin: 0 0 8px 0; font-size: 0.9em; color: #666; }
dl.article-info dt.article-info-term { display: none; }
dl.article-info dd { display: inline; margin: 0 10px 0 0; }

/* stránkování (J6: ul.pagination jen s ikonami) -> texty jako v J3 */
ul.pagination { list-style: none; margin: 10px 0; padding: 0; }
ul.pagination li { display: inline; margin: 0 3px; background: none; padding: 0; }
.pagination span.icon-angle-double-left, .pagination span.icon-angle-left,
.pagination span.icon-angle-right, .pagination span.icon-angle-double-right { display: inline; }
.pagination .icon-angle-double-left::before { content: "Začátek"; }
.pagination .icon-angle-left::before { content: "Předchozí"; }
.pagination .icon-angle-right::before { content: "Následující"; }
.pagination .icon-angle-double-right::before { content: "Konec"; }

/* systémové zprávy J6 (joomla-alert) bez Bootstrapu */
#system-message-container joomla-alert { display: block; margin: 0 0 10px 0; padding: 6px 10px; border: 1px solid #ccc; background: #f6f6f6; }
#system-message-container .joomla-alert--close { float: right; border: 0; background: none; cursor: pointer; }

/* modální okna (Bootstrap) se bez Bootstrap CSS nesmí vykreslit do stránky */
.modal:not(.show) { display: none !important; }

/* obrázky v obsahu nesmí přetéct sloupec */
td.bodymitte img { max-width: 100%; height: auto; }
/* Smart Search (mod_finder) místo mod_search z J3: pole jako .inputbox */
.mod-finder input.js-finder-search-query { border: 1px solid #444444; color: #444444; padding: 3px; font-size: 11px; width: 120px; }

/* ===== Responzivita (původní šablona má pevnou šířku 1024 px; na počítači se nic nemění) ===== */
.nav-toggle { display: none; }

/* tablet a menší okno: stránka na šířku okna, grafika záhlaví/pozadí se zmenší ve stejném poměru */
@media (max-width: 1040px) {
	table.ind-page, table.ind-page td.table_top_content, table.header_table, table.ind-main { width: 100% !important; }
	td.table_top_content { height: auto !important; background-size: 100% 100%; }
	table.header_table { height: 11.72vw; background-size: 100% 100%; }
	td.table_middle_content { background-size: 100% auto; }
	td.table_bottom_content { background-size: 100% 100%; }
	td.bodymitte { overflow-wrap: anywhere; }
	td.bodymitte iframe, td.bodymitte table, td.bodymitte embed, td.bodymitte object, td.bodymitte video { max-width: 100%; }
	input, select, textarea { max-width: 100%; box-sizing: border-box; }
}

/* mobil: sloupce pod sebou – (menu za tlačítkem), obsah, vpravo hledání a LMO; větší písmo */
@media (max-width: 760px) {
	br.ind-topbr { display: none; }
	table.ind-page, table.ind-page > tbody, table.ind-page > tbody > tr, table.ind-page > tbody > tr > td,
	table.ind-pathway, table.ind-pathway > tbody, table.ind-pathway > tbody > tr, table.ind-pathway > tbody > tr > td,
	table.ind-main, table.ind-main > tbody, table.ind-main > tbody > tr, table.ind-main > tbody > tr > td,
	table.ind-users, table.ind-users > tbody, table.ind-users > tbody > tr, table.ind-users > tbody > tr > td,
	table.ind-right, table.ind-right > tbody, table.ind-right > tbody > tr, table.ind-right > tbody > tr > td {
		display: block; width: auto !important; box-sizing: border-box;
	}
	td.table_top_content { position: relative; height: auto !important; }
	table.header_table { display: block; width: 100% !important; height: auto; aspect-ratio: 1024 / 120; background-size: 100% auto; background-repeat: no-repeat; }
	table.ind-pathway td.bodylinkstop { text-align: left; }
	tr.ind-spacer { display: none !important; }
	td.bodymitte { padding: 6px 10px !important; overflow-x: auto; }
	td.bodymitte, td.bodymitte p, td.bodymitte td, td.bodymitte li, td.bodymitte div { font-size: 14px; line-height: 1.45; }
	table.ind-users > tbody > tr > td { padding-right: 0 !important; }
	td.bodylinks { border-right: 0; padding: 4px 10px 8px !important; }
	td.bodyrechts { border-left: 0; border-top: 1px solid #8f4010; padding: 10px !important; }
	td.bodyrechts table.moduletable { width: 100%; }
	.mod-finder input.js-finder-search-query { width: 100%; font-size: 15px; padding: 6px; }
	td.ind-footer { padding: 6px 10px; }

	/* tlačítko "☰ Menu" vpravo v řádku drobečkové navigace (pod záhlavím, logo zůstane celé vidět);
	   levý sloupec (nabídky) je skrytý a po klepnutí se rozbalí */
	div#pathway { padding-right: 88px; }
	.nav-toggle {
		display: block; position: absolute; top: calc(11.72vw + 3px); right: 8px; z-index: 10;
		height: 26px; padding: 0 9px; background: #fff; border: 1px solid #8f4010; border-radius: 4px;
		cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	}
	.nav-toggle-bar { display: none; }
	.nav-toggle-text { display: block; font-size: 14px; line-height: 24px; color: #8f4010; font-weight: bold; white-space: nowrap; }
	.nav-toggle-text::before { content: "\2630\00a0"; font-weight: normal; }
	body.nav-open .nav-toggle { background: #8f4010; }
	body.nav-open .nav-toggle-text { color: #fff; }

	/* vložený obsah LMO (com_wrapper iframe) se na mobilu zmenšuje skriptem v index.php */
	div.com-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	td#leftcolumn { display: none !important; }
	body.nav-open td#leftcolumn { display: block !important; border-bottom: 1px solid #8f4010; }
	td#leftcolumn ul.mod-menu a { display: block; font-size: 15px; line-height: 1.3; padding: 7px 4px; }
	td#leftcolumn ul.mod-menu ul.mod-menu__sub a { font-size: 14px; padding: 5px 4px 5px 14px; }
}