/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 3.0.55
*/

/* =============================================================================
   FIX: Keep header visible during canvas close on mobile (when scrolled)
   Problem: Header disappears then reappears when closing hamburger while scrolled
   Root cause: .material-ocm-open class removal at 900ms causes visibility flash
   Solution: Force header visible in ALL states during/after close animation
   ============================================================================= */
@media (max-width: 999px) {

    /* ALWAYS keep header visible when scrolled - regardless of canvas state */
    #header-outer.scrolled-down,
    #header-outer.was-scrolled,
    #header-outer.small-nav {
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 100000 !important;
        pointer-events: auto !important;
    }

    /* Inner header element - NEVER hide */
    #header-outer.scrolled-down header,
    #header-outer.was-scrolled header,
    #header-outer.small-nav header,
    #header-outer.scrolled-down header#top,
    #header-outer.was-scrolled header#top,
    #header-outer.small-nav header#top {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    /* Override Salient's material-search-open opacity:0 rule */
    #header-outer.scrolled-down.material-search-open header,
    #header-outer.was-scrolled.material-search-open header,
    #header-outer.small-nav.material-search-open header {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* During material-ocm transition - keep header stable */
    body.material-ocm-open #header-outer.scrolled-down,
    body.material-ocm-open #header-outer.was-scrolled,
    body.material-ocm-open #header-outer.small-nav,
    body:not(.material-ocm-open) #header-outer.scrolled-down,
    body:not(.material-ocm-open) #header-outer.was-scrolled,
    body:not(.material-ocm-open) #header-outer.small-nav {
        transform: none !important;
        transition: none !important;
    }

    /* Logo, search, hamburger - always visible */
    #header-outer.scrolled-down #logo,
    #header-outer.was-scrolled #logo,
    #header-outer.small-nav #logo,
    #header-outer.scrolled-down .mobile-search,
    #header-outer.was-scrolled .mobile-search,
    #header-outer.small-nav .mobile-search,
    #header-outer.scrolled-down .slide-out-widget-area-toggle,
    #header-outer.was-scrolled .slide-out-widget-area-toggle,
    #header-outer.small-nav .slide-out-widget-area-toggle {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =============================================================================
   iOS/MOBILE OPTIMIZATIONS - Font Smoothing & Touch Actions
   ============================================================================= */

/* FONT SMOOTHING: Better font rendering on iOS/macOS */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* TOUCH-ACTION: Prevent 300ms click delay on interactive elements */
/* manipulation = pan + pinch-zoom only (no double-tap zoom) */
.custom-hamburger-menu,
#search-btn,
.mobile-search,
.elegant-share-btn,
.ehh-zodiac-carousel a,
.nectar-button,
button,
a.button {
    touch-action: manipulation;
}

/* Custom Fonts - Removed IBM Plex Serif, using IBM Plex Serif from Salient */

/* =============================================================================
   ACCESSIBILITY - Screen Reader Only
   ============================================================================= */


.post .content-inner {
    padding-bottom: 0;
}


/* =============================================================================
   NON-CLASSIC LAYOUT: Disable header transition tijekom canvas open/close
   Sprječava "blink" efekt na scrollanom headeru (small-nav, scrolled-down)
   ============================================================================= */

/* Kada je canvas otvoren - disable ALL header transitions */
body:not(.elegant-classic-layout).side-widget-open #header-outer,
body:not(.elegant-classic-layout).side-widget-open #header-outer header,
body:not(.elegant-classic-layout).side-widget-open #header-outer[data-transparent-header="true"],
body:not(.elegant-classic-layout) #header-outer.side-widget-open,
body:not(.elegant-classic-layout) #header-outer.side-widget-open header {
    transition: none !important;
}

/* Kada je canvas u procesu zatvaranja - keep ONLY background-color transition!
   We want background to fade out smoothly, but disable other transitions (height, etc.)
   CRITICAL: This enables the 0.15s fade-out during hamburger close on ALL screens */
body:not(.elegant-classic-layout) #header-outer.side-widget-closed,
body:not(.elegant-classic-layout) #header-outer.side-widget-closed header,
body:not(.elegant-classic-layout) #header-outer.side-widget-closed header#top {
    transition: background-color 0.15s ease-out !important;
}
body:not(.elegant-classic-layout) #header-outer.no-transition,
body:not(.elegant-classic-layout) #header-outer.no-transition header {
    transition: none !important;
}

/* Override Salient inline transition za NON-classic scrolled header
   CRITICAL: Exclude hamburger states so background transitions work during open/close! */
body:not(.elegant-classic-layout) #header-outer.small-nav:not(.side-widget-open):not(.side-widget-closed),
body:not(.elegant-classic-layout) #header-outer.small-nav:not(.side-widget-open):not(.side-widget-closed) header,
body:not(.elegant-classic-layout) #header-outer.scrolled-down:not(.side-widget-open):not(.side-widget-closed),
body:not(.elegant-classic-layout) #header-outer.scrolled-down:not(.side-widget-open):not(.side-widget-closed) header {
    transition: background-color 0s !important;
}

/* DESKTOP: Disable header transitions tijekom search open/close */
body.open-search #header-outer,
body.open-search #header-outer header,
body.open-search #header-outer.small-nav,
body.open-search #header-outer.small-nav header,
#header-outer.no-transition,
#header-outer.no-transition header {
    transition: none !important;
}

/* CRITICAL FIX: Override transparent header transitions during search open
   Problem: #header-outer[data-transparent-header="true"] header has 0.4s transition
   which overrides the above rule due to higher specificity.
   Solution: Match that specificity AND add body.open-search */
body.open-search #header-outer[data-transparent-header="true"],
body.open-search #header-outer[data-transparent-header="true"] header,
html body.open-search #header-outer[data-transparent-header="true"],
html body.open-search #header-outer[data-transparent-header="true"] header,
body.open-search #header-outer[data-transparent-header="true"].scrolled-down,
body.open-search #header-outer[data-transparent-header="true"].scrolled-down header,
body.open-search #header-outer[data-transparent-header="true"] #logo,
body.open-search #header-outer[data-transparent-header="true"] .logo-spacing,
body.open-search #header-outer[data-transparent-header="true"] #logo img,
body.open-search #header-outer[data-transparent-header="true"] .logo-spacing img {
    transition: none !important;
}

/* DESKTOP: Kada je search otvoren a header bio small-nav, zadrži normalnu pozadinu headera */
#header-outer.search-was-small-nav,
#header-outer.search-was-small-nav header {
    background-color: inherit !important;
}

/* =============================================================================
   MOBILE: Fix header height jump tijekom canvas/search close
   Problem: was-scrolled (71px) -> scrolled-down (60px) uzrokuje vizualni skok
   ============================================================================= */
@media (max-width: 999px) {
    /* ==========================================================================
       FIX #3: Pre-define transition on ALL header elements to prevent black flash

       PROBLEM: Parent theme (responsive.css) sets background:#000 on header#top
       when hamburger opens - but WITHOUT transition! This causes instant black flash.

       SOLUTION: Pre-define transition on ALL potentially affected elements
       BEFORE hamburger opens. This ensures smooth fade-in from transparent to black.
       ========================================================================== */
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"]:not(.scrolled-down):not(.was-scrolled):not(.small-nav),
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"]:not(.scrolled-down):not(.was-scrolled):not(.small-nav) header#top,
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"]:not(.scrolled-down):not(.was-scrolled):not(.small-nav) header#top .row,
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"]:not(.scrolled-down):not(.was-scrolled):not(.small-nav) .col.span_3,
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"]:not(.scrolled-down):not(.was-scrolled):not(.small-nav) #logo,
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"].elegant-pre-scroll,
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"].elegant-pre-scroll header#top,
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"].elegant-pre-scroll header#top .row,
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"].elegant-pre-scroll .col.span_3,
    body:not(.elegant-classic-layout) #header-outer[data-transparent-header="true"].elegant-pre-scroll #logo {
        background-color: transparent;
    }

    /* Disable sve transitions za header tijekom canvas animacije - OSIM background!
       IMPORTANT: Exclude hamburger states (.side-widget-open, .side-widget-closed)
       so that background-color transitions still work during hamburger open/close */
    #header-outer.was-scrolled:not(.side-widget-open):not(.side-widget-closed),
    #header-outer.was-scrolled:not(.side-widget-open):not(.side-widget-closed) header,
    #header-outer.no-transition:not(.side-widget-open):not(.side-widget-closed),
    #header-outer.no-transition:not(.side-widget-open):not(.side-widget-closed) header {
        transition: none !important;
    }

    /* CRITICAL MOBILE FIX: Disable ALL transitions when search opens
       This prevents logo/header from animating during search open */
    body.open-search #header-outer,
    body.open-search #header-outer header,
    body.open-search #header-outer[data-transparent-header="true"],
    body.open-search #header-outer[data-transparent-header="true"] header,
    body.open-search #header-outer.scrolled-down,
    body.open-search #header-outer.scrolled-down header,
    body.open-search #header-outer #logo,
    body.open-search #header-outer .logo-spacing,
    body.open-search #header-outer #logo img,
    body.open-search #header-outer .logo-spacing img,
    html body.open-search #header-outer,
    html body.open-search #header-outer header,
    html body.open-search #header-outer #logo,
    html body.open-search #header-outer #logo img {
        transition: none !important;
    }

    /* ==========================================================================
       HAMBURGER CLOSE: Smooth background fade-out
       Kad se hamburger zatvara, pozadina treba smooth fade to transparent

       PROBLEM: .transparent klasa se gubi kad je hamburger otvoren!
       RJEŠENJE: Targetiraj .side-widget-closed BEZ ovisnosti o .transparent
                 Koristi :not(.scrolled-down):not(.was-scrolled) za detekciju "na vrhu"
       ========================================================================== */

    /* TRANSITION za sve close stanja - FIX #2: Ubrzano na 0.15s */
    #header-outer.side-widget-closed,
    #header-outer.side-widget-closed header,
    #header-outer.side-widget-closed header#top,
    #header-outer.side-widget-closed header#top .row,
    #header-outer.side-widget-closed .col.span_3,
    #header-outer.side-widget-closed #logo {
        transition: background-color 0.15s ease-out !important;
    }

    /* FIX #6: SCROLLED STATE - hamburger close transition when page is scrolled
       Problem: When page is scrolled down and hamburger closes, parent theme
       transitions are longer. This ensures fast 0.15s fade-out in ALL states. */
    html body #header-outer.was-scrolled.side-widget-closed,
    html body #header-outer.was-scrolled.side-widget-closed header,
    html body #header-outer.was-scrolled.side-widget-closed header#top,
    html body #header-outer.was-scrolled.side-widget-closed header#top .row,
    html body #header-outer.was-scrolled.side-widget-closed .col.span_3,
    html body #header-outer.was-scrolled.side-widget-closed #logo,
    html body #header-outer.scrolled-down.side-widget-closed,
    html body #header-outer.scrolled-down.side-widget-closed header,
    html body #header-outer.scrolled-down.side-widget-closed header#top,
    html body #header-outer.scrolled-down.side-widget-closed header#top .row,
    html body #header-outer.scrolled-down.side-widget-closed .col.span_3,
    html body #header-outer.scrolled-down.side-widget-closed #logo,
    html body #header-outer.small-nav.side-widget-closed,
    html body #header-outer.small-nav.side-widget-closed header,
    html body #header-outer.small-nav.side-widget-closed header#top,
    html body #header-outer.small-nav.side-widget-closed header#top .row,
    html body #header-outer.small-nav.side-widget-closed .col.span_3,
    html body #header-outer.small-nav.side-widget-closed #logo {
        transition: background-color 0.15s ease-out !important;
    }

    /* AGGRESSIVE FIX: Kad zatvaramo hamburger NA VRHU stranice (bez scrolled klasa),
       forsiramo transparent pozadinu. Visok specificity da pobijedi sve ostalo! */
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed:not(.scrolled-down):not(.was-scrolled):not(.small-nav),
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed:not(.scrolled-down):not(.was-scrolled):not(.small-nav) header,
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed:not(.scrolled-down):not(.was-scrolled):not(.small-nav) header#top,
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed:not(.scrolled-down):not(.was-scrolled):not(.small-nav) header#top .row,
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed:not(.scrolled-down):not(.was-scrolled):not(.small-nav) .col.span_3,
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed:not(.scrolled-down):not(.was-scrolled):not(.small-nav) #logo {
        background-color: transparent !important;
        background: transparent !important;
    }

    /* Isto za elegant-pre-scroll (backup) */
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed.elegant-pre-scroll,
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed.elegant-pre-scroll header,
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed.elegant-pre-scroll header#top,
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed.elegant-pre-scroll header#top .row,
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed.elegant-pre-scroll .col.span_3,
    html body:not(.elegant-classic-layout) #header-outer.side-widget-closed.elegant-pre-scroll #logo {
        background-color: transparent !important;
        background: transparent !important;
    }

    /* Fiksna visina za scrolled header - spriječava height animaciju */
    #header-outer.no-transition.scrolled-down {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* =============================================================================
   CLASSIC LAYOUT ONLY: bijela pozadina i crne ikone za scrolled header
   NON-CLASSIC ima crnu pozadinu s bijelim ikonama (default Salient)
   ============================================================================= */
@media (max-width: 999px) {
    /* SAMO za classic layout - bijela pozadina kada scrolled i canvas/search zatvoren */
    body.elegant-classic-layout #header-outer.scrolled-down:not(.side-widget-open),
    body.elegant-classic-layout #header-outer.scrolled-down.side-widget-closed {
        background-color: #fff !important;
    }

    /* SAMO za classic layout - crne ikone kada scrolled */
    body.elegant-classic-layout #header-outer.scrolled-down:not(.side-widget-open) .custom-hamburger-menu .hamburger-line,
    body.elegant-classic-layout #header-outer.scrolled-down.side-widget-closed .custom-hamburger-menu .hamburger-line {
        background-color: #000 !important;
    }

    body.elegant-classic-layout #header-outer.scrolled-down:not(.side-widget-open) #logo img,
    body.elegant-classic-layout #header-outer.scrolled-down.side-widget-closed #logo img {
        filter: brightness(0) !important;
    }

    body.elegant-classic-layout #header-outer.scrolled-down:not(.side-widget-open) .icon-salient-search:before,
    body.elegant-classic-layout #header-outer.scrolled-down.side-widget-closed .icon-salient-search:before {
        color: #000 !important;
    }

    /* FIX: Salient JS postavlja height: 47px na .col.span_9 nakon hamburger toggle
       Ispravna visina je 27px (data-m-logo-height) - forsiraj CSS override */
    body.elegant-classic-layout #header-outer .col.span_9 {
        height: 27px !important;
    }
}

/* =============================================================================
   HEADER STABILITY - No animations on header itself
   Logo i header moraju ostati potpuno stabilni tijekom svih animacija
   ============================================================================= */

/* HEADER: Nikad ne animiraj opacity na header-outer jer to utječe na logo
   CSS opacity se multiplicira - ako parent ima opacity 0.5, child ne može biti više od 0.5 */
#header-outer {
    opacity: 1 !important;
}

/* NOTE: NE forsiraj visibility na logo img jer Salient koristi multiple logo verzije
   (.stnd, .dark-version) i skriva/pokazuje ih ovisno o stanju. Forsiranje visibility
   bi prikazalo SVE logo verzije odjednom. */

/* =============================================================================
   MOBILE HEADER BACKGROUND - Only for SCROLLED states (except classic layout)
   VAZNO: NE forsirati crnu pozadinu na transparent stanje na vrhu stranice!
   ============================================================================= */
@media only screen and (max-width: 999px) {
    /* NON-CLASSIC: Crna pozadina SAMO za scrolled stanja - ISKLJUČI elegant-pre-scroll! */
    body:not(.elegant-classic-layout) #header-outer.scrolled-down:not(.elegant-pre-scroll),
    body:not(.elegant-classic-layout) #header-outer.was-scrolled:not(.elegant-pre-scroll),
    body:not(.elegant-classic-layout).side-widget-open #header-outer:not(.elegant-pre-scroll) {
        background-color: #000 !important;
    }

    /* SEARCH OPEN: Crna pozadina SAMO ako je header vec scrolled (ne transparent!) */
    body:not(.elegant-classic-layout).open-search #header-outer.scrolled-down:not(.elegant-pre-scroll),
    body:not(.elegant-classic-layout).open-search #header-outer.was-scrolled:not(.elegant-pre-scroll) {
        background-color: #000 !important;
    }

    /* NON-CLASSIC: header#top crna pozadina SAMO za scrolled stanja */
    body:not(.elegant-classic-layout) #header-outer.scrolled-down:not(.elegant-pre-scroll) header#top,
    body:not(.elegant-classic-layout) #header-outer.was-scrolled:not(.elegant-pre-scroll) header#top,
    body:not(.elegant-classic-layout).side-widget-open #header-outer:not(.elegant-pre-scroll) header#top {
        background-color: #000 !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* SEARCH OPEN header#top: Crna pozadina SAMO ako je header vec scrolled */
    body:not(.elegant-classic-layout).open-search #header-outer.scrolled-down:not(.elegant-pre-scroll) header#top,
    body:not(.elegant-classic-layout).open-search #header-outer.was-scrolled:not(.elegant-pre-scroll) header#top {
        background-color: #000 !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* NON-CLASSIC: Ensure no white line when canvas is open (AGGRESSIVE FIX) */
    body:not(.elegant-classic-layout).side-widget-open #header-outer,
    body:not(.elegant-classic-layout).side-widget-open #header-outer *,
    body:not(.elegant-classic-layout) #header-outer.side-widget-open,
    body:not(.elegant-classic-layout) #header-outer.side-widget-open *,
    body:not(.elegant-classic-layout).side-widget-open #header-outer::before,
    body:not(.elegant-classic-layout).side-widget-open #header-outer::after,
    body:not(.elegant-classic-layout).side-widget-open #header-outer *::before,
    body:not(.elegant-classic-layout).side-widget-open #header-outer *::after {
        border: none !important;
        border-bottom: none !important;
        border-top: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Ensure header-outer has full black background on scrolled + side-widget-open
       ADDED: transition for smooth fade-in/out */
    body:not(.elegant-classic-layout).side-widget-open #header-outer.scrolled-down,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.was-scrolled,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.small-nav {
        background: #000 !important;
        background-color: #000 !important;
        transition: background-color 0.15s ease-out !important;
    }

    /* FIX WHITE LINE: Logo container needs black background when hamburger open
       ADDED: transition for smooth fade-in/out */
    body:not(.elegant-classic-layout).side-widget-open #header-outer.scrolled-down .col.span_3,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.was-scrolled .col.span_3,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.small-nav .col.span_3,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.scrolled-down #logo,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.was-scrolled #logo,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.small-nav #logo,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.scrolled-down header#top,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.was-scrolled header#top,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.small-nav header#top,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.scrolled-down header#top .row,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.was-scrolled header#top .row,
    body:not(.elegant-classic-layout).side-widget-open #header-outer.small-nav header#top .row {
        background: #000 !important;
        background-color: #000 !important;
        transition: background-color 0.15s ease-out !important;
    }

    /* =============================================================================
       FIX: FADE OUT black background when hamburger CLOSES while scrolled
       Problem: .side-widget-open rules set black bg, but no rule resets it on close
       Solution: .side-widget-closed + scrolled = transparent background with fade
       ============================================================================= */
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.scrolled-down,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.was-scrolled,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.small-nav {
        background: transparent !important;
        background-color: transparent !important;
        transition: background-color 0.3s ease-out !important;
    }

    body:not(.elegant-classic-layout).side-widget-closed #header-outer.scrolled-down .col.span_3,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.was-scrolled .col.span_3,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.small-nav .col.span_3,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.scrolled-down #logo,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.was-scrolled #logo,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.small-nav #logo,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.scrolled-down header#top,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.was-scrolled header#top,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.small-nav header#top,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.scrolled-down header#top .row,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.was-scrolled header#top .row,
    body:not(.elegant-classic-layout).side-widget-closed #header-outer.small-nav header#top .row {
        background: transparent !important;
        background-color: transparent !important;
        transition: background-color 0.3s ease-out !important;
    }

    /* =============================================================================
       FIX WHITE LINE: Inline-block whitespace bug fix
       Problem: #logo is display:inline-block with line-height:22px
       img.stnd is display:block inside inline-block parent = whitespace gap
       Solution: Set line-height:0 and font-size:0 on #logo to eliminate gap
       ============================================================================= */

    /* Fix for scrolled header + canvas open */
    body.side-widget-open #header-outer.scrolled-down #logo,
    body.side-widget-open #header-outer.was-scrolled #logo,
    body.side-widget-open #header-outer.small-nav #logo {
        line-height: 0 !important;
        font-size: 0 !important;
    }

    /* Alternative: vertical-align fix for all logo images */
    #header-outer.scrolled-down #logo img,
    #header-outer.was-scrolled #logo img,
    #header-outer.small-nav #logo img {
        vertical-align: top !important;
    }

    /* CLASSIC LAYOUT: Bijela pozadina - NE DIRATI */
    /* (Salient default stilovi će se primijeniti) */

    /* =============================================================================
       ICON POSITION FIX - Prevent icons moving during canvas open/close
       Problem: header height changes from ~71px (was-scrolled) to ~60px (scrolled-down)
       Solution: Fixed height icon container + absolute positioning
       ============================================================================= */

    /* Header needs position:relative for absolute children */
    body:not(.elegant-classic-layout) #header-outer header#top {
        position: relative !important;
    }

    /* SCROLLED states: Fixed height icon container at 30px */
    body:not(.elegant-classic-layout) #header-outer.scrolled-down .col.span_9,
    body:not(.elegant-classic-layout) #header-outer.was-scrolled .col.span_9,
    body:not(.elegant-classic-layout) #header-outer.side-widget-open .col.span_9,
    body:not(.elegant-classic-layout) #header-outer.side-widget-closed .col.span_9,
    body:not(.elegant-classic-layout).side-widget-open #header-outer .col.span_9 {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: 0 !important;
    }

    /* Icons: no vertical shift */
    body:not(.elegant-classic-layout) #header-outer.scrolled-down .custom-hamburger-wrapper,
    body:not(.elegant-classic-layout) #header-outer.scrolled-down .mobile-search,
    body:not(.elegant-classic-layout) #header-outer.was-scrolled .custom-hamburger-wrapper,
    body:not(.elegant-classic-layout) #header-outer.was-scrolled .mobile-search,
    body:not(.elegant-classic-layout) #header-outer.side-widget-open .custom-hamburger-wrapper,
    body:not(.elegant-classic-layout) #header-outer.side-widget-open .mobile-search,
    body:not(.elegant-classic-layout) #header-outer.side-widget-closed .custom-hamburger-wrapper,
    body:not(.elegant-classic-layout) #header-outer.side-widget-closed .mobile-search,
    body:not(.elegant-classic-layout).side-widget-open #header-outer .custom-hamburger-wrapper,
    body:not(.elegant-classic-layout).side-widget-open #header-outer .mobile-search {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* =============================================================================
   CANVAS (Hamburger Menu) - Smooth Fade Animation
   ============================================================================= */

