﻿/* -----------------------------------------------------------------------------

    This file should be used to add your own CSS definitions or override
	the existing ones.

----------------------------------------------------------------------------- */

	/* FONT */
	/* body { font-family: 'insert-font-family-name-here', 'Arial', sans-serif; } */

	/* STANDARD LOGO DIMENSIONS */
	.header-branding img { width: 140px; }

	/* LARGE LOGO DIMENSIONS */
	.header-branding.m-large-logo img { width: 200px; }
	/* Scroll down to "MEDIUM DEVICES" to change width of large logo on mobile devices */

	/* your CSS here */


/* -----------------------------------------------------------------------------

    RESPONSIVE DEFINITIONS

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        LARGE DEVICES
		devices with width between 992px and 1199px
    ------------------------------------------------------------------------- */

/* TODO: TEST */
    @media ( min-width: 1200px ) {

		/* your CSS here */
                /* [JV] - 15.05.20524 - Test: */
                .image-layer {background-image: url( '../../images/header-01.jpg' );}
                .image-layer.l1 {background-image: url( '../../images/header-02.jpg' );}

	}
    
    @media ( max-width: 1199px ) {

		/* your CSS here */
                /* [JV] - 15.05.20524 - Obrázek na pozadí / Logo: */
                .image-layer {background-image: url( '../../images/header-01.jpg' );}
	}

    /* -------------------------------------------------------------------------
        MEDIUM DEVICES
		devices with width between 768px and 991px
    ------------------------------------------------------------------------- */

    @media ( max-width: 991px ) {

		/* LARGE LOGO DIMENSIONS */
		.header-branding.m-large-logo img { width: 140px; }

		/* your CSS here */
                /* [JV] - 15.05.20524 - Obrázek na pozadí / Logo: */
                .image-layer {background-image: url( '../../images/header-01.jpg' );}
                .header-branding img {float: left;}
                
	}

	/* -------------------------------------------------------------------------
        SMALL DEVICES
		devices with width between 481px and 767px
    ------------------------------------------------------------------------- */

    @media ( max-width: 767px ) {

		/* your CSS here */
                /* [JV] - 15.05.20524 - Obrázek na pozadí / Logo: */
                .image-layer {background-image: url( '../../images/header-01-do-767.jpg?ver=2' );  
                              -webkit-mask-image: linear-gradient(to top, transparent 1%, black 50%);
                              mask-image: linear-gradient(to top, transparent 1%, black 50%);}
                .image-layer.l1 {background-image: url( '../../images/header-02-do-767.jpg' );}
                .header-branding img {display: none;}
                .header-image .image-layer {height: 350px; /*background-size: contain;*/}
                }

	/* -------------------------------------------------------------------------
        EXTRA SMALL DEVICES
		devices with width up to 480px
    ------------------------------------------------------------------------- */

    @media ( max-width: 480px ) {

		/* your CSS here */
                /* [JV] - 15.05.20524 - Obrázek na pozadí / Logo: */
                .image-layer {background-image: url( '../../images/header-01-do-480.jpg' );}
                .header-branding img {display: none;}
	}
    
    /* [JV] 12.03.2023 - Přidáno: */
    #nette-debug {
            z-index: 20;
    }
    
    .neviditelny {
            background-color: #ddd5d5;
    }
    
    /* [JV] 15.03.2023 - Přidáno nastylování formuláře: */
    fieldset {
        border: 1px solid; 
        color: #f2f2f2; 
        padding: 10px;
    }

    fieldset legend {
        font-weight: bold;
        color: #003a9f; 
        text-transform: none;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 5px;
        margin: 0px;
    }

    form input, textarea, select {
        margin-bottom: 14px;
    }

    .mce-tinymce.mce-container.mce-panel {
        margin-bottom: 14px;
    }
    
    form input[type="submit"] {
        margin-top: 5px;
    }

    form input[type="checkbox"] {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    /* inline kvůli checkboxům, aby byly v jednom řádku s labelem */
    form label {
        display: inline;
    }
    
    .required label:after {
      content: ' *';
      color: red;
    }

    /* [JV] 16.03.2023 - Přidáno nastylování kalendářových události ve widgetu */
    .event-day.dnes {
      background-color: #f9e423 !important;;
    }

    .event-day.zitra {
      background-color: #f3eb9e !important;;
    }
    
    .vpravo {
        float: right;
    }
    
    /* [JV] 20.03.2023 - Videogalerie */
    .row.display-flex {
        display: flex;
        flex-wrap: wrap;
    }
    .row.display-flex > [class*='col-'] {
        flex-grow: 1;
    }
    
    #page-header {
      background-color: rgba(0,58,159,0.6) !important;
      font-weight: normal !important;
    }
    
    #page-header, h1 {
      font-weight: normal !important;
    }
    
    /* [JV] 22.03.2023 - Využívá se na formuláři při validaci - chyby, povinná pole.. */  
    ul.error {
        background: #d40041;
        color: #fff;
        padding: 10px 10px 10px 20px;
    }
    
    /* [JV] 16.04.2023 - HotFix YT videí v novinkách - .embed-media má Margin-Bottom 24px, tudíž nelícuje s ostatními fotkami ... */
    .embed-media {
        margin-bottom: 0px !important;
    }
    
    /* [JV] 22.04.2023 - HotFix velikostí fotek/youtube v novinkách ... */
    .c-post-list .post-core {
        /*min-height: 155px;*/ /* [JV] 24.03.2024 - Zakomentováno, bude jen max. výška. */
        max-height: 155px;
        overflow: hidden;
        /*background-color: lavender;*/
        padding: 0 15px;
    }

    .c-post-list .post-image {
        object-fit: cover;
        object-position: center;
        aspect-ratio: 546 / 315;
        overflow: visible;
        margin-bottom: 0px;
    }
    
    /* [JV] 24.03.2024 - HotFix větší mezery v novinkách pod obrázkem (mezi obrázkem s odkazem a textem pod ním - zapřičinilo "vynechání" obsazení pod touto novinkou) */
    .c-post-list .post-image a {
        margin-bottom: 0px !important;
    }
    
    .c-post-list .post-excerpt {
        margin-top: 5px !important;
    }

    /* [JV] 17.03.2024 - Test */
    .jv-image-container {
      position: relative; /* Nutné pro absolutní pozicování obrázku */
      width: 100%; /* Šířka DIVu bude 100% rodičovského prvku */
      padding-bottom: 56.25%; /* Poměr 16:9 (výška / šířka) */
      overflow: hidden; /* Skryje případné přetečení obrázku */
    }

    .jv-image-container img {
      position: absolute; /* Obrázek bude absolutně pozicován uvnitř DIVu */
      top: 50%; /* Posuneme obrázek o 50% vzhůru (na střed) */
      left: 50%; /* Posuneme obrázek o 50% doleva (na střed) */
      transform: translate(-50%, -50%); /* Ustředíme obrázek na střed */
      width: 100%; /* Obrázek bude plně vyplňovat DIV */
      height: auto; /* Výška se automaticky přizpůsobí zachování poměru 16:9 */
    }  
    
    /* [JV] 20.06.2023 - Box s editačními nástroji  */
    .toolbox-edit {
        float: right;
        background-color: #f3eb9e;
        clear: both;
        padding-bottom: 2px;
        margin-bottom: -10%;
        border-bottom-left-radius: 10px 10px;
        position: sticky;
        z-index: 99999;
    }
    .toolbox-edit:hover {
        filter: brightness(95%);        
    }
    
    .toolbox-edit i {
        padding-right: 3px;
        margin: auto;
    }
    .toolbox-edit ul {
        padding: 0px;
        margin-bottom: 5px;
    }
    .toolbox-edit li {
        display: inline-block;
        width: auto;
        list-style: outside none none;
        padding-left: 5px;
        padding-right: 5px;
    }
    .toolbox-edit a:hover {
        font-weight: bold;
    }
    
    /* [JV] 23.06.2023 - IsBusy indikátor */
    #IsBusyIndicator {
        background: rgba(0,0,0,.9) url('../../images/isbusy.gif') no-repeat;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 500px;
        z-index: 999;
        color: #ffffff;
        font-size: 30px;
        visibility: hidden;
    }
    
    /* [JV] 29.04.2024 - Styl pro novinky */
    /*
    Flexi Bootstrap - The Missing Bootstrap Thumbnail Demos
    Author : Bryan Willis
    Working Demos of Equal Height Flexbox and Tables as well as Masonary Thumbnails in Bootstrap 3. See the Github repo for complete version supporting legacy browser fallback.
    */
    /* EXAMPLE 1 - BOOTSTRAP FLEXBOX
       - Equal Height Columns in Rows
       - Equal Height Thumbnails
       - Flex Grow to Fill Paragraph Height
    */

    /* Flexbox Equal Height Bootstrap Columns (fully responsive) */
    @media only screen and (min-width : 481px) {
      .flex-row.row {
        display: flex;
             flex-wrap: wrap;
      }
      .flex-row.row > [class*='col-'] {
        display: flex;
        flex-direction: column;
        /* [JV] FixUp: */
        padding: 5px;       
      }
      .flex-row.row:after, 
      .flex-row.row:before {
             display: flex;
      }
      .flex-row.row > [class*='col-'] > .box {
        display: flex;
             flex: 1;
      }
    }

    /* Grow thumbnails to fill columns height */
    .flex-row .thumbnail,
    .flex-row .caption {
            display: flex;
            flex: 1 0 auto;
            flex-direction: column;
    }

    /* Flex Grow Text Container */
    .flex-row .caption p.flex-text {
            flex-grow: 1;
            /* [JV] FixUp: */
            margin: 5px;
    }

    /* Flex Responsive Image */
    .flex-row img {
            width: 100%;
            /* [JV] FixUp: height: auto->155->181 (kvůli výšce YouTube náhledu, při výšce < 181 způsobí rozmazání)
            /*height: auto;*/
            height: 181px;
            object-fit: cover; /* TODO? */
    }
    /* [JV] FixUp: - srovnání výšky obrázků a LINK obrázků */
    .flex-row a, .yt {
        height: 181px; 
        overflow: hidden;
    }
    
    .flex-row .thumbnail p {
        margin-bottom: 6px;
    }

    /* [JV] 08.05.2024 - Skrytí standardního vyhledávacího prvku Google Search - používám jen result */
    #___gcse_0 {
        visibility: hidden;
    }
    
    /* [JV] 02.06.2024 - Editační toolbar pro otáčení obrázků fotogalerie */
    .toolbar-picture-edit {
        display: none;
        position: absolute;
        top: 2px;
        z-index: 100;
        background-color: white;
        padding: 5px;
    }   
    .toolbar-picture-edit a {
        margin: 5px;
    }
    .gallery-image:hover .toolbar-picture-edit{
        display: block;
    }
    
    /* [JV] 03.01.2025 - Podpora pro zobrazit více/méně - použití: Aktuality, Videogalerie */
    .show-more {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 12; /* Zobrazit jen prvních 12 řádků */
    }
    .show-more-button {
        /*font-weight: bold;*/
        color: #003a9f;
        padding: 3px 6px 3px 6px;
        background-color: #f3eb9e;
        clear: both;
    }
    .show-more-button i {
        padding-left: 2px;
    }