/* =========================================
   NESO RAČUNARI — Custom CSS
   ========================================= */

/* Smooth scroll — jQuery handles this to avoid Webflow conflict */
html {
  scroll-behavior: auto;
}

/* Scroll offset za fixed navbar (~120px visina) */
#Proces, #Racunari, #Printeri, #O-nama, #Recenzije, #Servis, #Contact {
  scroll-margin-top: 110px;
}

/* Fallback — osiguraj da tekst bude vidljiv ako Webflow animacije ne rade */
[words-slide-up], [text-split] {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ---- Dugmad: zaobljeni, font, hover ---- */
.cta__main,
.cta__second,
.button,
.navbar-button,
.cta__second-2 {
  border-radius: 999px !important;
  font-family: "Sequel Sans Roman Body", Arial, sans-serif !important;
  transition: opacity 0.2s ease, transform 0.15s ease !important;
}
.cta__main:hover,
.cta__second:hover,
.button:hover,
.navbar-button:hover,
.cta__second-2:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* Primarno dugme — žuto */
.cta__main {
  background-color: #FFC300 !important;
  color: #00142D !important;
}
.cta__main:hover {
  opacity: 1 !important;
  background-color: #e6b000 !important;
}

/* ---- Navbar linkovi ---- */
.navbar-link {
  transition: opacity 0.15s ease !important;
}
.navbar-link:hover {
  opacity: 0.7;
}

/* ---- Navbar scroll shadow ---- */
.newnavbar {
  transition: box-shadow 0.3s ease;
}
.newnavbar.is-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

/* ---- Navbar dropdown ---- */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown__toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  opacity: 1;
  transition: opacity 0.15s ease;
}
.nav-dropdown__toggle:hover {
  opacity: 0.7;
}
.nav-dropdown__arrow {
  transition: transform 0.22s ease;
  flex-shrink: 0;
  opacity: 0.7;
}
.nav-dropdown__list {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background-color: #001428;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Desktop: hover */
@media (min-width: 992px) {
  .nav-dropdown:hover .nav-dropdown__list,
  .nav-dropdown:focus-within .nav-dropdown__list {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-dropdown:hover .nav-dropdown__arrow,
  .nav-dropdown:focus-within .nav-dropdown__arrow {
    transform: rotate(180deg);
    opacity: 1;
  }
}

/* Mobile: is-open class (via JS) */
.nav-dropdown.is-open .nav-dropdown__list {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.nav-dropdown.is-open .nav-dropdown__arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown__link {
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-dropdown__link::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 200, 0, 0.6);
  flex-shrink: 0;
}
.nav-dropdown__link:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.nav-dropdown__link:hover::before {
  background: #FFC300;
}

/* Mobile dropdown */
@media (max-width: 991px) {
  .nav-dropdown {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .nav-dropdown__toggle {
    width: 100%;
    justify-content: space-between;
    padding: 10px 20px;
  }
  .nav-dropdown__list {
    position: static;
    transform: none !important;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 4px 8px 8px 28px;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.25s ease, visibility 0.2s;
  }
  .nav-dropdown.is-open .nav-dropdown__list {
    visibility: visible;
    opacity: 1;
    max-height: 300px;
    pointer-events: auto;
  }
  .nav-dropdown__link {
    padding: 9px 4px;
    font-size: 0.95rem;
    border-radius: 4px;
    white-space: normal;
  }
  .nav-dropdown__link:hover {
    background: none;
    color: rgba(255, 255, 255, 0.9);
  }
}

/* ---- Hero slika ---- */
.image-3 {
  transition: transform 0.5s ease;
}
.image-3:hover {
  transform: scale(1.02);
}

/* ---- Content sekcije: slika hover ---- */
.image__home-left-cell {
  transition: transform 0.4s ease;
  overflow: hidden;
}
.section_2 .w-layout-cell:hover .image__home-left-cell,
.section__3 .w-layout-cell:hover .image__home-left-cell,
.section_4 .w-layout-cell:hover .image__home-left-cell {
  transform: scale(1.02);
}

/* ---- Process kartice hover ---- */
.process-cell {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.process-cell:hover {
  transform: translateY(-5px);
}

/* ---- Klijenti logosi ---- */
.cell-2 {
  transition: opacity 0.2s ease;
  opacity: 0.65;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cell-2:hover {
  opacity: 1;
}

/* ---- Footer linkovi ---- */
.footer_link {
  transition: opacity 0.15s ease;
}
.footer_link:hover {
  opacity: 0.6;
}
.footer_link.header {
  transition: opacity 0.15s ease;
}
.footer_link.header:hover {
  opacity: 0.7;
}

/* ---- FAQ Accordion ---- */
.rl_faq6_question {
  cursor: pointer;
}
.rl_faq6_answer {
  overflow: hidden;
  transition: height 0.3s ease;
}
.rl_faq6_icon {
  transition: transform 0.3s ease;
}
.rl_faq6_accordion.is-open .rl_faq6_icon {
  transform: rotate(45deg);
}

/* ---- Form inputs focus ---- */
.rl-form-input:focus,
.rl-form-text-area:focus {
  outline: none;
  border-color: currentColor !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
  transition: box-shadow 0.2s ease;
}

/* ---- Viber/OLX linkovi ---- */
.viber-link,
.olx-link {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.viber-link:hover,
.olx-link:hover {
  transform: scale(1.05);
  opacity: 0.85;
}

/* ---- Navbar logo ---- */
.navbar-logo-link {
  transition: opacity 0.2s ease;
}
.navbar-logo-link:hover {
  opacity: 0.85;
}

/* ---- CTA hero dugmad — lijevo ---- */
.div__cta-hero.is--home {
  justify-content: flex-start;
}

/* ---- Mobilni: kompenzacija za fixed navbar ---- */
@media screen and (max-width: 767px) {
  .navbar-container {
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
  }
  #Servis {
    padding-top: 70px;
  }
}

@media screen and (max-width: 479px) {
  .navbar-container {
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
  }
  #Servis {
    padding-top: 74px;
  }
}

/* ---- Tipografija: Sequel Sans Medium Head za naslove ---- */
/* Webflow CDN postavlja Sequel Sans Disp na body, h1 i heading klase.
   Ovdje prebacujemo sve naslove na Medium Head varijantu. */
h1, h2, h3, h4, h5, h6,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6,
.heading-7,
.h1__body,
.h1__body-2,
.h1__body-3,
.h2__blog-tiles,
.hero,
.blog-main-title,
.blog-card-title {
  font-family: "Sequel Sans Medium Head", Arial, sans-serif;
}