/*
Menu Styles - Roda Website
Created for clean menu styling without conflicts
*/

/* Header fixes - uklanjanje belih linija i smanjenje padding-a */
#logo {
    border-right: none !important;
}

.primary-menu .menu-container {
    border-right: none !important;
}

/* Top-bar stilovi - koriste se Canvas default stilovi */

/* Aktivna strana u top-links */
.top-links-item.active > a {
    color: #3B82F6 !important;
    font-weight: 600 !important;
}

.menu-link {
    padding: 12px 18px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-radius: 25px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.menu-item:hover > .menu-link {
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c) !important;
    background-size: 300% 300% !important;
    animation: menuHoverGlow 3s ease infinite !important;
    color: white !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Aktivna strana u glavnom meniju - gradient stil */
.menu-item .menu-link.active {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8, #1E40AF, #1E3A8A) !important;
    background-size: 300% 300% !important;
    animation: menuActiveGlow 4s ease infinite !important;
    color: white !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

@keyframes menuHoverGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes menuActiveGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Logo veći */
#logo img {
    height: 60px !important;
    width: auto !important;
}

/* Header veći */
.header-row {
    padding: 20px 0 !important;
}

/* Dropdown pozadina - gradient blur efekat */
.sub-menu-container {
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.8), rgba(75, 85, 99, 0.7)) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    top: calc(100% + 1px) !important;
}

/* Uklanjanje bele trake između headera i slidera */
#header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#slider {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.header-wrap-clone {
    display: none !important;
}

.sub-menu-container .menu-link {
    color: white !important;
}

.sub-menu-container .menu-link:hover {
    background-color: rgba(59, 130, 246, 0.8) !important;
    color: white !important;
}

/* Nested dropdown - gradient pozadina */
.sub-menu-container .sub-menu-container {
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.9), rgba(75, 85, 99, 0.8)) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Blur dropdown stilovi */
: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));
}

.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;
}

/* Menu stilovi će biti dodati ovde po potrebi */