/*!
Theme Name: ZUS-Pozorice
Theme URI:
Author: imagemaers.cz Jitka Turbáková & Daniel Dostál
Author URI: http://imagemakers.cz/
Description: Description
Version: 1.1.3
Text Domain: zus-pozorice
Tags:
/*--------------------------------------------------------------
## Vlastní styly
--------------------------------------------------------------*/
body {
    background-repeat: repeat;
    font-family: 'Titillium Web', sans-serif;
    color: #333; /* Změkčení barvy textu */

}

body.admin-bar .navbar.fixed-top {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .navbar.fixed-top {
        top: 46px;
    }
}

@media screen and (min-width: 783px) {
    body.admin-bar .navbar.fixed-top {
        top: 32px;
    }
}

body {
    padding-top: 80px; /* Zvětšený padding, aby menu nepřekrývalo obsah */
}

img {
    max-width: 100%;
    height: auto;
}

.navbar-nav a {
    color: #f8f9fa;
}

.navbar.navbar-dark {
    background-color: #212529; /* Tmavší pozadí navbaru */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-dark .navbar-nav {
    display: flex;
    gap: 0.75rem; /* mezera mezi položkami */
    align-items: center;
}

.navbar-dark .navbar-nav .nav-item {
    margin: 0; /* odstraníme nechtěné mezery na li */
}

/* Vyšší priorita pro navbar odkazy, aby nepřepisoval globální `a {}` */
.navbar.navbar-dark .nav-link,
.navbar.navbar-dark .navbar-brand {
    color: #f8f9fa !important;
}
    .navbar.navbar-dark .nav-link,
    .navbar.navbar-dark .navbar-brand {
        color: #f8f9fa !important;
    }

.navbar-dark .navbar-nav .nav-link {
    color: #f8f9fa !important;
    padding: 0.4rem .8rem;
    margin: 0;
    border-radius: 6px;
    transition: background-color 0.22s ease, color 0.22s ease;
    font-size: 1em; /* upraveno pro konzistenci */
    font-weight: 600;
    letter-spacing: 0.2px;
}
    .navbar-dark .navbar-nav .nav-link {
        color: #f8f9fa !important;
        padding: 0.4rem 0.9rem; /* menší vertikální padding pro kompaktnější menu */
        margin: 0;
        border-radius: 6px;
        transition: background-color 0.22s ease, color 0.22s ease;
        font-size: .8em; /* zmenšeno podle požadavku */
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    /* Strongly override global link hover/underline */
    .navbar.navbar-dark .nav-link:hover,
    .navbar.navbar-dark .nav-link:focus {
        color: #ffffff !important;
        text-decoration: none !important;
        background-color: rgba(255,255,255,0.06) !important; /* subtle highlight */
    }

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #ffffff;

}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show>.nav-link {

    color: #ffffff;
}

.navbar-dark .navbar-brand {
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
}

.dropdown-menu {
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.dropdown-menu .dropdown-item {
    padding: 0.6rem 1.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    color: #444;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: #1E88E5;
    color: #ffffff;
}

.navbar-dark .navbar-nav .dropdown-menu {
    background-color: #343a40; /* Tmavé pozadí pro dropdown */
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
    color: #f8f9fa; /* Světlý text */
}
    .navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
        color: #f8f9fa !important; /* Světlý text */
    }

    /* dropdown hover: subtle highlight, not strong blue */
    .navbar.navbar-dark .dropdown-menu .dropdown-item:hover,
    .navbar.navbar-dark .dropdown-menu .dropdown-item:focus {
        background-color: rgba(255,255,255,0.06) !important;
        color: #ffffff !important;
    }

.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: #1E88E5;
    color: #ffffff;
}

.navbar-dark {
    background-image: none;
    border-color: #080808;
}

/* Ensure fixed navbar sits above content and doesn't get overlapped */
.navbar.fixed-top {
    z-index: 1040;
}

/* Caret (dropdown arrow) visibility */
.navbar-dark .dropdown-toggle::after {
    border-top-color: #f8f9fa !important;
    border-bottom-color: #f8f9fa !important;
}

/* Make dropdown links explicit - override generic `a {}` rules */
.navbar.navbar-dark .dropdown-menu .dropdown-item {
    color: #f8f9fa !important;
}

/* Adjust body padding for small screens where the collapse takes more vertical space */
@media (max-width: 991px) {
    body {
        padding-top: 120px; /* increase to avoid overlap when mobile menu is present */
    }
}

