/* ==========================================================================
   1. HLAVIČKA A NAVBAR (RESET & PRŮHLEDNOST)
   ========================================================================== */
.header {
    background-image: none !important;
    background-color: transparent !important;
}

.container-header,
.container-nav,
.navbar,
.navbar-nav,
nav.navbar,
.mod-menu {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ==========================================================================
   2. HLAVIČKA S BANNEREM A FOTKOU (Fotka vlevo, glóbus vpravo dole)
   ========================================================================== */
.header-wrapper, 
header.header {
    background-image: url('../images/object0.png'), url('../images/header.jpg') !important;
    background-position: -15px bottom, right bottom !important;  
    background-repeat: no-repeat, no-repeat !important;
    background-size: auto 100%, auto 100% !important;
    min-height: 225px !important;
    border-radius: 4px !important; 
    margin-bottom: 15px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Umístění textu v hlavičce vedle fotky */
.custom-header-brand {
    padding-top: 60px;
    padding-left: 400px;
    position: relative;
    z-index: 2;
}

.brand-title {
    font-family: 'Trebuchet MS', sans-serif !important;
    font-size: 60px !important;
    font-weight: bold !important;
    color: #F0DCBD !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.brand-slogan {
    font-family: Verdana, sans-serif !important;
    font-size: 25px !important;
    font-style: italic !important;
    padding-left: 40px; 
    color: #DACEBE !important;
    margin-top: 6px !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   3. GLOBÁLNÍ PODKLAD A STRUKTURA WEBU
   ========================================================================== */
html,
body,
body.site {
    background-color: transparent !important;
    background-image: url('../images/page.jpeg') !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
}

.site-grid,
.container-main,
.container-component {
    background-color: transparent !important;
}

.site-grid {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    max-width: 1280px;
}

/* Úprava tlačítka "Číst dál" */
.readmore .btn,
.btn-primary.readmore,
a.readmore {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 1px solid currentColor !important;
}

.readmore .btn:hover,
a.readmore:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================================================
   4. TYPOGRAFIE (Globální základ odpovídající 17px)
   ========================================================================== */
body, p, li, td, th {
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #2B231A !important;
}

/* Základní nadpisy */
h1, .h1 {
    font-family: 'Trebuchet MS', Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #4A351D !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
}

h2, .h2 {
    font-family: 'Trebuchet MS', Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: bold !important;
    color: #553D22 !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0.5rem !important;
}

h3, .h3 {
    font-family: 'Trebuchet MS', Arial, sans-serif !important;
    font-size: 19px !important;
    font-weight: bold !important;
    color: #5E4322 !important;
}

/* Doplňková metadata */
.article-info, 
.article-info dd {
    font-size: 13px !important;
    color: #6E5C49 !important;
}

/* ==========================================================================
   5. LEVÝ PANEL: MENU A CITÁTY (Elfenbein rámeček)
   ========================================================================== */
.container-sidebar-left .mod-menu,
.container-sidebar-left nav,
.container-sidebar-left .mod-articlescategory,
.container-sidebar-left .mod-articles-category,
.container-sidebar-left .mod-custom {
    border: 5px solid #E3DAC9 !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 20px !important;
    background-color: transparent !important;
}

.container-sidebar-left h2,
.container-sidebar-left h3,
.container-sidebar-left .mod-menu__title,
.container-sidebar-left .mod-articlescategory__title {
    font-family: 'Trebuchet MS', sans-serif !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #4A351D !important;
    padding-bottom: 6px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #D8CCB8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
}

.container-sidebar-left .mod-menu a {
    color: #3C2B16 !important;
    font-size: 16px !important;
    padding: 5px 8px !important;
    display: block !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(227, 218, 201, 0.5) !important;
    transition: all 0.2s ease-in-out !important;
}

.container-sidebar-left .mod-menu a:hover,
.container-sidebar-left .mod-menu li.active > a,
.container-sidebar-left .mod-menu a[aria-current="page"] {
    color: #7C511D !important;
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 3px !important;
    padding-left: 12px !important;
}

.container-sidebar-left .mod-articlescategory p,
.container-sidebar-left .mod-articles-category p {
    font-size: 16px !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    color: #3C2B16 !important;
    margin: 0 !important;
}

/* ==========================================================================
   6. DETAIL ČLÁNKU, BLOG A SEZNAMY – TITULKY & PODTITULY
   ========================================================================== */

/* Hlavní názvy článků (v detailu článku, blogu i tabulce seznamu) */
.item-page h1,
.item-page h2,
.item-page .page-header h1,
.item-page .page-header h2,
.blog .item-title,
.blog .page-header h2,
.com-content-category-blog .item-title,
.com-content-category__table .list-title a,
h2.item-title {
    font-family: 'Trebuchet MS', Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #4A351D !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
}

/* Odkazy uvnitř hlavních titulků (vynucení barvy a zrušení podtržení) */
.blog .item-title a,
.blog .page-header h2 a,
.com-content-category-blog .item-title a,
.com-content-category__table .list-title a,
h2.item-title a,
h2.item-title a span {
    font-family: 'Trebuchet MS', Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #4A351D !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* Podtržení a změna barvy pouze při najetí myší */
.blog .item-title a:hover,
.blog .page-header h2 a:hover,
.com-content-category-blog .item-title a:hover,
.com-content-category__table .list-title a:hover,
h2.item-title a:hover,
h2.item-title a:hover span {
    color: #7C511D !important;
    text-decoration: underline !important;
}

/* Zkrocení vnitřních podtitulů v těle článku i v introtextu blogu */
.item-page [itemprop="articleBody"] h1,
.item-page .com-content-article__body h1,
.blog .intro-text h1,
.blog .com-content-category-blog__item h1,
.com-content-category-blog .com-content-category-blog__item h1,
.blog article h1,
article h1 {
    font-family: 'Trebuchet MS', Arial, sans-serif !important;
    font-size: 21px !important;
    font-weight: bold !important;
    color: #553D22 !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0.4rem !important;
}

.item-page [itemprop="articleBody"] h2,
.blog .intro-text h2,
article h2 {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #5E4322 !important;
}
/* ==========================================================================
   7. VLASTNÍ ODRÁŽKY V ČLÁNCÍCH (postbullets.png)
   ========================================================================== */
article ul, 
.item-page ul,
.com-content-article ul,
.blog .intro-text ul {
    list-style: none !important;
    padding-left: 5px !important;
    margin-left: 0 !important;
}

article ul li, 
.item-page ul li,
.com-content-article ul li,
.blog .intro-text ul li {
    background-image: url('../images/postbullets.png') !important;
    background-repeat: no-repeat !important;
    background-position: 0 7px !important; /* Vertikální slícování na řádek 17px textu */
    padding-left: 20px !important;         /* Odsazení textu za dvojšipku */
    margin-bottom: 6px !important;
    line-height: 1.6 !important;
}
/* ==========================================================================
   8. IKONY V NADPISECH (vmenublockheadericon & postheadericon)
   ========================================================================== */

/* 1. Malá kulička před názvy modulů v levém panelu */
.container-sidebar-left h2::before,
.container-sidebar-left h3::before,
.container-sidebar-left .mod-menu__title::before,
.container-sidebar-left .mod-articlescategory__title::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background: url('../images/vmenublockheadericon.png') no-repeat center center !important;
    background-size: contain !important;
    margin-right: 8px !important;
    vertical-align: -1px !important;
}

/* 2. Velká hnědá kulička před názvy článků (v detailu i na blogu) */
.item-page .page-header h1::before,
.item-page .page-header h2::before,
.blog .page-header h2::before,
.blog .item-title::before,
h2.item-title::before {
    content: '' !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background: url('../images/postheadericon.png') no-repeat center center !important;
    background-size: contain !important;
    margin-right: 10px !important;
    vertical-align: -2px !important;
}
/* ==========================================================================
   9. BLOG LAYOUT – STANDARDNÍ SLOUPOVÉ USPOŘÁDÁNÍ V MAIN
   ========================================================================== */

@media (min-width: 992px) {
    /* První (vedoucí) článek přes celou šířku hlavního sloupce */
    .items-leading,
    .com-content-category-blog__items--leading,
    .com-content-category-blog__lead {
        width: 100% !important;
        margin-bottom: 25px !important;
        display: block !important;
    }

    /* Úvodní články ve 3 sloupcích uvnitř hlavního prostoru */
    .items-intro,
    .com-content-category-blog__items--intro {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 15px !important;
        margin-top: 20px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .items-intro > div,
    .items-intro > article,
    .com-content-category-blog__items--intro > div,
    .com-content-category-blog__items--intro > article {
        flex: 0 0 calc(33.333% - 10px) !important;
        max-width: calc(33.333% - 10px) !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
    }
}