/* =============================================
   od Černé perly 5 - Template CSS
   Věrná replika Artisteer šablony od_cerne_perly3
   Joomla 5 compatible (mod-menu třídy)
   ============================================= */

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #4C3327 url('../images/page.jpeg') top center no-repeat scroll;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    color: #ECCBA7;
    min-width: 320px;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li {
    margin: 0;
    padding: 0;
}

ul { list-style-type: none; }
ol { list-style-position: inside; }
img { max-width: 100%; height: auto; }

a { color: #B5825E; text-decoration: none; }
a:hover { color: #C6955D; text-decoration: underline; }

/* --- Hlavní kontejner --- */
#art-main {
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 900px;
}

/* =============================================
   NAVIGACE (art-nav) - hnědý gradient
   ============================================= */
.art-nav {
    padding: 6px 0;
    margin: 0 auto;
    position: relative;
    z-index: 499;
    text-align: center;
    background: none;
    width: 100%;
}

#art-hmenu-bg {
    display: block;
    box-sizing: border-box;
}

/* =============================================
   JOOMLA 5 MENU - třídy mod-menu / nav-item
   ============================================= */

/* Hlavní ul */
ul.mod-menu {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    min-height: 0;
}

ul.mod-menu::after {
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}

/* Položky první úrovně */
ul.mod-menu > li.nav-item {
    position: relative;
    z-index: 5;
    display: block;
    float: left;
    background: none;
    margin: 0;
    padding: 0;
    border: 0;
}

ul.mod-menu > li.nav-item:hover {
    z-index: 10000;
    white-space: normal;
}

/* Oddělovač (menuseparator.png) mezi položkami */
ul.mod-menu > li.nav-item::before {
    position: absolute;
    display: block;
    content: ' ';
    top: 0;
    left: -7px;
    width: 7px;
    height: 39px;
    background: url('../images/menuseparator.png') center center no-repeat;
}
ul.mod-menu > li.nav-item:first-child::before {
    display: none;
}

/* Odkaz první úrovně */
ul.mod-menu > li.nav-item > a {
    border-radius: 3px;
    padding: 0 17px;
    margin: 0 auto;
    position: relative;
    display: block;
    height: 39px;
    cursor: pointer;
    text-decoration: none;
    color: #ECCBA7;
    line-height: 39px;
    text-align: center;
    font-size: 16px;
    font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(23, 23, 23, 0.98);
}

ul.mod-menu > li.nav-item > a:hover,
.desktop ul.mod-menu > li.nav-item:hover > a {
    color: #B5825E;
    text-decoration: none;
}

ul.mod-menu > li.nav-item > a.active,
ul.mod-menu > li.nav-item.active > a,
ul.mod-menu > li.nav-item.current > a {
    color: #ECCBA7;
}

/* Separator (parent bez odkazu - Naši psi, Štěňata) */
ul.mod-menu > li.nav-item > span.mod-menu__separator {
    border-radius: 3px;
    padding: 0 17px;
    display: block;
    height: 39px;
    cursor: pointer;
    color: #ECCBA7;
    line-height: 39px;
    text-align: center;
    font-size: 16px;
    font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(23, 23, 23, 0.98);
}

.desktop ul.mod-menu > li.nav-item:hover > span.mod-menu__separator {
    color: #B5825E;
}

/* =============================================
   SUBMENU (mod-menu__sub)
   ============================================= */

/* Submenu skryto ve výchozím stavu */
ul.mod-menu__sub {
    visibility: hidden;
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Tmavé pozadí submenu */
ul.mod-menu__sub::before {
    background: #4C3327;
    border-radius: 3px;
    border: 1px solid rgba(111, 74, 57, 0.9);
    margin: 0 auto;
    display: block;
    position: absolute;
    content: ' ';
    z-index: 1;
    top: 10px;
    right: 30px;
    bottom: 30px;
    left: 30px;
}

/* Zobrazení submenu na hover (desktop) */
.desktop ul.mod-menu > li.nav-item:hover > ul.mod-menu__sub {
    visibility: visible;
    top: 100%;
}

.desktop ul.mod-menu > li.nav-item > ul.mod-menu__sub {
    padding: 16px 36px 36px 36px;
    margin: -10px 0 0 -30px;
}

/* Položky submenu */
ul.mod-menu__sub > li {
    float: none;
    width: auto;
    margin-top: 2px;
    margin-bottom: 2px;
    position: relative;
}

ul.mod-menu__sub > li::after {
    display: block;
    position: absolute;
    content: ' ';
    height: 0;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    border-bottom: 1px solid #6F4A39;
}

ul.mod-menu__sub > li:first-child::before,
ul.mod-menu__sub > li:first-child::after {
    display: none;
}

/* Odkaz submenu */
ul.mod-menu__sub > li > a {
    display: block;
    white-space: nowrap;
    height: 26px;
    min-width: 7em;
    border: 0 solid transparent;
    text-align: left;
    line-height: 26px;
    color: #ECCBA7;
    font-size: 13px;
    font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif;
    text-decoration: none;
    margin: 0;
    position: relative;
    z-index: 2;
    padding: 0 10px;
    border-radius: 3px;
}

ul.mod-menu__sub > li > a:hover,
.desktop ul.mod-menu__sub > li:hover > a {
    color: #B5825E;
    text-decoration: none;
}

/* Mobilní toggle tlačítko */
#mobile-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid #ECCBA7;
    color: #ECCBA7;
    font-size: 22px;
    padding: 4px 14px;
    cursor: pointer;
    margin: 4px 8px;
    line-height: 1;
}

