/*
Theme Name: Pjevajmo Tema
Theme URI: https://pjevajmo.com
Author: Tvoje Ime ili Ime Tima
Author URI: https://pjevajmo.com
Description: Nova prilagođena tema za Pjevajmo.com.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pjevajmo-tema
Tags: custom-theme, music
*/

/*--------------------------------------------------------------
# Osnovni stilovi
--------------------------------------------------------------*/
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1100px;
    margin: auto;
    overflow: auto;
    padding: 0 20px;
}

a {
    color: #0073aa;
    text-decoration: none;
}

a:hover {
    color: #005177;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
    background: #333;
    color: #fff;
    padding: 1em 0;
    text-align: center;
}

.site-header a {
    color: #fff;
}

.site-title a {
    font-size: 2em;
    font-weight: bold;
}

.site-description {
    font-size: 0.9em;
    color: #ccc;
}

/*--------------------------------------------------------------
# Navigacija
--------------------------------------------------------------*/
.main-navigation {
    text-align: center;
    background: #444;
    padding: 0.5em 0;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation ul li {
    display: inline-block;
    margin: 0 10px;
}

.main-navigation ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
}

.main-navigation ul li a:hover {
    background: #555;
    color: #fff; /* Osigurava da ostane bela i na hover */
}

/*--------------------------------------------------------------
# Sadržaj
--------------------------------------------------------------*/
.site-content {
    padding: 20px 0; /* Uklonjen horizontalni padding jer ga .container rešava */
    background: #fff; /* Da se sadržaj istakne od pozadine tela */
    min-height: 400px; /* Samo da imamo malo prostora */
}

.content-area { /* Klasa koju često koristi WordPress za glavni sadržajni deo */
    padding: 20px 0; /* Malo prostora iznad i ispod glavnog sadržaja */
}

.page-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    text-align: center; /* Dodato za centriranje naslova arhive */
}

.page-title {
    font-size: 2em; /* Malo povećan naslov arhive, prilagodi po potrebi */
    color: #333;
    font-weight: bold; /* Dodato da bude malo jači naslov */
}

.entry-title a {
    color: #333;
}
.entry-title a:hover {
    color: #0073aa;
}

.entry-content {
    margin-top: 1em;
}

/* Poruka ako nema sadržaja */
.no-izvodjaci-found,
.no-results { /* Dodao sam i .no-results za opštiju upotrebu */
    padding: 20px;
    text-align: center;
    font-style: italic;
    color: #777;
}


/*--------------------------------------------------------------
# Izvodjaci Arhiva - Mreža
--------------------------------------------------------------*/
.izvodjaci-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 kolona jednake širine */
    gap: 20px; /* Razmak između elemenata mreže */
}

.izvodjac-item {
    text-align: center;
    padding: 10px;
}

.izvodjac-thumbnail a {
    display: inline-block;
}

.izvodjac-thumbnail img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 5px;
    background-color: #f9f9f9;
}

.izvodjac-item .entry-header {
    margin-top: 0;
}

.izvodjac-item .entry-title {
    font-size: 1.15em;
    margin-bottom: 0;
    line-height: 1.3;
}

.izvodjac-item .entry-title a {
    text-decoration: none;
    color: #333;
}

.izvodjac-item .entry-title a:hover {
    color: #0073aa;
}

/* Responsive dizajn za manje ekrane */
@media (max-width: 1200px) {
    .izvodjaci-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 992px) {
    .izvodjaci-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .izvodjaci-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .izvodjac-thumbnail img {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 576px) {
    .izvodjaci-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .izvodjac-thumbnail img {
        width: 90px;
        height: 90px;
    }
    .izvodjac-item .entry-title {
        font-size: 1em;
    }
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
    background: #333;
    color: #ccc;
    text-align: center;
    padding: 1em 0;
    font-size: 0.9em;
    margin-top: 30px;
}

.site-footer a {
    color: #fff;
}
.site-footer a:hover {
    color: #ddd;
}


/*--------------------------------------------------------------
# Forma za Pretragu Izvođača
--------------------------------------------------------------*/
.izvodjac-search-form-container {
    margin-bottom: 30px;
    text-align: center; /* Centriranje forme */
}

.search-form {
    display: inline-block; /* Da bi se forma mogla centrirati */
    position: relative;
}

.search-form label {
    display: block; /* Ili inline-block ako želiš labelu pored polja */
}

.search-form .search-field {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 250px; /* Prilagodi širinu */
    margin-right: 5px; /* Razmak od dugmeta */
}

.search-form .search-submit {
    padding: 10px 20px;
    background-color: #555;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-form .search-submit:hover {
    background-color: #0073aa; /* Boja iz našeg linka */
}

/* Sakrij default labelu ako koristimo placeholder */
.search-form .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}



