/*
Theme Name: Kadence Child
Theme URI: https://knihovna.cz
Description: Moje podřízená šablona pro Kadence Threme
Author: Váš Jméno
Author URI: https://knihovna.cz
Template: kadence 
Version: 1.0.0
*/

/* ==========================================================
   PDF EMBEDDER
   ========================================================== */

.pdf-embed {
    width: 100%;       /* Roztáhne kontejner na celou šířku */
    height: 100vh;      /* Nastaví výšku přesně na 100 % výšky obrazovky */
    margin: 0;          /* Odstraní případné okraje */
    display: block;     /* Zajistí, že se prvek chová jako blok */
}

/* ==========================================================
   SKRYTÍ HORNÍ MEZERY/TITULKU NA HOMEPAGE PO AKTUALIZACI
   ========================================================== */

/* 1. Skryje celou standardní Page Header sekci */
.home .page-header {
    display: none !important;
}

/* 2. Skryje kontejner nadpisu (i když je prázdný) */
.home .entry-header {
    display: none !important;
}

/* 3. Nuluje horní padding na hlavním obalu obsahu (odstraňuje volné místo nahoře) */
.home .entry-content-wrap {
    padding-top: 0 !important;
}

/* 4. Cílí na obal hlavního obsahu, který má často nastavené vysoké mezery (margin/padding) */
.home .content-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 5. Cílí na nejvyšší sekci, která často vytváří volné místo (pouze na desktopu) */
@media (min-width: 1025px) {
    .home #primary {
        padding-top: 0 !important;
    }
}

/* =======================================================================
   POST TEMPLATE 
   ======================================================================= */

/* ====================================
   1. Kontejner a Flexbox na post template
   ==================================== */
.vertical-style-wrapper {
    display: flex; 
    flex-wrap: wrap; 
    /* Oprava překlepu: align-itrems -> align-items */
    align-items: flex-start; 
    min-height: 80vh;
    
    /* Omezení šířky a vycentrování */
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto;
    padding: 0 20px; 
}

/* ====================================
   2. Levý Sloupec (Titulek, Obrázek, Čára) na post template
   ==================================== */
.left-content-area {
    width: 30%; 
    padding-right: 40px; 
    box-sizing: border-box;
    align-self: stretch;
    
    /* Svislá čára: 3px, primární barva */
    border-right: 3px solid var(--global-palette2, #3183aa); 
}

/* Nadpis: Zarovnání Vpravo */
.left-content-area .entry-header {
    text-align: right; 
    margin-top: 0;
}

/* Selektor pro skutečný nadpis h1/h2 */
.left-content-area .entry-header .entry-title {
    /* ✅ ZMĚNA: Původní 3rem * 1.30 = 3.9rem */
    font-size: 2.5rem; 
}

/* 3. Náhledový obrázek (Featured Image) */
.left-content-area .post-featured-image {
    /* ✅ Větší odsazení (mezera) mezi nadpisem a obrázkem */
    margin-top: 40px; 
    
    /* Zaoblení obrázku (Radius) - Horní levý: 40px, Horní pravý: 0, Spodní pravý: 40px, Spodní levý: 40px */
    border-radius: 40px 0 40px 40px; 
    /* Oprava překlepu: elrementu -> elementu */
    overflow: hidden; 
    
    max-width: 100%;
    height: auto;
}

/* Stylování skutečného <img> elementu, aby přijal radius */
.left-content-area .post-featured-image img {
    display: block;
    width: 100%;
    height: auto;
}


/* ====================================
   4. Pravý Sloupec (Obsah)
   ==================================== */
.right-content-area {
    width: 70%;
    padding-left: 40px; 
    box-sizing: border-box;
    
    /* ✅ Nastavení velikosti písma pro celý obsah */
    font-size: 1.15rem; 
}


/* ====================================
   5. Responzivní úpravy pro mobily
   ==================================== */
@media (max-width: 768px) {
    .vertical-style-wrapper {
        flex-direction: column; 
        max-width: 100%; 
        padding: 0 15px; 
    }
    .left-content-area, .right-content-area {
        width: 100%;
        border-right: none; 
        padding-right: 0;
        padding-left: 0;
    }
    .left-content-area {
        border-bottom: 1px solid #eee; 
        padding-bottom: 20px;
    }
    .left-content-area .entry-header {
        text-align: left; /* Na mobilu levé zarovnání */
    }
}

/* --- Nastavení rodičovského kontejneru (zelený rámeček) --- */
.oteviracka-container {
    background-color: #66BB6A; 
    padding: 0px 0px; 
    border-radius: 10px;
    
    display: flex; 
    /* KLÍČOVÉ: Přesné umístění mezer mezi sloupci, ne kolem nich */
    justify-content: space-between; 
    flex-wrap: wrap; 
    
    color: #ffffff;
    font-family: sans-serif;
}

/* --- Stylování VŠECH čtyř sloupců (wrapperů) --- */
.oteviracka-wrapper {
    /* KLÍČOVÉ PRO FLEXIBILITU: Grow 1, Basis 20% */
    /* Sloupce začnou na 20% a rovnoměrně dorostou, aby vyplnily mezeru. */
    flex: 1 1 20%; 
    
    /* MINIMÁLNÍ ŠÍŘKA: Ochrana proti "zdrclosti" a zalamování textu */
    min-width: 255px; 
    
    /* ODSTRANĚNY HORIZONTÁLNÍ MARGINY: Šetříme místo a spoléháme na space-between */
    margin: 0 0 20px 0; /* Pouze spodní margin pro oddělení, pokud by došlo k zalomení */
    padding: 0 10px; 
    
    box-sizing: border-box; 
}

/* --- Nadpis oddělení (H3) --- */
.oteviracka-wrapper h3 {
    color: #ffffff;
    font-size: 1.1em;
    text-align: left;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 700;
}

/* --- Tabulka (oteviracka-table) --- */
.oteviracka-table {
    width: 100%;
    border-collapse: collapse; 
    color: #ffffff;
    font-size: 0.95em;
    line-height: 1.2;
    
    /* VNĚJŠÍ HRANICE 1px */
    border: 1px solid rgba(255, 255, 255, 0.5); 
}

/* --- Buňky (TH a TD) --- */
.oteviracka-table th, 
.oteviracka-table td {
    padding: 8px 5px;
    border: none; 
    
    /* INTERNÍ HRANICE MEZI ŘÁDKY */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
}

/* Nastavení zarovnání a fontu */
.oteviracka-table th {
    text-align: left;
    font-weight: 400; 
    /* Pevná šířka pro den, aby se čas neposouval */
    width: 15%; 
}

.oteviracka-table td {
    text-align: center;
    font-weight: 600; 
}

/* Odstranění spodní interní hranice u posledního řádku */
.oteviracka-table tr:last-child th, 
.oteviracka-table tr:last-child td {
    border-bottom: none;
}

/* Střídavé barvy pro řádky */
.oteviracka-table tr {
    background-color: rgba(255, 255, 255, 0.05); 
}
.oteviracka-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05);
}