/* Base transition for canvas elements - SMOOTH 0.3s fade */
/* GPU ACCELERATION for smooth iOS animations */
#slide-out-widget-area,
#slide-out-widget-area-bg {
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    will-change: opacity, visibility;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* When canvas is CLOSED - fade out */
#slide-out-widget-area:not(.open),
#slide-out-widget-area-bg:not(.open) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* When canvas is OPEN - fully visible */
#slide-out-widget-area.open,
#slide-out-widget-area-bg.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Canvas content - also fade - UNIFIED 0.3s timing */
#slide-out-widget-area .off-canvas-menu-container,
#slide-out-widget-area .bottom-meta-wrap {
    -webkit-transition: opacity 0.3s ease !important;
    transition: opacity 0.3s ease !important;
}

#slide-out-widget-area:not(.open) .off-canvas-menu-container,
#slide-out-widget-area:not(.open) .bottom-meta-wrap {
    opacity: 0 !important;
}

#slide-out-widget-area.open .off-canvas-menu-container,
#slide-out-widget-area.open .bottom-meta-wrap {
    opacity: 1 !important;
}

/* Close button - fade with canvas - UNIFIED 0.3s timing */
#slide-out-widget-area .slide_out_area_close {
    -webkit-transition: opacity 0.3s ease-out !important;
    transition: opacity 0.3s ease-out !important;
}

#slide-out-widget-area:not(.open) .slide_out_area_close {
    opacity: 0 !important;
}

#slide-out-widget-area.open .slide_out_area_close {
    opacity: 1 !important;
}


body.search #page-header-bg {
    background: #000 !important;
}


body.search #page-header-bg h1 {
    color: #fff !important;
    margin-top: 40px;
}


#page-header-bg .result-num {
    color: #fff;
}


#search-results .result .title span{
font-size: 14px;
}


#search-results .result .title a {
    background-image: linear-gradient(to right, #97644b 0, #97644b 100%);
    font-size: 1.4rem !important;
    font-weight: bold;
    line-height: 1.1;
}


body.material #search-results .result .inner-wrap {
    border-radius: 0px !important;
    border: none !important;
}


body #search-results .result {
    padding: 0;
}

@media (min-width: 1000px) {
    body #search-results .result {
        padding: 10px;
    }

.dsletterspacing9px h5{
        letter-spacing: 9px !important;
    }

}



body #ajax-content-wrap #error-404 h1 {
    color: #fff !important;
    margin-top: 80px;
}

body #ajax-content-wrap #error-404 h2 {
    color: #fff;
}


.nectar-fancy-ul[data-animation=true] ul li {
    color: #fff;
}

.nectar-fancy-ul ul li .icon-default-style[class^="icon-"] {
    line-height: 30px;
}



.ds-margin0auto{
    margin: 0 auto !important;
}


.flickity-page-dots {
    bottom: -46px !important;
}


.flickity-page-dots .dot {
    opacity: 1 !important;
}


.fancybox-button svg path {
    fill: #fff !important;
}


.fancybox-toolbar {
    top: 5.6vh !important;
}



.nectar-flickity:not(.masonry) .flickity-viewport {
    margin: 40px 0px 80px 0 !important;
}



/* Modern screen reader only class - hides content visually but keeps it accessible */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* Allow focus for keyboard navigation */
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

.row {
    padding-bottom: 0px;
}

/* REMOVED: This didn't work because Strategy 2 & 3 below force padding-bottom: 0 on all parents */
/* .single-post .post .content-inner {
    padding-bottom: 100px !important;
} */





/* Hide on Mobile (up to 999px) */
@media (max-width: 999px) {
    .ds-hideonmobile {
        display: none !important;
    }
}

/* Hide on Desktop (1000px and above) */
@media (min-width: 1000px) {
    .ds-hideondesktop {
        display: none !important;
    }
    .ds-homeblurredsec {
    display: flex;
    justify-content: center;
}

.ds-homeblurredsec .row_col_wrap_12 {
    max-width: 1920px;
    width: 100%;
    margin: 0 56px !important;
}


.home .elegant-footer-wrapper {
    margin-top: -24px;
}




}




/* Large Desktop (1500px and above) */
@media (min-width: 1500px) {
    #header-outer nav[aria-label="Main Menu"] .sf-menu > li.menu-item > a .menu-title-text {
        color: #FFF !important;
        font-family: "Reddit Sans", sans-serif !important;
        font-size: 27px !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: 30px !important;
        letter-spacing: 2.7px !important;
    }
}

/* Medium Desktop (1300px to 1499px) */
@media (min-width: 1300px) and (max-width: 1499px) {
    #header-outer nav[aria-label="Main Menu"] .sf-menu > li.menu-item > a .menu-title-text {
        color: #FFF !important;
        font-family: "Reddit Sans", sans-serif !important;
        font-size: 22px !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: 28px !important;
        letter-spacing: 2.4px !important;
    }
    #header-outer[data-lhe="animated_underline"] #top nav > ul > li > a{
    margin-left: 3.6rem !important;
    margin-right: 5px !important;

}

}

/* Small Desktop (1101px to 1299px) */
@media (min-width: 1101px) and (max-width: 1299px) {
    #header-outer nav[aria-label="Main Menu"] .sf-menu > li.menu-item > a .menu-title-text {
        color: #FFF !important;
        font-family: "Reddit Sans", sans-serif !important;
        font-size: 18px !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: 26px !important;
        letter-spacing: 2.2px !important;
    }

#header-outer[data-lhe="animated_underline"] #top nav > ul > li > a{
    margin-left: 30px !important;
    margin-right: 13px !important;

}
}


@media (min-width: 1001px) and (max-width: 1100px) {
    #header-outer nav[aria-label="Main Menu"] .sf-menu > li.menu-item > a .menu-title-text {
        color: #FFF !important;
        font-family: "Reddit Sans", sans-serif !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: 26px !important;
        letter-spacing: 2.2px !important;
    }

#header-outer[data-lhe="animated_underline"] #top nav > ul > li > a{
    margin-left: 20px !important;
    margin-right: 10px !important;

}
}




.ds-igradarivanja-destkop-width {
    display: flex;
    justify-content: center;
}

.ds-igradarivanja-destkop-width .row_col_wrap_12 {
    max-width: 1920px;
    width: 100%;
    margin: 0 56px !important;
}



@media (max-width: 999px) {
    .ds-igradarivanja-destkop-width{
        padding: 20px 23px 60px 23px;
    }

.ds-homeblurredsec .row_col_wrap_12 {
    margin: 0 23px !important;
}

    /* News Grid heading - zero top margin on mobile */
    .eng-heading,
    .elp-heading {
        margin: 0 0 50px 0 !important;
    }

    /* News Grid heading wrapper with submenu - mobile grid layout */
    .eng-heading-wrapper.eng-has-submenu {
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: flex-start;
        gap: 0;
        margin-bottom: 50px;
        margin-top: 4px;
    }

    .eng-heading-wrapper.eng-has-submenu .eng-heading {
        margin-bottom: 0 !important;
        width: 100%;
        margin-top: 2px !important;
        line-height: 15px !important;
    }

}











.woocommerce-checkout .nectar-global-section.before-footer, .woocommerce-account .nectar-global-section.before-footer, .woocommerce-cart .nectar-global-section.before-footer, body:not(.page):not(.single-post):not(.single-portfolio) .nectar-global-section.before-footer, .single-portfolio #regular_portfolio [data-nav-pos="in_header"] .nectar-global-section.before-footer {
    padding-top: 0px;
}


/* Osnovni stilovi za naslove na mobilnim uređajima */
.ds-homeblurred .post-heading span {
    color: #FFF;
    text-align: center;
    font-family: "DM Serif Text";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.4px;
}

/* Veći font za desktop (rezolucije veće od 1000px) */
@media (min-width: 1000px) {
    .ds-homeblurred .post-heading span {
        font-size: 3.6rem;
        line-height: 1.1;
    }
    #header-outer #top .container {
    max-width: 100% !important;
    width: 100% !important;
}
.nectar-post-grid.layout-stacked .nectar-post-grid-item .content .post-heading {
    max-width: 70%;
}

}


/* Global Body Font Styles */


/* Text Block - Drop Cap (Prvo slovo veliko) */

/* Paragraph tekst unutar drop cap - desktop */
.elegant-drop-cap p:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-family: "IBM Plex Serif" !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 40px !important;
}

/* Desktop Drop Cap Slovo (1000px+) */
.elegant-drop-cap p:first-of-type::first-letter {
    font-family: "IBM Plex Serif" !important;
    font-size: 77px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    float: left !important;
    margin-right: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    /* Color se postavlja dinamički u functions.php - light/dark theme */
}

/* Tablet Drop Cap (768px - 999px) */
@media (min-width: 768px) and (max-width: 999px) {
    .elegant-drop-cap p:first-of-type {
        font-size: 20px !important;
        line-height: 32px !important;
    }

    .elegant-drop-cap p:first-of-type::first-letter {
        font-size: 58px !important;
        line-height: 1 !important;
        margin-top: 0 !important;
        margin-right: 10px !important;
    }
}

/* Mobile Drop Cap (< 768px) */
@media (max-width: 767px) {
    .elegant-drop-cap p:first-of-type {
        font-family: "IBM Plex Serif" !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 23px !important;
    }

    .elegant-drop-cap p:first-of-type::first-letter {
        font-family: "IBM Plex Serif" !important;
        font-size: 50px !important;
        font-weight: 400 !important;
        line-height: 50px !important;
        margin-bottom: -20px !important;
        float: left !important;
        margin-top: 0 !important;
        margin-right: 8px !important;
        font-style: normal !important;
    }

    /* SINGLE POST ONLY - line-height 25px on mobile */
    .single-post .elegant-drop-cap p:first-of-type {
        font-family: IBM Plex Serif !important;
font-weight: 500 !important;
font-style: Italic !important;
font-size: 18px !important;
line-height: 23px !important;
letter-spacing: 0 !important;

    }
}

/* Bold/Italic unutar Drop Cap paragrafa - Desktop */
.elegant-drop-cap p:first-of-type strong,
.elegant-drop-cap p:first-of-type b {
    font-family: "IBM Plex Serif" !important;
    font-size: 24px !important;
    line-height: 40px !important;
}

.elegant-drop-cap p:first-of-type em,
.elegant-drop-cap p:first-of-type i {
    font-family: "IBM Plex Serif" !important;
    font-size: 24px !important;
    line-height: 40px !important;
    font-style: italic !important;
}

/* Bold/Italic unutar Drop Cap paragrafa - Tablet */
@media (min-width: 768px) and (max-width: 999px) {
    .elegant-drop-cap p:first-of-type strong,
    .elegant-drop-cap p:first-of-type b,
    .elegant-drop-cap p:first-of-type em,
    .elegant-drop-cap p:first-of-type i {
        font-size: 20px !important;
        line-height: 32px !important;
    }
}

/* Bold/Italic unutar Drop Cap paragrafa - Mobile */
@media (max-width: 767px) {
    .elegant-drop-cap p:first-of-type strong,
    .elegant-drop-cap p:first-of-type b,
    .elegant-drop-cap p:first-of-type em,
    .elegant-drop-cap p:first-of-type i {
        font-size: 18px !important;
        line-height: 23px !important;
    }
}

/* =============================================================================
   SINGLE POST - GLOBALNI PARAGRAPH STILOVI
   ============================================================================= */

/* Svi paragrafi u single postovima - uniformni stilovi */
.single-post p {
    font-family: "IBM Plex Serif" !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 40px !important;
}

/* Responsive paragraph stilovi za manje ekrane */
@media (max-width: 999px) {
    .single-post p {
        font-size: 20px !important;
        line-height: 34px !important;
    }
}

@media (max-width: 767px) {
    .single-post p {
        font-size: 18px !important;
        line-height: 23px !important;
    }
}

/* =============================================================================
   SINGLE POST - BOLD I ITALIC STILOVI (identični kao glavni tekst)
   ============================================================================= */

/* Desktop Bold - identični stilovi kao glavni tekst */
.single-post strong,
.single-post b {
    font-family: "IBM Plex Serif" !important;
    font-size: 24px !important;
    font-style: normal !important;
    line-height: 40px !important;
}

/* Desktop Italic - identični stilovi kao glavni tekst */
.single-post em,
.single-post i {
    font-family: "IBM Plex Serif" !important;
    font-size: 24px !important;
    font-style: italic !important;
    line-height: 40px !important;
}

/* Tablet Bold/Italic */
@media (max-width: 999px) {
    .single-post strong,
    .single-post b,
    .single-post em,
    .single-post i {
        font-size: 20px !important;
        line-height: 34px !important;
    }
}

/* Mobile Bold/Italic */
@media (max-width: 767px) {
    .single-post strong,
    .single-post b,
    .single-post em,
    .single-post i {
        font-size: 18px !important;
        line-height: 23px !important;
    }
}


#search-results {
    margin-bottom: 30px;
    overflow: visible;
    color: #fff;
    text-align: center;
}

#search-results h3{
    color: #fff;
    text-align: center;
}

/* Single Post - Nectar Responsive Text with h3 */
.single-post .nectar-responsive-text[data-inherit-heading-family="h3"] p em,
.single-post .nectar-responsive-text[data-inherit-heading-family="h3"] p {
    font-family: "IBM Plex Serif" !important;
    font-size: 30px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 34px !important; /* 113.333% */
}

/* =============================================================================
   SINGLE POST - SHARE BUTTONS
   ============================================================================= */

.elegant-share-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    position: relative;
    padding: 100px 0px 100px 0px !important;
}

@media (max-width: 999px) {
    .elegant-share-buttons {
        padding: 50px 0px 40px 0px !important;
    }
}

/* Classic layout - different padding for share buttons */
@media (max-width: 999px) {
    body.elegant-classic-layout .elegant-share-buttons {
        padding: 10px 0px 20px 0px !important;
    }
}

@media (min-width: 1000px) {
    body.elegant-classic-layout .elegant-share-buttons {
        padding: 0px 0px 30px 0px !important;
    }
}

.elegant-share-btn {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
    cursor: pointer !important;
    border: none !important;
    padding: 0 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.elegant-share-btn:hover {
    transform: scale(1.05);
}

.elegant-share-btn:active {
    transform: scale(0.95);
}

.elegant-share-btn svg {
    width: 30px;
    height: 30px;
}

/* Force rounded button for copy button */
button.elegant-share-btn,
button.elegant-share-copy {
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
}

/* Dark theme: full-width black background, white circles with black icons */
.elegant-share-buttons.theme-dark {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    background-color: #000 !important;
}

/* Dark theme padding - ONLY for single posts (not horoscope) */
/* Mobile */
@media (max-width: 999px) {
    .single-post .elegant-share-buttons.theme-dark {
        padding: 0px 0px 70px 0px !important;
        margin-top: -30px !important;
        z-index: 999999;
    }
}

/* Desktop */
@media (min-width: 1000px) {
    .single-post .elegant-share-buttons.theme-dark {
        padding: 100px 0px 100px 0px !important;
    }
}

.elegant-share-buttons.theme-dark .elegant-share-btn {
    background-color: #FFFFFF;
    color: #000;
    border-radius: 50% !important;
}

.elegant-share-buttons.theme-dark button.elegant-share-btn,
.elegant-share-buttons.theme-dark button.elegant-share-copy {
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
}

/* Light theme: white background, black circles with white icons */
.elegant-share-buttons.theme-light .elegant-share-btn {
    background-color: #000;
    color: #FFFFFF;
    border-radius: 50% !important;
}

/* Copy confirmation message */
.elegant-share-copied-message {
    position: absolute;
    left: 132px; /* After 3 icons + gaps (40+26+40+26+40+26 = 198, centered around copy button) */
    background-color: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: "Reddit Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.elegant-share-copied-message.show {
    opacity: 1;
}

/* Single Post - Najnovije Carousel Full Width */
.single-post .category-najnovije-section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    /* FIXED: Only remove left/right padding for full-width, keep bottom spacing */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Plugin's natural top/bottom padding will apply (60px top mobile, 80px top desktop, 20px bottom desktop) */
    /* Extra margin-top added below at line ~2903 to create space above Najnovije */
}

/* REMOVED: This didn't work because Strategy 2 & 3 below force padding-bottom: 0 on all parents */
/* .single-post .post .content-inner {
    padding-bottom: 100px !important;
} */

html.nectar-no-scroll,
body.nectar-no-scroll {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
}

.comments-section {
    display: none !important;
}

body #ajax-content-wrap #error-404 h2 {
        font-size: 32px;
        line-height: 1.1;
}

body.search-no-results #search-results .search-form {
    display: none;
}

/* Search results count - uppercase */
.result-num,
span.result-num {
    text-transform: uppercase !important;
}

/* 404 Page - Home button uppercase */
body.error404 .nectar-button span,
body.error404 .nectar-button,
.error404 .nectar-button span,
.error404 .nectar-button {
    text-transform: uppercase !important;
}


#ajax-content-wrap .nectar-post-grid .meta-category .style-button,
body .nectar-post-grid .meta-category .style-button {
    min-width: 102px !important;
    flex-shrink: 0 !important;
    border-radius: 0px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFF !important;
    text-align: center !important;
    font-family: "Reddit Sans", sans-serif !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: bold !important;
    line-height: 15px !important;
    letter-spacing: 2.6px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
}



/* Ako želiš pregaziti inline background-color stil (style="background-color: #97644b;"),
   možeš dodati i ovo (nije obavezno jer već imaš inline stil): */




#header-outer header {
  position: relative;            /* potrebno da 'top' radi */
  transition: top .2s ease;      /* umjesto transition: all */
}


/* Spušteno SAMO dok NIJE scrollano (koristi scrolled-down i small-nav kao parent tema) */
/* Desktop (1000px+): 20px */
#header-outer.transparent:not(.scrolled-down):not(.small-nav):not(.fixed-menu) header {
  top: 20px;
}

/* Mobile (<999px): 50px */
@media (max-width: 999px) {
  #header-outer.transparent:not(.scrolled-down):not(.small-nav):not(.fixed-menu) header {
    top: 50px;
  }

  /* CLASSIC LAYOUT na mobu: top: 0 */
  body.elegant-classic-layout #header-outer.transparent:not(.scrolled-down):not(.small-nav):not(.fixed-menu) header {
    top: 0;
  }
}

/* 404 i Search stranice - isti razmak od vrha (nemaju uvijek .transparent klasu) */
body.error404 #header-outer:not(.scrolled-down):not(.small-nav):not(.fixed-menu) header,
body.search #header-outer:not(.scrolled-down):not(.small-nav):not(.fixed-menu) header,
body.search-results #header-outer:not(.scrolled-down):not(.small-nav):not(.fixed-menu) header,
body.search-no-results #header-outer:not(.scrolled-down):not(.small-nav):not(.fixed-menu) header {
  top: 20px;
}

/* Čim krene scroll/shrink – vrati na vrh */
#header-outer.scrolled-down header,
#header-outer.small-nav header,
#header-outer.fixed-menu header,
#header-outer.transparent.scrolled-down header,
#header-outer.transparent.small-nav header {
  top: 0 !important;
}

/* FIX: Kada je small-nav aktivan, header MORA ostati na top:0 čak i kada je search/hamburger otvoren */
/* Ovo sprječava spuštanje logo/ikona kada je header već smanjen scrollanjem */
#header-outer.small-nav header,
#header-outer.scrolled-down header,
body.open-search #header-outer.small-nav header,
body.open-search #header-outer.scrolled-down header,
#header-outer.small-nav.side-widget-open header,
#header-outer.scrolled-down.side-widget-open header,
body.side-widget-open #header-outer.small-nav header,
body.side-widget-open #header-outer.scrolled-down header {
  top: 0 !important;
}

/* CRITICAL FIX: Tijekom ZATVARANJA canvasa (side-widget-closed + was-scrolled)
   Salient uklanja small-nav, ali mi imamo was-scrolled - header MORA ostati na top:0
   Timeline: side-widget-open→closed, zatim Salient uklanja small-nav, pa vraća
   U tom međuvremenu header bi skočio na top:20px bez ovog fixa */
#header-outer.was-scrolled.side-widget-closed header,
#header-outer.was-scrolled.transparent.side-widget-closed header,
#header-outer.was-scrolled.transparent:not(.small-nav).side-widget-closed header {
  top: 0 !important;
}

/* KRITIČNI FIX: Offcanvas/search otvoren IZ SCROLLANOG stanja - header na top:0 */
/* Ali ako je bio TRANSPARENT (ne-scrollan), zadrži originalnu poziciju (20px desktop, 50px mobile) */
/* .was-scrolled se dodaje kada je header imao .small-nav (desktop) ILI .scrolled-down (mobile) */
#header-outer.was-scrolled.side-widget-open header,
body.side-widget-open #header-outer.was-scrolled header,
body.open-search #header-outer.was-scrolled header,
/* ULTRA FIX: Salient adds transparent and removes scrolled-down - override ALL cases */
body.open-search #header-outer.was-scrolled.transparent header,
body.open-search #header-outer.was-scrolled.transparent:not(.scrolled-down) header,
body.open-search #header-outer.was-scrolled.transparent:not(.scrolled-down):not(.small-nav) header,
body.open-search #header-outer.transparent.was-scrolled:not(.scrolled-down):not(.small-nav):not(.fixed-menu) header,
html body.open-search #header-outer.was-scrolled header,
html body.open-search #header-outer.was-scrolled.transparent header {
  top: 0 !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* TRANSPARENT stanje - kada offcanvas/search otvoren, zadrži transparent poziciju */
/* Desktop: 20px */
@media (min-width: 1000px) {
  #header-outer.transparent.side-widget-open:not(.was-scrolled) header,
  body.side-widget-open #header-outer.transparent:not(.was-scrolled) header,
  body.open-search #header-outer.transparent:not(.was-scrolled) header {
    top: 20px !important;
  }
}

/* Mobile: 50px - Za hamburger i search kada je transparent header */
@media (max-width: 999px) {
  #header-outer.transparent.side-widget-open:not(.was-scrolled) header,
  body.side-widget-open #header-outer.transparent:not(.was-scrolled) header,
  body.open-search #header-outer.transparent:not(.was-scrolled) header {
    top: 50px !important;
  }

  /* CLASSIC LAYOUT: top: 0 for both hamburger and search */
  body.elegant-classic-layout #header-outer.transparent.side-widget-open:not(.was-scrolled) header,
  body.elegant-classic-layout.side-widget-open #header-outer.transparent:not(.was-scrolled) header,
  body.elegant-classic-layout.open-search #header-outer.transparent:not(.was-scrolled) header {
    top: 0 !important;
  }

  /* FIX: elegant-pre-scroll/scrolling states - KEEP header at top: 0 when search opens
     Problem: When at top of page (elegant-pre-scroll), header has no was-scrolled class
     so rule above sets top: 50px causing a visible "drop" animation.
     Fix: Force top: 0 for these states. */
  body.open-search #header-outer.elegant-pre-scroll.transparent:not(.was-scrolled) header,
  body.open-search #header-outer.elegant-scrolling.transparent:not(.was-scrolled) header,
  html body.open-search #header-outer.elegant-pre-scroll.transparent header,
  html body.open-search #header-outer.elegant-scrolling.transparent header {
    top: 0 !important;
    transition: none !important;
  }
}

/* =============================================================================
   SCROLL THRESHOLD OVERRIDE - Extended "Lowered" Header State
   =============================================================================

   Problem: Salient transitions header from transparent→scrolled after just 5px
   scroll. User wants header to stay "lowered" longer (40px) before sticking.

   Solution:
   - JavaScript adds .elegant-pre-scroll class when scroll < 40px
   - CSS OVERRIDES Salient's visual changes while this class is present
   - When class is removed, CSS transitions create smooth fade effect

   Key: Don't fight Salient's class changes, just override visually with CSS!

   Site-specific values (from data attributes):
   - data-logo-height="50" → full logo height = 50px
   - data-shrink-num="18" → small-nav logo height = 32px
   - data-padding="36" → full margin = 36px, small-nav margin = 20px
   - data-m-logo-height="27" → mobile logo height = 27px

   Last update: 2025-12-11
   ============================================================================= */

