/*!
Theme Name: Mivon Child
Theme URI: https://bslthemes.com/
Author: bslthemes
Author URI: https://themeforest.net/user/bslthemes
Description: Mivon - Creative Agency & Portfolio WordPress Theme
Version: 1.0.0
License: General Public License
License URI: http://www.gnu.org/licenses/gpl.html
Template: mivon
Text Domain: mivon-child
Tags: full-width-template, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, theme-options
*/


/* =========================================================
   1. TRIGON PREMIUM FIXED HEADER — DESKTOP
========================================================= */

html,
body {
    overflow-x: clip;
}

body .trigon-header-shell {
    --width: min(88%, 1640px) !important;
    --position: fixed !important;

    position: fixed !important;

    top: 20px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(88%, 1640px) !important;
    max-width: 1640px !important;

    margin: 0 !important;

    transform: translate3d(-50%, 0, 0) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;

    z-index: 2147483000 !important;

    box-sizing: border-box !important;

    isolation: isolate;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* WordPress admin traka — desktop */

body.admin-bar .trigon-header-shell {
    top: 52px !important;
}


/* =========================================================
   2. TABLET HEADER
========================================================= */

@media screen and (max-width: 1024px) {

    body .trigon-header-shell {
        --width: calc(100% - 28px) !important;

        top: 14px !important;

        width: calc(100% - 28px) !important;
        max-width: none !important;

        min-height: 74px !important;

        padding: 8px 18px !important;

        align-items: center !important;

        border-radius: 18px !important;
    }

    body.admin-bar .trigon-header-shell {
        top: 60px !important;
    }

    .trigon-header-shell .e-con-inner {
        min-height: 58px !important;
        align-items: center !important;
    }


    /* Samo logo */

    .trigon-header-shell
    .elementor-widget-mivon-header-logo img {
        display: block !important;

        width: auto !important;
        max-width: 175px !important;
        max-height: 58px !important;

        margin: 0 !important;

        object-fit: contain !important;
    }


    /* Samo vidljiva burger ikonica */

    .trigon-mobile-toggle .topnav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .trigon-mobile-toggle .navbar-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #d3c0a7 !important;
    }

    .trigon-mobile-toggle .navbar-menu-btn svg {
        display: block !important;

        width: 28px !important;
        height: 28px !important;

        fill: #d3c0a7 !important;
    }

    .trigon-mobile-toggle .navbar-menu-btn svg path {
        fill: #d3c0a7 !important;
        stroke: none !important;
    }
}


/* =========================================================
   3. TELEFON HEADER
========================================================= */

@media screen and (max-width: 767px) {

    body .trigon-header-shell {
        --width: calc(100% - 20px) !important;

        top: 10px !important;

        width: calc(100% - 20px) !important;
        max-width: none !important;

        min-height: 70px !important;

        padding: 7px 14px !important;

        border-radius: 17px !important;
    }

    body.admin-bar .trigon-header-shell {
        top: 56px !important;
    }

    .trigon-header-shell .e-con-inner {
        min-height: 56px !important;
        align-items: center !important;
    }


    /* Logo */

    .trigon-header-shell
    .elementor-widget-mivon-header-logo img {
        width: auto !important;
        max-width: 165px !important;
        max-height: 54px !important;
    }


    /* Samo burger ikonica */

    .trigon-mobile-toggle .topnav,
    .trigon-mobile-toggle .navbar-menu-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .trigon-mobile-toggle .navbar-menu-btn svg {
        width: 26px !important;
        height: 26px !important;
    }
}


/* WordPress mobilna admin traka */

@media screen and (max-width: 782px) {

    body.admin-bar .trigon-header-shell {
        top: 56px !important;
    }
}


/* =========================================================
   4. ISKLJUČIVANJE MIVON HIDE-ON-SCROLL EFEKTA
========================================================= */

body .navbar.mil-scroll.mil-sticky,
body .navbar.mil-scroll.mil-sticky.mil-slideUp {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    translate: none !important;

    pointer-events: auto !important;

    z-index: 2147482999 !important;

    background: transparent !important;

    transition: none !important;
    animation: none !important;
}