/* --- Úprava pro mobilní zobrazení (pod 768px) --- */
@media (max-width: 768px) {
    
    .oteviracka-container {
        flex-direction: column; 
        padding: 10px; 
    }
    
    .oteviracka-wrapper {
        flex: 1 1 100%; 
        margin: 10px 0; 
        
        background-color: rgba(0, 0, 0, 0.1); 
        padding: 10px;
        border-radius: 5px;
        min-width: unset; 
    }
}

/* --- 1. VYŘEŠENÍ VÝŠKY PŘES CELÝ KONTEJNER (LI) --- */

/* Cílíme na LI prvek pomocí ID pro maximální specifičnost */
#menu-item-818 {
    background: none !important;
    padding: 0 !important;
    margin-left: 15px !important; 
    
    /* VYNUCENÍ VÝŠKY: Zabráníme roztahování a nastavíme zarovnání na střed */
    align-self: center !important; 
    height: auto !important; 
}


/* --- 2. VYŘEŠENÍ ČERNÉHO TEXTU A APLIKACE BAREV (A) --- */

/* Cílíme na A prvek uvnitř LI pomocí ID */
#menu-item-818 > a {
    
    /* VYNUCENÍ BÍLÉ BARVY TEXTU - Přebíjí cokoliv, fix černý text */
    color: #FFFFFF !important; 
    
    /* VYNUCENÍ VÝŠKY: Zajištění, že se A nespustí na celou výšku */
    height: auto !important; 
    
    /* BARVY A STYLY */
    background-color: var(--global-palette-btn-bg) !important; 
    border-color: var(--global-palette-btn-border) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: var(--global-button-border-radius, 6px) !important; 
    padding: 8px 10px !important; /* Zúžené tlačítko */
    
    /* Struktrální styly */
    display: inline-flex !important; 
    line-height: normal !important; 
    align-items: center; 
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


/* --- 3. HOVER STAV --- */
#menu-item-818 > a:hover {
    background-color: var(--global-palette-btn-bg-hover) !important; 
    border-color: var(--global-palette-btn-border-hover) !important; 
    color: #FFFFFF !important; 
}

/* --- 4. EXTRÉMNÍ OPRAVA TEXTU (pro neviditelné vnitřní elementy) --- */
/* Pokud by text byl zabalen v jiném elementu, ID to vynutí */
#menu-item-818 * { 
    color: inherit !important;
}


/* --- 5. OPRAVA VIDITELNÉHO TEXTU U GALERIÍ --- */

