/* --- 1. BOJENJE CELOG VRHA (NAJJACI SELEKTORI) --- */
/* Koristimo ID #header jer on uvek pobeduje klase */
/* --- POSTAVLJANJE SLIKE KAO POZADINE HEADERA --- */
header#header, 
.site-header  .site-header__inner {
  /* Putanja do tvoje slike - proveri da li se fajl tačno zove header.jpg */
  background-image: url('header.jpg') !important; 
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  
  /* Povećavamo visinu headera da bi se slika videla (podesi po želji) */
  min-height: 100px !important; 
  
  /* Dodajemo tamni preliv (overlay) da bi beli linkovi bili čitljiviji */
  position: relative;
 
}

.header-nav {
  background-color: transparent !important;
}


/* Tamni sloj preko slike da tekst ne "pojede" sliku */
header#header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5) !important; /* 50% zatamnjenje */
  z-index: 1;
}

#block-olivero-custom-site-branding {
  width: 100% !important;
  background: transparent !important;
  height: 50px;
}

/* Osiguravamo da su logo i meni IZNAD tamnog sloja */
.site-header__container, 
.site-branding, 
.primary-nav {
  position: relative !important;
  z-index: 2 !important;
}

/* --- LOGO I NAVIGACIJA (Bela boja na slici) --- */
.primary-nav__menu-link, 
.primary-nav__menu-link span,
.site-branding__name a {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

/* --- 2. FORSIRANJE VIDLJIVOSTI LINKOVA (BELO NA TAMNOM) --- */
/* Ciljamo direktno spanove i linkove unutar tvog bloka navigacije */
.primary-nav__menu-link,
.primary-nav__menu-link span,
.primary-nav__menu-link--link,
.primary-nav__menu-link.is-active,
#block-olivero-custom-main-menu a {
  color: #a79f9f !important;           /* Forsiramo belu boju teksta */
  background-color: transparent !important; /* Bri�e onu belu kocku sa slike */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hover stanje - Zlatno kao obruc bureta */
.primary-nav__menu-link:hover,
#block-olivero-custom-main-menu a:hover {
  color: #d4af37 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- 3. SEKUNDARNI LINKOVI (DESNO) --- */
.header-navigation a,
.block-user-links-block a,
.my-account-link {
  color: #ffffff !important;
}

/* --- 4. BRANDING (LOGO I NASLOV) --- */
.site-branding__name a {
  color: #d4af37 !important;
  text-decoration: none !important;
}


/* --- 5. POZADINA I NASLOVI STRANICE --- */
body {
  background-color: #fdfaf5 !important; /* Boja pergamenta */
}

h1.page-title {
  color: #5e1914 !important; /* Boja vina */
  text-align: center;
}

/* --- 6. PRETRAGA (LUPA) --- */
.search-form__submit {
  filter: invert(1) brightness(2) !important; /* Cini crnu lupu belom */
}

/* ----- Main Content ----- */
.layout-main  {
  background-color: #f5f2e9;
}
.social-bar  {
  background-color: #ebede0;
}


/* Kategorije Proizvoda na Naslovnoj */

/* Kontejner za sve ikonice */
.view-kategorije-proizvoda .views-row {
  display: inline-block;
  text-align: center;
  margin: 20px;
}

/* Stil za samu sliku/ikonu */
.view-kategorije-proizvoda img {
  width: 150px; /* Podesi po želji */
  height: 150px;
  border-radius: 50%; /* Pravi savršen krug */
  border: 5px solid #634832; /* Ona braon boja sa dizajna */
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Efekat kada se pređe mišem */
.view-kategorije-proizvoda img:hover {
  transform: scale(1.1);
  border-color: #d4af37; /* Zlatna boja na hover */
}

/* Naslov ispod ikonice */
.view-kategorije-proizvoda .views-field-name {
  margin-top: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
}

/* Kontejner za slike unutar proizvoda */
.node--type-proizvod .field--name-field-fotografije {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

/* Kontejner koji drži sve slike proizvoda */
.field--name-field-fotografije-proizvoda .field__items {
  display: grid !important;
  /* Pravi kolone širine minimum 200px koje popunjavaju sav dostupan prostor */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 15px !important;
  margin-top: 20px !important;
}

/* Stil za svaku pojedinačnu sliku u gridu */
.field--name-field-fotografije-proizvoda .field__item img {
  width: 100% !important;
  height: 200px !important; /* Fiksna visina za uredan grid */
  object-fit: cover !important; /* Sprečava razvlačenje slike */
  border-radius: 4px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}