/* ==========================================================================
   BASE TRANSITIONS - Smooth animations when .elegant-pre-scroll is removed
   ========================================================================== */

#header-outer[data-transparent-header="true"] {
  transition: background-color 0.4s ease !important;
}

#header-outer[data-transparent-header="true"] header {
  transition: top 0.4s ease !important;
}

/* Logo transitions for smooth resize */
#header-outer[data-transparent-header="true"] #logo,
#header-outer[data-transparent-header="true"] .logo-spacing {
  transition: margin 0.4s ease !important;
}

#header-outer[data-transparent-header="true"] #logo img,
#header-outer[data-transparent-header="true"] .logo-spacing img {
  transition: height 0.4s ease !important;
}

/* ==========================================================================
   PRE-SCROLL STATE: Override Salient's .scrolled-down and .small-nav styles
   ========================================================================== */

/* Force transparent background - override Salient's scrolled-down/small-nav bg */
#header-outer.elegant-pre-scroll[data-transparent-header="true"],
#header-outer.elegant-pre-scroll[data-transparent-header="true"].scrolled-down,
#header-outer.elegant-pre-scroll[data-transparent-header="true"].small-nav {
  background-color: transparent !important;
}

/* ==========================================================================
   DESKTOP PRE-SCROLL: Keep full logo size and header lowered
   ========================================================================== */
@media (min-width: 1000px) {

  /* Keep header lowered (top: 30px) - normal state */
  #header-outer.elegant-pre-scroll[data-transparent-header="true"]:not(.side-widget-open) header,
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].scrolled-down:not(.side-widget-open) header,
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].small-nav:not(.side-widget-open) header {
    top: 30px !important;
  }

  /* FIX #4: Keep header at SAME position when hamburger opens on desktop!
     Without this, header jumps from top:30px to top:0 when hamburger opens */
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].side-widget-open header,
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].scrolled-down.side-widget-open header,
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].small-nav.side-widget-open header {
    top: 30px !important;
  }

  /* FIX #5: Keep header at SAME position when SEARCH opens on desktop!
     Without this, header jumps from top:30px to top:0 when search opens */
  html body.open-search #header-outer.elegant-pre-scroll[data-transparent-header="true"] header {
    top: 30px !important;
  }

  /* Keep full logo margin (36px) - override small-nav's 20px */
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].small-nav #logo,
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].small-nav .logo-spacing {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
  }

  /* Keep full logo height (50px) - override small-nav's 32px */
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].small-nav #logo img,
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].small-nav .logo-spacing img {
    height: 50px !important;
  }

  /* ==========================================================================
     DESKTOP SCROLL-WITH-PAGE: Header scrolls up with content initially
     When .elegant-scrolling is present, header uses position:absolute
     so it moves up with the page scroll instead of staying fixed.
     At threshold (60px), class is removed and header becomes fixed/sticky.
     ========================================================================== */

  /* Phase 1: SCROLLING - Header scrolls with page (position: absolute) */
  body:not(.open-search) #header-outer.elegant-scrolling[data-transparent-header="true"]:not(.side-widget-open) {
    position: absolute !important;
    top: 30px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
  }

  body:not(.open-search) #header-outer.elegant-scrolling[data-transparent-header="true"]:not(.side-widget-open) header {
    top: 0 !important;
  }

  /* Phase 2: STUCK - Header becomes fixed when threshold passed */
  #header-outer[data-transparent-header="true"]:not(.elegant-scrolling):not(.elegant-pre-scroll):not(.side-widget-open) {
    position: fixed !important;
    top: 0 !important;
  }

  #header-outer[data-transparent-header="true"]:not(.elegant-scrolling):not(.elegant-pre-scroll):not(.side-widget-open) header {
    top: 0 !important;
  }

  /* OVERLAY OVERRIDE: When search/hamburger open, ALWAYS fixed at top */
  html body.open-search #header-outer.elegant-scrolling,
  html body.open-search #header-outer.elegant-pre-scroll,
  #header-outer.elegant-scrolling.side-widget-open,
  #header-outer.elegant-pre-scroll.side-widget-open {
    position: fixed !important;
    top: 0 !important;
  }
}

/* ==========================================================================
   MOBILE PRE-SCROLL: TRUE scroll-then-stick behavior
   Header scrolls WITH the page (position: absolute) until it reaches viewport
   top, then becomes fixed (position: fixed) - like a sticker!

   IMPORTANT: Overlay states (.side-widget-open, .open-search) ALWAYS override
   this behavior and force position: fixed at top: 0
   ========================================================================== */
@media (max-width: 999px) {

  /* ==========================================================================
     OVERLAY STATES: ALWAYS position: fixed at top: 0 + BLACK BACKGROUND
     These rules have HIGHEST priority - overlays need fixed header!
     IMPORTANT: Must override .elegant-scrolling which sets position:absolute + top:50px
     ========================================================================== */

  /* SEARCH OPEN: Force header to top:0 with highest specificity */
  html body.open-search #header-outer,
  html body.open-search #header-outer[data-transparent-header="true"],
  html body.open-search #header-outer.elegant-scrolling,
  html body.open-search #header-outer.elegant-pre-scroll {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
  }

  html body.open-search #header-outer header,
  html body.open-search #header-outer[data-transparent-header="true"] header,
  html body.open-search #header-outer.elegant-scrolling header,
  html body.open-search #header-outer.elegant-pre-scroll header {
    top: 0 !important;
  }

  /* HAMBURGER OPEN: Same treatment */
  #header-outer.side-widget-open[data-transparent-header="true"],
  #header-outer.side-widget-open.elegant-scrolling,
  #header-outer.side-widget-open.elegant-pre-scroll {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
  }

  #header-outer.side-widget-open header {
    top: 0 !important;
  }

  /* NOTE: Removed black background rule for .col.span_3 and #logo on transparent header
     Reason: It was causing black flash when hamburger opens
     Parent theme handles header background automatically */

  /* ==========================================================================
     SCROLLING PHASE: Header is ABSOLUTE - scrolls with page content
     Only when NO overlay is open! (search or hamburger)
     ========================================================================== */
  body:not(.open-search) #header-outer.elegant-scrolling[data-transparent-header="true"]:not(.side-widget-open) {
    position: absolute !important;
    top: 50px !important; /* 50px from document top */
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
  }

  /* Inner header at top: 0 when outer is absolute (only when no overlay!) */
  body:not(.open-search) #header-outer.elegant-scrolling[data-transparent-header="true"]:not(.side-widget-open) header {
    top: 0 !important;
  }

  /* ==========================================================================
     STUCK PHASE: Header is FIXED at viewport top
     ========================================================================== */
  #header-outer[data-transparent-header="true"]:not(.elegant-scrolling):not(.elegant-pre-scroll) {
    position: fixed !important;
    top: 0 !important;
  }

  #header-outer[data-transparent-header="true"]:not(.elegant-scrolling):not(.elegant-pre-scroll) header {
    top: 0 !important;
    transition: none !important; /* No transition needed, already at top */
  }

  /* ==========================================================================
     INITIAL STATE: Before any scroll (at top of page)
     Only when NO overlay is open! (search or hamburger)
     ========================================================================== */
  body:not(.open-search) #header-outer.elegant-pre-scroll[data-transparent-header="true"]:not(.elegant-scrolling):not(.side-widget-open) {
    position: absolute !important;
    top: 50px !important;
  }

  body:not(.open-search) #header-outer.elegant-pre-scroll[data-transparent-header="true"]:not(.elegant-scrolling):not(.side-widget-open) header {
    top: 0 !important;
  }

  /* Keep mobile logo height (27px) during pre-scroll */
  #header-outer.elegant-pre-scroll[data-transparent-header="true"].scrolled-down #logo img {
    height: 27px !important;
  }
}

/* Classic layout exception - header already at top: 0, no pre-scroll behavior */
body.elegant-classic-layout #header-outer.elegant-pre-scroll header {
  top: 0 !important;
}

/* =============================================================================
   KRITIČNI FIX: Salient JS uklanja .small-nav/.scrolled-down klasu kada se otvori offcanvas
   To uzrokuje da logo dobije veći margin i spusti se.

   Rješenje: JavaScript dodaje klasu .was-scrolled PRIJE nego Salient ukloni klasu
   CSS onda targetira .was-scrolled.side-widget-open za zadržavanje scrolled stilova.

   Vrijednosti iz data atributa ovog sajta:
   - data-padding="36" → small-nav margin = 36/1.8 = 20px
   - data-logo-height="50", data-shrink-num="18" → small-nav logo height = 50-18 = 32px
   - data-m-logo-height="27" → mobile logo height = 27px
   ============================================================================= */

/* Desktop (1000px+) - Zadrži small-nav stilove SAMO ako je bio scrollan */
@media (min-width: 1000px) {
  /* Offcanvas/Search otvoren IZ SCROLLANOG STANJA - zadrži small-nav margin */
  #header-outer.was-scrolled.side-widget-open #logo,
  #header-outer.was-scrolled.side-widget-open .logo-clone,
  #header-outer.was-scrolled.side-widget-open .logo-spacing,
  body.open-search #header-outer.was-scrolled #logo,
  body.open-search #header-outer.was-scrolled .logo-clone,
  body.open-search #header-outer.was-scrolled .logo-spacing {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  /* Offcanvas/Search otvoren IZ SCROLLANOG STANJA - zadrži small-nav logo height */
  #header-outer.was-scrolled.side-widget-open #logo img,
  #header-outer.was-scrolled.side-widget-open .logo-clone img,
  #header-outer.was-scrolled.side-widget-open .logo-spacing img,
  body.open-search #header-outer.was-scrolled #logo img,
  body.open-search #header-outer.was-scrolled .logo-clone img,
  body.open-search #header-outer.was-scrolled .logo-spacing img {
    height: 32px !important;
  }

  /* CRITICAL FIX: Tijekom ZATVARANJA canvasa (side-widget-closed + was-scrolled)
     Logo mora ostati na small-nav veličini dok Salient ne vrati small-nav klasu */
  #header-outer.was-scrolled.side-widget-closed #logo,
  #header-outer.was-scrolled.side-widget-closed .logo-clone,
  #header-outer.was-scrolled.side-widget-closed .logo-spacing {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  #header-outer.was-scrolled.side-widget-closed #logo img,
  #header-outer.was-scrolled.side-widget-closed .logo-clone img,
  #header-outer.was-scrolled.side-widget-closed .logo-spacing img {
    height: 32px !important;
  }

  /* TRANSPARENT stanje - zadrži originalni margin (36px) i logo height (50px) */
  /* Ovo sprječava da Salient promijeni margin/height kada offcanvas otvori iz transparent stanja */
  #header-outer.transparent.side-widget-open:not(.was-scrolled) #logo,
  #header-outer.transparent.side-widget-open:not(.was-scrolled) .logo-clone,
  #header-outer.transparent.side-widget-open:not(.was-scrolled) .logo-spacing,
  body.open-search #header-outer.transparent:not(.was-scrolled) #logo,
  body.open-search #header-outer.transparent:not(.was-scrolled) .logo-clone,
  body.open-search #header-outer.transparent:not(.was-scrolled) .logo-spacing {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
  }

  #header-outer.transparent.side-widget-open:not(.was-scrolled) #logo img,
  #header-outer.transparent.side-widget-open:not(.was-scrolled) .logo-clone img,
  #header-outer.transparent.side-widget-open:not(.was-scrolled) .logo-spacing img,
  body.open-search #header-outer.transparent:not(.was-scrolled) #logo img,
  body.open-search #header-outer.transparent:not(.was-scrolled) .logo-clone img,
  body.open-search #header-outer.transparent:not(.was-scrolled) .logo-spacing img {
    height: 50px !important;
  }
}

/* Mobile (<1000px) - Zadrži scrolled-down stilove */
@media (max-width: 999px) {
  /* Offcanvas/Search otvoren IZ SCROLLANOG STANJA - zadrži scrolled pozicije */
  /* Logo margin i height ostaju kao što ih Salient postavlja za scrolled state */
  #header-outer.was-scrolled.side-widget-open #logo,
  #header-outer.was-scrolled.side-widget-open .logo-clone,
  #header-outer.was-scrolled.side-widget-open .logo-spacing,
  body.open-search #header-outer.was-scrolled #logo,
  body.open-search #header-outer.was-scrolled .logo-clone,
  body.open-search #header-outer.was-scrolled .logo-spacing {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #header-outer.was-scrolled.side-widget-open #logo img,
  #header-outer.was-scrolled.side-widget-open .logo-clone img,
  #header-outer.was-scrolled.side-widget-open .logo-spacing img,
  body.open-search #header-outer.was-scrolled #logo img,
  body.open-search #header-outer.was-scrolled #logo img,
  body.open-search #header-outer.was-scrolled .logo-spacing img {
    height: 27px !important;
  }

  /* CRITICAL FIX: Tijekom ZATVARANJA canvasa (side-widget-closed + was-scrolled)
     Logo mora ostati na scrolled veličini dok Salient ne vrati scrolled-down klasu */
  #header-outer.was-scrolled.side-widget-closed #logo,
  #header-outer.was-scrolled.side-widget-closed .logo-clone,
  #header-outer.was-scrolled.side-widget-closed .logo-spacing {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  #header-outer.was-scrolled.side-widget-closed #logo img,
  #header-outer.was-scrolled.side-widget-closed .logo-clone img,
  #header-outer.was-scrolled.side-widget-closed .logo-spacing img {
    height: 27px !important;
  }

  /* FIX: Hamburger→Search transition - logo margin should be 0 when search is open */
  body.open-search #header-outer.was-scrolled.side-widget-closed #logo,
  body.open-search #header-outer.was-scrolled.side-widget-closed .logo-clone,
  body.open-search #header-outer.was-scrolled.side-widget-closed .logo-spacing {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* TRANSPARENT stanje na MOBITELU - NE DIRAJ ništa! */
  /* Salient već pravilno handla transparent stanje na mobitelu */

  /* =============================================================================
     iOS KEYBOARD FIX - GPU Acceleration & No Layout Shifts
     Uses transforms instead of top property to prevent flickering.
     Header stays in place, no JavaScript manipulation needed.
     ============================================================================= */

  /* GPU layer promotion for header - prevents flickering during iOS keyboard */
  body.open-search #header-outer {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
  }

  /* Ensure header inner elements don't flicker */
  body.open-search #header-outer header,
  body.open-search #header-outer #logo,
  body.open-search #header-outer .mobile-search,
  body.open-search #header-outer #search-btn,
  body.open-search #header-outer .custom-hamburger-wrapper {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Disable all transitions on header during search to prevent animation conflicts */
  body.open-search #header-outer,
  body.open-search #header-outer header,
  body.open-search #header-outer header#top {
    transition: none !important;
    -webkit-transition: none !important;
  }

  /* =============================================================================
     iOS KEYBOARD FIX v5 - Ultra aggressive prevention
     Prevents iOS Safari from scrolling page when keyboard appears
     ============================================================================= */

  /* Prevent scroll chaining on body when search is open */
  body.open-search {
    overscroll-behavior: none !important;
  }

  /* NOTE: Removed iOS keyboard margin-top fix - was causing header to shift down
     Header now stays fixed via CSS positioning only */

  /* Lock header in place - ABOVE search overlay, GPU accelerated */
  body.open-search #header-outer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100000 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  /* Search overlay - fixed, prevent scroll */
  body.open-search #search-outer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* Prevent content shift inside header when keyboard appears */
  body.open-search #header-outer header,
  body.open-search #header-outer header#top {
    position: relative !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.open-search #header-outer #logo,
  body.open-search #header-outer .mobile-search,
  body.open-search #header-outer #search-btn,
  body.open-search #header-outer .custom-hamburger-wrapper {
    position: relative !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

}

/* 404 i Search - scroll vrati na vrh */
body.error404 #header-outer.scrolled-down header,
body.error404 #header-outer.small-nav header,
body.error404 #header-outer.fixed-menu header,
body.search #header-outer.scrolled-down header,
body.search #header-outer.small-nav header,
body.search #header-outer.fixed-menu header,
body.search-results #header-outer.scrolled-down header,
body.search-results #header-outer.small-nav header,
body.search-results #header-outer.fixed-menu header,
body.search-no-results #header-outer.scrolled-down header,
body.search-no-results #header-outer.small-nav header,
body.search-no-results #header-outer.fixed-menu header {
  top: 0;
}

/* 404 i Search - dodatni padding na desktopu kada je header scrollan */
/* Ovo osigurava da ima dovoljno crnog prostora ispod headera kao na ostalim stranicama */
@media (min-width: 1000px) {
  body.error404 #header-outer.scrolled-down,
  body.error404 #header-outer.small-nav,
  body.error404 #header-outer.fixed-menu,
  body.search #header-outer.scrolled-down,
  body.search #header-outer.small-nav,
  body.search #header-outer.fixed-menu,
  body.search-results #header-outer.scrolled-down,
  body.search-results #header-outer.small-nav,
  body.search-results #header-outer.fixed-menu,
  body.search-no-results #header-outer.scrolled-down,
  body.search-no-results #header-outer.small-nav,
  body.search-no-results #header-outer.fixed-menu {
    padding-bottom: 10px;
  }
}

body.material #top nav ul #search-btn a span {
    font-size: 26px;
}


#header-outer .mobile-search .icon-salient-search {
    font-size: 26px;
}

#header-outer #search-outer:before {
    background-color: #000;
}


#search-outer #search .span_12 form > span {
        display: none;
    }

/* =============================================================================
   SEARCH OVERLAY - KEEP HEADER VISIBLE
   ============================================================================= */

/* CRITICAL: Header must be ABOVE everything with highest z-index */
/* GPU hints for smoother iOS animations without changing transform behavior */
#header-outer,
body.material #header-outer,
body #header-outer,
html body #header-outer,
body.open-search #header-outer,
html body.open-search #header-outer {
    z-index: 100000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Header inner - NEMOJ koristiti position: relative !important jer blokira sticky ponašanje! */
/* Position relative je već postavljen gore bez !important, a parent tema koristi fixed za sticky */
#header-outer header,
body.material #header-outer header,
body #header-outer header,
html body #header-outer header,
body.open-search #header-outer header,
html body.open-search #header-outer header {
    z-index: 100000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Ensure header icons stay visible when search is open */
body.open-search #header-outer .mobile-search,
body.open-search #header-outer #search-btn,
body.open-search #header-outer .custom-hamburger-wrapper,
body.open-search #header-outer #logo {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 100001 !important;
}

/* =============================================================================
   SEARCH ANIMATION - MODERN APPLE/iOS STYLE
   Backdrop blur + synchronized fade/scale - no flicker, ultra smooth
   ============================================================================= */

/* BASE: Search overlay - backdrop blur style */
#search-outer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    /* Start transparent */
    background: rgba(0, 0, 0, 0) !important;
    /* Backdrop blur for modern glass effect */
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    /* Hidden state */
    opacity: 0 !important;
    visibility: hidden !important;
    /* SYNCHRONIZED transition - everything moves together */
    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* OPEN: Blur + darken entire screen */
#search-outer.open {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* CLOSING: Smooth reverse */
#search-outer.closing {
    background: rgba(0, 0, 0, 0) !important;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    opacity: 0 !important;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-backdrop-filter 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* NO ::before needed - overlay is on #search-outer itself */

/* SEARCH BOX - Scale + fade animation (no slide = no visible edge) */
#search-outer #search {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* FIX: Changed from height:auto to explicit min-height for proper black area */
    min-height: 280px !important;
    background: rgba(0, 0, 0, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* DEFAULT: Slightly scaled down + shifted up + transparent */
    transform: scale(0.97) translateY(-20px) !important;
    opacity: 0 !important;
    /* SYNCHRONIZED with overlay - same timing */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* GPU acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
    /* Subtle shadow for depth */
}

/* OPEN: Scale to full + fade in */
#search-outer.open #search {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
}

/* CLOSING: Scale down + fade out - FASTER opacity so input disappears before crossing menu */
#search-outer.closing #search {
    transform: scale(0.97) translateY(-20px) !important;
    opacity: 0 !important;
    /* Opacity fades FASTER (0.1s) so the input disappears before moving up
       Transform is slightly slower (0.2s) for smooth slide-up effect */
    transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* INSTANT HIDE for search form element - must disappear IMMEDIATELY on close (0ms!)
   This targets the white line, input, "Pretraži" text - the entire form
   ULTRA HIGH SPECIFICITY to override Salient's styles */

/* Normal open state */
html body #search-outer.nectar.open #search form,
html body #search-outer.open #search form,
html body.material #search-outer.open #search form {
    opacity: 1 !important;
    visibility: visible !important;
}

/* FORM FADE-OUT on closing - handled by JavaScript in functions.php */
/* JS uses MutationObserver to detect .closing class and applies 250ms fade */
/* DO NOT add CSS opacity/visibility rules here - they override JS animation! */

/* BLOCK SCROLL when search is open */
/* NOTE: overflow:hidden causes layout shift when scrollbar disappears - disabled */
/* body.open-search {
    overflow: hidden !important;
} */

/* FREEZE: Override Salient's anime.js animations on grid items when search is open */
/* NOTE: Disabled - was causing visual shift. Salient's animations can continue during search. */
/* .nectar-post-grid-item.elegant-frozen {
    transform: var(--frozen-transform) !important;
    filter: var(--frozen-filter) !important;
    top: var(--frozen-top) !important;
    will-change: auto !important;
}

body.open-search .nectar-post-grid-item {
    transform: var(--frozen-transform, scale(1)) !important;
    filter: var(--frozen-filter, none) !important;
    top: var(--frozen-top, 40px) !important;
} */

/* GPU-ACCELERATED scroll lock */
body.elegant-scroll-locked {
    position: fixed !important;
    width: 100% !important;
    overflow: hidden !important;
}

html.elegant-scroll-locked {
    overflow: hidden !important;
}

/* Container inside search box */
#search-outer #search .container {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* =============================================================================
   MOBILE SEARCH ADJUSTMENTS
   ============================================================================= */
@media (max-width: 999px) {
    /* ==========================================================================
       MOBILE SEARCH - PROPER Z-INDEX LAYERING
       Header (9999) > Search overlay (9998) > Page content
       ========================================================================== */

    /* Parent overlay - BELOW header, semi-transparent */
    #search-outer.open,
    body #search-outer.open,
    body.material #search-outer.open {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        z-index: 9998 !important; /* BELOW header (9999) but above content */
        background-color: rgba(0, 0, 0, 0.5) !important; /* Lighter - 50% */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Search container - black box, fixed height, search at top */
    #search-outer #search,
    body #search-outer #search,
    body.material #search-outer #search,
    #search-outer.open #search,
    body #search-outer.open #search,
    body.material #search-outer.open #search {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 340px !important;  /* Fixed height for black box */
        min-height: 340px !important;
        padding-top: 200px !important;  /* Push content below header - centered in 340px box */
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 20px !important;
        background-color: #000 !important;
        box-sizing: border-box !important;
        transform: none !important;
        /* CRITICAL: Flex container - align children to TOP */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    /* CRITICAL FIX: #search-box has translateY(200px) from Salient - override it! */
    #search-outer #search #search-box,
    body #search-outer #search #search-box,
    body.material #search-outer #search #search-box,
    #search-outer.open #search #search-box,
    body #search-outer.open #search #search-box,
    body.material #search-outer.open #search #search-box {
        transform: none !important;
        -webkit-transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: 0 !important;
        height: auto !important;
    }

    /* OPEN state - ensure search box is visible */
    #search-outer.open #search,
    body #search-outer.open #search,
    body.material #search-outer.open #search {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Container */
    body #search-outer #search .container,
    body.material #search-outer #search .container {
        padding: 0 24px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* FIX: Form - align to TOP instead of CENTER (was pushing form to bottom) */
    #search-outer #search form,
    body #search-outer #search form,
    body.material #search-outer #search form,
    #search-outer.open #search form,
    body #search-outer.open #search form,
    body.material #search-outer.open #search form {
        justify-content: flex-start !important;
        align-items: center !important;
        margin-top: 0 !important;
    }
}