div.bwg-title2 {
	color: #555 !important;
}
.bwg-item .bwg-title2 {
	 color: #fff !important;
}
div.bwg-item {
    padding: 10px !important; 
}
    
    
.nejblizsi-akce-kontejner .akce-nahled {
    float: left;
    margin-right: 15px;
    max-width: 250px; 
    height: auto;
}
.nejblizsi-akce-kontejner .akce-text-wrap {
    overflow: hidden; 
}
.nejblizsi-akce-kontejner:after {
    content: "";
    display: table;
    clear: both;
}


/* BARVY A VŠEOBECNÉ NASTAVENÍ */
:root {
    --timeline-color: #5cb85c; 
    --date-col-width: 30%; 
}

/* ------------------------------------------------ */
/* 1. Definice spojité čáry na HLAVNÍM KONTEJNERU   */
/* ------------------------------------------------ */
.custom-timeline-wrap .timeline-item {
    position: relative;
    padding-top: 10px; /* Přidáme odsazení nahoře, aby bod neseděl úplně na hraně */
    padding-bottom: 25px; 
    margin-bottom: 20px;
}

/* Vertikální ČÁRA (Přidáno pomocí pseudo-elementu :before k HLAVNÍMU KONTEJNERU) */
.custom-timeline-wrap:before {
    content: '';
    position: absolute;
    /* Umístění čáry přesně na rozhraní 30% sloupce: */
    left: var(--date-col-width); 
    transform: translateX(-1px); /* Posune čáru o polovinu její šířky pro přesné vycentrování */
    
    top: 0;
    width: 2px;
    height: 100%; /* Zajišťuje spojitost od začátku do konce */
    background: var(--timeline-color);
    z-index: 1;
}

/* ------------------------------------------------ */
/* 2. LAYOUT: Rozdělení 30% / 70% (Flexbox) */
/* (Tento blok zůstává beze změn) */
/* ------------------------------------------------ */

.custom-timeline-wrap .timeline-row {
    display: flex;
    justify-content: space-between;
}

.custom-timeline-wrap .timeline-date-col {
    width: var(--date-col-width);
    flex-shrink: 0;
    padding-right: 30px; 
    text-align: right;
    z-index: 2; /* Důležité: Datum musí být nad čárou, aby jí nezasahovalo */
}

.custom-timeline-wrap .timeline-content-col {
    width: 70%;
    position: relative; 
    /* Důležité: Nulujeme levý padding, protože čára je už v hlavním kontejneru */
    padding-left: 40px; 
    z-index: 2;
}
.timeline-date {
    margin: 3px 10px 0 0;
    font-size: 1.4rem;
    font-weight: bold;
}

.timeline-time {
    text-align: right;
    font-size: 1.2rem;
    font-style: italic;
}

h4.skolni {
    background-color: var(--global-palette2);
    padding: 0px 8px;
    display: inline-block;
    border-radius: 5px;
}

/* 3. BOD (Kolečko) na čáře - Opakování pro Každou Položku */

.custom-timeline-wrap .timeline-item:before {
    content: '';
    position: absolute;
    
    /* Umístění: Posuneme bod na 30% šířky celého kontejneru */
    left: var(--date-col-width); 
    
    /* Transformace: Vycentruje bod na čáru, s mírným svislým posunem */
    transform: translate(-50%, 0px); /* Nastavíme vertikální posun na 0, bude se řídit tokem */
    
    /* Zcela odstraníme 'top: 0', aby se bod vázal na padding-top */
    
    top: 20px;
    width: 24px;
    height: 24px;
    background: var(--timeline-color);
    border-radius: 50%;
    z-index: 3; 
}

/* ------------------------------------------------ */
/* 4. STYLIZACE NÁHLEDOVÉHO OBRÁZKU V LEVÉM SL. */
/* ------------------------------------------------ */

/* Levý sloupec potřebuje zarovnání doleva, ne doprava (jako datum) */
.custom-timeline-wrap .timeline-date-col {
    text-align: left; /* Změna zarovnání vlevo */
    /* Zbytek (šířka 30% a padding) zůstává stejný */
}

.timeline-date {
    text-align: right; /* Datum stále zarovnáme k čáře */
    margin-bottom: 5px; /* Mezera mezi datem a obrázkem */
}

/* Kontejner obrázku */
.timeline-image-wrap {
    display: block;
    margin-top: 10px; /* Mezera nad obrázkem */
    margin-left: auto; /* Posune obrázek doprava */
    margin-right: 0; 
    
    /* Obrázek se musí vejít do 30% sloupce, max. 100% šířky sloupce */
    max-width: 70%; 
    height: auto;
    overflow: hidden;
    border-radius: 40px 0px 40px 40px;
}

.timeline-thumb {
    width: 100%; /* Obrázek se roztáhne na šířku kontejneru */
    height: auto;
    display: block;
}