/* --------------- SETTINGS VARIABLES --------------- */
/* 
#app {
    --custom-header-v5-border-radius: 10px;
    --custom-header-v5-menu-item-active-border-color: #2B2B2B;
}
*/
/* --------------- SETTINGS VARIABLES --------------- */

/* --------------- START Custom Header V5 - B [Utility Bar] --------------- */
@media only screen and (min-width: 1024px) {

    #app:has(#home) .header-bar-wrapper #h2 {

        .header-container,
        .utilities {
            background-color: transparent !important;
        }

        &,
        .header-container::before {
            background: transparent !important;
        }

        &::after {
            content: close-quote;
            position: absolute;
            top: 0;
            background: linear-gradient(to bottom, var(--bg-color) 40%, rgba(0, 19, 39, 0) 100%);
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        box-shadow: unset;
        position: unset;
        z-index: unset;

        .sloped-edge {
            display: none;
        }

        .utility-bar {
            background: transparent !important;
            text-transform: uppercase;
        }
    }

    #app:has(#home) #cms-gallery {
        margin-top: calc(-1 * var(--header-height));
    }

    #cms-header #h2 .right-menu-items {
        background-color: var(--explore-menu-bg-color);
        padding: 20px 30px;
        border-radius: var(--custom-header-v5-border-radius, 20px);
        margin-right: 20px;

        .button-action-content {
            .menu-field {
                color: var(--explore-menu-text-color) !important;
            }
            svg path {
                fill: var(--explore-menu-text-color) !important;
            }

            rect {
                fill: transparent;
            }
        }
    } 

    #cms-header #m4 .m4-menu--bar {
        justify-content: center;
        border-radius: var(--custom-header-v5-border-radius, 20px);
        margin-right: 48px;
        margin-left: 48px;
    }

    #cms-header #m4 .m4-menu--drawer {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
        z-index: -1;
        top: 37px;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        max-width: calc(100% - 96px);
        border-radius: 0px 0px var(--custom-header-v5-border-radius, 20px) var(--custom-header-v5-border-radius, 20px);
    }

    #cms-header #m4 .m4--menu-item-text {
        text-transform: capitalize;
    }

    #cms-header #m4 .m4--menu-item-active-line {
        border-color: var(--custom-header-v5-menu-item-active-border-color, #000);
    }
}

/* --------------- END Custom Header V5 - B [Utility Bar] --------------- */