/* =========================================================
   Cernelić — decentne, dizajnerski efektne animacije
   (mega-submeni + naslovnica). Učitava se iz functions.php.
========================================================= */

/* ---------------------------------------------------------
   1) MEGA-SUBMENI — klizne s LIJEVE strane na klik
      (Prostori / Proizvodi i sve ugniježđene razine)
--------------------------------------------------------- */
/* Panel se NE transformira (transform je rezerviran za neutralizaciju Poppera),
   a clip-path bi odrezao ugniježđene (3.) razine — zato samo fade. Dojam
   "ulaska" nose stavke (cernSubItemIn / cernSubLinkIn). */
@keyframes cernSubmenuIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Stavke: samo fade (bez transforma) — transform bilo gdje u lancu predaka
   2. layera napravio bi novi "containing block" i razbio pozicioniranje. */
@keyframes cernSubItemIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.navbar .dropdown-menu.show {
    animation: cernSubmenuIn .45s cubic-bezier(.22,.61,.36,1) both;
}

/* Stavke unutar panela — blagi kaskadni (stagger) ulaz.
   VAŽNO: animiramo <a>, NE <li>. Transform na <li> bi <li> učinio
   "containing block"-om za apsolutno pozicionirani 2. layer (ul.dropdown-menu),
   pa bi se 2. layer lijepio uz red kategorije umjesto uz panel. */
.navbar .dropdown-menu.show > li > a {
    animation: cernSubItemIn .4s ease both;
}
.navbar .dropdown-menu.show > li:nth-child(1)  > a { animation-delay: .05s; }
.navbar .dropdown-menu.show > li:nth-child(2)  > a { animation-delay: .09s; }
.navbar .dropdown-menu.show > li:nth-child(3)  > a { animation-delay: .13s; }
.navbar .dropdown-menu.show > li:nth-child(4)  > a { animation-delay: .17s; }
.navbar .dropdown-menu.show > li:nth-child(5)  > a { animation-delay: .21s; }
.navbar .dropdown-menu.show > li:nth-child(6)  > a { animation-delay: .25s; }
.navbar .dropdown-menu.show > li:nth-child(7)  > a { animation-delay: .29s; }
.navbar .dropdown-menu.show > li:nth-child(8)  > a { animation-delay: .33s; }
.navbar .dropdown-menu.show > li:nth-child(9)  > a { animation-delay: .37s; }
.navbar .dropdown-menu.show > li:nth-child(n+10) > a { animation-delay: .41s; }

