/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root,
        .not-dark,
        .is-expanded-menu #header {
			--cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
			--cnvs-primary-menu-submenu-hover-bg: rgba(255, 255, 255, .15);
			--cnvs-primary-menu-submenu-bg: rgba(228, 220, 220, 0.15);
			--cnvs-primary-menu-submenu-hover-color: var(--cnvs-contrast-900);
            --cnvs-primary-menu-submenu-border: 1px solid rgba(var(--cnvs-contrast-rgb), .15);
            --cnvs-primary-menu-submenu-blur: 16px;
		}

		.is-expanded-menu .sub-menu-container,
		.is-expanded-menu .mega-menu-content {
			border-top: var(--cnvs-primary-menu-submenu-border);
			transition: margin 0.25s ease !important;
		}

		.is-expanded-menu .sub-menu-container .sub-menu-container,
		.is-expanded-menu .mega-menu-content .sub-menu-container {
			background-color: transparent;
            
		}

		.is-expanded-menu .sub-menu-container::before,
		.is-expanded-menu .mega-menu-content::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			-webkit-backdrop-filter: blur(var(--cnvs-primary-menu-submenu-blur));
			backdrop-filter: blur(var(--cnvs-primary-menu-submenu-blur));
            background: rgba(0, 0, 0, 0.4);
		}

        .is-expanded-menu .sub-menu-container .menu-item > .menu-link,
		.is-expanded-menu .sub-menu-container .menu-item:hover > .menu-link {
			font-weight: 400;
		}

		.is-expanded-menu .sub-menu-container .sub-menu-container,
		.is-expanded-menu .sub-menu-container .mega-menu-content {
			top: -1px !important;
		}

        #header-wrap {

            background: rgba(0, 0, 0, 0.6) !important;
                /* opacity: 0.7; */
                /* background: rgba(255, 255, 255, 0.7); */

            }

            /* Link koji sadrži <img> dobije klasu .img-link */
            .img-link img {
            display: block;                 /* uklanja razmake ispod slike */
            transition: filter 180ms ease;  /* glatka animacija */
            }

            /* Na hover/focus slika postaje mrvu bleđa */
            .img-link:hover img,
            .img-link:focus-visible img {
            filter: brightness(0.92);       /* 1 = normalno; 0.92 = ~8% tamnije/bleđe */
            }

            /* (opciono) vidljiv fokus za tastaturu */
            .img-link:focus-visible {
            outline: 2px solid #4c9ffe;
            outline-offset: 2px;
            }


        @media (max-width: 768px) {
            #header-wrap {
                position: absolute !important;   /* ili fixed ako hoćeš da ostane pri skrolu */
                top: 0;
                left: 0;
                width: 100%;
                z-index: 1000;
                
                opacity: 0.7;
                /* background: rgba(255, 255, 255, 0.7); */

            }
        }