/* --- Navbar readability & dropdown alignment fixes --- */
/* Ensure nav items are the positioning context so dropdowns align under parent */
.navbar .nav-item,
.navbar .dropdown {
    position: relative;
}

/* Force nav links color / hover behavior to override global link rules */
.navbar.navbar-dark .nav-link {
    color: #f8f9fa !important;
    background: transparent !important;
}

.navbar.navbar-dark .nav-link:hover,
.navbar.navbar-dark .nav-link:focus {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.04) !important; /* subtle highlight */
}

/* Dropdown menu: anchored under the parent, fixed width and nicer spacing */
.navbar .dropdown-menu {
    left: 0 !important; /* align to parent */
    top: calc(100% + 0.4rem) !important;
    min-width: 12rem; /* reasonable width */
    padding: 0.35rem 0 !important;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
    .navbar .dropdown-menu {
        left: 0 !important; /* align to parent */
        top: calc(100% + 0.4rem) !important;
        min-width: 12rem; /* reasonable width */
        padding: 0.5rem !important; /* add interior padding */
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    .navbar .dropdown-menu .dropdown-item {
        padding: 0.6rem 1.6rem !important; /* more horizontal padding */
        color: #f8f9fa !important;
        background: transparent;
        font-weight: 500;
    }

.navbar .dropdown-menu .dropdown-item {
    padding: 0.6rem 1.25rem !important;
    color: #f8f9fa !important;
    background: transparent;
    font-weight: 500;
}

/* Improve contrast for dropdown separators or headers if present */
.navbar .dropdown-menu .dropdown-header {
    color: rgba(255,255,255,0.85);
    padding: 0.5rem 1.25rem;
}

/* Keep mobile behavior (static) unchanged: when collapse is active, dropdown should be static flow */
@media (max-width: 991px) {
    .navbar .dropdown-menu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        box-shadow: none !important;
        background-color: #1a1a1a !important;
    }
    .navbar .dropdown-menu .dropdown-item {
        color: #fff !important;
    }
}

/* Small visual tweak: reduce heavy blue on top-level links while keeping active/hover clear */
.navbar.navbar-dark .navbar-nav .nav-link.active,
.navbar.navbar-dark .navbar-nav .nav-link.show {
    background-color: #1E88E5 !important;
    color: #fff !important;
}


/* Bootstrap 5 Cards pro archive/category */
.card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.card-img-top {
    border-radius: 8px 8px 0 0;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

.card-title a {
    color: #111;
    text-decoration: none;
    font-weight: 600;
}

.card-title a:hover {
    color: #2c5aa0;
}

.card-body {
    padding: 1.25rem;
}

.card-body .btn-primary {
    background-color: #2c5aa0;
    border-color: #2c5aa0;
}

.card-body .btn-primary:hover {
    background-color: #1e3f73;
    border-color: #1e3f73;
}

.carousel,
.slide,
.carousel .carousel-inner,
.carousel .carousel-item,
.carousel .carousel-item img,
.carousel .carousel-control {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow: hidden;
}

/* Carousel fixed height a img fill */
.carousel .carousel-inner {
    height: 450px;
}

.carousel .carousel-item {
    height: 450px;
}

.carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {

    .carousel .carousel-inner,
    .carousel .carousel-item {
        height: 300px;
    }
}

/* Bootstrap 5 carousel controls: tmavé pozadí pro lepší viditelnost na světlém pozadí */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
}

.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 0.5rem;
}

.carousel .carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(0, 0, 0, 0.3);
}

.carousel .carousel-indicators .active {
    background-color: #fff;
}

.podhlavicka {
    background-color: #DADBC0;
    padding: 4em 0 2em 0;
}

.obsah {
    margin-top: 5em;
}

.obsah h1 {
    font-weight: bold;
    color: #111;
    /* lehce tmavší nadpisy */
}

.obsah h2 {
    font-weight: bold;
    color: #111;
}

.obsah h3 {
    font-size: 1.3em;
    color: #111;
}

.obsah p {
    font-size: 1em;
}

/* Odkazy: decentní barva + zvýraznění při hoveru, bez změny layoutu */
a {
    color: #2c5aa0;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #1e3f73;
    text-decoration: underline;
}

.obsah .prispevek h2 {
    padding-bottom: .5em;
}