/* =========================================================
   5. TRIGON MOBILNI DROPDOWN MENI — TELEFON I TABLET
========================================================= */

/* Stara verzija je isključena; zadržana samo radi lakog rollbacka. */
@media screen and (max-width: 0px) {

    /*
     * Otvoreni meni prati stvarnu poziciju i širinu headera.
     * Vrijednosti automatski postavlja trigon-header.js.
     */

    .trigon-mobile-toggle .hamenu.open {
        position: fixed !important;

        top: var(--trigon-menu-top, 100px) !important;
        left: var(--trigon-header-left, 14px) !important;
        right: auto !important;
        bottom: auto !important;

        width: var(
            --trigon-header-width,
            calc(100% - 28px)
        ) !important;

        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        max-height: calc(
            100dvh - var(--trigon-menu-top, 100px) - 10px
        ) !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #292622 !important;
        background: #f3eee8 !important;

        border: 0 !important;
        border-radius: 0 0 18px 18px !important;

        box-shadow:
            0 22px 45px rgba(28, 25, 22, 0.22) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 2147482999 !important;
    }


    /* Unutrašnji sadržaj */

    .trigon-mobile-toggle
    .hamenu.open
    > .d-flex {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 30px 26px 22px !important;

        box-sizing: border-box !important;
    }


    /* Navigacioni dio */

    .trigon-mobile-toggle
    .hamenu.open
    .menu-links {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #292622 !important;

        overflow: visible !important;
    }


    /* Lista */

    .trigon-mobile-toggle
    .hamenu.open
    .main-menu {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    /* Stavke menija */

    .trigon-mobile-toggle
    .hamenu.open
    .main-menu
    > li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        border-bottom:
            1px solid rgba(41, 38, 34, 0.13) !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    .main-menu
    > li:last-child {
        border-bottom: 0 !important;
    }


    /* Linkovi */

    .trigon-mobile-toggle
    .hamenu.open
    .main-menu
    > li
    > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        height: auto !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 16px 4px !important;

        color: #292622 !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        font-size: 20px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.045em !important;

        text-align: left !important;
        text-transform: uppercase !important;
        text-decoration: none !important;

        white-space: nowrap !important;

        border: 0 !important;
        box-shadow: none !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        transition:
            color 0.2s ease,
            padding-left 0.2s ease !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    .main-menu
    > li
    > a:hover,
    .trigon-mobile-toggle
    .hamenu.open
    .main-menu
    > li
    > a:active {
        color: #9a8b78 !important;
        padding-left: 10px !important;
    }


    /*
     * Uklanja originalnu Mivon animaciju teksta,
     * duplirana slova i pravougaonike oko teksta.
     */

    .trigon-mobile-toggle
    .hamenu.open
    .main-menu
    .fill-text {
        position: static !important;

        display: inline !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #292622 !important;

        -webkit-text-fill-color: #292622 !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        border: 0 !important;
        box-shadow: none !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        white-space: nowrap !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    .main-menu
    .fill-text::before,
    .trigon-mobile-toggle
    .hamenu.open
    .main-menu
    .fill-text::after {
        display: none !important;

        content: none !important;

        width: 0 !important;
        height: 0 !important;

        color: transparent !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;
    }


    /*
     * Kada je meni otvoren, burger nestaje.
     * Originalno X dugme dolazi na isto mjesto.
     */

    body.trigon-menu-open
    .trigon-mobile-toggle
    .navbar-menu-btn {
        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    .close-menu {
        position: fixed !important;

        top: var(--trigon-toggle-top, 29px) !important;
        left: var(--trigon-toggle-left, auto) !important;
        right: auto !important;
        bottom: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #d3c0a7 !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        cursor: pointer !important;
        pointer-events: auto !important;

        z-index: 2147483002 !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    .close-menu svg {
        display: block !important;

        width: 26px !important;
        height: 26px !important;

        color: #d3c0a7 !important;
        fill: #d3c0a7 !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    .close-menu svg path {
        fill: #d3c0a7 !important;
        stroke: none !important;
    }


    /*
     * Sekcije se nakon klika zaustavljaju
     * ispod fiksnog headera.
     */

    #o-nama,
    #brendovi,
    #usluge,
    #projekti,
    #partneri {
        scroll-margin-top: 110px !important;
    }
}


/* =========================================================
   DODATNA PODEŠAVANJA — SAMO TELEFON
========================================================= */

@media screen and (max-width: 0px) {

    .trigon-mobile-toggle .hamenu.open {
        top: var(--trigon-menu-top, 89px) !important;
        left: var(--trigon-header-left, 10px) !important;

        width: var(
            --trigon-header-width,
            calc(100% - 20px)
        ) !important;

        max-height: calc(
            100dvh - var(--trigon-menu-top, 89px) - 10px
        ) !important;

        border-radius: 0 0 17px 17px !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    > .d-flex {
        padding: 26px 22px 18px !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    .main-menu
    > li
    > a {
        min-height: 54px !important;

        padding: 15px 4px !important;

        font-size: 19px !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    .close-menu {
        top: var(--trigon-toggle-top, 23px) !important;
        left: var(--trigon-toggle-left, auto) !important;

        width: 44px !important;
        height: 44px !important;
    }

    .trigon-mobile-toggle
    .hamenu.open
    .close-menu svg {
        width: 25px !important;
        height: 25px !important;
    }

    #o-nama,
    #brendovi,
    #usluge,
    #projekti,
    #partneri {
        scroll-margin-top: 100px !important;
    }
}


/* =========================================================
   6. PRISTUPAČNOST
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .trigon-header-shell,
    .trigon-header-shell *,
    .trigon-mobile-toggle .hamenu {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   7. TRIGON MENI V2 — SAMO TELEFON I TABLET
========================================================= */

@media screen and (max-width: 1024px) {

    /*
     * JavaScript premješta isti originalni Mivon .hamenu u body.
     * Time position: fixed više nije vezan za transformisani header.
     */

    body > .hamenu.trigon-mobile-menu {
        position: fixed !important;
        top: var(--trigon-menu-top, 96px) !important;
        left: var(--trigon-header-left, 14px) !important;
        right: auto !important;
        bottom: auto !important;

        width: var(--trigon-header-width, calc(100% - 28px)) !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--trigon-menu-top, 96px) - 10px) !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #292622 !important;
        background: #f3eee8 !important;

        border: 0 !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 22px 45px rgba(28, 25, 22, 0.22) !important;

        overflow: hidden !important;
        z-index: 2147482998 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translate3d(0, -20px, 0) !important;
        clip-path: inset(0 0 100% 0) !important;

        transition:
            transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
            clip-path 0.32s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.18s ease,
            visibility 0s linear 0.32s !important;
    }

    body > .hamenu.trigon-mobile-menu.open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translate3d(0, 0, 0) !important;
        clip-path: inset(0 0 0 0) !important;

        transition:
            transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
            clip-path 0.32s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.18s ease,
            visibility 0s linear 0s !important;
    }

    body > .hamenu.trigon-mobile-menu > .d-flex {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: inherit !important;

        margin: 0 !important;
        padding: 26px 26px 20px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        box-sizing: border-box !important;
    }

    body > .hamenu.trigon-mobile-menu .menu-links,
    body > .hamenu.trigon-mobile-menu .main-menu {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #292622 !important;
        overflow: visible !important;
    }

    body > .hamenu.trigon-mobile-menu .main-menu {
        list-style: none !important;
    }

    body > .hamenu.trigon-mobile-menu .main-menu > li {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(41, 38, 34, 0.14) !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }

    body > .hamenu.trigon-mobile-menu .main-menu > li:last-child {
        border-bottom: 0 !important;
    }

    body > .hamenu.trigon-mobile-menu .main-menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        min-height: 56px !important;

        margin: 0 !important;
        padding: 15px 4px !important;

        color: #292622 !important;
        -webkit-text-fill-color: #292622 !important;
        background: transparent !important;

        font-size: clamp(18px, 2.4vw, 21px) !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.045em !important;

        text-align: left !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        border: 0 !important;
        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: color 0.2s ease, padding-left 0.2s ease !important;
    }

    body > .hamenu.trigon-mobile-menu .main-menu > li > a:hover,
    body > .hamenu.trigon-mobile-menu .main-menu > li > a:focus-visible {
        color: #9a8b78 !important;
        -webkit-text-fill-color: #9a8b78 !important;
        padding-left: 10px !important;
    }

    body > .hamenu.trigon-mobile-menu .fill-text {
        position: static !important;
        display: inline !important;
        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    body > .hamenu.trigon-mobile-menu .fill-text::before,
    body > .hamenu.trigon-mobile-menu .fill-text::after {
        display: none !important;
        content: none !important;
    }

    body > .hamenu.trigon-mobile-menu .cont-info,
    body > .hamenu.trigon-mobile-menu .close-menu,
    body > .hamenu.trigon-mobile-menu .sub-menu,
    body > .hamenu.trigon-mobile-menu .sub-menu2 {
        display: none !important;
    }

    /*
     * Burger ostaje isto dugme; u otvorenom stanju postaje X.
     */

    .trigon-mobile-toggle .navbar-menu-btn {
        position: relative !important;
    }

    .trigon-mobile-toggle .navbar-menu-btn::before,
    .trigon-mobile-toggle .navbar-menu-btn::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        width: 27px !important;
        height: 2px !important;

        background: #d3c0a7 !important;
        border-radius: 999px !important;

        opacity: 0 !important;
        transform-origin: center !important;
        transition: opacity 0.18s ease, transform 0.25s ease !important;
    }

    .trigon-mobile-toggle .navbar-menu-btn::before {
        transform: translate(-50%, -50%) rotate(45deg) scale(0.75) !important;
    }

    .trigon-mobile-toggle .navbar-menu-btn::after {
        transform: translate(-50%, -50%) rotate(-45deg) scale(0.75) !important;
    }

    body.trigon-menu-open
    .trigon-mobile-toggle
    .navbar-menu-btn svg {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    body.trigon-menu-open
    .trigon-mobile-toggle
    .navbar-menu-btn::before,
    body.trigon-menu-open
    .trigon-mobile-toggle
    .navbar-menu-btn::after {
        opacity: 1 !important;
    }

    body.trigon-menu-open
    .trigon-mobile-toggle
    .navbar-menu-btn::before {
        transform: translate(-50%, -50%) rotate(45deg) scale(1) !important;
    }

    body.trigon-menu-open
    .trigon-mobile-toggle
    .navbar-menu-btn::after {
        transform: translate(-50%, -50%) rotate(-45deg) scale(1) !important;
    }

    .blur-menubg.active::after {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    #o-nama,
    #brendovi,
    #usluge,
    #projekti,
    #partneri {
        scroll-margin-top: 110px !important;
    }
}

@media screen and (max-width: 767px) {

    body > .hamenu.trigon-mobile-menu {
        top: var(--trigon-menu-top, 74px) !important;
        left: var(--trigon-header-left, 10px) !important;
        width: var(--trigon-header-width, calc(100% - 20px)) !important;
        max-height: calc(100dvh - var(--trigon-menu-top, 74px) - 10px) !important;
        border-radius: 0 0 17px 17px !important;
    }

    body > .hamenu.trigon-mobile-menu > .d-flex {
        padding: 24px 22px 17px !important;
    }

    body > .hamenu.trigon-mobile-menu .main-menu > li > a {
        min-height: 53px !important;
        padding: 14px 4px !important;
        font-size: 18px !important;
    }

    .trigon-mobile-toggle .navbar-menu-btn::before,
    .trigon-mobile-toggle .navbar-menu-btn::after {
        width: 25px !important;
    }

    #o-nama,
    #brendovi,
    #usluge,
    #projekti,
    #partneri {
        scroll-margin-top: 100px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    body > .hamenu.trigon-mobile-menu,
    .trigon-mobile-toggle .navbar-menu-btn,
    .trigon-mobile-toggle .navbar-menu-btn::before,
    .trigon-mobile-toggle .navbar-menu-btn::after {
        transition: none !important;
    }
}





/* Header iznad otvorenog menija — samo telefon i tablet */
@media screen and (max-width: 1024px) {
    body .navbar {
        position: fixed !important;
        z-index: 2147483000 !important;
    }
}