/**
 * Sticky Submenu Styles
 * Creates a sticky version of #submenu with backdrop blur effect
 */

.rank-math-breadcrumb {
    margin-left: 12px;
}

.sticky-submenu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: none;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-submenu-wrapper.visible {
    display: block;
}

.sticky-submenu-wrapper.active {
    transform: translateY(0);
}

/* Backdrop with blur effect */
.sticky-submenu-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1;
}

/* Container for proper positioning */
.sticky-submenu-container {
    position: relative;
    z-index: 2;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Style the cloned submenu */
.sticky-submenu-clone {
    position: relative !important;
}

/* Make all text black in the sticky version */
.sticky-submenu-wrapper #submenu,
.sticky-submenu-wrapper .sticky-submenu-clone,
.sticky-submenu-wrapper .sticky-submenu-clone * {
    color: #000000 !important;
}

/* Ensure links are also black */
.sticky-submenu-wrapper a,
.sticky-submenu-wrapper a:hover,
.sticky-submenu-wrapper a:focus,
.sticky-submenu-wrapper a:visited {
    color: #000000 !important;
}

/* Handle any nested menu items */
.sticky-submenu-wrapper ul li,
.sticky-submenu-wrapper ul li a,
.sticky-submenu-wrapper nav a,
.sticky-submenu-wrapper .menu-item a {
    color: #000000 !important;
}

/* Override icon colors to stay white in original submenu */
#submenu .salient-page-submenu-icon,
#submenu i.salient-page-submenu-icon,
#submenu .salient-page-submenu-icon:before,
#submenu i[class*="icon"],
#submenu .icon {
    color: #ffffff !important;
}

/* Firefox fix for SVG image shown to small */
#submenu > .row_col_wrap_12 > .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper > .img-with-aniamtion-wrap {
    min-width: 24px;
}

/* Make black SVG images appear white using CSS filter - only in original submenu */
body > :not(.sticky-submenu-wrapper) #submenu img[src*=".svg"],
body > :not(.sticky-submenu-wrapper) #submenu img.nectar-lazy {
    filter: brightness(0) invert(1) !important;
}

/* Override SVG colors to stay white in original submenu */
#submenu svg,
#submenu svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

#submenu svg path,
#submenu svg circle,
#submenu svg rect,
#submenu svg polygon,
#submenu svg line,
#submenu svg polyline,
#submenu svg ellipse {
    fill: #ffffff !important;
}

/* SVGs with stroke should also be white */
#submenu svg [stroke]:not([stroke="none"]) {
    stroke: #ffffff !important;
}

/* Keep icons black in sticky menu */
.sticky-submenu-wrapper .salient-page-submenu-icon,
.sticky-submenu-wrapper i.salient-page-submenu-icon,
.sticky-submenu-wrapper .salient-page-submenu-icon:before,
.sticky-submenu-wrapper i[class*="icon"],
.sticky-submenu-wrapper .icon {
    color: #000000 !important;
}

/* Keep SVG images their original color in sticky menu (no filter) */
.sticky-submenu-wrapper img[src*=".svg"],
.sticky-submenu-wrapper img.nectar-lazy {
    filter: none !important;
}

/* Keep SVGs black in sticky menu */
.sticky-submenu-wrapper svg,
.sticky-submenu-wrapper svg * {
    color: #000000 !important;
    fill: #000000 !important;
}

.sticky-submenu-wrapper svg path,
.sticky-submenu-wrapper svg circle,
.sticky-submenu-wrapper svg rect,
.sticky-submenu-wrapper svg polygon,
.sticky-submenu-wrapper svg line,
.sticky-submenu-wrapper svg polyline,
.sticky-submenu-wrapper svg ellipse {
    fill: #000000 !important;
}

.sticky-submenu-wrapper svg [stroke]:not([stroke="none"]) {
    stroke: #000000 !important;
}

/* Smooth shadow for depth */
.sticky-submenu-backdrop {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sticky-submenu-wrapper .container,
.sticky-submenu-wrapper .rank-math-breadcrumb p {
    padding: 0;
}

/* Responsive adjustments */
@media only screen and (max-width: 999px) {
    .sticky-submenu-container {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

@media only screen and (max-width: 690px) {
    .sticky-submenu-container {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}