.sidebar {
    padding: 1.5em;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.sidebar h3 {
    margin: 0;
}

.sidebar {
    font-size: 0.85em;
}

.sidebar .pokracovani {
    text-align: right;
    font-size: 1em;
}

.aktualita {
    margin-bottom: 2.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #dee2e6;
}

.aktualita-datum {
    font-size: .9em !important;
}

.carousel {
    margin-top: 0;
    border-width: 5px;
    border-color: #fff;
    border-style: solid;
}

.obory {
    padding-top: 1em;
}

.obory a h3 {
    text-align: center;
    line-height: 1.4em;
    margin: 0;
    font-size: 1.2em;
    /*    color: #000;*/
    /*    font-weight: bold;*/
    color: #fff;
}

.obor {
    padding: 2em 1em;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.obor:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.obor a:hover {
    text-decoration: none;
}

.obor.hudebni,
.obor.hudebni a h3 {
    background-color: #E53935; /* Mírně tlumenější červená */
    font-weight: bold;
    color: #fff;
}

.obor.tanecni,
.obor.tanecni a h3 {
    color: #333;
    background-color: #FFB300; /* Tlumenější žlutá */
    font-weight: bold;
}

.obor.vytvarny,
.obor.vytvarny a h3 {
    background-color: #00897B; /* Tmavší zelená */
    color: #fff;
    font-weight: bold;
}

.obor.literarni,
.obor.literarni a h3 {
    background-color: #1E88E5; /* Světlejší modrá */
    font-weight: bold;
    color: #fff;
}

/*--- Přehrávač ---*/
.wp-playlist-caption,
.wp-playlist-item-length {
    white-space: normal !important;
    padding: 1em;
}

.wp-playlist-caption,
.wp-playlist-current-item .wp-playlist-item-artist,
.wp-playlist-current-item .wp-playlist-item-title,
.wp-playlist-item-album .wp-playlist-item-meta .wp-playlist-item-title {
    white-space: normal !important;
}

.wp-playlist-item:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e029";
    font-family: 'Glyphicons Halflings';
    float: left;
    font-size: 1em;
    margin-top: 1em;
}

/*--- Patička ---*/
.paticka {
    margin-top: 3em;
    padding: 3em 1em; /* Větší padding */
    text-align: center;
    border-top: 1px solid #e0e0e0; /* Jemnější horní linka */
    background-color: #f5f5f5; /* Světlejší pozadí */
    color: #666; /* Tmavší text pro lepší kontrast */
    width: 100%;
}

@media only screen and (max-width: 992px) {
    .obor {
        padding: .3em;
        margin-bottom: 1em;
    }
}

/* Wordpress */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Bootstrap 5 navbar responsive breakpoint */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #000;
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: 5px;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }

    .navbar .dropdown-menu {
        position: static;
        background-color: #1a1a1a;
        border: none;
    }

    .navbar .dropdown-menu .dropdown-item {
        color: #fff !important;
        padding-left: 2rem;
    }

    .navbar .dropdown-menu .dropdown-item:hover {
        background-color: #343434;
    }
}

/* Fix pro Jetpack Carousel / PhotoSwipe: zajistit, aby overlay byl nad ostatními elementy (řeší situace, kdy Bootstrap nebo motiv přepisují z-index) */
.jetpack-carousel,
.jp-carousel,
.jetpack-slideshow,
#jp-carousel,
.pswp {
    z-index: 99999 !important;
}

/* Fallback: obnovit dlaždicové rozložení galerií pokud JS/Masonry nepracuje */
.tiled-gallery {
    overflow: hidden;
}

.tiled-gallery:after {
    content: "";
    display: table;
    clear: both;
}

.tiled-gallery .tiled-gallery-item {
    float: left;
    box-sizing: border-box;
    padding: 4px;
}

/* Podpora pro klasické galerie WP (WordPress používá třídu `gallery-columns-N`) a Jetpack tiled-gallery */
.gallery.gallery-columns-2 .gallery-item,
.tiled-gallery.tiled-gallery-columns-2 .tiled-gallery-item {
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding: 4px;
}

.gallery.gallery-columns-3 .gallery-item,
.tiled-gallery.tiled-gallery-columns-3 .tiled-gallery-item {
    width: 33.3333%;
    float: left;
    box-sizing: border-box;
    padding: 4px;
}

.gallery.gallery-columns-4 .gallery-item,
.tiled-gallery.tiled-gallery-columns-4 .tiled-gallery-item {
    width: 25%;
    float: left;
    box-sizing: border-box;
    padding: 4px;
}