#search-outer #search #search-box,
body.material #search-outer #search #search-box,
body #search-outer #search #search-box,
#search-outer.open #search #search-box,
body.material #search-outer.open #search #search-box,
body #search-outer.open #search #search-box {
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    margin-top: 0 !important; /* FIX: Was -200px which pushed form off-screen */
}

/* Ensure ALL wrapper elements are transparent, NO MARGINS, NO PADDING */
#search-outer #search .container,
#search-outer #search #search-box,
#search-outer #search #search-box .inner-wrap,
#search-outer #search #search-box .span_12,
#search-outer #search .row,
body.material #search-outer #search .container,
body.material #search-outer #search #search-box,
body.material #search-outer #search #search-box .inner-wrap,
body.material #search-outer #search #search-box .span_12,
body.material #search-outer #search .row {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Form element - 393px max-width, centered, responsive */
/* Form element - centered horizontally, TOP-aligned vertically */
#search-outer #search form,
body.material #search-outer #search form,
body #search-outer #search form,
#search-outer.open #search form,
body.material #search-outer.open #search form,
body #search-outer.open #search form {
    max-width: 393px !important;
    width: 100% !important;
    margin: 0 auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* TOP alignment - was center */
}

#search-outer #search form input[type="text"],
body.material #search-outer #search form input[type="text"] {
    width: 100% !important;
    max-width: 393px !important;
}

/* NOTE: .bg-color-stripe is part of header, NOT search overlay - leave it alone! */

/* MOBILE ONLY: Black overlay background below search area */
@media (max-width: 999px) {
    /* Default state - transparent, ready for fade from top */
    #search-outer:before,
    body.material #search-outer:before,
    body #search-outer:before {
        content: '' !important;
        position: absolute !important;
        top: 308px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100% - 308px) !important;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%) !important;
        z-index: -1 !important;
        transition: background 0.5s ease-out, opacity 0.5s ease-out !important;
        opacity: 0 !important;
    }


}

/* Ensure container elements don't have background conflicts */
#search-outer .container,
body.material #search-outer .container,
body #search-outer .container {
    background-color: transparent !important;
}



/* =============================================================================
   HAMBURGER MENU ICON - CUSTOM SOLUTION
   Salient's hamburger uses single element with pseudo-elements, which makes
   it impossible to have different widths for lines. This is a custom solution.
   ============================================================================= */

/* Hide Salient's default hamburger - EVERYTHING! */
.slide-out-widget-area-toggle,
#header-outer .slide-out-widget-area-toggle,
body #header-outer .slide-out-widget-area-toggle,
#header-outer ul.buttons .slide-out-widget-area-toggle,
#header-outer ul.buttons li.slide-out-widget-area-toggle,
body #header-outer ul.buttons li.slide-out-widget-area-toggle,
.slide-out-widget-area-toggle.mobile-icon,
#header-outer .slide-out-widget-area-toggle.mobile-icon,
div.slide-out-widget-area-toggle,
#header-outer div.slide-out-widget-area-toggle,
li.slide-out-widget-area-toggle,
#header-outer li.slide-out-widget-area-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Custom Hamburger Wrapper (li element) - MUST be visible */
.custom-hamburger-wrapper,
#header-outer .custom-hamburger-wrapper,
#header-outer ul.buttons .custom-hamburger-wrapper,
body #header-outer ul.buttons .custom-hamburger-wrapper {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center;
    justify-content: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 5px !important;
    position: relative !important;
    /* NO transition here - only on .hamburger-line */
}

/* Custom Hamburger Container - MUST be visible */
.custom-hamburger-menu,
#header-outer .custom-hamburger-menu,
#header-outer ul.buttons .custom-hamburger-menu,
body #header-outer ul.buttons .custom-hamburger-menu {
    position: relative !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 99999; /* Fixed: was 999999, reduced to stay below critical overlays */
    /* NO transition here - only on .hamburger-line */
}

/* Hamburger lines wrapper - MUST be visible */
.custom-hamburger-menu .hamburger-lines,
#header-outer .custom-hamburger-menu .hamburger-lines,
body .custom-hamburger-menu .hamburger-lines {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column;
    align-items: flex-end; /* Poravnanje desno */
    justify-content: space-between;
    width: 40px;
    height: 20px; /* Ukupna visina za 3 linije + razmake */
    position: relative;
}

/* Individual lines - svi kao span elementi, ne pseudo-elementi! */
.custom-hamburger-menu .hamburger-line,
#header-outer .custom-hamburger-menu .hamburger-line,
body .custom-hamburger-menu .hamburger-line {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 2px;
    background-color: #FFF !important; /* Bijela boja */
    /* TIMING SYNC: 0.25s matches canvas transition for perfect sync */
    -webkit-transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform-origin: center center; /* VAŽNO: rotacija oko centra */
    transform-origin: center center;
    /* GPU ACCELERATION for smooth iOS animations */
    will-change: transform, opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* TOP LINE - puna širina */
.custom-hamburger-menu .hamburger-line.line-1,
#header-outer .custom-hamburger-menu .hamburger-line.line-1 {
    width: 30px !important;
}

/* MIDDLE LINE - kraća */
.custom-hamburger-menu .hamburger-line.line-2,
#header-outer .custom-hamburger-menu .hamburger-line.line-2 {
    width: 18px !important; /* Kraća od ostalih */
}

/* BOTTOM LINE - puna širina */
.custom-hamburger-menu .hamburger-line.line-3,
#header-outer .custom-hamburger-menu .hamburger-line.line-3 {
    width: 30px !important;
}

/* Open state - SAVRŠENI X križ */
.custom-hamburger-menu.open .hamburger-line.line-1,
#header-outer .custom-hamburger-menu.open .hamburger-line.line-1 {
    transform: translateY(9px) rotate(45deg) !important;
    width: 30px !important;
}

.custom-hamburger-menu.open .hamburger-line.line-2,
#header-outer .custom-hamburger-menu.open .hamburger-line.line-2 {
    opacity: 0 !important;
    /* iOS FIX: Use scaleX(0) instead of scale(0) - scale(0) has known iOS rendering glitches */
    -webkit-transform: scaleX(0) !important;
    transform: scaleX(0) !important;
}

.custom-hamburger-menu.open .hamburger-line.line-3,
#header-outer .custom-hamburger-menu.open .hamburger-line.line-3 {
    transform: translateY(-9px) rotate(-45deg) !important;
    width: 30px !important;
}

/* Hover effect - optional */
.custom-hamburger-menu:hover .hamburger-line {
    background-color: #FFF; /* Ostaje bijela na hoveru */
    opacity: 0.8;
}

/* Ensure visibility on ALL screen sizes */
@media (max-width: 999px) {
    /* MOBILE - EXTRA hide Salient mobile hamburger */
    div.slide-out-widget-area-toggle.mobile-icon,
    #header-outer div.slide-out-widget-area-toggle.mobile-icon,
    body #header-outer div.slide-out-widget-area-toggle.mobile-icon,
    .slide-out-widget-area-toggle.mobile-icon {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
    }

    /* MOBILE - Custom hamburger in span_9 (inline with other icons) */
    .custom-hamburger-wrapper,
    #header-outer .custom-hamburger-wrapper,
    #header-outer .span_9 .custom-hamburger-wrapper,
    #header-outer .col.span_9 .custom-hamburger-wrapper,
    body #header-outer .span_9 .custom-hamburger-wrapper,
    body #header-outer .col.span_9 .custom-hamburger-wrapper {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        z-index: 99999 !important;
        list-style: none !important;
        margin: 0 0 0 0 !important;
        padding: 0 5px !important;
        pointer-events: auto !important;
        vertical-align: middle !important;
        /* NO transition here - only on .hamburger-line */
    }

    .custom-hamburger-menu,
    #header-outer .custom-hamburger-menu,
    #header-outer .span_9 .custom-hamburger-menu,
    #header-outer .col.span_9 .custom-hamburger-menu,
    body #header-outer .custom-hamburger-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 40px !important;
        height: 40px !important;
        overflow: visible !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        margin-right: -6px;
        margin-left: 8px;
    }

    /* Ensure lines wrapper is visible on mobile */
    .custom-hamburger-menu .hamburger-lines,
    #header-outer .custom-hamburger-menu .hamburger-lines,
    body #header-outer .custom-hamburger-menu .hamburger-lines {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    /* Ensure individual lines are visible on mobile */
    .custom-hamburger-menu .hamburger-line,
    #header-outer .custom-hamburger-menu .hamburger-line,
    body #header-outer .custom-hamburger-menu .hamburger-line {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: #FFF !important;
        height: 2px !important;
    }
}

@media (min-width: 1000px) {
    /* DESKTOP - Search area height */
    #search-outer #search,
    body.material #search-outer #search,
    body #search-outer #search,
    #search-outer.open #search,
    body.material #search-outer.open #search,
    body #search-outer.open #search {
        height: 40vh !important;
    }

    /* DESKTOP - ULTRA Force visibility */
    .custom-hamburger-wrapper,
    #header-outer .custom-hamburger-wrapper,
    #header-outer ul.buttons .custom-hamburger-wrapper,
    body #header-outer ul.buttons .custom-hamburger-wrapper,
    html body #header-outer ul.buttons .custom-hamburger-wrapper {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        z-index: 99999 !important;
    }

    .custom-hamburger-menu,
    #header-outer .custom-hamburger-menu,
    #header-outer ul.buttons .custom-hamburger-menu,
    body #header-outer ul.buttons .custom-hamburger-menu,
    html body #header-outer ul.buttons .custom-hamburger-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 99999 !important;
    }

    /* DESKTOP - Search input styling */
    body.material #search-outer #search #search-box input[type="text"] {
        font-size: 40px !important;
        line-height: 1 !important;
        height: 80px !important;
    }
}

/* =============================================================================
   CUSTOM SEARCH BOX STYLING
   ============================================================================= */

/* Remove placeholder text from search input */
#search-outer #search form input[type="text"][name="s"]::placeholder,
body.material #search-outer #search form input[type="text"][name="s"]::placeholder,
body #search-outer #search form input[type="text"][name="s"]::placeholder {
    opacity: 0 !important;
    color: transparent !important;
}

/* CRITICAL: Ensure search input stays visible on black background */
#search-outer #search form input[type="text"][name="s"],
body.material #search-outer #search form input[type="text"][name="s"],
body #search-outer #search form input[type="text"][name="s"],
#search-outer.open #search form input[type="text"][name="s"],
body.material #search-outer.open #search form input[type="text"][name="s"],
body #search-outer.open #search form input[type="text"][name="s"] {
    border: none !important;
    border-bottom-width: 0.5px !important;
    border-bottom-color: #FFF !important;
    border-bottom-style: solid !important;
    /* FIX: Symmetric padding prevents iOS cursor misalignment */
    padding: 10px 10px 10px 10px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #FFF !important;
    font-size: 16px !important; /* CRITICAL: 16px prevents iOS auto-zoom on focus */
    /* FIX: Use normal line-height instead of 40px to prevent cursor offset */
    line-height: 1.5 !important;
    height: 40px !important; /* Explicit height for consistent sizing */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 10 !important;
    /* iOS Safari specific - prevent native input styling and behaviors */
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-tap-highlight-color: transparent !important;
    border-radius: 0 !important; /* iOS adds border-radius by default */
    /* GPU acceleration to prevent flicker */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Form element already styled above - no duplicate needed */

/* Hide X close button completely */
#search-outer #close,
body.material #search-outer #close,
body #search-outer #close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide original search submit button */
#search-outer #search form button[type="submit"],
body.material #search-outer #search form button[type="submit"],
body #search-outer #search form button[type="submit"],
#search-outer #search form .search-box__button,
body.material #search-outer #search form .search-box__button,
body #search-outer #search form .search-box__button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Custom clickable search label (will be added via JavaScript) */
.custom-search-label,
#search-outer .custom-search-label,
body.material #search-outer .custom-search-label,
#search-outer.open .custom-search-label,
body.material #search-outer.open .custom-search-label,
body #search-outer.open .custom-search-label {
    display: block !important;
    width: 100% !important;
    max-width: 393px !important;
    margin: 24px auto 0 auto !important;
    padding: 0 !important;
    color: #FFF !important;
    text-align: center !important;
    font-family: "IBM Plex Serif", Georgia, serif !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0.66px !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    pointer-events: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    position: relative !important;
}

.custom-search-label:hover,
#search-outer .custom-search-label:hover,
#search-outer.open .custom-search-label:hover {
    opacity: 0.8 !important;
}

/* Desktop: Custom search label typography */
@media (min-width: 1000px) {
    .custom-search-label,
    #search-outer .custom-search-label,
    body.material #search-outer .custom-search-label,
    #search-outer.open .custom-search-label,
    body.material #search-outer.open .custom-search-label,
    body #search-outer.open .custom-search-label {
        font-size: 25px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 25px !important;
        letter-spacing: 0.75px !important;
    }
}


/* =============================================================================
   OFF-CANVAS MENU CUSTOMIZATION
   ============================================================================= */

/* Off-canvas container layout - position social icons at bottom */
#slide-out-widget-area .inner-wrap,
#slide-out-widget-area.fullscreen-alt .inner-wrap,
body #slide-out-widget-area .inner-wrap,
body #slide-out-widget-area.fullscreen-alt .inner-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    position: relative !important;
}

#slide-out-widget-area .inner,
#slide-out-widget-area.fullscreen-alt .inner,
body #slide-out-widget-area .inner,
body #slide-out-widget-area.fullscreen-alt .inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 !important;
    width: 100% !important;
}

#slide-out-widget-area.fullscreen .inner-wrap > .inner > div,
#slide-out-widget-area.fullscreen-alt .inner-wrap > .inner > div {
    margin: 13px 0 !important;
}

/* Menu container - vertically centered with compensation for footer elements */
#slide-out-widget-area .off-canvas-menu-container,
#slide-out-widget-area.fullscreen-alt .off-canvas-menu-container,
body #slide-out-widget-area .off-canvas-menu-container,
body #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 150px !important; /* Desktop: Compensate for absolute positioned social icons & copyright */
}

/* Mobile: reduced padding-bottom */
@media (max-width: 999px) {
    #slide-out-widget-area .off-canvas-menu-container,
    #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container,
    body #slide-out-widget-area .off-canvas-menu-container,
    body #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container {
        padding-bottom: 50px !important;
    }
}

/* Social icons - fixed at bottom */
#slide-out-widget-area .off-canvas-social-links,
#slide-out-widget-area.fullscreen-alt .off-canvas-social-links,
body #slide-out-widget-area .off-canvas-social-links,
body #slide-out-widget-area.fullscreen-alt .off-canvas-social-links {
    position: absolute !important;
    bottom: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
}

/* Copyright text - fixed at bottom */
#slide-out-widget-area .bottom-text,
#slide-out-widget-area p.bottom-text,
#slide-out-widget-area.fullscreen-alt .bottom-text,
#slide-out-widget-area.fullscreen-alt p.bottom-text,
body #slide-out-widget-area .bottom-text,
body #slide-out-widget-area p.bottom-text,
body #slide-out-widget-area.fullscreen-alt .bottom-text,
body #slide-out-widget-area.fullscreen-alt p.bottom-text {
    position: absolute !important;
    bottom: 45px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    white-space: nowrap !important;
}

/* Menu Items Styling - Ultra-specific to override Salient */
#slide-out-widget-area .off-canvas-menu-container .menu-item a,
#slide-out-widget-area .off-canvas-menu-container .menu-item a:link,
#slide-out-widget-area .off-canvas-menu-container .menu-item a:visited,
body #slide-out-widget-area .off-canvas-menu-container .menu-item a,
html body #slide-out-widget-area .off-canvas-menu-container .menu-item a,
#slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container .menu-item a,
#slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container li a,
body #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container .menu-item a,
body #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container li a,
html body #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container .menu-item a,
html body #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container li a,
#slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container .menu li a,
body #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container .menu li a {
    color: #FFF !important;
    text-align: center !important;
    font-family: "Reddit Sans", sans-serif !important;
    font-size: 25px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 50px !important;
    letter-spacing: 5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: block !important;
}

/* Menu Items Hover */
#slide-out-widget-area .off-canvas-menu-container .menu-item a:hover,
body #slide-out-widget-area .off-canvas-menu-container .menu-item a:hover,
#slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container .menu-item a:hover,
#slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container li a:hover,
body #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container .menu-item a:hover,
body #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container li a:hover,
#slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container .menu li a:hover,
body #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container .menu li a:hover {
    opacity: 0.8 !important;
}

/* Remove line under menu items */
.off-canvas-social-links.line-shown,
#slide-out-widget-area .off-canvas-social-links.line-shown,
body #slide-out-widget-area .off-canvas-social-links.line-shown {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.off-canvas-social-links.line-shown::before,
#slide-out-widget-area .off-canvas-social-links.line-shown::before,
body #slide-out-widget-area .off-canvas-social-links.line-shown::before {
    display: none !important;
    content: none !important;
    border: none !important;
    height: 0 !important;
}

/* Remove ::after line (Salient creates line above social icons) */
.off-canvas-social-links.line-shown::after,
#slide-out-widget-area .off-canvas-social-links.line-shown::after,
body #slide-out-widget-area .off-canvas-social-links.line-shown::after,
#slide-out-widget-area.fullscreen-alt .off-canvas-social-links.line-shown::after,
body #slide-out-widget-area.fullscreen-alt .off-canvas-social-links.line-shown::after {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    background-color: transparent !important;
}

/* Copyright Text Styling */
#slide-out-widget-area .bottom-text,
#slide-out-widget-area p.bottom-text,
body #slide-out-widget-area .bottom-text,
body #slide-out-widget-area p.bottom-text,
html body #slide-out-widget-area p.bottom-text {
    color: #FFF !important;
    text-align: center !important;
    font-family: "IBM Plex Serif", Georgia, serif !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: normal !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Social Icons Container */
#slide-out-widget-area .off-canvas-social-links,
body #slide-out-widget-area .off-canvas-social-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Mobile: prevent icon wrapping */
@media (max-width: 999px) {
    #slide-out-widget-area .off-canvas-social-links,
    body #slide-out-widget-area .off-canvas-social-links {
        flex-wrap: nowrap !important;
    }
}

/* Social Icons - Custom SVG styling */
#slide-out-widget-area .off-canvas-social-links li,
body #slide-out-widget-area .off-canvas-social-links li,
html body #slide-out-widget-area .off-canvas-social-links li,
#slide-out-widget-area.fullscreen-alt .off-canvas-social-links li,
body #slide-out-widget-area.fullscreen-alt .off-canvas-social-links li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
}

#slide-out-widget-area .off-canvas-social-links li a,
body #slide-out-widget-area .off-canvas-social-links li a,
html body #slide-out-widget-area .off-canvas-social-links li a,
#slide-out-widget-area.fullscreen-alt .off-canvas-social-links li a,
body #slide-out-widget-area.fullscreen-alt .off-canvas-social-links li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* Hide Font Awesome icons - will be replaced with custom SVGs */
#slide-out-widget-area .off-canvas-social-links li a i,
#slide-out-widget-area .off-canvas-social-links li a i.fa,
body #slide-out-widget-area .off-canvas-social-links li a i {
    display: none !important;
}

/* Custom SVG icons styling */
#slide-out-widget-area .off-canvas-social-links li a .custom-social-icon,
body #slide-out-widget-area .off-canvas-social-links li a .custom-social-icon,
html body #slide-out-widget-area .off-canvas-social-links li a .custom-social-icon,
#slide-out-widget-area.fullscreen-alt .off-canvas-social-links li a .custom-social-icon,
body #slide-out-widget-area.fullscreen-alt .off-canvas-social-links li a .custom-social-icon {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

#slide-out-widget-area .off-canvas-social-links li a .custom-social-icon img,
body #slide-out-widget-area .off-canvas-social-links li a .custom-social-icon img,
html body #slide-out-widget-area .off-canvas-social-links li a .custom-social-icon img,
#slide-out-widget-area.fullscreen-alt .off-canvas-social-links li a .custom-social-icon img,
body #slide-out-widget-area.fullscreen-alt .off-canvas-social-links li a .custom-social-icon img {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 1 !important;
    /* SVGs already have fill="white", no filter needed */
    filter: none !important;
}

/* If SVG files have inline fill, this might not work - depends on SVG structure */
#slide-out-widget-area .off-canvas-social-links li a .custom-social-icon svg,
body #slide-out-widget-area .off-canvas-social-links li a .custom-social-icon svg {
    width: 100% !important;
    height: 100% !important;
    fill: #FFF !important;
}
/* =============================================================================
   OFF-CANVAS MENU - SIMPLE CONTAINER FADE
   On CLOSE: entire screen fades out together (no individual element animations)
   On OPEN: nice stagger animation for menu items
   ============================================================================= */

/* GPU acceleration for smooth iOS animations */
#slide-out-widget-area,
#slide-out-widget-area-bg {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}



/* ========== BACKGROUND OVERLAY ========== */
/* Force full opacity black background when open */
#slide-out-widget-area-bg.open,
#slide-out-widget-area-bg.fullscreen-alt.open,
body #slide-out-widget-area-bg.open {
    opacity: 1 !important;
    background-color: #000 !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ========== MENU PANEL (main container) ========== */
/* Let Salient handle animations via jQuery Transit */
#slide-out-widget-area.fullscreen-alt,
body #slide-out-widget-area.fullscreen-alt {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ========== SOCIAL LINKS & BOTTOM TEXT CENTERING ========== */
/* Only override transform for centering, let Salient handle animations */
#slide-out-widget-area.fullscreen-alt .off-canvas-social-links,
body #slide-out-widget-area.fullscreen-alt .off-canvas-social-links {
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
}

#slide-out-widget-area.fullscreen-alt .bottom-text,
body #slide-out-widget-area.fullscreen-alt .bottom-text {
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
}

/* =============================================================================
   DESKTOP: CLASSIC LAYOUT - OCM PANEL
   Header transitions are controlled by JS for precise timing
   ============================================================================= */


/* =============================================================================
   MOBILE ONLY: CLASSIC LAYOUT ARTICLE - FIX ANIMATION FLASHING
   Problem: When opening/closing hamburger or search in classic layout article,
   white background flashes under header during animation
   Solution: Force black background on header and smooth transitions
   ============================================================================= */
