/* ==========================================================================
   EDEN Workroom — theme layer
   Učitava se POSLE main.css. Ne menja strukturu template-a — samo naš sloj.
   ========================================================================== */

:root{
  /* Brend plava — #0B38F6 */
  --eden-blue-1:#0b38f6;   /* osnovna */
  --eden-blue-2:#2450ff;   /* jedva svetlija (sredina gradijenta + voda) */
  --eden-blue-3:#4f6fff;   /* akcent za hover / tekst (mora svetlije zbog kontrasta) */
  --eden-blue-4:#1a44f8;   /* prelaz u shimmer-u (jedva vidljiv) */
  --eden-glow:rgba(11,56,246,.55);
  --eden-glow-strong:rgba(31,71,255,.72);

  /* Preusmeravamo brend promenljive template-a na novu plavu,
     da sve što koristi --tp-theme-primary / --tp-common-green dobije isti ton. */
  --tp-theme-primary:#0b38f6;
  --tp-common-green:#0b38f6;
  --tp-common-green-2:#6d8cff;
  --tp-common-green-3:#dbe4ff;
}

/* #0B38F6 je tamna plava (L≈50%) — crni tekst na njoj daje kontrast samo 2.9:1.
   Zato je SAV sadržaj na plavoj podlozi beo (7.2:1). */
.tp-bg-theme-primary,
.tp-bg-theme-primary *,
.tp-bg-theme-primary.tp-text-common-black,
.tp-bg-theme-primary.tp-text-common-black-1,
.tp-bg-theme-primary.tp-text-common-black:hover,
.tp-bg-theme-primary.tp-text-common-black-1:hover,
.tp-bg-theme-primary.hover-text-black:hover,
.tp-bg-theme-primary.hover-text-black:hover *,
.tp-bg-theme-primary .hover-text-black:hover{
  color:#fff;
}
.tp-text-slider-area .tp-text-slider-item span,
.tp-text-slider-area .tp-text-slider-item span.icons{
  color:#fff;
}
.tp-text-slider-area .tp-text-slider-item span.borders{
  background:#fff;
}

/* --------------------------------------------------------------------------
   1) Živa gradijentna plava na svim akcentnim pozadinama
   (dugmad, marquee traka, footer CTA …)
   -------------------------------------------------------------------------- */
.tp-bg-theme-primary{
  background-color:var(--eden-blue-1);
  background-image:linear-gradient(120deg,
      var(--eden-blue-1) 0%,
      var(--eden-blue-2) 45%,
      var(--eden-blue-4) 72%,
      var(--eden-blue-1) 100%);
  background-size:220% 100%;
  animation:eden-blue-flow 9s ease-in-out infinite;
  box-shadow:0 10px 40px -10px var(--eden-glow);
}

@keyframes eden-blue-flow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

@media (prefers-reduced-motion: reduce){
  .tp-bg-theme-primary{animation:none;}
}

.tp-bg-theme-primary:hover{
  box-shadow:0 16px 52px -8px var(--eden-glow-strong);
  filter:brightness(1.07) saturate(1.05);
}

/* --------------------------------------------------------------------------
   2) Akcentni tekst
   -------------------------------------------------------------------------- */
.tp-text-theme-primary{
  color:var(--eden-blue-3);
}

/* --------------------------------------------------------------------------
   3) Testimonials — sprečeno "pucanje" slika u prirodnoj veličini.
   Template nema width/height na ovim slikama, a naše zamene su veće od
   originalnih (312x412 i 164x180), pa se prikazuju u punoj veličini.
   -------------------------------------------------------------------------- */
@media (min-width: 575px){
  .tp-testimonial-thumb img{
    width:312px;
    height:412px;
    object-fit:cover;
  }
}
@media (max-width: 574.98px){
  .tp-testimonial-thumb img{
    width:100%;
    height:auto;
    aspect-ratio:312 / 412;
    object-fit:cover;
  }
}
.tp-testimonial-thumb-2 img{
  display:block;
  width:164px;
  height:180px;
  object-fit:cover;
}

/* --------------------------------------------------------------------------
   4) Fiksirana navigacija — potpuno crna pozadina pri skrolu
   -------------------------------------------------------------------------- */
.header-sticky,
.header-sticky.sticky-black-bg{
  background:#000;
  box-shadow:none;
}
.header-sticky.tp-header-blur::after{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* --------------------------------------------------------------------------
   5) Hover na linkovima navigacije — suptilno: samo mekana promena boje
   -------------------------------------------------------------------------- */
.tp-main-menu nav > ul > li > a{
  transition:color .25s ease;
}
.tp-main-menu nav > ul > li > a:hover,
.tp-main-menu nav > ul > li > a:focus-visible{
  color:var(--eden-blue-3);
}

/* --------------------------------------------------------------------------
   6) Preloader — logo umesto teksta "EDEN", pozadina potpuno crna
   -------------------------------------------------------------------------- */
.loader-wrap{
  background:#000;
}
.loader-wrap svg{
  fill:#000;
}
.loader-wrap .loader-wrap-heading{
  position:relative;
  z-index:20;
}
.load-text .eden-loader-logo{
  display:block;
  width:clamp(140px,16vw,220px);
  height:auto;
  animation:eden-loader-pulse 1.5s ease-in-out infinite;
}
@keyframes eden-loader-pulse{
  0%,100%{opacity:.72;transform:scale(.985);}
  50%{opacity:1;transform:scale(1);}
}