/* =============================================
   HEADER - grafický obrázek 900x450
   ============================================= */
.art-header {
    margin: 0 auto;
    height: 450px;
    background-image: url('../images/header.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 900px 450px;
    position: relative;
    width: 100%;
    max-width: 900px;
    z-index: auto !important;
    display: block;
    box-sizing: border-box;
}

/* =============================================
   OBSAHOVÁ PLOCHA (art-sheet)
   ============================================= */
.art-sheet {
    margin: 0 auto;
    position: relative;
    cursor: auto;
    width: 100%;
    max-width: 900px;
    z-index: auto !important;
    background: none;
    display: block;
    box-sizing: border-box;
}

.art-sheet::before {
    width: 100%;
    content: " ";
    display: table;
}

.art-sheet::after {
    clear: both;
    font: 0/0 serif;
    display: block;
    content: " ";
}

.art-layout-wrapper {
    position: relative;
    margin: 0 auto;
    z-index: auto !important;
}

.art-content-layout,
.art-content-layout-row {
    display: block;
    width: 100%;
}

.art-layout-cell {
    display: block;
    box-sizing: border-box;
}

.art-content {
    width: 100%;
    padding: 20px 5px;
}

.art-sidebar1 {
    width: 220px;
    padding: 20px 15px;
    float: right;
}

/* Obsah článku - serif font, hnědé nadpisy */
.art-postcontent,
.art-postcontent li,
.art-postcontent table {
    font-size: 15px;
    font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif;
    text-align: justify;
    line-height: 150%;
    color: #ECCBA7;
}

.art-postcontent p { margin: 3px 0; }

.art-postcontent a,
.art-postcontent a:link { color: #B5825E; text-decoration: none; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif; }
.art-postcontent a:visited { color: #B5825E; text-decoration: none; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif; }
.art-postcontent a:hover { color: #C6955D; text-decoration: underline; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif; }

.art-postcontent h1 { color: #B5825E; margin: 12px 0; font-size: 26px; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif; }
.art-postcontent h2 { color: #B5825E; margin: 12px 0; font-size: 24px; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif; }
.art-postcontent h3 { color: #B5825E; margin: 12px 0; font-size: 22px; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif; }
.art-postcontent h4 { color: #B5825E; margin: 12px 0; font-size: 20px; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif; }
.art-postcontent h5 { color: #B5825E; margin: 12px 0; font-size: 18px; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif; }
.art-postcontent h6 { color: #B5825E; margin: 12px 0; font-size: 16px; font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif; }

.art-postcontent ul { list-style: none; margin: 6px 0 6px 20px; }
.art-postcontent ul li {
    background: url('../images/postbullets.png') 0 center no-repeat;
    padding-left: 14px;
    margin: 2px 0;
}

/* Nadpis stránky (Joomla com_content) */
.com-content-article .page-header h1,
.item-page .page-header h1 {
    color: #B5825E;
    font-size: 26px;
    font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif;
    font-weight: normal;
    margin: 0 0 12px 0;
    padding: 0 0 6px 0;
    border-bottom: 1px solid #e0d0c0;
}

/* Metadata článku */
.article-info {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

/* Joomla system messages */
.alert { padding: 10px 15px; margin: 10px 0; border-radius: 3px; }
.alert-message, .alert-info { background: #f0e8e0; border-left: 4px solid #B5825E; color: #333; }
.alert-warning { background: #fff3cd; border-left: 4px solid #856404; color: #333; }
.alert-error { background: #f8d7da; border-left: 4px solid #842029; color: #333; }

/* =============================================
   PATIČKA (art-footer)
   ============================================= */
.art-footer {
    background: #CFD8E2 url('../images/footer.png') top center no-repeat scroll;
    background-size: cover;
    margin: 0 auto;
    position: relative;
    color: #ECCBA7;
    font-size: 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 175%;
    text-align: center;
    padding: 0;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
}

.art-footer::before {
    width: 100%;
    content: " ";
    display: table;
}

.art-footer::after {
    clear: both;
    font: 0/0 serif;
    display: block;
    content: " ";
}

.art-footer-inner {
    padding: 20px 20px 10px;
    min-height: 80px;
}

.art-footer-copyright {
    color: #ECCBA7;
    font-size: 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
    padding: 10px 0;
}

.art-footer a,
.art-footer a:link,
.art-footer a:visited,
.art-footer a:hover {
    color: #B5825E;
    font-size: 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    letter-spacing: 3px;
}

/* =============================================
   RESPONZIVITA
   ============================================= */
@media (max-width: 900px) {
    #art-main {
        width: 100%;
        max-width: 100%;
    }

    /* Header: proporcionální zmenšení (450/900=50%) */
    .art-header {
        height: 0;
        padding-bottom: 50%;
        background-size: contain;
        background-position: top center;
        width: 100%;
        max-width: 100%;
    }

    .art-sheet,
    .art-footer {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* Hamburger button viditelný */
    #mobile-nav-toggle {
        display: block;
    }

    .art-nav {
        padding: 4px 0;
    }

    /* Menu skryté ve výchozím stavu */
    .art-nav ul.mod-menu {
        display: none;
        width: 100%;
    }

    /* Zobrazení po kliknutí */
    .art-nav.nav-open ul.mod-menu {
        display: block;
    }

    ul.mod-menu > li.nav-item {
        float: none;
        display: block;
        width: 100%;
    }

    ul.mod-menu > li.nav-item::before {
        display: none;
    }

    ul.mod-menu > li.nav-item > a,
    ul.mod-menu > li.nav-item > span.mod-menu__separator {
        height: auto;
        line-height: 1.4;
        padding: 10px 16px;
        text-align: left;
        display: block;
        border-bottom: 1px solid #6F4A39;
    }

    /* Submenu vždy viditelné na mobilu */
    ul.mod-menu__sub {
        visibility: visible !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        background: rgba(54, 36, 28, 0.95);
        padding: 0 !important;
        margin: 0 !important;
    }

    ul.mod-menu__sub::before {
        display: none;
    }

    ul.mod-menu__sub > li {
        float: none;
        display: block;
    }

    ul.mod-menu__sub > li > a {
        white-space: normal;
        height: auto;
        line-height: 1.4;
        padding: 8px 16px 8px 32px;
    }

    .art-content {
        padding: 15px;
    }

    .art-sidebar1 {
        width: 100%;
        float: none;
    }
}

/* =============================================
   JOOMLA DOPLŇKOVÉ STYLY
   ============================================= */
.art-post {
    position: relative;
    margin-bottom: 0;
}

/* Pagination */
.pagination {
    text-align: center;
    padding: 10px 0;
    list-style: none;
}

.pagination li { display: inline; margin: 0 2px; }

/* Table styles */
.art-postcontent table {
    border-collapse: collapse;
    margin: 6px 0;
    width: 100%;
}

.art-postcontent table td,
.art-postcontent table th {
    padding: 5px 8px;
    font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif;
}

/* Tlačítka - class="button" z Joomla obsahu (odchov profilů apod.), stejný vzhled jako v J3 šabloně */
.button,
a.button,
a.button:link,
a.button:visited,
input.button,
button.button {
    display: inline-block;
    vertical-align: middle;
    box-sizing: content-box;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Palatino Linotype', Georgia, 'Times New Roman', Times, serif;
    font-weight: normal;
    font-style: normal;
    line-height: 31px;
    color: #ECCBA7;
    background: linear-gradient(180deg, #54382B 0%, #764F3D 15%, #5B3D2F 50%, #36241C 50%, #4D3428 100%) no-repeat;
    border: 1px solid #3D291F;
    border-radius: 4px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
    padding: 0 20px;
    margin: 0 5px 0 0;
}

.button:hover,
a.button:hover {
    color: #ECCBA7;
    background: linear-gradient(180deg, #432D23 0%, #654434 15%, #4A3226 50%, #251913 50%, #3D291F 100%) no-repeat;
}

/* Obrázky */
.art-postcontent img { margin: 7px; }

/* Clearfix */
.cleared,
.clearfix::after {
    clear: both;
    font: 0/0 serif;
    display: block;
    content: " ";
}


/* =============================================
   ÚVODNÍ ROZCESTNÍK (intro splash - CZ/EN vlajky)
   fullpage, bez menu a headeru - jako originál
   ============================================= */
body.intro-splash {
    background: #39271D url('../images/intro-page.jpeg') top center no-repeat scroll;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
body.intro-splash #art-main {
    background: none;
    max-width: 900px;
    margin: 0 auto;
    min-height: 100vh;
}
.art-intro-wrapper {
    text-align: center;
}
.art-intro-wrapper img { border: 0; vertical-align: middle; }
.art-intro-wrapper a { text-decoration: none; }
.art-intro-flags {
    margin: 140px 0 70px 0;
    text-align: center;
}
.art-intro-copyright {
    margin: 320px 0 40px 0;
    text-align: center;
    color: #ECCBA7;
    font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif;
    font-size: 13px;
}
.art-intro-copyright a { color: #B5825E; }

/* Responzivní rozcestník */
@media (max-width: 768px) {
    body.intro-splash { background-size: cover; }
    .art-intro-flags { margin: 60px 0 40px 0; }
    .art-intro-copyright { margin: 120px 0 30px 0; }
    .art-intro-flags img { max-width: 38%; height: auto; }
    .art-intro-space { display: none; }
}