@media (max-width: 999px) {
    /* ========== HEADER BACKGROUND FIX DURING ANIMATIONS ONLY ========== */
    /* Classic layout article: Force header to have black background ONLY during OCM/search open */
    /* These classes are added by Salient when OCM is open */
    body.elegant-classic-layout.side-widget-open #header-outer,
    body.elegant-classic-layout.side-widget-open #header-outer header,
    body.elegant-classic-layout.open-search #header-outer,
    body.elegant-classic-layout.open-search #header-outer header,
    body.elegant-classic-layout.nectar-no-scroll #header-outer,
    body.elegant-classic-layout.nectar-no-scroll #header-outer header {
        background-color: #000 !important;
        transition: none !important;
    }

    /* ========== OFF-CANVAS MENU BACKGROUND FIX ========== */
    /* Ensure OCM bg is always black, no transparency flash */
    body.elegant-classic-layout #slide-out-widget-area-bg,
    body.elegant-classic-layout #slide-out-widget-area-bg.fullscreen-alt {
        background-color: #000 !important;
    }

    /* Smooth opacity transition for OCM bg */
    body.elegant-classic-layout #slide-out-widget-area-bg.fullscreen-alt {
        transition: opacity 0.35s ease-out !important;
        -webkit-transition: opacity 0.35s ease-out !important;
    }

    /* When OCM is open, full opacity */
    body.elegant-classic-layout #slide-out-widget-area-bg.fullscreen-alt.open {
        opacity: 1 !important;
    }


    /* ========== SMOOTH CLOSE ANIMATION ========== */
    /* When closing, fade out smoothly instead of instant hide */
    body.elegant-classic-layout #slide-out-widget-area.fullscreen-alt:not(.open) {
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
        -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
    }

    /* Header inner element transparent (inherits from parent) */
    body.elegant-classic-layout #header-outer header#top {
        background-color: transparent !important;
    }

    /* ========== SEARCH OVERLAY SMOOTH ANIMATION ========== */
    /* Ensure search doesn't cause white flash either */
    body.elegant-classic-layout #search-outer {
        background-color: transparent !important;
    }

    body.elegant-classic-layout #search-outer.open {
        background-color: rgba(0, 0, 0, 0.2) !important;
    }

    body.elegant-classic-layout #search-outer #search {
        background-color: #000 !important;
    }
}



/* =============================================================================
   CATEGORY/TAG ARCHIVE - SINGLE COLUMN LAYOUT & ALWAYS EXPANDED SUBMENU
   ============================================================================= */

/* Category/Tag Archive Wrapper */
.elegant-category-archive-wrapper,
.elegant-tag-archive-wrapper {
    width: 100%;
}

/* Hero Section - Full Bleed (kao single post header) */
.category-hero-section,
.tag-hero-section {
    position: relative;
    width: 100vw !important; /* Full viewport width */
    height: 100vh !important; /* MORA imati visinu kao i dijete unutar */
    min-height: 600px !important;
    margin-left: calc(-50vw + 50%) !important; /* Center i izlaz iz containera */
    margin-bottom: 0;
    overflow: hidden !important;
}

/* Hide pagination dots in category hero carousel (only 1 post shown) */
.category-hero-section .elegant-carousel-dots {
    display: none !important;
}

/* Category Hero Carousel - Full height kao single post */
/* Override plugin default heights (870px mobile, 800px desktop) */
/* Direktan child selector za MAKSIMALNU specifičnost */
.category-hero-section > .elegant-home-hero-carousel,
.category-hero-section > div[id^="elegant-hero-carousel-"],
.category-hero-section .elegant-home-hero-carousel,
.category .category-hero-section .elegant-home-hero-carousel,
body.category .category-hero-section .elegant-home-hero-carousel,
.category-hero-section div.elegant-home-hero-carousel,
.category-hero-section [id^="elegant-hero-carousel-"],
.category-hero-section div[id^="elegant-hero-carousel-"],
body.category div[id^="elegant-hero-carousel-"],
body.category .category-hero-section > div[id^="elegant-hero-carousel-"] {
    height: 100vh !important;
    min-height: 600px !important;
    max-height: none !important;
}

/* Ensure slides also fill 100% */
.category-hero-section .elegant-hero-slide,
.category-hero-section .elegant-hero-slide-bg,
.category-hero-section .elegant-hero-slide-content {
    height: 100% !important;
}

/* KRITIČNO: Desktop override za plugin media query - RANGE (1000px - 1799px) */
@media (min-width: 1000px) and (max-width: 1799px) {
    .category-hero-section > .elegant-home-hero-carousel,
    .category-hero-section > div[id^="elegant-hero-carousel-"],
    .category-hero-section .elegant-home-hero-carousel,
    .category .category-hero-section .elegant-home-hero-carousel,
    body.category .category-hero-section .elegant-home-hero-carousel,
    .category-hero-section div.elegant-home-hero-carousel,
    .category-hero-section [id^="elegant-hero-carousel-"],
    .category-hero-section div[id^="elegant-hero-carousel-"],
    body.category div[id^="elegant-hero-carousel-"],
    body.category .category-hero-section > div[id^="elegant-hero-carousel-"] {
        height: 100vh !important;
        min-height: 600px !important;
        max-height: none !important;
    }
}

/* Large Desktop override (1800px+) */
@media (min-width: 1800px) {
    .category-hero-section > .elegant-home-hero-carousel,
    .category-hero-section > div[id^="elegant-hero-carousel-"],
    .category-hero-section .elegant-home-hero-carousel,
    .category .category-hero-section .elegant-home-hero-carousel,
    body.category .category-hero-section .elegant-home-hero-carousel,
    .category-hero-section div.elegant-home-hero-carousel,
    .category-hero-section [id^="elegant-hero-carousel-"],
    .category-hero-section div[id^="elegant-hero-carousel-"],
    body.category div[id^="elegant-hero-carousel-"],
    body.category .category-hero-section > div[id^="elegant-hero-carousel-"] {
        height: 100vh !important;
        min-height: 600px !important;
        max-height: none !important;
    }
}

/* Custom padding for hero carousel content on category archives */
/* Mobile: 120px bottom padding za bolji spacing */
.category-hero-section .elegant-hero-slide-content {
    padding: 0 20px 120px 20px !important; /* Mobile */
}

@media (min-width: 1000px) {
    .category-hero-section .elegant-hero-slide-content,
    .category .category-hero-section .elegant-hero-slide-content,
    body.category .category-hero-section .elegant-hero-slide-content {
        padding: 0 7% 6vh 7% !important; /* Desktop - IDENTIČNO kao single post */
    }
}

/* Ukloni dodatni padding sa content-inner na category stranicama */
.category-hero-section .elegant-hero-content-inner,
.category .category-hero-section .elegant-hero-content-inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ========================================================================== */
/* TAG HERO SECTION - IDENTICAL TO CATEGORY (for consistent UX) */
/* ========================================================================== */

/* Hide pagination dots in tag hero carousel (only 1 post shown) */
.tag-hero-section .elegant-carousel-dots {
    display: none !important;
}

/* Tag Hero Carousel - Full height kao category */
/* Override plugin default heights (870px mobile, 800px desktop) */
/* Direktan child selector za MAKSIMALNU specifičnost */
.tag-hero-section > .elegant-home-hero-carousel,
.tag-hero-section > div[id^="elegant-hero-carousel-"],
.tag-hero-section .elegant-home-hero-carousel,
.tag .tag-hero-section .elegant-home-hero-carousel,
body.tag .tag-hero-section .elegant-home-hero-carousel,
.tag-hero-section div.elegant-home-hero-carousel,
.tag-hero-section [id^="elegant-hero-carousel-"],
.tag-hero-section div[id^="elegant-hero-carousel-"],
body.tag div[id^="elegant-hero-carousel-"],
body.tag .tag-hero-section > div[id^="elegant-hero-carousel-"] {
    height: 100vh !important;
    min-height: 600px !important;
    max-height: none !important;
}

/* Ensure slides also fill 100% */
.tag-hero-section .elegant-hero-slide,
.tag-hero-section .elegant-hero-slide-bg,
.tag-hero-section .elegant-hero-slide-content {
    height: 100% !important;
}

/* KRITIČNO: Desktop override za plugin media query - RANGE (1000px - 1799px) */
@media (min-width: 1000px) and (max-width: 1799px) {
    .tag-hero-section > .elegant-home-hero-carousel,
    .tag-hero-section > div[id^="elegant-hero-carousel-"],
    .tag-hero-section .elegant-home-hero-carousel,
    .tag .tag-hero-section .elegant-home-hero-carousel,
    body.tag .tag-hero-section .elegant-home-hero-carousel,
    .tag-hero-section div.elegant-home-hero-carousel,
    .tag-hero-section [id^="elegant-hero-carousel-"],
    .tag-hero-section div[id^="elegant-hero-carousel-"],
    body.tag div[id^="elegant-hero-carousel-"],
    body.tag .tag-hero-section > div[id^="elegant-hero-carousel-"] {
        height: 100vh !important;
        min-height: 600px !important;
        max-height: none !important;
    }
}

/* Large Desktop override (1800px+) */
@media (min-width: 1800px) {
    .tag-hero-section > .elegant-home-hero-carousel,
    .tag-hero-section > div[id^="elegant-hero-carousel-"],
    .tag-hero-section .elegant-home-hero-carousel,
    .tag .tag-hero-section .elegant-home-hero-carousel,
    body.tag .tag-hero-section .elegant-home-hero-carousel,
    .tag-hero-section div.elegant-home-hero-carousel,
    .tag-hero-section [id^="elegant-hero-carousel-"],
    .tag-hero-section div[id^="elegant-hero-carousel-"],
    body.tag div[id^="elegant-hero-carousel-"],
    body.tag .tag-hero-section > div[id^="elegant-hero-carousel-"] {
        height: 100vh !important;
        min-height: 600px !important;
        max-height: none !important;
    }
}

/* Custom padding for hero carousel content on tag archives */
/* Mobile: 120px bottom padding za bolji spacing */
.tag-hero-section .elegant-hero-slide-content {
    padding: 0 20px 120px 20px !important; /* Mobile */
}

@media (min-width: 1000px) {
    .tag-hero-section .elegant-hero-slide-content,
    .tag .tag-hero-section .elegant-hero-slide-content,
    body.tag .tag-hero-section .elegant-hero-slide-content {
        padding: 0 7% 6vh 7% !important; /* Desktop - IDENTIČNO kao category */
    }
}

/* Ukloni dodatni padding sa content-inner na tag stranicama */
.tag-hero-section .elegant-hero-content-inner,
.tag .tag-hero-section .elegant-hero-content-inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Category Hero Carousel Overlay - Mobile override je sada INLINE u category.php - nakon shortcode-a za veću specifičnost */
/* Tag Hero Carousel Overlay - Mobile override je sada INLINE u tag.php - nakon shortcode-a za veću specifičnost */

/* News Grid Section Spacing */
.category-news-grid-section,
.tag-news-grid-section {
    margin-bottom: 60px;
}

/* Always Expanded Submenu (Child Categories) - For Category Archives */
.elegant-archive-expanded-submenu .eng-submenu {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-right: 20px !important;
}

@media (min-width: 1000px) {
    .elegant-archive-expanded-submenu .eng-submenu {
        padding-right: 40px !important;
    }
}

.elegant-archive-expanded-submenu .eng-heading-clickable {
    cursor: default !important;
    pointer-events: none !important;
}

.elegant-archive-expanded-submenu .eng-heading-clickable::after {
    display: none !important;
}

/* Load More Wrapper */
.category-load-more-wrapper,
.tag-load-more-wrapper {
    width: 100%;
    margin-bottom: 80px;
}

/* Loading state for More Posts link */
.elegant-load-more-link.loading {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* Load More Error Message */
.load-more-error {
    margin-top: 20px;
    padding: 15px 25px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    font-family: "Reddit Sans", sans-serif;
    font-size: 14px;
    text-align: center;
}

/* All Posts Loaded Message */
.eng-all-posts-loaded {
    margin-top: 40px;
    padding: 20px 30px;
    font-family: "Reddit Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* No Posts Message */
.category-no-posts,
.tag-no-posts {
    padding: 100px 20px;
    text-align: center;
}

.category-no-posts h1,
.tag-no-posts h1 {
    font-family: "DM Serif Text", Georgia, serif;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #000;
}

.category-no-posts p,
.tag-no-posts p {
    font-family: "Reddit Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #666;
}

@media (max-width: 767px) {
    .category-no-posts h1,
    .tag-no-posts h1 {
        font-size: 32px;
    }

    .category-no-posts p,
    .tag-no-posts p {
        font-size: 16px;
    }
}

/* =============================================================================
   LIFESTYLE EXCLUSIVE - Border & Badge Styling
   ============================================================================= */

/* Lifestyle Exclusive wrapper - golden border and padding */
.eng-single-item.eng-lifestyle-exclusive {
    border: 1px solid #A58134 !important;
    padding: 40px 20px 20px 20px !important;
    position: relative !important;
    margin-top: 20px !important;
}

/* Lifestyle Exclusive Badge - positioned on top border line */
.eng-exclusive-badge {
    display: flex !important;
    width: 198px !important;
    height: 33px !important;
    padding: 7px 10px !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #FFF !important;
    z-index: 10 !important;
}

.eng-exclusive-badge svg {
    width: 14px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
}

.eng-exclusive-badge span {
    color: #A58134 !important;
    font-family: "Reddit Sans", sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 22px !important;
    letter-spacing: 1.95px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Desktop Small (1000-1300px) - Smallest badge to prevent overflow (optimized for readability) */
@media (min-width: 1000px) and (max-width: 1300px) {
    .eng-exclusive-badge {
        width: auto !important;
        min-width: 165px !important;
        max-width: 180px !important;
        height: auto !important;
        padding: 6px 9px !important;
        gap: 6px !important;
    }

    .eng-exclusive-badge svg {
        width: 12px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .eng-exclusive-badge span {
        color: #A58134 !important;
        font-family: "Reddit Sans", sans-serif !important;
        font-size: 10px !important;
        font-style: normal !important;
        font-weight: 800 !important;
        line-height: 14px !important;
        letter-spacing: 1.6px !important;
        text-transform: uppercase !important;
    }
}

/* Desktop Medium (1301-1500px) - Medium badge */
@media (min-width: 1301px) and (max-width: 1500px) {
    .eng-exclusive-badge {
        width: auto !important;
        min-width: 250px !important;
        max-width: 270px !important;
        height: auto !important;
        padding: 9px 14px !important;
        gap: 10px !important;
    }

    .eng-exclusive-badge svg {
        width: 21px !important;
        height: 27px !important;
        flex-shrink: 0 !important;
    }

    .eng-exclusive-badge span {
        color: #A58134 !important;
        font-family: "Reddit Sans", sans-serif !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 800 !important;
        line-height: 19px !important;
        letter-spacing: 2.5px !important;
        text-transform: uppercase !important;
    }
}

/* Desktop Large (1501px+) - Largest badge */
@media (min-width: 1501px) {
    .eng-exclusive-badge {
        width: auto !important;
        min-width: 280px !important;
        max-width: 320px !important;
        height: auto !important;
        padding: 10px 15px !important;
        gap: 12px !important;
    }

    .eng-exclusive-badge svg {
        width: 26px !important;
        height: 33px !important;
        flex-shrink: 0 !important;
    }

    .eng-exclusive-badge span {
        color: #A58134 !important;
        font-family: "Reddit Sans", sans-serif !important;
        font-size: 20px !important;
        font-style: normal !important;
        font-weight: 800 !important;
        line-height: 20px !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
    }
}

/* Single Column - Mobile image height 315px */
@media (max-width: 999px) {

    .eng-single-item .eng-post-image img {
        height: 315px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
}

/* Najnovije Carousel - Mobile image height 419px */
@media (max-width: 999px) {
    .enj-slide-image {
        height: 419px !important;
        flex-shrink: 0 !important;
        align-self: stretch !important;
    }

    .enj-slide-image img {
        height: 419px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
}

/* Single Column Layout - Mobile padding 23px */
@media (max-width: 420px) {
    .eng-layout-single-column .eng-container {
        width: 100%;
        padding: 20px 23px 60px 23px;
        box-sizing: border-box;
    }
}

/* =============================================================================
   CUSTOM SINGLE POST HEADER
   ============================================================================= */

/* Hide Salient default header on single posts */
.single-post #page-header-wrap {
    display: none !important;
}

/* Remove top spacing on single posts */
.single-post .container-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Override Salient's material skin padding (more specific selector) */
body.single-post.material[data-bg-header=true] .container-wrap {
    padding-top: 0 !important;
}

.single-post .main-content {
    padding-top: 0 !important;
}

.single-post #ajax-content-wrap {
    padding-top: 0 !important;
}

/* Custom single post header container */
.elegant-single-post-header {
    position: relative;
    width: 100vw !important;
    height: 100vh;
    min-height: 600px;
    margin-left: calc(-50vw + 50%) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-bottom: 6vh;
}

/* Mobile override - padding-bottom 100px */
@media (max-width: 767px) {
    .elegant-single-post-header {
        padding-bottom: 100px !important;
    }
}

/* Radial gradient overlay - Base (Desktop) */
.elegant-single-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(279.88% 52.64% at 52.93% 36.5%, rgba(0, 0, 0, 0.00) 25.96%, #000 100%);
    background-blend-mode: multiply, normal;
    z-index: 1;
}

/* Mobile overlay override je sada INLINE u functions.php - bliže DOM elementu za veću specifičnost */

/* Desktop overlay - linear gradient with 40% opacity */
@media (min-width: 1000px) {
    .elegant-single-header-overlay {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);
        background-blend-mode: normal;
    }
}

/* Content wrapper */
.elegant-single-header-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 23px;
    max-width: 100%;
}

/* Category badge */
.elegant-single-category {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 30px 10px 30px !important;
    margin-bottom: 30px !important;
    white-space: nowrap !important;
}

.elegant-single-category a {
    color: #FFF !important;
    font-family: "Reddit Sans", sans-serif !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 15px !important;
    letter-spacing: 3.4px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease !important;
}

/* Desktop Category Badge - matching hero carousel */
@media (min-width: 1000px) {
    .elegant-single-category {
        margin-bottom: 50px !important;
        min-width: 233px !important;
        height: 46px !important;
    }

    .elegant-single-category a {
        font-size: 25px !important;
        line-height: 30px !important;
        letter-spacing: 5px !important;
    }
}

.elegant-single-category a:hover {
    opacity: 0.7 !important;
}

/* Post title - Base styles */
.elegant-single-title {
    color: #FFF !important;
    text-align: center !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

/* Mobile styles - DM Serif Text, normal, NO uppercase */
@media (max-width: 999px) {
    .elegant-single-title {
        font-family: "DM Serif Text", Georgia, serif !important;
        font-size: 40px !important;
        font-style: normal !important; /* NOT italic */
        font-weight: 400 !important;
        line-height: 43px !important; /* 107.5% */
        letter-spacing: -0.8px !important;
        text-transform: none !important; /* NO uppercase */
    }
}

/* Mobile padding - dodatni spacing ispod naslova */
@media (max-width: 767px) {
    .elegant-single-title {
        padding-bottom: 20px !important;
    }
}

/* Small Desktop (1000px - 1300px) - EB Garamond, italic, uppercase */
@media (min-width: 1000px) and (max-width: 1300px) {
    .elegant-single-title {
        font-family: "EB Garamond", Georgia, serif !important;
        font-size: 40px !important;
        font-style: italic !important;
        font-weight: 400 !important;
        line-height: 1.1 !important;
        letter-spacing: -1.2px !important;
        text-transform: uppercase !important;
        margin: 0 0 25px 0 !important;
    }
}

/* Medium Desktop (1301px - 1599px) - EB Garamond, italic, uppercase */
@media (min-width: 1301px) and (max-width: 1599px) {
    .elegant-single-title {
        font-family: "EB Garamond", Georgia, serif !important;
        font-size: 60px !important;
        font-style: italic !important;
        font-weight: 400 !important;
        line-height: 1.05 !important;
        letter-spacing: -1.5px !important;
        text-transform: uppercase !important;
        margin: 0 0 30px 0 !important;
    }
}

/* Large Desktop (1600px+) - EB Garamond, italic, uppercase */
@media (min-width: 1600px) {
    .elegant-single-title {
        font-family: "EB Garamond", Georgia, serif !important;
        font-size: 100px !important;
        font-style: italic !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        letter-spacing: -2px !important;
        text-transform: uppercase !important;
        margin: 0 0 30px 0 !important;
    }
}

/* Meta info (author + date) */
.elegant-single-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}

.elegant-single-author,
.elegant-single-date {
    color: #FFF !important;
    text-align: center !important;
    font-family: "Reddit Sans", sans-serif !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 27px !important;
    letter-spacing: 1.5px !important;
}

/* Responsive Single Post Header - Desktop */
@media (min-width: 1000px) {
    .elegant-single-title {
        max-width: 1494px !important;
    }

    .elegant-single-author,
    .elegant-single-date {
        font-size: 25px !important;
        line-height: 50px !important;
        letter-spacing: 2.5px !important;
    }
}

/* ========================================================================
   CATEGORY HERO CAROUSEL TITLE - Responsive
   ======================================================================== */
/* Mobile styles - EXACT Figma specifications */
.elegant-hero-slide-title {
    color: #FFF !important;
    text-align: center !important;
    font-family: "EB Garamond", Georgia, serif !important;
    font-size: 45px !important;
    font-style: italic !important;
    line-height: 50px !important; /* 113.636% */
    letter-spacing: -0.88px !important;
    text-transform: uppercase !important;
}

/* Small Desktop (1000px - 1300px) */
@media (min-width: 1000px) and (max-width: 1300px) {
    .elegant-hero-slide-title {
        font-size: 40px !important;
        line-height: 1.1 !important;
        letter-spacing: -1.2px !important;
        max-width: 1494px !important;
    }
}

/* Medium Desktop (1301px - 1599px) */
@media (min-width: 1301px) and (max-width: 1599px) {
    .elegant-hero-slide-title {
        font-size: 60px !important;
        line-height: 1.05 !important;
        letter-spacing: -1.5px !important;
        max-width: 1494px !important;
    }
}

/* Large Desktop (1600px+) */
@media (min-width: 1600px) {
    .elegant-hero-slide-title {
        font-size: 100px !important;
        line-height: 1 !important;
        letter-spacing: -2px !important;
        max-width: 1494px !important;
    }
}

/* Category & Tag pages ONLY - font-weight 500 */
body.category .elegant-hero-slide-title,
body.tag .elegant-hero-slide-title {
    font-weight: 500 !important;
}

/* Mobile (<999px) - font-weight 400 */
@media (max-width: 999px) {
    .elegant-hero-slide-title {
        font-weight: 400 !important;
    }
}

/* Responsive Single Post Header - Mobile */
@media (max-width: 767px) {
    .elegant-single-category a {
        font-size: 17px !important;
        letter-spacing: 3.4px !important;
    }

    .elegant-single-title {
        font-size: 40px !important;
        line-height: 43px !important;
        letter-spacing: -0.8px !important;
    }
}

/* Responsive Single Post Header - Tablet */
@media (min-width: 768px) and (max-width: 999px) {
    .elegant-single-category a {
        font-size: 20px !important;
        letter-spacing: 4px !important;
    }

    .elegant-single-title {
        font-size: 60px !important;
        line-height: 65px !important;
        letter-spacing: -1.2px !important;
    }
}

/* =============================================================================
   DESKTOP SEARCH OVERRIDES - ONLY DESKTOP (min-width: 1000px)
   ============================================================================= */

@media (min-width: 1000px) {
    /* DESKTOP: Remove black background from search area and adjust height */
    #search-outer #search,
    body.material #search-outer #search,
    body #search-outer #search,
    #search-outer.open #search,
    body.material #search-outer.open #search,
    body #search-outer.open #search {
        background: transparent !important;
        background-color: transparent !important;
        height: auto !important;
        min-height: 200px !important;
        overflow: visible !important;
        padding-bottom: 80px !important;
        /* FIX: Align content to TOP instead of CENTER */
        justify-content: flex-start !important;
        align-items: center !important;
        /* Position below header - 100px header + 120px spacing */
        padding-top: 220px !important;
        /* FIX: Center #search on ultra-wide screens (>1920px) */
        /* Salient sets max-width: 1920px, so we need to center it */
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* DESKTOP FIX: #search-box has translateY(200px) from Salient - override it! */
    #search-outer #search #search-box,
    body #search-outer #search #search-box,
    body.material #search-outer #search #search-box,
    #search-outer.open #search #search-box,
    body #search-outer.open #search #search-box,
    body.material #search-outer.open #search #search-box {
        transform: none !important;
        -webkit-transform: none !important;
        margin: 0 !important;
        position: relative !important;
        top: 0 !important;
    }

    /* DESKTOP: Disable other pseudo-elements (only ::before on #search-outer is allowed) */
    #search-outer::after,
    #search-outer #search::before,
    #search-outer #search::after,
    body.material #search-outer::after,
    body.material #search-outer #search::before,
    body.material #search-outer #search::after,
    body #search-outer::after,
    body #search-outer #search::before,
    body #search-outer #search::after {
        display: none !important;
        content: none !important;
        background: none !important;
    }

    /* DESKTOP: Full-screen gradient overlay - dark bottom, lighter middle, dark top */
    #search-outer.open::before,
    body.material #search-outer.open::before,
    body #search-outer.open::before {
        content: '' !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.5) 25%,
            rgba(0, 0, 0, 1) 100%
        ) !important;
        z-index: -1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* DESKTOP: Padding moved to #search element for better control */
    #search-outer.open,
    body.material #search-outer.open,
    body #search-outer.open {
        padding-top: 0 !important;
    }

    /* DESKTOP FIX: Container must be wider and centered to allow form centering */
    #search-outer #search .container,
    body.material #search-outer #search .container,
    body #search-outer #search .container,
    #search-outer.open #search .container,
    body.material #search-outer.open #search .container,
    body #search-outer.open #search .container {
        max-width: 1200px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 50px !important;
    }

    /* DESKTOP: Make input field and line much wider and thinner */
    #search-outer #search form,
    body.material #search-outer #search form,
    body #search-outer #search form,
    #search-outer.open #search form,
    body.material #search-outer.open #search form,
    body #search-outer.open #search form {
        max-width: 1100px !important;
        margin: 0 auto !important;
    }

    #search-outer #search form input[type="text"],
    body.material #search-outer #search form input[type="text"],
    #search-outer #search form input[type="text"][name="s"],
    body.material #search-outer #search form input[type="text"][name="s"],
    body #search-outer #search form input[type="text"][name="s"],
    #search-outer.open #search form input[type="text"][name="s"],
    body.material #search-outer.open #search form input[type="text"][name="s"],
    body #search-outer.open #search form input[type="text"][name="s"] {
        max-width: 1100px !important;
        border-bottom-width: 0.3px !important;
    }

    /* DESKTOP: Custom search label wider and visible */
    .custom-search-label,
    #search-outer .custom-search-label,
    body.material #search-outer .custom-search-label,
    #search-outer.open .custom-search-label,
    body.material #search-outer.open .custom-search-label,
    body #search-outer.open .custom-search-label {
        max-width: 1100px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 100 !important;
        position: relative !important;
    }
}