/* ---------------------------------------------------------
   ZADNJI LAYER (2. razina – podkategorije): pojačan,
   kaskadni "slide + fade" ulaz linkova.
   Ovdje su <li> leaf-ovi (nemaju ugniježđeni panel) pa je
   transform siguran i ne lomi pozicioniranje 2. layera.
--------------------------------------------------------- */
@keyframes cernSubLinkIn {
    0%   { opacity: 0; transform: translate3d(-28px, 0, 0); filter: blur(3px); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

/* ugasi generički fade na <a> u zadnjem layeru – koristimo li-animaciju */
.navbar .dropdown-menu.show .dropdown-menu.show > li > a { animation: none; }

.navbar .dropdown-menu.show .dropdown-menu.show > li {
    animation: cernSubLinkIn .55s cubic-bezier(.16,.84,.44,1) both;
}
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(1)   { animation-delay: .10s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(2)   { animation-delay: .16s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(3)   { animation-delay: .22s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(4)   { animation-delay: .28s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(5)   { animation-delay: .34s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(6)   { animation-delay: .40s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(7)   { animation-delay: .46s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(8)   { animation-delay: .52s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(9)   { animation-delay: .58s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(10)  { animation-delay: .64s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(11)  { animation-delay: .70s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(12)  { animation-delay: .76s; }
.navbar .dropdown-menu.show .dropdown-menu.show > li:nth-child(n+13){ animation-delay: .82s; }

/* ---------------------------------------------------------
   2) NASLOVNICA — reveal na scroll (fade + blagi rise)
      Skriveno stanje vrijedi SAMO uz .cern-anim na <html>
      (klasu dodaje inline skripta), pa nema bljeska niti
      zaglavljenog sadržaja ako JS zakaže.
--------------------------------------------------------- */
.cern-anim #news .post-grid,
.cern-anim #home-extra .banner,
.cern-anim #home-blog .post-lead {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.22,.61,.36,1),
                transform .8s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.cern-anim #news .post-grid.is-visible,
.cern-anim #home-extra .banner.is-visible,
.cern-anim #home-blog .post-lead.is-visible {
    opacity: 1;
    transform: none;
}

/* LCP: prikaži PRVI slide odmah (paint prije nego se Owl/JS učita) umjesto
   da cijeli slider čeka skriven. Ostali slideovi skriveni do inicijalizacije,
   pa nema "stack" bljeska. Owl preuzme čim doda .owl-loaded. */
.hero-slider:not(.owl-loaded) { visibility: visible; }
.hero-slider:not(.owl-loaded) .item { display: none; }
.hero-slider:not(.owl-loaded) .item:first-child { display: block; }

/* ---------------------------------------------------------
   3) Decentni hover micro-interactions (zoom slike u kartici)
--------------------------------------------------------- */
#news .post-grid .img,
#home-extra .banner a,
#home-blog .post-lead > a {
    display: block;
    overflow: hidden;
}
#news .post-grid .img img,
#home-extra .banner a img,
#home-blog .post-lead > a img {
    transition: transform .6s cubic-bezier(.22,.61,.36,1),
                border-color .4s ease;
}
#news .post-grid .box:hover .img img,
#home-extra .banner a:hover img,
#home-blog .post-lead:hover > a img {
    transform: scale(1.05);
}

/* ---------------------------------------------------------
   4) Reduced motion — poštuj korisnikovu postavku
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .navbar .dropdown-menu.show,
    .navbar .dropdown-menu.show > li,
    .navbar .dropdown-menu.show > li > a,
    .navbar .dropdown-menu.show .dropdown-menu.show > li,
    .hero-slider.owl-loaded { animation: none !important; }

    .cern-anim #news .post-grid,
    .cern-anim #home-extra .banner,
    .cern-anim #home-blog .post-lead {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    #news .post-grid .box:hover .img img,
    #home-extra .banner a:hover img,
    #home-blog .post-lead:hover > a img { transform: none; }
}

/* =========================================================
   5) EFEKTNI DODACI NA NASLOVNICI
========================================================= */

/* --- 5a) Hero "Ken Burns" — spori zoom aktivnog slidea --- */
.hero-slider .owl-item .slider-image { will-change: transform; }
.hero-slider .owl-item.active .slider-image {
    animation: cernKenBurns 7s ease-out both;
}
@keyframes cernKenBurns {
    from { transform: scale(1.001); }
    to   { transform: scale(1.09); }
}

/* --- 5b) Hero autoplay progress bar --- */
.hero-progress {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 2px;
    background: rgba(0,0,0,.15);
    overflow: hidden;
    z-index: 30;
}
.hero-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* --- 5c) Brand marquee --- */
#brand-marquee {
    overflow: hidden;
    padding: 55px 0;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
#brand-marquee .marquee-track {
    display: flex;
    width: max-content;
    animation: cernMarquee 48s linear infinite;
}
#brand-marquee:hover .marquee-track { animation-play-state: paused; }
#brand-marquee .marquee-group { display: flex; align-items: center; }
#brand-marquee .brand-item {
    flex: 0 0 auto;
    width: 120px;
    height: 44px;
    margin: 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#brand-marquee .brand-item svg {
    width: 120px;
    height: 38px;
    fill: #2c2d33 !important;
    opacity: .42;
    transition: opacity .35s ease, fill .35s ease;
}
#brand-marquee .brand-item:hover svg {
    opacity: 1;
    fill: #ff0099 !important;
}
@keyframes cernMarquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* --- 5d) Hover overlay na proizvodima (#news grid) --- */
#news .post-grid .img { position: relative; }
#news .post-grid .img::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(44,45,51,.55), rgba(44,45,51,0) 58%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 1;
}
#news .post-grid .img::before {
    content: "\f105";              /* chevron iz 'icons' fonta */
    font-family: 'icons';
    position: absolute;
    left: 50%; top: 50%;
    width: 48px; height: 48px;
    line-height: 48px; text-align: center;
    font-size: 18px; color: #fff;
    background: #ff0099;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.55);
    opacity: 0;
    transition: opacity .4s ease, transform .5s cubic-bezier(.16,.84,.44,1);
    pointer-events: none;
    z-index: 2;
}
#news .post-grid .box:hover .img::after { opacity: 1; }
#news .post-grid .box:hover .img::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- 5e) Scroll-progress traka (element ubacuje animations.js) --- */
.cern-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: #ff0099;
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 100000;
    pointer-events: none;
    will-change: transform;
}

/* --- 5f) Underline-grow na naslovima (raste slijeva) --- */
#news .post-grid h3 a,
#home-blog .post-lead h2 a {
    background-image: linear-gradient(#ff0099, #ff0099);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 0% 2px;
    transition: background-size .45s cubic-bezier(.22,.61,.36,1), color .3s ease;
    padding-bottom: 2px;
}
#news .post-grid .box:hover h3 a,
#home-blog .post-lead:hover h2 a {
    background-size: 100% 2px;
}

/* --- 5x) Reduced motion za nove efekte --- */
@media (prefers-reduced-motion: reduce) {
    .hero-slider .owl-item.active .slider-image,
    #brand-marquee .marquee-track { animation: none !important; }
    .hero-progress { display: none !important; }
    .cern-scroll-progress { display: none !important; }
}

/* =========================================================
   6) MODERNI HOVER GLAVNOG IZBORNIKA
      - animirani underline koji raste slijeva (umjesto instant bordera)
      - glatka boja, bez "skoka" layouta
      - caret se zarotira kad je panel otvoren, blagi nudge na hover
========================================================= */
.navbar #menu-main > li > a,
.top-nav ul li a {
    position: relative;
    display: inline-block;
    transition: color .3s ease;
}
.navbar #menu-main > li > a { padding-bottom: 6px; }
.top-nav ul li a { padding-bottom: 4px; }

.navbar #menu-main > li > a::after,
.top-nav ul li a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: #ff0099;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.navbar #menu-main > li > a:hover::after,
.navbar #menu-main > li.show > a::after,
.navbar #menu-main > li.current-menu-item > a::after,
.navbar #menu-main > li.current-menu-ancestor > a::after,
.top-nav ul li a:hover::after,
.top-nav ul li.current-menu-item a::after,
.top-nav ul li.active a::after {
    transform: scaleX(1);
}

/* Caret: nudge na hover, rotacija 180° kad je panel otvoren */
.navbar #menu-main > li > a .caret::before {
    display: inline-block;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.navbar #menu-main > li > a:hover .caret::before { transform: translateY(3px); }
.navbar #menu-main > li.show > a .caret::before { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .navbar #menu-main > li > a::after,
    .top-nav ul li a::after,
    .navbar #menu-main > li > a .caret::before { transition: none !important; }
}

