/*
 Theme Name:   Twenty Twenty-Four
 Description:  Twenty Twenty-Four Child Theme
 Author:       Tryfon Tzanetis
 Author URI:   http://tafhub.com
 Description: Twenty Twenty-Four is designed to be flexible,
 versatile and applicable to any website. Its collection of templates and patterns tailor to different needs,
 such as presenting a business,
 blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process,
 is fully compatible with the site editor,
 and takes advantage of new design tools introduced in WordPress 6.4.
 Template:     twentytwentyfour
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0 License: GNU General Public License v2 or later
License URI: http: //www.gnu.org/licenses/gpl-2.0.html
Tags:         Tags: one-column,
custom-colors,
custom-menu,
custom-logo,
editor-style,
featured-images,
full-site-editing,
block-patterns,
rtl-language-support,
sticky-post,
threaded-comments,
translation-ready,
wide-blocks,
block-styles,
style-variations,
accessibility-ready,
blog,
portfolio,
news
 Text Domain:  twentytwentyfourchild
*/


a:hover {
    text-decoration: underline;
}
a:focus {
    outline-style: none;
}

.dovla .home-products  {
    max-width: 100%;
    margin:auto;
}
.wp-block-button a:hover,
.wp-block-site-title a:hover {
    text-decoration: none;
}
.wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay, .wp-block-pullquote {
    border-radius: 0px;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 25%;
    margin-left: 0;
}
.woocommerce ul.products li.product a img {
    margin: 0 0 0em;
}

/* Osnovni stil za tekst koji se prikazuje na hover */
/* Osnovni stil za tekst koji se prikazuje na hover */
.custom-hover-text {
    display: none; /* Početno skriven */
    position: absolute;
    top: 0; /* Postavi na vrh roditeljskog elementa */
    left: 0; /* Postavi levo od roditeljskog elementa */
    width: 100%; /* Širina 100% od roditeljskog elementa */
    height: 100%; /* Visina 100% od roditeljskog elementa */
    background-color: rgba(0, 0, 0, 0.4); /* Pozadinska boja sa transparentnošću */
    color: #fff; /* Boja teksta */
    padding: 10px;
    box-sizing: border-box; /* Uključi padding u širinu i visinu */
    text-align: center;
    align-items: center; /* Vertikalno centriranje */
    justify-content: center; /* Horizontalno centriranje */
    z-index: 10; /* Iznad slike */
}

/* Stil za link koji pokriva celu sliku */
.custom-hover-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Ispod .custom-hover-text */
}

/* Stil za roditeljski element proizvoda */
.products .product {
    position: relative; /* Omogućava apsolutno pozicioniranje unutrašnjih elemenata */
    overflow: hidden; /* Sakrij deo sadržaja koji izlazi izvan granica */
}

/* Stil za hover efekat */
.products .product:hover .custom-hover-text {
    display: flex; /* Prikazivanje teksta pri hover-u */
}

/*  stilizacija latest posts bloka */ /*/////////////////////////////////////// */
.custom-blog-post {
    display: flex;
    flex-wrap: wrap;
}

.custom-featured-image {
    flex: 1;
    box-sizing: border-box; /* Osigurava da padding i border budu uključeni u ukupnu širinu i visinu */
    position: relative;
    width: 50%; /* Osigurava da slika zauzima 50% širine roditeljskog elementa */
    height: 500px; /* Postavi visinu kontejnera na 500px */
    overflow: hidden; /* Sakrij višak sadržaja koji prelazi granice kontejnera */
}

.custom-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prilagodi sliku da pokrije celu površinu kontejnera dok zadržava proporcije */
    object-position: center; /* Centriraj sliku unutar kontejnera */
}

.custom-post-content {
    flex: 1;
    box-sizing: border-box; /* Osigurava da padding i border budu uključeni u ukupnu širinu i visinu */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertikalno centriranje sadržaja */
    width: 50%; /* Osigurava da sadržaj zauzima 50% širine roditeljskog elementa */
    height: 500px; /* Postavi visinu kontejnera na 500px */
    text-align: center; /* Opcionalno: Centriraj tekst unutar kontejnera */
}

.custom-blog-post:nth-of-type(even) .custom-featured-image {
    order: 2; /* Postavlja sliku posle sadržaja u parnim postovima */
}

.custom-blog-post:nth-of-type(even) .custom-post-content {
    order: 1; /* Postavlja sadržaj pre slike u parnim postovima */
}
.content-wrapper {
    padding: 0 8%;
    text-align: left;
}

/* Smanji na mobilnim uređajima (sadržaj ide prvi) */
@media (max-width: 768px) {
    .custom-blog-post {
        flex-direction: column;
    }
    
    .custom-featured-image, 
    .custom-post-content {
        width: 100%; /* Postavlja širinu na 100% */
        height: auto; /* Postavlja visinu na auto kako bi sadržaj mogao da se prilagodi */
    }
}

.custom-latest-posts {
    background-color: #efefed;
}
}