/* =============================================================================
   MOBILE OVERRIDES
   ============================================================================= */

@media (max-width: 999px) {
    /* Footer Col 1 - Increased gap on mobile */
    .elegant-footer-col-1 {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
        gap: 40px !important;
        width: 100% !important;
    }
}

/* =============================================================================
   SEARCH OVERLAY - FADE IN ANIMATION (REPLACE SLIDE DOWN)
   iOS optimized with GPU acceleration
   ============================================================================= */

/* GPU acceleration for smooth iOS animations */
#search-outer,
#search-outer #search {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Override Salient's slide-down animation with fade-in */
#search-outer,
body.material #search-outer,
body #search-outer {
    -webkit-transition: opacity 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out !important;
}

/* Remove any transform animations - ALL devices */
#search-outer.open,
body.material #search-outer.open,
body #search-outer.open,
#search-outer #search,
body.material #search-outer #search,
body #search-outer #search,
#search-outer.open #search,
body.material #search-outer.open #search,
body #search-outer.open #search {
    -webkit-transform: translateY(0) !important;
    -moz-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    transform: translateY(0) !important;
}

/* Mobile specific: Also apply to overlay background */
@media (max-width: 999px) {
    #search-outer:before,
    body.material #search-outer:before,
    body #search-outer:before,
    #search-outer.open:before,
    body.material #search-outer.open:before,
    body #search-outer.open:before {
        -webkit-transform: translateY(0) translateZ(0) !important;
        -moz-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
        transform: translateY(0) translateZ(0) !important;
        -webkit-transition: opacity 0.3s ease-in-out !important;
        transition: opacity 0.3s ease-in-out !important;
    }

    /* Horoscope main heading - mobile margin */
    .ehh-main-heading {
        margin: 80px auto 30px auto !important;
    }

    /* Horoscope grid - mobile gap */
    .ehh-horoscope-grid {
        gap: 23px !important;
    }
}

/* =============================================================================
   CATEGORY ARCHIVE - FORCE EXPANDED SUBMENU
   ============================================================================= */

/* Force submenu to be always visible on category archives */
.elegant-archive-expanded-submenu .eng-submenu {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
}

/* Remove list markers (bullet points) from submenu */
.elegant-archive-expanded-submenu .eng-submenu-list {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
}

.elegant-archive-expanded-submenu .eng-submenu-item {
    list-style: none !important;
    list-style-type: none !important;
}

/* Remove clickable cursor from heading on category archive */
.elegant-archive-expanded-submenu .eng-heading-clickable {
    cursor: default !important;
    pointer-events: none !important;
}

/* Desktop: Submenu in horizontal row */
@media (min-width: 1000px) {
    .elegant-archive-expanded-submenu .eng-submenu-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 3vw !important;
        justify-content: flex-end !important;
    }

    .elegant-archive-expanded-submenu .eng-submenu-item {
        margin: 0 !important;
    }

    /* Five posts first large layout - heading wrapper grid */
    .eng-layout-five-posts-first-large .eng-heading-wrapper.eng-has-submenu {
        display: grid;
        grid-template-columns: 30% 70%;
        align-items: flex-start;
    }

    /* Five posts first large layout - heading font size */
    .eng-layout-five-posts-first-large .eng-heading {
        font-size: 30px !important;
        line-height: 30px !important;
        margin: 20px 0 60px 0 !important;
    }
}

/* =============================================================================
   LIFESTYLE EXCLUSIVE - single_column_image_title layout support
   ============================================================================= */

/* Lifestyle Exclusive wrapper for single_column_image_title layout */
.eng-single-column-image-title-item.eng-lifestyle-exclusive {
    border: 1px solid #A58134 !important;
    padding: 40px 20px 20px 20px !important;
    position: relative !important;
    margin-top: 20px !important;
}

/* Lifestyle Exclusive for five_posts_first_large layout - Large Post */
.eng-large-post.eng-lifestyle-exclusive {
    border: 1px solid #A58134 !important;
    padding: 40px 20px 20px 20px !important;
    position: relative !important;
}

/* Lifestyle Exclusive for five_posts_first_large layout - Small Posts */
.eng-small-post-item.eng-lifestyle-exclusive {
    border: 1px solid #A58134 !important;
    padding: 40px 20px 20px 20px !important;
    position: relative !important;
}

/* =============================================================================
   SINGLE COLUMN IMAGE TITLE - Mobile Styling (Category Archives)
   ============================================================================= */

/* Mobile only - spacing and styling */
@media (max-width: 999px) {
    /* Category - styling */
    .eng-single-column-image-title-item .eng-image-title-category a {
        color: #000 !important;
        font-family: "Reddit Sans", sans-serif !important;
        font-size: 13px !important;
        font-style: normal !important;
        font-weight: 800 !important;
        line-height: 15px !important;
        letter-spacing: 2.6px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    /* Title - styling */
    .eng-single-column-image-title-item .eng-image-title-title {
        margin: 0 !important;
    }

    .eng-single-column-image-title-item .eng-image-title-title a {
        color: #4D4D4D !important;
        font-family: "DM Serif Text", serif !important;
        font-size: 20px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 20px !important;
        letter-spacing: -0.2px !important;
        text-decoration: none !important;
        display: block !important;
    }

    /* Homepage only - add margin-top to title */
    body.home .eng-single-column-image-title-item .eng-image-title-title a {
        margin-top: 15px !important;
    }
}

/* =============================================================================
   CATEGORY ARCHIVE - Load More Grid (Desktop 4 Columns)
   ============================================================================= */

/* Fade-in animation for each load more batch */
@keyframes elegantFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Apply animation to each batch of loaded posts */
.eng-load-more-batch {
    animation: elegantFadeIn 0.6s ease-out forwards;
}

/* Load more posts on desktop - 4 column grid */
@media (min-width: 1000px) {
    /* Each batch has its own grid and margin-top */
    .category-load-more-wrapper .eng-load-more-batch,
    .tag-load-more-wrapper .eng-load-more-batch {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 40px 30px !important;
        margin-top: 120px !important;
    }

    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item {
        margin: 0 !important;
        gap: 0 !important;
    }

    /* Desktop - Image spacing and aspect ratio */
    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-image,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-image {
        margin-bottom: 12px !important;
        width: 100% !important;
        aspect-ratio: 7 / 7.3 !important;
        overflow: hidden !important;
    }

    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-image img,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Desktop - Category spacing and styling (base 1000px+) */
    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-category,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-category {
        margin: 10px 0 12px 0 !important;
    }

    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-category a,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-category a {
        color: #000 !important;
        font-family: "Reddit Sans", sans-serif !important;
        font-size: 15px !important;
        font-style: normal !important;
        font-weight: 800 !important;
        line-height: 15px !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    /* Desktop - Title styling (base 1000px+) */
    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-title,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-title {
        margin: 0 !important;
    }

    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-title a,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-title a {
        color: #4D4D4D !important;
        font-family: 'DM Serif Text', Georgia, serif !important;
        font-size: 25px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 25px !important;
        letter-spacing: -0.49px !important;
        text-decoration: none !important;
        display: block !important;
    }

    /* Lifestyle Exclusive in load more grid */
    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item.eng-lifestyle-exclusive,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item.eng-lifestyle-exclusive {
        padding: 30px 15px 15px 15px !important;
    }
}

/* Medium Desktop (1401px - 1500px) - Intermediate fonts for load more */
/* MATCHED to News Grid Layout 5 Small Posts: category 18px, title 30px */
@media (min-width: 1401px) and (max-width: 1500px) {
    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-category a,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-category a {
        font-size: 18px !important;
        line-height: 15px !important;
        letter-spacing: 3.5px !important;
    }

    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-title a,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-title a {
        font-size: 30px !important;
        line-height: 30px !important;
        letter-spacing: -0.6px !important;
    }
}

/* Large Desktop (1501px+) - Larger fonts for load more */
@media (min-width: 1501px) {
    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-category a,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-category a {
        font-size: 20px !important;
        line-height: 15px !important;
        letter-spacing: 4px !important;
    }

    .category-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-title a,
    .tag-load-more-wrapper .eng-load-more-batch .eng-single-column-image-title-item .eng-image-title-title a {
        font-size: 35px !important;
        line-height: 35px !important;
        letter-spacing: -0.7px !important;
    }
}

/* Mobile load more - vertical stack */
@media (max-width: 999px) {
    .category-load-more-wrapper .eng-load-more-batch,
    .tag-load-more-wrapper .eng-load-more-batch {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        margin-top: 30px !important;
    }
}

/* "Svi članci su učitani" text styling - boldan, not uppercase */
.category-load-more-message,
.eng-all-posts-loaded {
    font-weight: 700 !important;
    text-transform: none !important;
    text-align: center !important;
    margin-top: 40px !important;
    color: #4D4D4D !important;
    font-size: 16px !important;
}

.eng-all-posts-loaded strong {
    font-weight: 700 !important;
}

/* =============================================================================
   ENG-MORE-LINK SPACER - Bottom spacing when "VIŠE ČLANAKA" button is hidden
   ============================================================================= */

/* Mobile (Base) - Small spacing when no button */
.eng-more-link-spacer {
    margin-top: 0px !important;
    padding: 5px 60px 5px 60px !important;
}

/* Desktop (1000px+) - Larger spacing matching 60% of original button padding */
/* Layout-specific selectors to override plugin's default padding */
@media (min-width: 1000px) {
    .eng-layout-two-column .eng-more-link-spacer,
    .eng-layout-featured-grid .eng-more-link-spacer,
    .eng-layout-grid-two .eng-more-link-spacer,
    .eng-layout-single-column .eng-more-link-spacer,
    .eng-layout-single-column-image-title .eng-more-link-spacer,
    .eng-layout-five-posts-first-large .eng-more-link-spacer,
    .eng-layout-three-column-row .eng-more-link-spacer,
    .eng-layout-two-rows-first-two-large .eng-more-link-spacer {
        margin-top: 0px !important;
        padding: 42px 60px 72px 60px !important;
    }
}

/* =============================================================================
   SINGLE POST - CONTENT WIDTH CONSTRAINTS (Desktop)
   ============================================================================= */

/* Desktop (1000px+): Max-width 1100px sa 50px padding lijevo/desno */
@media (min-width: 1000px) {
    /* Targetira glavni row container */
    .single-post .container-wrap .container .row {
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 50px !important;
        padding-right: 50px !important;
    }

    /* Osiguraj da post-area nema dodatni padding koji bi sužavao content */
    .single-post .post-area {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Reset Salient default padding/margin za .span_9 kolonu (desktop) */
@media (min-width: 1000px) {
    .post-area.masonry.span_9,
    .post-area.span_9,
    .single-portfolio .post-area.span_9,
    body.search.material .container-wrap .span_9,
    body[data-ext-responsive=true] .post-area.masonry.span_9,
    body[data-ext-responsive=true] .post-area.masonry.span_9.meta_overlaid {
        padding-right: 0;
        margin-right: 0;
        width: 100%;
    }
}

/* Fix: Ukloni prazan prostor iznad footera na mobilnom */
@media (max-width: 999px) {
    /* Ukloni padding/margin sa row koji sadrži post-area */
    .single-post .row,
    .single-portfolio .row {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* REMOVED: Let Najnovije plugin use its natural spacing (60px top / 0px bottom mobile) */

    /* Ukloni donji padding sa post-area */
    .single-post .post-area,
    .single-portfolio .post-area {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* =============================================================================
   SINGLE POST - WHITE SPACE FIX (Ultra-specific selectors)
   ============================================================================= */

/**
 * Fix: Remove white space between post content and footer on single posts
 * Target: The gap caused by Salient's .row container padding/margin
 * Approach: Multi-layer fix with transform + negative margin for safety
 */

/* Strategy 1: REMOVED - User wants natural plugin spacing with custom bottom padding */

/* Custom bottom spacing for Najnovije wrapper ONLY on category and single pages */
/* Mobile: adds bottom padding (plugin default is 0px) */
.single-post .category-najnovije-section .elegant-najnovije-wrapper {
    padding: 0 0 40px 0 !important;
}

/* Category pages - custom padding */
.category .category-najnovije-section .elegant-najnovije-wrapper {
    padding: 80px 0 40px 0 !important;
}

/* Tag pages - custom padding */
.tag .tag-najnovije-section {
    padding: 80px 0 40px 0 !important;
}

/* Modern layout only - pull najnovije closer on mobile */
.single-post:not(.elegant-classic-layout) .category-najnovije-section .elegant-najnovije-wrapper {
    margin-bottom: -40px !important;
}

/* Modern layout + Dark theme - add padding-top on mobile */
.single-post.elegant-dark-theme:not(.elegant-classic-layout) .category-najnovije-section .elegant-najnovije-wrapper {
    padding-top: 70px !important;
}

/* Modern layout + Light theme - add padding-top on mobile (consistent spacing) */
.single-post.elegant-light-theme:not(.elegant-classic-layout) .category-najnovije-section .elegant-najnovije-wrapper {
    padding-top: 70px !important;
}

/* Desktop: reset modern layout mobile overrides */
@media (min-width: 1000px) {
    .single-post:not(.elegant-classic-layout) .category-najnovije-section .elegant-najnovije-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 80px !important;
    }

    /* Desktop + Dark theme - add padding-top */
    .single-post.elegant-dark-theme:not(.elegant-classic-layout) .category-najnovije-section .elegant-najnovije-wrapper {
        padding-top: 80px !important;
    }

    /* Desktop + Light theme - add padding-top (consistent spacing) */
    .single-post.elegant-light-theme:not(.elegant-classic-layout) .category-najnovije-section .elegant-najnovije-wrapper {
        padding-top: 80px !important;
    }
}

/* Desktop: increases bottom padding from plugin's default 20px to 50px */
@media (min-width: 1000px) {
    .single-post .category-najnovije-section .elegant-najnovije-wrapper {
        padding: 0 0 80px 0 !important;
    }
}

/* ADD EXTRA SPACE ABOVE NAJNOVIJE - ONLY for regular single posts (not horoscope) */
.single-post:not(.single-zodiac_sign) .category-najnovije-section {
    margin-top: 50px !important; /* Mobile */
}

@media (min-width: 1000px) {
    .single-post:not(.single-zodiac_sign) .category-najnovije-section {
        margin-top: 120px !important; /* Desktop */
    }
}

/* CLASSIC LAYOUT: Use same spacing as modern layout */
/* Modern has: margin-top 80px + wrapper padding-top 60px = 140px total */
/* Classic uses same values - no overrides needed for wrapper padding */
body.elegant-classic-layout .category-najnovije-section,
article.elegant-classic-single + .category-najnovije-section {
    margin-top: 80px !important; /* Same as modern */
}

@media (min-width: 1000px) {
    body.elegant-classic-layout .category-najnovije-section,
    article.elegant-classic-single + .category-najnovije-section {
        margin-top: 120px !important; /* Same as modern */
    }
}

/* Strategy 2: Force zero spacing on all parent containers */
body.single-post #ajax-content-wrap .container-wrap,
body.single-post .container-wrap > .container,
body.single-post #ajax-content-wrap .container-wrap .container .row,
body.single-post .main-content > .row,
.single-post #ajax-content-wrap .row {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Strategy 3: Target the exact problematic row element */
body.single-post.material #ajax-content-wrap .container-wrap .container .row,
body.single-post #ajax-content-wrap > .container-wrap > .container > .row,
.single-post .nectar-global-section.before-footer + * {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Strategy 4: REMOVED - Let Najnovije plugin control its own spacing (80px top / 20px bottom desktop) */

/* Strategy 5: Nuclear option - Transform the footer upwards (last resort, non-breaking) */
/* Uncomment if above strategies don't work:
body.single-post #footer-outer,
body.single-post .nectar-global-section.before-footer {
    transform: translateY(-60px) !important;
}
*/

/* =============================================================================
   SOCIAL SHARE BUTTONS - MOBILE RESPONSIVE
   ============================================================================= */

@media (max-width: 767px) {
    .elegant-share-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .elegant-share-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
}
/* =============================================================================
   ELEGANT INTRO TEXT (VEĆI) - WPBAKERY ELEMENT
   ============================================================================= */

.elegant-intro-text-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

.elegant-intro-text {
    color: #000;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 60px;
    font-style: italic;
    font-weight: 600;
    line-height: 60px;
    margin: 0;
    padding: 0;
    margin-bottom: 50px;
}

/* Mobile Styles */
@media (max-width: 999px) {
    .elegant-intro-text {
        font-family: "DM Serif Text", Georgia, serif;
        font-size: 30px;
        font-style: italic;
        font-weight: 600;
        line-height: 34px;
        margin-bottom: 10px;
    }
}

/* =============================================================================
   ELEGANT INSTAGRAM EMBED - WPBAKERY ELEMENT
   ============================================================================= */

/* Wrapper - controls desktop width and centering */
.elegant-instagram-embed-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 40px auto 60px auto !important;
    padding: 0;
    pointer-events: auto !important;
}

/* Desktop: Multi-layer constraint to prevent FOUC (Flash of Unstyled Content) */
/* Apply max-width at MULTIPLE levels to ensure NO width shift */
@media (min-width: 1000px) {
    /* Layer 1: Container constraint (outer boundary) */
    .elegant-instagram-embed-wrapper[data-desktop-width="800"] .elegant-instagram-embed-container {
        max-width: 800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .elegant-instagram-embed-wrapper[data-desktop-width="600"] .elegant-instagram-embed-container {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .elegant-instagram-embed-wrapper[data-desktop-width="1000"] .elegant-instagram-embed-container {
        max-width: 1000px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .elegant-instagram-embed-wrapper[data-desktop-width="full"] .elegant-instagram-embed-container {
        max-width: 100% !important;
    }

    /* Layer 2: Blockquote constraint (redundant but necessary) */
    .elegant-instagram-embed-wrapper[data-desktop-width="800"] .instagram-media {
        max-width: 800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .elegant-instagram-embed-wrapper[data-desktop-width="600"] .instagram-media {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .elegant-instagram-embed-wrapper[data-desktop-width="1000"] .instagram-media {
        max-width: 1000px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .elegant-instagram-embed-wrapper[data-desktop-width="full"] .instagram-media {
        max-width: 100% !important;
    }
}

/* Instagram embed container - starts invisible via inline style */
.elegant-instagram-embed-container {
    position: relative;
    width: 100%;
    transition: opacity 1.2s ease-out;
}

/* When iframe is fully loaded - FADE IN */
.elegant-instagram-embed-container.ig-ready {
    opacity: 1 !important;
}

/* Instagram blockquote/embed */
.elegant-instagram-embed-container .instagram-media {
    margin: 0 auto !important;
}

.elegant-instagram-embed-container iframe {
    display: block;
    width: 100% !important;
    border: none;
}

/* Allow all clicks on Instagram embed - let Instagram handle it */
.elegant-instagram-embed-container .instagram-media,
.elegant-instagram-embed-container .instagram-media * {
    pointer-events: auto !important;
}

/* Instagram iframe should respect parent width constraints */
.elegant-instagram-embed-container .instagram-media iframe {
    width: 100% !important;
    max-width: inherit; /* Inherit max-width from parent blockquote */
}

/* Hide Instagram comment section */
.elegant-instagram-embed-container .instagram-media form {
    display: none !important;
}

/* Hide comment input area in Instagram embed */
.elegant-instagram-embed-container .instagram-media [role="presentation"] + div,
.elegant-instagram-embed-container .instagram-media textarea,
.elegant-instagram-embed-container .instagram-media input[placeholder*="Komentirajte"],
.elegant-instagram-embed-container .instagram-media input[placeholder*="Add a comment"] {
    display: none !important;
}

/* Mobile: full width */
@media (max-width: 999px) {
    .elegant-instagram-embed-wrapper {
        margin: 30px auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .elegant-instagram-embed-container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =============================================================================
   ELEGANT VIDEO EMBED - WPBAKERY ELEMENT
   ============================================================================= */

/* Wrapper - Desktop: 40px top/bottom | Mobile: 30px top/bottom */
.elegant-video-embed-wrapper {
    margin: 40px auto 40px auto !important;
}

/* Mobile: smaller margins */
@media (max-width: 999px) {
    .elegant-video-embed-wrapper {
        margin: 30px auto 30px auto !important;
    }
}

/* =============================================================================
   ELEGANT ZLATNI VEĆI TEKST - WPBAKERY ELEMENT
   ============================================================================= */

.elegant-gold-text-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

/* Desktop Styles */
.elegant-gold-text {
    color: #A58134 !important;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Mobile Styles */
@media (max-width: 999px) {
    .elegant-gold-text {
        color: #A58134 !important;
        font-family: "IBM Plex Serif", Georgia, serif;
        font-size: 25px;
        font-style: italic;
        font-weight: 300;
        line-height: 28px;
    }
}

/* =============================================================================
   ELEGANT IMAGE GALLERY WITH TEXT - WPBAKERY ELEMENT
   ============================================================================= */

/* Main wrapper - max-width 800px, centered */
.elegant-image-gallery-wrapper {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Individual gallery item */
.elegant-gallery-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Image wrapper */
.elegant-gallery-image-wrapper {
    width: 100%;
    overflow: hidden;
}

.elegant-gallery-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Text below image */
.elegant-gallery-text {
    margin-top: 16px;
    color: #000;
    text-align: center;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-style: normal;
    font-weight: 500;
}

/* Desktop: 25px font-size, 35px line-height, 80px spacing */
@media (min-width: 1000px) {
    .elegant-gallery-item {
        padding-top: 80px; /* Svi itemi imaju top padding */
        padding-bottom: 0;
    }

    /* Zadnji item ima i bottom padding */
    .elegant-gallery-item:last-child {
        padding-bottom: 80px;
    }

    .elegant-gallery-text {
        font-size: 25px;
        line-height: 35px; /* 140% */
    }
}

/* Mobile: 17px font-size, 20px line-height, 30px spacing */
@media (max-width: 999px) {
    .elegant-gallery-item {
        padding-top: 30px; /* Svi itemi imaju top padding */
        padding-bottom: 0;
    }

    /* Zadnji item ima i bottom padding */
    .elegant-gallery-item:last-child {
        padding-bottom: 30px;
    }

    .elegant-gallery-text {
        font-size: 17px;
        line-height: 20px; /* 117.647% */
    }
}

/* =============================================================================
   ELEGANT JEDNA SLIKA - Full-width image with photo credit and description
   ============================================================================= */

/* Wrapper - full width with vertical spacing (same as Instagram embed) */
/* Desktop: 40px top/bottom | Mobile: 30px top/bottom */
.elegant-single-image-wrapper {
    width: 100%;
    margin: 40px 0 40px 0 !important;
    padding: 0;
}

/* Image container - relative for positioning credit */
.elegant-single-image-container {
    position: relative;
    width: 100%;
    line-height: 0; /* Remove gap below image */
}

/* Image - full width, maintain aspect ratio */
/* Override Salient theme .row .col img margin-bottom: 15px */
.elegant-single-image-wrapper .elegant-single-image,
.row .col .elegant-single-image-wrapper .elegant-single-image,
.elegant-single-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin-bottom: 0 !important; /* Override Salient theme margin */
}

/* Photo credit - positioned bottom-left of image */
/* Desktop & Mobile: identical styles per specification */
/* Desktop: left 52px (same as description padding) */
.elegant-single-image-wrapper .elegant-single-image-credit,
.elegant-single-image-credit {
    position: absolute;
    bottom: 30px;
    left: 52px; /* Desktop - same as description padding */
    color: #FFF !important;
    font-family: "Reddit Sans", sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 22px !important; /* 169.231% */
    letter-spacing: 0.65px !important;
    text-shadow: none !important; /* NO text-shadow per specification */
}

/* FOTO: label - uppercase and white */
.elegant-single-image-wrapper .elegant-single-image-credit .credit-label,
.elegant-single-image-credit .credit-label {
    text-transform: uppercase;
    color: #FFF !important;
}

/* Mobile: full-width breakout + margin 30px + credit left 19px */
@media (max-width: 999px) {
    .elegant-single-image-wrapper {
        /* Full-width breakout - breaks out of Salient content padding */
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    .elegant-single-image-wrapper .elegant-single-image-credit,
    .elegant-single-image-credit {
        left: 19px;
    }
}

/* Description box - golden/brown background */
.elegant-single-image-description {
    width: 100%;
    background-color: #6E5217;
    box-sizing: border-box;
}

/* Description text - specific class for this element only */
/* High specificity to override theme styles */
.elegant-single-image-wrapper .elegant-single-image-description p.elegant-description-text,
.elegant-single-image-description .elegant-description-text,
p.elegant-description-text {
    color: #FFF !important;
    font-family: "IBM Plex Serif", Georgia, serif !important;
    font-style: italic !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   ELEGANT JEDNA SLIKA - Desktop styles (1000px+)
   ============================================================================= */
@media (min-width: 1000px) {
    .elegant-single-image-description {
        padding: 57px 52px 50px 52px;
    }

    .elegant-single-image-wrapper .elegant-single-image-description p.elegant-description-text,
    .elegant-single-image-description .elegant-description-text,
    p.elegant-description-text {
        font-size: 40px !important;
        font-weight: 400 !important;
        line-height: 50px !important; /* 125% */
    }
}

/* =============================================================================
   ELEGANT JEDNA SLIKA - Mobile styles (below 1000px)
   ============================================================================= */
@media (max-width: 999px) {
    .elegant-single-image-description {
        padding: 46px 19px 44px 19px;
    }

    .elegant-single-image-wrapper .elegant-single-image-description p.elegant-description-text,
    .elegant-single-image-description .elegant-description-text,
    p.elegant-description-text {
        font-size: 25px !important;
        font-weight: 300 !important;
        line-height: 28px !important; /* 112% */
    }
}

/* =============================================================================
   CLASSIC SINGLE POST LAYOUT - MIGRIRANI ČLANCI
   =============================================================================
   Koristi se za članke migrirane sa starog weba.
   Aktivira se preko meta polja: _elegant_post_layout = 'classic'

   POTPUNO ODVOJENO od "modern" layouta - nove klase, novi stilovi.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CLASSIC - BODY CLASS (za scoping)
   ----------------------------------------------------------------------------- */

/* Sakri default Salient header na classic člancima */
body.elegant-classic-layout .page-header-bg-image,
body.elegant-classic-layout #page-header-bg,
body.elegant-classic-layout .page-header-no-bg,
body.elegant-classic-layout #elegant-single-header {
    display: none !important;
}

/* Sakri prazan default Salient article element na classic člancima */
/* Salient parent tema renderira article.post s praznim content-inner - ne treba nam */
body.elegant-classic-layout .post-area article.post .inner-wrap,
body.elegant-classic-layout .post-area article.post {
    display: none !important;
}

/* Takoder sakri sidebar na classic layout */
body.elegant-classic-layout #sidebar {
    display: none !important;
}

/* =============================================================================
   CLASSIC LAYOUT: Offcanvas Open/Close - Keyframes Animacije
   =============================================================================

   Problem: Kada se offcanvas zatvara:
   1. Klasa .side-widget-open se ukloni ODMAH
   2. Parent tema dodaje .side-widget-closed
   3. Ali crni overlay fade-a out ~0.4s
   4. Ako header ODMAH postane bijel = ružan bijeli flash na crnom

   Rješenje: CSS @keyframes animacija s delay-om
   - .side-widget-closed → animacija čeka 70% vremena (0.35s), pa fade u bijelo
   - Početno stanje (bez klasa) → bijelo odmah
   - .side-widget-open → crno odmah

   Timing: 0.5s ukupno, 70% delay = 0.35s čekanja, 0.15s fade
*/

/* =============================================================================
   CLASSIC LAYOUT: CSS Transitions za header elemente (mobile only)

   POJEDNOSTAVLJENO: Koristimo samo transitions umjesto keyframe animacija.
   Transitions automatski animiraju prijelaze između stanja.
   ============================================================================= */
@media (max-width: 999px) {
    /* Bazni transitions za sve classic layout header elemente */
    /* TIMING: 0.25s ease - isto kao Salient canvas fade */
    body.elegant-classic-layout #header-outer,
    body.elegant-classic-layout #header-outer header {
        transition: background-color 0.25s ease !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Osiguraj da inner header ima istu pozadinu kao #header-outer */
    body.elegant-classic-layout #header-outer header {
        background-color: inherit !important;
    }

    /* FIX: Spriječi crnu traku iznad headera
       Parent tema postavlja pozadinu na header-resize selektor koja uzrokuje blic
       Moramo je ukloniti za classic layout */
    body.elegant-classic-layout.material #header-outer[data-header-resize="1"]:not([data-format=left-header]):not(.scrolled-down):not(.small-nav),
    body.elegant-classic-layout.material #header-outer[data-header-resize="1"]:not([data-format=left-header]):not(.scrolled-down):not(.small-nav):not(.side-widget-open) {
        background-color: transparent !important;
    }

    /* body i #ajax-content-wrap - BIJELA default, CRNA blizu footera */
    body.elegant-classic-layout,
    body.elegant-classic-layout #ajax-content-wrap,
    body.elegant-classic-layout #ajax-content-wrap > .container-wrap {
        background-color: #ffffff !important; /* WHITE - top */
        transition: background-color 0.2s ease-in-out !important;
    }

    /* Kad smo blizu footera - CRNA (klasa direktno na body) */
    body.elegant-classic-layout.elegant-near-footer,
    body.elegant-classic-layout.elegant-near-footer #ajax-content-wrap,
    body.elegant-classic-layout.elegant-near-footer #ajax-content-wrap > .container-wrap {
        background-color: #000000 !important; /* BLACK - bottom */
    }

    body.elegant-classic-layout #header-outer .logo img,
    body.elegant-classic-layout #header-outer #logo img,
    body.elegant-classic-layout #header-outer img.stnd,
    body.elegant-classic-layout #header-outer img.dark-version {
        transition: filter 0.25s ease !important;
    }

    /* Hamburger linije - uključi i transform za X animaciju */
    body.elegant-classic-layout #header-outer .custom-hamburger-menu .hamburger-line,
    body.elegant-classic-layout #header-outer .slide-out-widget-area-toggle .lines,
    body.elegant-classic-layout #header-outer .slide-out-widget-area-toggle .lines::before,
    body.elegant-classic-layout #header-outer .slide-out-widget-area-toggle .lines::after {
        transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: background-color, transform, opacity;
    }

    body.elegant-classic-layout #header-outer .icon-salient-search:before,
    body.elegant-classic-layout #header-outer .mobile-search .icon-salient-search:before,
    body.elegant-classic-layout #header-outer #search-btn .icon-salient-search:before {
        transition: color 0.25s ease !important;
    }

    /* Menu stavke - transition za color */
    body.elegant-classic-layout #header-outer .sf-menu > li > a,
    body.elegant-classic-layout #header-outer .sf-menu > li > a .menu-title-text,
    body.elegant-classic-layout #header-outer nav ul li a,
    body.elegant-classic-layout #header-outer nav ul li a span {
        transition: color 0.25s ease !important;
    }

    /* GLAVNI CANVAS - transition za background i opacity - Salient timing */
    body.elegant-classic-layout #slide-out-widget-area {
        transition: background-color 0.25s ease, opacity 0.25s ease !important;
    }

    /* Canvas background element */
    body.elegant-classic-layout #slide-out-widget-area-bg,
    body.elegant-classic-layout #slide-out-widget-area-bg .bg-inner {
        transition: opacity 0.25s ease !important;
    }
}

/* =============================================================================
   CLASSIC INSTANT CLOSE - pomoćna klasa za instant zatvaranje canvasa
   JavaScript postavlja inline stilove, ova klasa osigurava backup
   ============================================================================= */
body.elegant-classic-layout.canvas-instant-close #slide-out-widget-area,
body.elegant-classic-layout.canvas-instant-close #slide-out-widget-area-bg,
body.elegant-classic-layout.canvas-instant-close #slide-out-widget-area-bg .bg-inner {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

/* -----------------------------------------------------------------------------
   CLASSIC: DEFAULT STANJE - bijela pozadina kao fallback
   Ovo osigurava da header UVIJEK ima bijelu pozadinu osim kada je
   eksplicitno postavljen na crno (.side-widget-open na header ili .open-search na body)
   ----------------------------------------------------------------------------- */
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open),
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open)[data-transparent-header="true"],
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open).transparent {
    background-color: #fff !important;
}

body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .logo img,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) #logo img,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .logo-img,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) img.stnd,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) img.dark-version {
    filter: brightness(0) !important;
}