.gallery.gallery-columns-5 .gallery-item,
.tiled-gallery.tiled-gallery-columns-5 .tiled-gallery-item {
    width: 20%;
    float: left;
    box-sizing: border-box;
    padding: 4px;
}

/* Jednotné mezery mezi obrázky: upravitelné v jednom místě */
.gallery,
.tiled-gallery,
.wp-block-gallery {
    --gallery-gap: 8px;
}

.gallery.gallery-columns-2 .gallery-item,
.gallery.gallery-columns-3 .gallery-item,
.gallery.gallery-columns-4 .gallery-item,
.gallery.gallery-columns-5 .gallery-item,
.tiled-gallery .tiled-gallery-item,
.wp-block-gallery .blocks-gallery-image {
    padding: var(--gallery-gap);
    box-sizing: border-box;
}

/* Odstraníme defaultní marginy na figure a zajistíme, aby img vyplnil blok */
.gallery .gallery-item,
.gallery .gallery-item figure,
.tiled-gallery .tiled-gallery-item,
.wp-block-gallery .blocks-gallery-image {
    margin: 0;
}

.gallery .gallery-icon,
.tiled-gallery .gallery-icon,
.wp-block-gallery .blocks-gallery-image img {
    padding: 0;
}

.gallery .gallery-icon img,
.tiled-gallery img,
.wp-block-gallery .blocks-gallery-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Gutenberg block gallery (.wp-block-gallery) */
.wp-block-gallery .blocks-gallery-grid {
    overflow: hidden;
}

.wp-block-gallery .blocks-gallery-grid .blocks-gallery-image {
    float: left;
    box-sizing: border-box;
    padding: 4px;
}

.wp-block-gallery.columns-2 .blocks-gallery-image {
    width: 50%;
}

.wp-block-gallery.columns-3 .blocks-gallery-image {
    width: 33.3333%;
}

.wp-block-gallery.columns-4 .blocks-gallery-image {
    width: 25%;
}

/* Small screens: jedna kolona */
@media (max-width: 640px) {

    .gallery.gallery-columns-2 .gallery-item,
    .gallery.gallery-columns-3 .gallery-item,
    .gallery.gallery-columns-4 .gallery-item,
    .tiled-gallery .tiled-gallery-item,
    .wp-block-gallery .blocks-gallery-image {
        width: 100% !important;
        float: none;
    }
}

/* Bootstrap 5 navbar: zajistit správné chování collapse a dropdown */
.navbar-collapse.show {
    display: block !important;
}

.navbar .dropdown-menu {
    position: absolute;
    display: none;
}

.navbar .dropdown.show .dropdown-menu {
    display: block;
}

@media (max-width: 991px) {
    .navbar .dropdown-menu {
        position: static;
    }
}

/* Sticky footer layout using flexbox
   - body is a column flex container filling viewport height
   - the main content containers grow to fill available space
   - footer (.paticka) stays at the bottom and doesn't shrink
*/
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Make the main content area expand. Many templates use a top-level .container
   directly after header; cover common selectors so this works across templates. */
body > .container,
body > .container-fluid,
.site,
#content,
.site-content,
.wrap,
.content {
    flex: 1 0 auto;
}

/* Footer should not shrink and remain at bottom */
.paticka {
    flex-shrink: 0;
}

/* If navbar is fixed-top (as in header.php), ensure body has top padding
   to prevent content from being hidden behind the navbar. Adjust value if needed. */
body {
    padding-top: 56px; /* adjust if your navbar is larger/smaller */
}

/* Pagination */
.pagination .page-item a {
    color: #2c5aa0;
}

.pagination .page-item a:hover {
    color: #1e3f73;
}

.active > .page-link,
.page-link.active {
    z-index: 3;
    color: #fff;
    background-color: #2c5aa0;
    border-color: #2c5aa0;
}

/* Sidebar widget titles: zmenšit H4 v pravém sloupci (aktuality) */
.sidebar h4,
.sidebar .widget-title,
.sidebar .widget h4 {
    font-size: 1rem; /* menší než výchozí H4 */
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #2c5aa0; /* decentní modrá, zachovat vizuální styl */
}

/* Pokud některé widgety používají .widget-title jako blok, upravíme i jejich padding/margin */
.sidebar .widget .widget-title {
    display: block;
    margin-bottom: 0.5rem;
}

/* Responsive YouTube embeds: vždy 100% šířky kontejneru */
.wp-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}
.wp-video-container iframe,
.wp-video-container object,
.wp-video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}