/* =========================================================
   Studio387 — Ninium navigacija (desktop dropdown)
   Elementor Pro "Nav Menu" widget ostaje izvor stavki (WordPress meni),
   ali izgled padajućeg menija je u potpunosti odavde - Elementorove
   boje/okviri za dropdown se namjerno nadjačavaju.
   ========================================================= */

/* ---- Panel ---- */
.elementor-nav-menu--main .elementor-nav-menu .sub-menu{
  min-width:250px !important;
  margin-top:14px !important;
  padding:8px !important;
  background:#fff !important;
  border:1px solid #E8E4E2 !important;
  border-radius:16px !important;
  box-shadow:0 24px 54px rgba(58,10,33,.16),0 2px 6px rgba(58,10,33,.05) !important;
  transform-origin:top left;
  animation:nn-dd-in .24s cubic-bezier(.22,1,.36,1);
}
/* Nevidljivi "most" preko razmaka, da se meni ne zatvori dok miš prelazi sa stavke na panel. */
.elementor-nav-menu--main .elementor-nav-menu .sub-menu::before{
  content:"";
  position:absolute;left:0;right:0;top:-16px;height:16px;
}
@keyframes nn-dd-in{
  from{opacity:0;transform:translateY(8px) scale(.98);}
  to{opacity:1;transform:none;}
}

/* ---- Stavke ---- */
.elementor-nav-menu--main .elementor-nav-menu .sub-menu li{
  border:0 !important;
  margin:0;
}
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:11px 14px !important;
  border:0 !important;
  border-radius:10px;
  background:transparent !important;
  color:#3A0A21 !important;
  font-family:'Archivo',sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item::after{
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='12' height='12'%3E%3Cpath fill='%23650031' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E"); /* FA arrow-right */
  font-weight:400;
  font-size:15px;
  color:#650031;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .18s ease,transform .18s ease;
}
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:hover,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:focus-visible,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item.highlighted,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item.elementor-item-active{
  background:#F6F4F3 !important;
  color:#650031 !important;
}
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:hover::after,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:focus-visible::after,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item.highlighted::after{
  opacity:1;
  transform:none;
}

/* ---- Sličica: osnovna pravila ----
   Važe gdje god se meni ispiše (Elementor ga ispisuje i drugi put, za svoj tablet/mobilni prikaz),
   da slika nikad ne ostane u punoj veličini. */
.nn-menu-thumb{
  display:inline-flex;flex:0 0 auto;
  align-items:center;justify-content:center;
  width:44px;height:44px;
  margin-right:12px;
  overflow:hidden;
  vertical-align:middle;
  border-radius:11px;
  border:0;
  background:#fff;
}
.nn-menu-thumb-img{
  display:block;
  width:100% !important;height:100% !important;
  max-width:none;
  object-fit:contain;
}
.elementor-nav-menu--dropdown a:has(.nn-menu-thumb){
  display:flex;align-items:center;
}
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item .nn-menu-thumb{margin-right:0;}

/* ---- Sličica uz stavku (packshot) ----
   Dodaje je includes/class-menu-thumbs.php kad stavka ima sliku. */
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item .nn-menu-thumb{
  flex:0 0 auto;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  border-radius:11px;
  border:0;
  background:#fff;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item .nn-menu-thumb-img{
  display:block;
  width:100% !important;height:100% !important;
  max-width:none;
  object-fit:contain;
  border-radius:0;box-shadow:none;
}
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item .nn-menu-label{
  flex:1 1 auto;
  text-align:left;
}
/* Stavka sa sličicom: sličica i naziv stoje zajedno lijevo, strelica ostaje desno. */
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:has(.nn-menu-thumb){
  justify-content:flex-start;
  gap:12px;
  padding:7px 14px 7px 8px !important;
}
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:hover .nn-menu-thumb,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item.highlighted .nn-menu-thumb{
  transform:scale(1.06);
}

/* ---- Strelica uz roditeljsku stavku ----
   Elementorov puni trokutić se sakriva, a umjesto njega se crta tanka strelica (chevron) od dva ruba.
   Mali kvadrat se okreće oko vlastitog centra, pa nema "zamaha" pri animaciji. */
.elementor-nav-menu--main .elementor-nav-menu .menu-item-has-children > a .sub-arrow{
  display:inline-flex !important;
  align-items:center;
  margin:0 !important;
  padding:0 0 0 9px !important;
}
.elementor-nav-menu--main .elementor-nav-menu .menu-item-has-children > a .sub-arrow > *{
  display:none !important;
}
.elementor-nav-menu--main .elementor-nav-menu .menu-item-has-children > a .sub-arrow::after{
  content:"";
  display:block;
  width:7px;height:7px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  border-radius:1px;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.elementor-nav-menu--main .elementor-nav-menu .menu-item-has-children:hover > a .sub-arrow::after,
.elementor-nav-menu--main .elementor-nav-menu .menu-item-has-children > a.highlighted .sub-arrow::after{
  transform:translateY(2px) rotate(225deg);
}

@media (prefers-reduced-motion:reduce){
  .elementor-nav-menu--main .elementor-nav-menu .sub-menu{animation:none;}
  .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item,
  .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item::after,
  .elementor-nav-menu--main .elementor-nav-menu .menu-item-has-children > a .sub-arrow::after{transition:none;}
}