/* Pristupačnost: jasno fokus stanje za tipkovničku navigaciju */
.navbar #menu-main > li > a:focus-visible,
.top-nav ul li a:focus-visible,
.navbar .dropdown-menu li a:focus-visible {
    outline: 2px solid #ff0099;
    outline-offset: 3px;
    border-radius: 2px;
}
.navbar #menu-main > li > a:focus-visible::after,
.top-nav ul li a:focus-visible::after { transform: scaleX(1); }

/* =========================================================
   7) FULL-SCREEN SEARCH OVERLAY
========================================================= */
body.cern-search-open { overflow: hidden; }

.cern-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 13vh 24px 24px;
    background: rgba(38, 39, 44, .985);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
}
.cern-search-overlay.open { opacity: 1; visibility: visible; }

.cern-search-inner {
    width: 100%;
    max-width: 760px;
    transform: translateY(-18px);
    opacity: 0;
    transition: transform .5s cubic-bezier(.16,.84,.44,1), opacity .5s ease;
}
.cern-search-overlay.open .cern-search-inner { transform: translateY(0); opacity: 1; }

.cern-search-bigicon { display: block; color: #ff0099; font-size: 26px; margin-bottom: 14px; }

.cern-search-overlay .cern-search-close {
    position: absolute;
    top: 24px; right: 32px;
    width: 52px; height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #fff !important;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: color .3s ease, transform .35s cubic-bezier(.16,.84,.44,1);
}
.cern-search-overlay .cern-search-close:hover,
.cern-search-overlay .cern-search-close:focus {
    background: transparent !important;
    color: #ff0099 !important;
    transform: rotate(90deg);
    outline: none;
}

.cern-search-hint { margin: 16px 0 0; color: rgba(255,255,255,.4); font-size: 13px; letter-spacing: .02em; }
.cern-search-hint kbd {
    background: rgba(255,255,255,.12); color: #fff;
    padding: 1px 7px; border-radius: 3px; font-size: 12px;
}

/* AWS polje unutar overlaya — veliko, underline stil */
.cern-search-overlay .aws-container,
.cern-search-overlay .aws-search-form,
.cern-search-overlay .aws-wrapper { width: 100% !important; background: transparent !important; }
.cern-search-overlay .aws-search-label { display: none !important; }
.cern-search-overlay .aws-search-field {
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(255,255,255,.28) !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    padding: 12px 44px 14px 4px !important;
    transition: border-color .35s ease !important;
}
.cern-search-overlay .aws-search-field::placeholder { color: rgba(255,255,255,.45) !important; }
.cern-search-overlay .aws-search-field:focus { outline: none !important; border-bottom-color: #ff0099 !important; }
.cern-search-overlay .aws-search-clear { right: 6px !important; }
.cern-search-overlay .aws-search-clear span,
.cern-search-overlay .aws-loader { color: #fff !important; border-color: #fff transparent transparent !important; }

/* Live rezultati — svijetla kartica, scroll, hover */
.cern-search-overlay .aws-search-result {
    margin-top: 12px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    max-height: 56vh !important;
    overflow-y: auto !important;
    box-shadow: 0 40px 80px rgba(0,0,0,.45) !important;
}
.cern-search-overlay .aws_result_item {
    padding: 12px 18px !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    transition: background .25s ease !important;
}
.cern-search-overlay .aws_result_item:hover { background: #f6f6f7 !important; }
.cern-search-overlay .aws_result_image { width: 56px !important; min-width: 56px !important; }
.cern-search-overlay .aws_result_title { font-size: 15px !important; font-weight: 600 !important; color: #2c2d33 !important; }
.cern-search-overlay .aws_result_content .aws_result_price,
.cern-search-overlay .aws_result_price { color: #ff0099 !important; font-weight: 600 !important; }
.cern-search-overlay .aws_search_more,
.cern-search-overlay .aws_result_item.aws_search_more {
    text-align: center !important;
    background: #2c2d33 !important;
    border: 0 !important;
}
.cern-search-overlay .aws_search_more a {
    color: #fff !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
}
.cern-search-overlay .aws_search_more a:hover { color: #ff0099 !important; }

@media (max-width: 640px) {
    .cern-search-overlay { padding: 10vh 18px 18px; }
    .cern-search-overlay .aws-search-field { font-size: 22px !important; }
    .cern-search-overlay .cern-search-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .cern-search-overlay,
    .cern-search-inner { transition: none !important; }
    .cern-search-close:hover { transform: none; }
}