body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .custom-hamburger-menu .hamburger-line,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .slide-out-widget-area-toggle .lines,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .slide-out-widget-area-toggle .lines::before,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .slide-out-widget-area-toggle .lines::after {
    background-color: #000 !important;
}

body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .icon-salient-search:before,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) #search-btn .icon-salient-search:before,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .mobile-search .icon-salient-search:before {
    color: #000 !important;
}

/* Menu stavke - crna boja u početnom stanju */
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .sf-menu > li > a,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) .sf-menu > li > a .menu-title-text,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) nav ul li a,
body.elegant-classic-layout:not(.open-search) #header-outer:not(.side-widget-open):not(.side-widget-closed) nav ul li a span {
    color: #000 !important;
}

/* -----------------------------------------------------------------------------
   CLASSIC: ZATVARANJE OFFCANVAS (.side-widget-closed)
   Transitions će automatski animirati prijelaz na bijelu pozadinu/crne ikone
   VAŽNO: :not(.open-search) isključuje ove stilove kada je search otvoren
   ----------------------------------------------------------------------------- */
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed[data-transparent-header="true"],
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed.transparent {
    background-color: #fff !important;
}

body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed .logo img,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed #logo img,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed img.stnd,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed img.dark-version {
    filter: brightness(0) !important;
}

body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) .custom-hamburger-menu .hamburger-line,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) .slide-out-widget-area-toggle .lines,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) .slide-out-widget-area-toggle .lines::before,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) .slide-out-widget-area-toggle .lines::after {
    background-color: #000 !important;
}

body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) .icon-salient-search:before,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) .mobile-search .icon-salient-search:before,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) #search-btn .icon-salient-search:before {
    color: #000 !important;
}

body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) .sf-menu > li > a,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) .sf-menu > li > a .menu-title-text,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) nav ul li a,
body.elegant-classic-layout:not(.open-search) #header-outer.side-widget-closed:not(.side-widget-open) nav ul li a span {
    color: #000 !important;
}

/* -----------------------------------------------------------------------------
   CLASSIC: OTVARANJE OFFCANVAS (.side-widget-open)
   Transitions će automatski animirati prijelaz na crnu pozadinu/bijele ikone
   ----------------------------------------------------------------------------- */
body.elegant-classic-layout #header-outer.side-widget-open,
body.elegant-classic-layout #header-outer.side-widget-open[data-transparent-header="true"],
body.elegant-classic-layout #header-outer.side-widget-open.transparent {
    background-color: #000 !important;
}

body.elegant-classic-layout #header-outer.side-widget-open .logo img,
body.elegant-classic-layout #header-outer.side-widget-open #logo img,
body.elegant-classic-layout #header-outer.side-widget-open img.stnd,
body.elegant-classic-layout #header-outer.side-widget-open img.dark-version {
    filter: none !important;
}

body.elegant-classic-layout #header-outer.side-widget-open .custom-hamburger-menu .hamburger-line,
body.elegant-classic-layout #header-outer.side-widget-open .slide-out-widget-area-toggle .lines,
body.elegant-classic-layout #header-outer.side-widget-open .slide-out-widget-area-toggle .lines::before,
body.elegant-classic-layout #header-outer.side-widget-open .slide-out-widget-area-toggle .lines::after {
    background-color: #fff !important;
}

body.elegant-classic-layout #header-outer.side-widget-open .icon-salient-search:before,
body.elegant-classic-layout #header-outer.side-widget-open .mobile-search .icon-salient-search:before {
    color: #fff !important;
}

/* Menu stavke bijele kada je offcanvas otvoren */
body.elegant-classic-layout #header-outer.side-widget-open .sf-menu > li > a,
body.elegant-classic-layout #header-outer.side-widget-open .sf-menu > li > a .menu-title-text,
body.elegant-classic-layout #header-outer.side-widget-open nav ul li a,
body.elegant-classic-layout #header-outer.side-widget-open nav ul li a span {
    color: #fff !important;
}

/* -----------------------------------------------------------------------------
   CLASSIC: OTVARANJE SEARCH (.open-search)
   Header ostaje transparentan sa bijelim ikonama/logom/menu
   (isto kao dark-slide stanje, samo bez crne pozadine)
   ----------------------------------------------------------------------------- */
body.elegant-classic-layout.open-search #header-outer,
body.elegant-classic-layout.open-search #header-outer[data-transparent-header="true"],
body.elegant-classic-layout.open-search #header-outer.transparent,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed[data-transparent-header="true"] {
    background-color: transparent !important;
}

body.elegant-classic-layout.open-search #header-outer .logo img,
body.elegant-classic-layout.open-search #header-outer #logo img,
body.elegant-classic-layout.open-search #header-outer img.stnd,
body.elegant-classic-layout.open-search #header-outer img.dark-version,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed .logo img,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed #logo img,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed img.stnd,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed img.dark-version {
    filter: none !important;
}

body.elegant-classic-layout.open-search #header-outer .custom-hamburger-menu .hamburger-line,
body.elegant-classic-layout.open-search #header-outer .slide-out-widget-area-toggle .lines,
body.elegant-classic-layout.open-search #header-outer .slide-out-widget-area-toggle .lines::before,
body.elegant-classic-layout.open-search #header-outer .slide-out-widget-area-toggle .lines::after,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed .custom-hamburger-menu .hamburger-line,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed .slide-out-widget-area-toggle .lines,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed .slide-out-widget-area-toggle .lines::before,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed .slide-out-widget-area-toggle .lines::after {
    background-color: #fff !important;
}

body.elegant-classic-layout.open-search #header-outer .icon-salient-search:before,
body.elegant-classic-layout.open-search #header-outer .mobile-search .icon-salient-search:before,
body.elegant-classic-layout.open-search #header-outer #search-btn .icon-salient-search:before,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed .icon-salient-search:before,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed .mobile-search .icon-salient-search:before,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed #search-btn .icon-salient-search:before {
    color: #fff !important;
}

/* Menu stavke - bijele kada je search otvoren */
body.elegant-classic-layout.open-search #header-outer .sf-menu > li > a,
body.elegant-classic-layout.open-search #header-outer .sf-menu > li > a .menu-title-text,
body.elegant-classic-layout.open-search #header-outer nav ul li a,
body.elegant-classic-layout.open-search #header-outer nav ul li a span,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed .sf-menu > li > a,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed .sf-menu > li > a .menu-title-text,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed nav ul li a,
body.elegant-classic-layout.open-search #header-outer.side-widget-closed nav ul li a span {
    color: #fff !important;
}

/* CLASSIC + SCROLLED-DOWN + OPEN-SEARCH: Mobile fix
   Kad korisnik skrola dolje i otvori search, logo/hamburger moraju biti bijeli */
body.elegant-classic-layout.open-search #header-outer.scrolled-down,
body.elegant-classic-layout.open-search #header-outer.scrolled-down[data-transparent-header="true"] {
    background-color: transparent !important;
}

body.elegant-classic-layout.open-search #header-outer.scrolled-down .logo img,
body.elegant-classic-layout.open-search #header-outer.scrolled-down #logo img,
body.elegant-classic-layout.open-search #header-outer.scrolled-down img.stnd,
body.elegant-classic-layout.open-search #header-outer.scrolled-down img.dark-version {
    filter: brightness(0) invert(1) !important;
}

body.elegant-classic-layout.open-search #header-outer.scrolled-down .custom-hamburger-menu .hamburger-line,
body.elegant-classic-layout.open-search #header-outer.scrolled-down .slide-out-widget-area-toggle .lines,
body.elegant-classic-layout.open-search #header-outer.scrolled-down .slide-out-widget-area-toggle .lines::before,
body.elegant-classic-layout.open-search #header-outer.scrolled-down .slide-out-widget-area-toggle .lines::after {
    background-color: #fff !important;
}

body.elegant-classic-layout.open-search #header-outer.scrolled-down .icon-salient-search:before,
body.elegant-classic-layout.open-search #header-outer.scrolled-down .mobile-search .icon-salient-search:before,
body.elegant-classic-layout.open-search #header-outer.scrolled-down #search-btn .icon-salient-search:before {
    color: #fff !important;
}

/* -----------------------------------------------------------------------------
   CLASSIC - FEATURED IMAGE (16:9 aspect ratio)
   ----------------------------------------------------------------------------- */

.elegant-classic-featured-image {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Spusti sliku ispod header-a */
    margin-top: 0;
}

.elegant-classic-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* Foto Credit - ispod featured image */
.elegant-classic-photo-credit {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 10px 20px 0 20px;
    text-align: center;
    line-height: 0.7 !important;
}

.elegant-classic-photo-credit span {
    font-family: "Reddit Sans", sans-serif;
    font-size: 13px;
    font-style: italic;
    color: #000 !important;
    line-height: 1;
}

@media (min-width: 1000px) {
    .elegant-classic-photo-credit {
        max-width: 800px;
        padding: 12px 0 0 0;
    }

    .elegant-classic-photo-credit span {
        font-size: 16px;
    }
}

/* -----------------------------------------------------------------------------
   CLASSIC - HEADER (kategorija, naslov, meta) - SVE CENTRIRANO
   ----------------------------------------------------------------------------- */

.elegant-classic-header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 23px 0 23px;
    text-align: center; /* Centriraj sve */
}

/* Desktop padding */
@media (min-width: 1000px) {
    .elegant-classic-header {
        padding: 50px 50px 0 50px;
    }
}

/* Kategorija link - klikabilna */
.elegant-classic-category-link {
    display: block;
    text-decoration: none;
    margin-bottom: 15px;
}

.elegant-classic-category-link:hover .elegant-classic-category {
    color: var(--category-hover-color, #A58134) !important;
}

@media (min-width: 1000px) {
    .elegant-classic-category-link {
        margin-bottom: 20px;
    }
}

/* Kategorija - uppercase, centrirana */
.elegant-classic-category {
    display: block;
    color: #000 !important;
    font-family: "Reddit Sans", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: 15px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    margin-bottom: 0;
    transition: color 0.2s ease;
}

@media (min-width: 1000px) {
    .elegant-classic-category {
        font-size: 15px;
        line-height: 18px;
        letter-spacing: 3px;
        margin-bottom: 0;
    }
}

/* Naslov - H1, crna boja, centriran */
.elegant-classic-title {
    color: #000 !important;
    font-family: "DM Serif Text", serif !important;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -0.5px;
    margin: 0 0 30px 0;
    padding: 0;
    text-align: center;
}

@media (min-width: 1000px) {
    .elegant-classic-title {
        font-family: "DM Serif Text", serif !important;
        font-size: 55px;
        font-style: normal;
        font-weight: 400;
        line-height: 60px;
        letter-spacing: -0.5px;
        margin-bottom: 40px;
    }
}

/* Meta - Autor i datum - UVIJEK u stupcima (autor gore, datum dolje) */
.elegant-classic-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
}

@media (min-width: 1000px) {
    .elegant-classic-meta {
        gap: 6px;
        margin-bottom: 50px;
    }
}