/* --------------------------------------------------------------------------
   9) Svuda gde je NAŠA plava (#0B38F6) pozadina — sadržaj je beo (7.2:1).
   Pokriva i elemente van .tp-bg-theme-primary: hero akcent, paginacija,
   kružna dugmad, ikone, social hover. (Audit kontrasta našao 2.86:1.)
   -------------------------------------------------------------------------- */
.tp-hero-title-sm,
.tp-hero-title-sm *,
.tp-btn-circle-dot,
.tp-btn-circle-dot *,
.tp-footer-btn .tp-btn-circle-dot,
.tp-footer-btn .tp-btn-circle-dot *,
.tp-blog-pagenation ul li a:hover,
.tp-blog-pagenation ul li a:hover *,
.tp-blog-pagenation ul li a.active,
.tp-blog-pagenation ul li a.active *,
.tp-blog-pagenation-nav:hover,
.tp-blog-pagenation-nav:hover *,
.tp-footer-wd-widget ul li span,
.tp-footer-wd-social a:hover,
.tp-footer-wd-social a:hover *,
.tp-hero-video-btn:hover,
.tp-hero-video-btn:hover *,
.tp-hero-wd-title .icons,
.tp-contact-icon,
.tp-contact-icon *,
.aleric-dark .tp-hero-video-btn:hover,
.aleric-dark .tp-hero-video-btn:hover *,
.aleric-dark .tp-sidebar-rc-tag ul li a:hover,
.aleric-dark .tp-sidebar-rc-tag ul li a:hover *{
  color:#fff;
}

/* --------------------------------------------------------------------------
   10) IKONICE unutar plavih površina.
   Template ih je crtao hardkodovanim `fill="#030303"`, pa nisu pratile boju
   teksta. CSS uvek pobeđuje prezentacioni atribut, pa ih ovde farbamo u belo.
   -------------------------------------------------------------------------- */
.tp-bg-theme-primary [fill="#030303"],
.tp-text-slider-area [fill="#030303"],
.tp-hero-title-sm [fill="#030303"],
.tp-contact-icon [fill="#030303"],
.tp-btn-circle-dot [fill="#030303"],
.tp-footer-btn .tp-btn-circle-dot [fill="#030303"],
.tp-footer-wd-social a [fill="#030303"],
.tp-blog-pagenation a [fill="#030303"],
.tp-blog-pagenation-nav [fill="#030303"],
.tp-hero-wd-title .icons [fill="#030303"]{
  fill:#fff;
}

/* Play dugme (`.tp-hero-video-btn`) je BELI krug sa crnom ikonom, a na hover
   krug postane plav — ikona zato prati stanje, ne sme biti stalno bela. */
.tp-hero-video-btn,
.aleric-dark .tp-hero-video-btn,
.tp-video-main .popup-video,
.aleric-dark .tp-video-main .popup-video{
  color:#030303;
}
.tp-hero-video-btn [fill="#030303"],
.tp-video-main .popup-video [fill="#030303"]{
  fill:#030303;
}
.tp-hero-video-btn:hover,
.aleric-dark .tp-hero-video-btn:hover,
.tp-video-main .popup-video:hover,
.aleric-dark .tp-video-main .popup-video:hover{
  color:#fff;
}
.tp-hero-video-btn:hover [fill="#030303"],
.tp-video-main .popup-video:hover [fill="#030303"]{
  fill:#fff;
}

/* Bonus: ista greška i van plavih površina — dekorativna ikona u hero sekciji
   („5.000+ customers") imala je fill #030303 na crnoj pozadini → bila nevidljiva. */
.tp-hero-customer [fill="#030303"]{
  fill:#fff;
}

/* --------------------------------------------------------------------------
   11) „Start Estimation" — okruglo magnetno dugme u footer CTA.
   Template ga u dark temi boji u CRNO, pa se na crnoj sekciji ne vidi da je
   krug. Traženo: belo po defaultu, plavo na hover, tekst jedan ispod drugog.
   -------------------------------------------------------------------------- */
.aleric-dark .tp-rounded-btn-wrap a,
.tp-rounded-btn-wrap a{
  background:#fff;
  color:#030303;
  border-color:rgba(255,255,255,.16);
}
.aleric-dark .tp-rounded-btn-wrap a:hover,
.tp-rounded-btn-wrap a:hover{
  color:#fff;
}
/* plavi krug koji se širi na hover */
.aleric-dark .tp-btn-circle-dot,
.tp-btn-circle-dot{
  background-color:var(--eden-blue-1);
}

/* --------------------------------------------------------------------------
   12) „Back to top" dugme — bela ikona na plavom krugu
   (bilo: siva #cbc6c6 pozadina + crna ikona; plava „voda" je punila krug,
   pa je crna strelica na plavom bila nečitljiva)
   -------------------------------------------------------------------------- */
.scrollToTop{
  background-color:var(--eden-blue-1);
}
.scrollToTop .arrowUp{
  color:#fff;
}
.scrollToTop .water{
  background-color:var(--eden-blue-2);
  border-color:var(--eden-blue-2);
}
.scrollToTop .water svg use{
  fill:var(--eden-blue-2) !important;
}

/* --------------------------------------------------------------------------
   13) Blog kartice — umesto WebGL „displacement" hover efekta:
   slika je u gray scale, a na hover dobije boju.
   -------------------------------------------------------------------------- */
.tp-blog-thumb img,
.eden-blog-img img{
  filter:grayscale(1) contrast(1.02);
  transition:filter .45s ease, transform .45s ease;
}
.tp-blog-thumb:hover img,
.tp-blog-item:hover .eden-blog-img img{
  filter:grayscale(0) contrast(1);
}
@media (prefers-reduced-motion: reduce){
  .tp-blog-thumb img, .eden-blog-img img{ transition:none; }
}