/*
* dc-content.css - styly pro HTML vznikle prevodem shortcodu (convert-shortcodes.php), drevocentrum.cz / Joomla 6.
* Predloha: zive CSS Regular Labs Tabs 8.4.0 (media/tabs/css/style.min.css) a XTypo "default" (zive, 21. 10. 2026).
* Pouziti: nacist v sablone J6 (Bootstrap 5.3 + bootstrap.tab). Zadne zavislosti na doplncich tretich stran.
*/
/* ------------------------------------------------------------------------------------------------
* 1) ZALOZKY div.dc-tabs > ul.nav.nav-tabs > li > button.nav-link ... + div.tab-content > div.tab-pane
* Zive: zalozky v jedne rade (zalamuji se), kazda ma 1px sede ohraniceni, barevna ma nahore 5px pruh
* (svetla barva; aktivni/hover tmavsi), "solid" ma barevne pozadi s bilym textem (aktivni/hover tmavsi).
* Obsah ma 1px sede ohraniceni bez horni hrany, zaobleni dole 4px a vnitrni odsazeni 12px.
* Panely se NEBARVI (zive jsou barvy jen na zalozkach). Mobil: bez prepnuti na akordeon (zive take ne),
* zalozky se zalamuji na vice radku.
* ------------------------------------------------------------------------------------------------ */
.dc-tabs {
--dc-tab-link: #3071a9;
--dc-tab-link-hover: #1f496e;
--dc-tab-border: #ddd;
margin-bottom: 1em;
}
.dc-tabs:last-child { margin-bottom: 0; }
.dc-tabs > .nav-tabs {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid var(--dc-tab-border);
flex-wrap: wrap;
}
.dc-tabs > .nav-tabs > .nav-item { margin: 0 0 -1px; }
.dc-tabs > .nav-tabs .nav-link {
display: block;
margin-right: 2px;
padding: .5rem .75rem;
line-height: 1.15;
color: var(--dc-tab-link);
background: transparent;
border: 1px solid var(--dc-tab-border);
border-bottom-color: var(--dc-tab-border);
border-radius: 4px 4px 0 0;
cursor: pointer;
text-decoration: none;
transition: color .2s, background-color .2s, border-color .2s;
}
.dc-tabs > .nav-tabs .nav-link:hover { color: var(--dc-tab-link-hover); background-color: #eee; border-color: #eee #eee var(--dc-tab-border); }
.dc-tabs > .nav-tabs .nav-link:focus-visible { outline: 0; box-shadow: 0 -2px 2px rgba(234, 176, 63, .5); border-color: #eab03f; }
.dc-tabs > .nav-tabs .nav-link.active,
.dc-tabs > .nav-tabs .nav-link.active:hover {
color: #555;
background-color: #fff;
border: 1px solid var(--dc-tab-border);
border-bottom-color: transparent;
cursor: default;
}
.dc-tabs > .tab-content {
border: 1px solid var(--dc-tab-border);
border-top: 0;
border-radius: 0 0 4px 4px;
background: #fff;
}
.dc-tabs > .tab-content > .tab-pane {
padding: 12px;
overflow-x: auto;
overflow-y: hidden;
}
.dc-tabs > .tab-content > .tab-pane > :first-child { margin-top: 0; }
.dc-tabs > .tab-content > .tab-pane > :last-child { margin-bottom: 0; }
/* barevne zalozky (svetly pruh nahore; aktivni/hover tmavsi) */
.dc-tabs .nav-link[class*="dc-tab--"]:not(.dc-tab--solid) {
border-top-width: 5px;
padding-top: calc(.5rem - 4px);
}
.dc-tabs .nav-link.dc-tab--blue { --dc-c: #74b4e8; --dc-c-dark: #2384d3; }
.dc-tabs .nav-link.dc-tab--green { --dc-c: #62bc62; --dc-c-dark: #378137; }
.dc-tabs .nav-link.dc-tab--orange { --dc-c: #faa937; --dc-c-dark: #c67605; }
.dc-tabs .nav-link.dc-tab--red { --dc-c: #d3534c; --dc-c-dark: #942a25; }
.dc-tabs .nav-link.dc-tab--grey { --dc-c: #b3b3b3; --dc-c-dark: #808080; }
.dc-tabs .nav-link.dc-tab--info { --dc-c: #47b0cf; --dc-c-dark: #24748c; }
.dc-tabs .nav-link[class*="dc-tab--"]:not(.dc-tab--solid) { border-top-color: var(--dc-c); }
.dc-tabs .nav-link[class*="dc-tab--"]:not(.dc-tab--solid).active,
.dc-tabs .nav-link[class*="dc-tab--"]:not(.dc-tab--solid):hover { border-top-color: var(--dc-c-dark); }
/* "solid": barevne pozadi a bily text */
.dc-tabs .nav-link.dc-tab--solid {
background-color: var(--dc-c, #777);
border-color: var(--dc-c, #777);
color: #fff;
}
.dc-tabs .nav-link.dc-tab--solid:hover,
.dc-tabs .nav-link.dc-tab--solid.active,
.dc-tabs .nav-link.dc-tab--solid.active:hover {
background-color: var(--dc-c-dark, #555);
border-color: var(--dc-c-dark, #555);
color: #fff;
}
/* solid bez barvy: fallback sede pozadi (#777 / #555), aby bily text nebyl na pruhledne */
@media (prefers-reduced-motion: reduce) {
.dc-tabs .nav-link { transition: none; }
}
@media print {
.dc-tabs > .nav-tabs { display: none; }
.dc-tabs > .tab-content { border: 0; }
.dc-tabs > .tab-content > .tab-pane { display: block !important; opacity: 1 !important; }
}
/* ------------------------------------------------------------------------------------------------
* 2) GALERIE div.dc-gallery > figure > a > img (nahrazuje jw_sig, nahledy 360x240 = pomer 3:2)
* ------------------------------------------------------------------------------------------------ */
.dc-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
gap: 8px;
margin: 1em 0;
}
.dc-gallery figure { margin: 0; }
.dc-gallery a { display: block; line-height: 0; overflow: hidden; border-radius: 2px; }
.dc-gallery img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
transition: transform .2s;
}
.dc-gallery a:hover img,
.dc-gallery a:focus-visible img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .dc-gallery img { transition: none; } }
/* ------------------------------------------------------------------------------------------------
* 3) KONTAKT div.dc-contact (nahrazuje DGcontactinfo; uvnitr je puvodni sablona z clanku, typicky tabulka)
* ------------------------------------------------------------------------------------------------ */
.dc-contact { margin: 0 0 1em; }
.dc-contact table { max-width: 100%; }
.dc-contact img.contactIcon { max-width: 100%; height: auto; }
.dc-contact a { overflow-wrap: anywhere; }
/* ------------------------------------------------------------------------------------------------
* 4) CITAT blockquote.dc-quote (nahrazuje xtypo_quote; zive: sede pozadi, kurziva, Georgia, zaobleni 10px)
* ------------------------------------------------------------------------------------------------ */
.dc-quote {
position: relative;
margin: 20px 0;
background: #f5f5f5;
border-radius: 10px;
border: 0;
color: #666;
font-family: Georgia, serif;
font-size: 1.5em;
font-style: italic;
text-shadow: 0 1px 0 #fff;
}
.dc-quote::before {
content: "\201C";
position: absolute;
left: 18px;
top: 6px;
font-size: 2.4em;
line-height: 1;
color: #bbb;
font-style: normal;
}
.dc-quote p { margin: 0; padding: 20px 20px 20px 60px; }
.dc-quote small { display: block; margin: 10px 0; font-size: 90%; line-height: 20px; color: #999; }
.dc-quote small::before { content: "\2014 \00A0"; }
.dc-quote--left { float: left; width: 50%; margin: 20px 20px 20px 0; }
.dc-quote--right { float: right; width: 50%; margin: 20px 0 20px 20px; }
@media (max-width: 575.98px) {
.dc-quote--left, .dc-quote--right { float: none; width: auto; margin: 20px 0; }
}
/* ------------------------------------------------------------------------------------------------
* 5) Ostatni XTypo znacky (v datech zatim nejsou; pro budouci pouziti prevodniku)
* ------------------------------------------------------------------------------------------------ */
.dc-note { margin: 1em 0; padding: .75rem 1rem; border-left: 4px solid #999; background: #f5f5f5; }
.dc-note--info, .dc-note--feed { border-color: #47b0cf; background: #eaf6fa; }
.dc-note--alert, .dc-note--warning { border-color: #faa937; background: #fef3e0; }
.dc-note--sticky { border-color: #eab03f; background: #fffbe6; }
.dc-note--download { border-color: #62bc62; background: #eef8ee; }
.dc-code { display: block; padding: .5rem .75rem; background: #f5f5f5; font-family: monospace; white-space: pre-wrap; }
.dc-dropcap { float: left; margin: 0 .1em 0 0; font-size: 3em; line-height: .9; }
.dc-xbutton { display: inline-block; margin: .5em 0; padding: .4em 1em; background: #1d6138; color: #fff; border-radius: 3px; }
.dc-box { margin: 1em 0; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; }
.dc-box--left, .dc-list--left { float: left; width: 50%; margin-right: 20px; }
.dc-box--right, .dc-list--right { float: right; width: 50%; margin-left: 20px; }
.dc-list { margin: 1em 0; }