/*--------------------------------------------------------------
# Pojedinačna Pesma - Dvokolonski Layout (single-pjesma.php)
--------------------------------------------------------------*/
.pjesma-single-dvokolonski { /* Glavni <article> wrapper */
    margin-bottom: 40px;
    /* Ako želiš da ceo dvokolonski sadržaj bude unutar .container širine: */
    /* max-width: 1100px; */ /* Odgovara tvom .container */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* padding-left: 20px; */ /* Ako koristiš gornje max-width */
    /* padding-right: 20px; */ /* Ako koristiš gornje max-width */
}

.pjesma-glavni-sadrzaj { /* Wrapper za levu i desnu kolonu */
    display: flex;
    flex-wrap: wrap; /* Omogućava prelamanje kolona na manjim ekranima */
    gap: 30px; /* Razmak između leve i desne kolone */
}



.pjesma-lijeva-kolona {
    flex: 2; /* Leva kolona zauzima 2/3 dostupnog prostora (ili relativno više) */
    min-width: 300px; /* Minimalna širina pre nego što se prelomi */
margin-left: 20%;
}

.pjesma-desna-kolona {
    flex: 1; /* Desna kolona zauzima 1/3 dostupnog prostora (ili relativno manje) */
    min-width: 280px; /* Minimalna širina za plejer */
margin-right: 10%;
}

.pjesma-header-lijevo .pjesma-izvodjaci-gore {
    font-size: 1.2em;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px;
}

.pjesma-header-lijevo .pjesma-izvodjaci-gore a {
    color: #0073aa;
    text-decoration: none;
}

.pjesma-header-lijevo .pjesma-izvodjaci-gore a:hover {
    text-decoration: underline;
}

.pjesma-header-lijevo .pjesma-title-lijevo {
    font-size: 2.4em;
    margin-top: 0; 
    margin-bottom: 25px;
    color: #333;
    line-height: 1.2;
}

.pjesma-tekst-lijevo {
    line-height: 1.7;
    color: #444;
}

.pjesma-tekst-lijevo p {
    margin-bottom: 1em;
}

.pjesma-custom-player-container-desno {
    margin-top: 70px; /* PRILAGODI OVU VREDNOST po želji (npr. 50px, 100px) */
}

/* Stilovi za poruke ako nema teksta ili audio fajla */
.pjesma-single-dvokolonski .no-tekst-pjesme,
.pjesma-single-dvokolonski .no-audio-file {
    font-style: italic;
    color: #777;
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-left: 3px solid #0073aa;
}

/* Responsive: Na manjim ekranima, kolone idu jedna ispod druge */
@media (max-width: 768px) { 
    .pjesma-glavni-sadrzaj {
        flex-direction: column; 
    }

    .pjesma-lijeva-kolona,
    .pjesma-desna-kolona {
        flex: 1 1 100%; 
        min-width: auto; 
    }

    .pjesma-desna-kolona {
         margin-top: 0; 
    }
    
    .pjesma-custom-player-container-desno {
         margin-top: 30px; 
    }
}





/*--------------------------------------------------------------
# Pojedinačni Izvođač (single-izvodjac.php)
--------------------------------------------------------------*/
.izvodjac-single {
    margin-bottom: 40px;
}

.izvodjac-single .izvodjac-header {
    text-align: center; /* Centriramo naslov i sliku izvođača */
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.izvodjac-single .izvodjac-title {
    font-size: 2.5em;
    margin-bottom: 15px;
}

.izvodjac-single .izvodjac-featured-image img {
    max-width: 300px; /* Ograničavamo maksimalnu širinu slike */
    height: auto;
    border-radius: 50%; /* Okrugla slika izvođača */
    margin: 0 auto 20px auto; /* Centriranje slike i razmak ispod */
    display: block;
    border: 5px solid #f0f0f0;
}

/* Ako dodaš biografiju */
.izvodjac-single .izvodjac-biografija {
    margin-top: 20px;
    text-align: left; /* Vraćamo tekst biografije na levo poravnanje */
    line-height: 1.7;
    color: #444;
}

.izvodjac-single .izvodjac-pjesme-list {
    text-align: center; /* Centriramo naslov liste i samu listu */
}

.izvodjac-single .pjesme-list-title {
    font-size: 1.8em;
    margin-bottom: 20px;
}

.izvodjac-single .lista-pjesama-izvodjaca {
    list-style: none;
    padding-left: 0;
    display: inline-block; /* Da bi se lista mogla centrirati kao blok */
    text-align: left; /* Vraćamo tekst unutar liste na levo poravnanje */
}

.izvodjac-single .lista-pjesama-izvodjaca li {
    padding: 8px 0;
    border-bottom: 1px dotted #ddd;
    font-size: 1.1em;
}

.izvodjac-single .lista-pjesama-izvodjaca li:last-child {
    border-bottom: none;
}

.izvodjac-single .lista-pjesama-izvodjaca a {
    text-decoration: none;
    color: #0073aa;
}

.izvodjac-single .lista-pjesama-izvodjaca a:hover {
    text-decoration: underline;
}