/* Autor - crna boja, centriran */
.elegant-classic-author {
    color: #000 !important;
    font-family: "Reddit Sans", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    text-transform: none;
    letter-spacing: 0;
}

@media (min-width: 1000px) {
    .elegant-classic-author {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0;
    }
}

/* Datum - crna boja, centriran, ispod autora */
.elegant-classic-date {
    color: #000 !important;
    font-family: "Reddit Sans", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    text-transform: none;
    letter-spacing: 0;
}

@media (min-width: 1000px) {
    .elegant-classic-date {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0;
    }
}

/* Separator - sakriven (jer su autor i datum u stupcima) */
.elegant-classic-separator {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   CLASSIC - EXCERPT (ulomak za stare migrirane članke)
   ----------------------------------------------------------------------------- */

.elegant-classic-excerpt {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 23px;
    text-align: center;
    margin-bottom: 10px;
}

.elegant-classic-excerpt p {
    color: #000 !important;
    font-family: "IBM Plex Serif", Georgia, serif !important;
    font-size: 15.5px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-excerpt {
        padding: 0 50px;
        margin-bottom: 40px;
    }

    .elegant-classic-excerpt p {
        font-size: 22px !important;
        line-height: 30px !important;
    }
}

/* -----------------------------------------------------------------------------
   CLASSIC - CONTENT AREA
   ----------------------------------------------------------------------------- */

.elegant-classic-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

/* Paragrafi u classic contentu */
.elegant-classic-content p {
    font-family: "IBM Plex Serif", Georgia, serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    color: #000 !important;
    margin: 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content p {
        font-size: 24px !important;
        line-height: 40px !important;
        margin: 0 0 25px 0 !important;
    }
}

/* CLASSIC: Drop Cap - prvo slovo veliko */
.elegant-classic-content p:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Mobile Drop Cap (< 768px) */
@media (max-width: 767px) {
    .elegant-classic-content p:first-of-type::first-letter {
        font-family: "IBM Plex Serif" !important;
        font-size: 50px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        float: left !important;
        margin-top: 0 !important;
        margin-right: 8px !important;
        font-style: normal !important;
        color: #000 !important;
    }
}

/* Tablet Drop Cap (768px - 999px) */
@media (min-width: 768px) and (max-width: 999px) {
    .elegant-classic-content p:first-of-type::first-letter {
        font-family: "IBM Plex Serif" !important;
        font-size: 58px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        float: left !important;
        margin-top: 0 !important;
        margin-right: 10px !important;
        font-style: normal !important;
        color: #000 !important;
    }
}

/* Desktop Drop Cap (1000px+) */
@media (min-width: 1000px) {
    .elegant-classic-content p:first-of-type::first-letter {
        font-family: "IBM Plex Serif" !important;
        font-size: 77px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        float: left !important;
        margin-right: 12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        font-style: normal !important;
        color: #000 !important;
    }
}

/* Bold tekst */
.elegant-classic-content strong,
.elegant-classic-content b {
    font-family: "IBM Plex Serif", Georgia, serif !important;
    font-weight: 600 !important;
}

/* Italic tekst */
.elegant-classic-content em,
.elegant-classic-content i {
    font-family: "IBM Plex Serif", Georgia, serif !important;
    font-style: italic !important;
}

/* Linkovi */
.elegant-classic-content a {
    color: #97644b !important;
    text-decoration: underline !important;
}

.elegant-classic-content a:hover {
    color: #A58134 !important;
}

/* Headings unutar content-a - SVI BOLD */
.elegant-classic-content h1 {
    font-family: "DM Serif Text", Georgia, serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 38px !important;
    color: #000 !important;
    margin: 40px 0 20px 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content h1 {
        font-size: 50px !important;
        line-height: 58px !important;
        margin: 50px 0 25px 0 !important;
    }
}

.elegant-classic-content h2 {
    font-family: "DM Serif Text", Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    color: #000 !important;
    margin: 35px 0 18px 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content h2 {
        font-size: 42px !important;
        line-height: 50px !important;
        margin: 45px 0 22px 0 !important;
    }
}

.elegant-classic-content h3 {
    font-family: "DM Serif Text", Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    color: #000 !important;
    margin: 30px 0 15px 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content h3 {
        font-size: 34px !important;
        line-height: 42px !important;
        margin: 40px 0 20px 0 !important;
    }
}

.elegant-classic-content h4 {
    font-family: "DM Serif Text", Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 26px !important;
    color: #000 !important;
    margin: 25px 0 12px 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content h4 {
        font-size: 28px !important;
        line-height: 36px !important;
        margin: 35px 0 18px 0 !important;
    }
}

.elegant-classic-content h5 {
    font-family: "DM Serif Text", Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    color: #000 !important;
    margin: 20px 0 10px 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content h5 {
        font-size: 24px !important;
        line-height: 32px !important;
        margin: 30px 0 15px 0 !important;
    }
}

.elegant-classic-content h6 {
    font-family: "DM Serif Text", Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    color: #000 !important;
    margin: 18px 0 8px 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content h6 {
        font-size: 20px !important;
        line-height: 28px !important;
        margin: 25px 0 12px 0 !important;
    }
}

/* Italic (em) unutar headinga - ista veličina i težina, samo italic */
.elegant-classic-content h1 em,
.elegant-classic-content h1 i,
.elegant-classic-content h2 em,
.elegant-classic-content h2 i,
.elegant-classic-content h3 em,
.elegant-classic-content h3 i,
.elegant-classic-content h4 em,
.elegant-classic-content h4 i,
.elegant-classic-content h5 em,
.elegant-classic-content h5 i,
.elegant-classic-content h6 em,
.elegant-classic-content h6 i {
    font-family: "DM Serif Text", Georgia, serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: italic !important;
    color: inherit !important;
}

/* WordPress Block classes - sve crno */
.elegant-classic-content .wp-block-heading,
.elegant-classic-content [class*="wp-block-"] {
    color: #000 !important;
}

/* Liste */
.elegant-classic-content ul,
.elegant-classic-content ol {
    font-family: "IBM Plex Serif", Georgia, serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #000 !important;
    margin: 0 0 20px 0 !important;
    padding-left: 25px !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content ul,
    .elegant-classic-content ol {
        font-size: 24px !important;
        line-height: 40px !important;
        margin: 0 0 25px 0 !important;
        padding-left: 35px !important;
    }
}

.elegant-classic-content li {
    margin-bottom: 10px !important;
}

/* Slike unutar content-a */
.elegant-classic-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 30px 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content img {
        margin: 40px 0 !important;
    }
}

/* Figure i figcaption (WordPress block editor) */
.elegant-classic-content figure {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0 !important;
    padding: 0 !important;
}

.elegant-classic-content figure img {
    width: 100% !important;
    height: auto !important;
}

.elegant-classic-content .wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
}

.elegant-classic-content .wp-block-image img {
    width: 100% !important;
    height: auto !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content figure {
        margin: 40px 0 !important;
    }
}

.elegant-classic-content figcaption {
    font-family: "Reddit Sans", sans-serif !important;
    font-size: 16px !important;
    font-style: italic !important;
    color: #000 !important;
    margin-top: -30px !important;
    text-align: center !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content figcaption {
        font-size: 18px !important;
        margin-top: -30px !important;
    }
}

/* Blockquote */
.elegant-classic-content blockquote {
    font-family: "IBM Plex Serif", Georgia, serif !important;
    font-size: 20px !important;
    font-style: italic !important;
    line-height: 30px !important;
    color: #000 !important;
    margin: 30px 0 !important;
    padding: 20px 25px !important;
    border-left: 4px solid #A58134 !important;
    background: #f9f9f9 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content blockquote {
        font-size: 28px !important;
        line-height: 42px !important;
        margin: 40px 0 !important;
        padding: 30px 40px !important;
    }
}

/* WordPress embeds (YouTube, etc.) */
.elegant-classic-content .wp-block-embed,
.elegant-classic-content iframe {
    max-width: 100% !important;
    margin: 30px 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content .wp-block-embed,
    .elegant-classic-content iframe {
        margin: 40px 0 !important;
    }
}

/* WordPress galleries */
.elegant-classic-content .wp-block-gallery {
    margin: 30px 0 !important;
}

@media (min-width: 1000px) {
    .elegant-classic-content .wp-block-gallery {
        margin: 40px 0 !important;
    }
}

/* -----------------------------------------------------------------------------
   CLASSIC - SHARE BUTTONS (identični kao modern light tema)
   ----------------------------------------------------------------------------- */

.elegant-classic-share {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0px 0px 50px 0px;
}

@media (min-width: 1000px) {
    .elegant-classic-share {
        padding: 0px 0px 80px 0px;
    }
}

/* Light theme share buttons na classic layoutu - ostaju contained, ne full-width */
.elegant-classic-share .elegant-share-buttons.theme-light {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: transparent !important;
    padding: 10px 0px 20px 0px !important;
    border-bottom: 0.5px solid #D9D9D9;
}

/* Ensure buttons have proper styling in classic layout */
.elegant-classic-share .elegant-share-buttons.theme-light .elegant-share-btn {
    background-color: #000 !important;
    color: #FFFFFF !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
}

.elegant-classic-share .elegant-share-buttons.theme-light .elegant-share-btn svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

@media (max-width: 767px) {
    .elegant-classic-share .elegant-share-buttons.theme-light .elegant-share-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}

@media (min-width: 1000px) {
    .elegant-classic-share .elegant-share-buttons.theme-light {
        padding: 0px 0px 30px 0px !important;
    }
}

/* Dark theme share buttons na classic layoutu - ostaju contained, ne full-width */
.elegant-classic-share .elegant-share-buttons.theme-dark {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: transparent !important;
    padding: 10px 0px 20px 0px !important;
    border-bottom: 0.5px solid #D9D9D9;
}

/* Ensure buttons have proper styling in classic layout (dark theme = white circles, black icons) */
.elegant-classic-share .elegant-share-buttons.theme-dark .elegant-share-btn {
    background-color: #000 !important;
    color: #FFFFFF !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
}

.elegant-classic-share .elegant-share-buttons.theme-dark .elegant-share-btn svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

@media (max-width: 767px) {
    .elegant-classic-share .elegant-share-buttons.theme-dark .elegant-share-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}

@media (min-width: 1000px) {
    .elegant-classic-share .elegant-share-buttons.theme-dark {
        padding: 0px 0px 30px 0px !important;
    }
}

/* -----------------------------------------------------------------------------
   CLASSIC - WRAPPER za cijeli layout
   ----------------------------------------------------------------------------- */

.elegant-classic-single {
    background-color: #ffffff;
    width: 100%;
    /* Responzivni margin-top - prilagođava se visini headera */
    margin-top: 110px; /* Mobile default */
}

@media (min-width: 768px) {
    .elegant-classic-single {
        margin-top: 100px; /* Tablet */
    }
}

@media (min-width: 1000px) {
    .elegant-classic-single {
        margin-top: 180px; /* Desktop */
    }
}

/* Osiguraj da je content-wrap bijel */
body.elegant-classic-layout .container-wrap,
body.elegant-classic-layout #ajax-content-wrap,
body.elegant-classic-layout #ajax-content-wrap > .container-wrap {
    background-color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
   ELEGANT GOLD BOX TEXT - Bijeli tekst na zlatnoj pozadini
   ----------------------------------------------------------------------------- */

.elegant-gold-box-text-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.elegant-gold-box-text {
    background-color: #6E5217;
    color: #FFFFFF;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-style: italic;

    /* MobileFirst - Default (mobile) */
    font-size: 25px;
    font-weight: 300;
    line-height: 28px;
    padding: 46px 19px 44px 19px;

    /* Full-width breakout on mobile */
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/* Desktop styles (1000px+) */
@media (min-width: 1000px) {
    .elegant-gold-box-text {
        font-size: 40px;
        font-weight: 400;
        line-height: 50px;
        padding: 57px 52px 50px 52px;

        /* Reset to normal width on desktop */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
}

/* -----------------------------------------------------------------------------
   SEARCH RESULTS PAGINATION - Mobile Fix
   ----------------------------------------------------------------------------- */

/* Fix masonry overlap on mobile - force static positioning */
@media (max-width: 999px) {
    body.search-results #search-results[data-layout="masonry-no-sidebar"] {
        height: auto !important;
    }

    body.search-results #search-results[data-layout="masonry-no-sidebar"] .result {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        opacity: 1 !important;
        margin-bottom: 20px;
    }
}

/* Search pagination nav styling */
nav#pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #fff !important;
}

@media (min-width: 1000px) {
    #pagination a.page-numbers,
    #pagination span.page-numbers {
        font-size: 12px;
        line-height: 16px;
    }
}

/* Ensure pagination is below search results */
body.search-results .search-result-pagination {
    clear: both;
    position: relative;
    z-index: 10;
    background-color: #000;
    padding: 30px 15px;
    margin-top: 20px;
}

/* Page numbers container - flexbox for proper wrapping */
body.search-results .search-result-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual page number items */
body.search-results .search-result-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
}

/* Page number links and spans */
body.search-results .search-result-pagination .page-numbers:not(ul) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Number links */
body.search-results .search-result-pagination a.page-numbers:not(.prev):not(.next) {
    background-color: #f5f5f5;
    color: #333;
}

body.search-results .search-result-pagination a.page-numbers:not(.prev):not(.next):hover {
    background-color: #e0e0e0;
    color: #000;
}

/* Current page */
body.search-results .search-result-pagination span.page-numbers.current {
    background-color: #96793A;
    color: #fff;
}

/* Dots */
body.search-results .search-result-pagination span.page-numbers.dots {
    background-color: transparent;
    min-width: auto;
    padding: 0 4px;
    color: #666;
}

/* Prev/Next buttons */
body.search-results .search-result-pagination a.prev.page-numbers,
body.search-results .search-result-pagination a.next.page-numbers {
    background-color: transparent;
    color: #333;
    font-weight: 400;
    padding: 0 8px;
    min-width: auto;
}

body.search-results .search-result-pagination a.prev.page-numbers:hover,
body.search-results .search-result-pagination a.next.page-numbers:hover {
    color: #96793A;
}

/* Mobile specific adjustments */
@media (max-width: 999px) {
    body.search-results .search-result-pagination {
        padding: 25px 10px;
    }

    body.search-results .search-result-pagination ul.page-numbers {
        gap: 6px;
    }

    body.search-results .search-result-pagination .page-numbers:not(ul) {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }

    /* Stack prev/next on very small screens */
    body.search-results .search-result-pagination a.prev.page-numbers,
    body.search-results .search-result-pagination a.next.page-numbers {
        padding: 0 6px;
        font-size: 12px;
    }
}

/* Very small screens - more compact */
@media (max-width: 480px) {
    body.search-results .search-result-pagination ul.page-numbers {
        gap: 4px;
    }

    body.search-results .search-result-pagination .page-numbers:not(ul) {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }

    body.search-results .search-result-pagination a.prev.page-numbers,
    body.search-results .search-result-pagination a.next.page-numbers {
        width: 100%;
        justify-content: center;
        margin: 5px 0;
        order: 1; /* Move to end */
    }

    /* Put prev at start, next at end */
    body.search-results .search-result-pagination a.prev.page-numbers {
        order: -1;
    }
}

/* =============================================================================
   GLOBAL FIXES - Bug Prevention
   ============================================================================= */

/**
 * Fix: 100vw scrollbar issue
 * When using 100vw for full-width breakout, it includes scrollbar width on some systems
 * This causes horizontal overflow. Adding overflow-x: hidden prevents the scrollbar.
 * Note: This is a common fix for the "100vw includes scrollbar" browser inconsistency.
 */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/**
 * Accessibility: Respect reduced motion preferences
 * Users who have enabled "Reduce motion" in their OS settings will see
 * instant transitions instead of animations. This doesn't affect users
 * with default settings - they will see all animations as before.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/**
 * iOS Safe Area Insets (iPhone X+ notch support)
 * Ensures content doesn't overlap with the notch, home indicator, or rounded corners
 * Only affects devices with notches - no visual change on standard devices.
 */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Full-width elements need to account for safe areas */
    .elegant-share-buttons.theme-dark,
    .single-post .category-najnovije-section,
    .elegant-light-theme .category-najnovije-section {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/**
 * Loading Icon Override - Use child theme path instead of uploads
 * This ensures the icon works after migration to different domains
 */
.portfolio-loading,
#ajax-loading-screen .loading-icon,
.loading-icon,
.pp_loaderIcon {
    background-image: url("img/elegant-theme-icon.png") !important;
}

/**
 * iOS Footer Fix - Prevent vertical line and extra scroll space
 */
@media (max-width: 999px) {
    /* Hide Salient's body-border elements on mobile (passepartout) */
    .body-border-top,
    .body-border-right,
    .body-border-bottom,
    .body-border-left {
        display: none !important;
    }
}

/**
 * Safari/iOS Footer Fix for Single Posts, Category & Tag Archives
 * - Removes white space between content and footer
 * - Uses -webkit-fill-available instead of vh for Safari compatibility
 * - Applies to light theme posts and category/tag pages
 */

/* CRITICAL: Force footer global section to always be black (never white on light theme) */
.nectar-global-section.before-footer {
    background-color: #000 !important;
}

/* CRITICAL: Hide Salient's default #footer-outer - we use global section footer instead */
body.single-post #footer-outer,
body.category #footer-outer,
body.tag #footer-outer {
    display: none !important;
}

/* Remove any top padding on footer global section for single posts */
.single-post .nectar-global-section.before-footer,
.category .nectar-global-section.before-footer,
.tag .nectar-global-section.before-footer {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Fix white space on light theme single posts */
body.single-post.elegant-light-theme .container-wrap,
body.single-post.elegant-light-theme #ajax-content-wrap .container-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Fix white space on category pages */
body.category .container-wrap,
body.category #ajax-content-wrap .container-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Fix white space on tag pages */
body.tag .container-wrap,
body.tag #ajax-content-wrap .container-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Safari-specific: Use -webkit-fill-available for consistent vh behavior */
@supports (-webkit-touch-callout: none) {
    /* Single post footer wrapper fix */
    .single-post .elegant-footer-wrapper,
    .category .elegant-footer-wrapper,
    .tag .elegant-footer-wrapper {
        padding-top: 10vh !important;
        padding-top: max(10vh, 60px) !important;
    }

    @media (max-width: 999px) {
        .single-post .elegant-footer-wrapper,
        .category .elegant-footer-wrapper,
        .tag .elegant-footer-wrapper {
            padding-top: 8vh !important;
            padding-top: max(8vh, 40px) !important;
        }
    }
}

/* Ensure no visible line between content and footer */
.single-post .nectar-global-section.before-footer .elegant-footer-wrapper,
.category .nectar-global-section.before-footer .elegant-footer-wrapper,
.tag .nectar-global-section.before-footer .elegant-footer-wrapper {
    border-top: none !important;
    box-shadow: none !important;
}

/* Hide any body-border on category and tag pages too */
body.category .body-border-top,
body.category .body-border-right,
body.category .body-border-bottom,
body.category .body-border-left,
body.tag .body-border-top,
body.tag .body-border-right,
body.tag .body-border-bottom,
body.tag .body-border-left {
    display: none !important;
}

/**
 * iOS Safari Single Post Footer Fix
 * - Safe area inset for home indicator
 * - Works with both dark and light theme posts
 * NOTE: Removed ::after pseudo-element that was causing black gap issues on some pages
 */

/* iOS Safe Area: Add bottom padding to footer for home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .single-post .elegant-footer-wrapper {
        padding-bottom: calc(4vh + env(safe-area-inset-bottom)) !important;
    }

    @media (min-width: 1000px) {
        .single-post .elegant-footer-wrapper {
            padding-bottom: calc(10vh + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* iOS Safari: Reduce overscroll bounce */
@supports (-webkit-touch-callout: none) {
    body.single-post {
        overscroll-behavior-y: none;
    }

    /* Extra: ensure footer wrapper also has overflow visible for pseudo element */
    .single-post .elegant-footer-wrapper {
        overflow: visible !important;
    }
}

/* ============================================
   iOS Safari Light Theme Overscroll Colors
   Problem: iOS Safari shows overscroll area colors
   Solution: Use Salient's Primary Background Color for top, BLACK for bottom (footer)

   How it works:
   - TOP overscroll: Safari uses <html> background color → var(--nectar-bg-color)
   - BOTTOM overscroll: Safari uses the element at bottom of page → footer is black

   NOTE: Body/wrapper background colors are NOT overridden here!
   Salient's Primary Background Color applies normally.
   ============================================ */

/* iOS Safari overscroll color handled via body classes:
   - Classic layout: style.css lines ~5181-5194
   - Modern + light: functions.php elegant_apply_post_theme_bg()
   - JS: functions.php elegant_overscroll_color_switch_js()
*/



@media (max-width: 767px) {
    p {
        font-size: 18px !important;
        line-height: 28px !important;
    }
}

/* =============================================================================
   ACCESSIBILITY - Focus Visible Styles
   ============================================================================= */

/* Global focus-visible styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #CDAA62 !important;
    outline-offset: 2px !important;
}

/* Search input - no focus outline (has custom styling) */
#search-outer input[type="text"]:focus-visible,
#search-outer input[name="s"]:focus-visible,
#search input[type="text"]:focus-visible,
#search input[name="s"]:focus-visible {
    outline: none !important;
}

/* Hamburger menu focus */
.custom-hamburger-menu:focus-visible {
    outline: 2px solid #CDAA62 !important;
    outline-offset: 4px !important;
}

/* Search button focus */
#search-btn a:focus-visible {
    outline: 2px solid #CDAA62 !important;
    outline-offset: 4px !important;
}

/* Off-canvas menu links focus */
#slide-out-widget-area a:focus-visible {
    outline: 2px solid #CDAA62 !important;
    outline-offset: 2px !important;
}

/* Carousel dots focus */
.slick-dots button:focus-visible,
.elegant-carousel-dot:focus-visible {
    outline: 2px solid #CDAA62 !important;
    outline-offset: 2px !important;
}

/* Hero carousel focus */
.elegant-hero-slide-title a:focus-visible,
.elegant-hero-category:focus-visible {
    outline: 2px solid #CDAA62 !important;
    outline-offset: 2px !important;
}

/* News grid focus */
.eng-post-title a:focus-visible,
.eng-category-link:focus-visible,
.eng-more-link a:focus-visible {
    outline: 2px solid #CDAA62 !important;
    outline-offset: 2px !important;
}

/* Footer links focus */
.elegant-footer-logo-link:focus-visible,
.elegant-footer-menu-item:focus-visible,
.elegant-footer-menu-list a:focus-visible,
.elegant-footer-social-icon:focus-visible,
.elegant-footer-bottom-link:focus-visible {
    outline: 2px solid #CDAA62 !important;
    outline-offset: 2px !important;
}

/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [role="button"]:focus,
    [tabindex]:focus {
        outline: 2px solid #CDAA62 !important;
        outline-offset: 2px !important;
    }
}

/* Footer menu mobile styles */
@media (max-width: 999px) {
    .elegant-footer-menu-manual .elegant-footer-menu-item {
        font-family: "Reddit Sans", sans-serif !important;
        font-weight: 700 !important;
        font-style: normal !important;
        font-size: 12px !important;
        line-height: 40px !important;
        letter-spacing: 0.2em !important;
        text-align: center !important;
        vertical-align: middle !important;
        text-transform: uppercase !important;
    }
}

/* Mobile search positioning now handled via padding-top on #search-outer #search in main mobile media query */