/**
 * Copyright (c) 2019 Oracle and/or its affiliates. All rights reserved.
 */

/* NOTE: Do NOT change any styles in this file as it will change the look and feel of this Custom 
    Component across ALL Themes/Sites.

    Instead, copy the specific styles being overridden into the designs.css file of the Theme and 
    prefix it with .navMenu-default-style.
        Example
            Add the following to your Theme's design.css file to override the dropdown menu 
            background color:
                .navMenu-default-style .dropdown-menu {
                    background-color: blue;
                }

    Or create a new style(s)) and prefix by that name instead, allowing the default style to remain 
    untouched. But this new style name also needs to be added to the design.json file for it to be 
    exposed/selectable by the end user in the Sites editor.
        Example
            Add the following to your Theme's design.css file to allow for the dropdown menu 
            background color to be manually overridden:
                .navMenu-blue-style .dropdown-menu {
                    background-color: blue;
                }
            Add the following in your Theme's design.json file to expose this new style in the Sites 
            editor:
                "navMenu": {
                    "styles": [
                        {
                            "name": "Blue",
                            "class": "navMenu-blue-style"
                        }			
                    ]
                }        
            In this case, once the NavMenu component has been dropped onto a Site page the user can 
            go into the styles of the component and select "Blue" to change the background color.
*/

/* NavMenu Default Color Styles */
.navbar-nav .nav-link {
    color: #ffffff;
}

.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
    color: #ffffff;
    background-color: #38362d;
}

.navbar-nav .active>.nav-link,
.navbar-nav .show>.nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #d3c36e;
}

.dropdown-menu {
    background-color: #262626;
}

.dropdown-item {
    color: #ffffff !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #ffffff;
    background-color: #38362d;
}

.dropdown-item.active {
    color: #d3c36e !important;
    background-color: transparent;
}

.dropdown-item.active:hover {
    background-color: #38362d;
}

.currParent,
.navbar-nav .currParent .nav-link {
    color: #d3c36e !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(211,195,110,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler.collapsed .navbar-toggler-icon:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(211,195,110,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* NOTE: The 767.98px is needed for Windows 10 display in scaled mode to work correctly with Bootstrap 4 */
@media (max-width: 767.98px) {
    .navbar-nav {
        background-color: #262626;
    }

    .navbar-nav .active>.nav-link,
    .navbar-nav .show>.nav-link,
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link.show {
        color: #d3c36e;
    }
}

/* End NavMenu Default Color Styles */


/* Core Styles */
.navbar {
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    z-index: 100;
}

.nav-link {
    padding: 24px 1.5vw !important;
    outline-width: 0;
}

.navbar-toggler:focus {
    outline-width: 0;
}

.navbar-toggler {
    border-width: 0;
    padding: 0;
    margin-top: 21px;
    margin-bottom: 21px;
    margin-right: 21px;
}

.dropdown-menu {
    margin: 0;
    padding: 0;
    border-width: 0;
    border-radius: 0;
}

.dropright .dropdown-menu {
    margin: 0;
}

.dropdown:hover>.dropdown-menu,
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.nav-link:after {
    display: none;
}

.dropdown-item {
    font-weight: 400;
    /* Matching navbar heading padding */
    padding: 10px 2vw;
    outline-width: 0;
}

.dropdown-submenu a::after {
    position: absolute;
    right: 6px;
    margin: 8px;
}

/* NOTE: The 767.98px is needed for Windows 10 display in scaled mode to work correctly with Bootstrap 4 */
@media (max-width: 767.98px) {
    .navbar-nav {
        float: right;
    }

    .navbar-collapse {
        position: absolute;
        right: 0;
        top: 72px;
    }

    .dropdown-menu {
        display: block;
    }

    .nav-link {
        padding: 10px 20px !important;
    }

    /* Indent submenu in the dropdown menu based on its current level */
    .dropdown-menu .dropdown-item {
        padding-left: 40px;
    }

    .dropdown-menu .dropdown-menu .dropdown-item {
        padding-left: 60px;
    }

    .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
        padding-left: 90px;
    }

    /* End indent */

    .dropdown-item.dropdown-toggle:after {
        display: none;
    }
}

/* End Core Styles */

.images,
.left,
.right {
    display: inline-block;
}

.navbarCustom {
    display: inline-block;
    position: absolute;
    right: 0;
}

/* @media (min-width: 1000px) { */
@media (min-width: 1050px) {
    .navbarCustom .navbar-toggler {
        display: none;
    }

    .navbarCustom .navbar-collapse {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

    .navbarCustom .navbar-nav {
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .navbar-nav>div:last-child {
        /* updated for 'INSIGHTS' */
        padding-right: 25px;
        /* padding-right: 100px; */
    }

    .dropdown-menu {
        font-size: 20px;
        box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
        min-width: 11rem;
        background-color: var(--trans-square-blue-dark-shade);
        visibility: hidden;
        display: block;
        position: absolute !important;
    }

    .dropdown:hover>.dropdown-menu {
        display: block;
        visibility: visible;
    }

    .nav-item {
        margin: 0 !important;
    }

    .navbarCustomMobile {
        display: none;
    }

    .header_bar .images .left img {
        /* matching margins of the last-child for navbar items */
        margin-left: 3vw;
        /* margin-left: 60px; */
        width: 135px;
    }

    .header_bar .images .right img {
        margin-left: 25px;
        width: 200px;
    }
}

/* @media (max-width: 999px) { */
@media (max-width: 1049px) {
    .navbarCustom {
        display: none;
    }

    /* .navbarCustomMobile .navbar-toggler-icon {
        padding-right: 100px;
    } */

    /* .navbarCustomMobile .navbar-toggler,
    .navbar-toggler:not(.collapsed) {
        position: absolute;
        right: 0px;
        top: -56px;
        z-index: 9999;
    } */

    .navbarCustomMobile .navbar-toggler {
        position: fixed;
        right: 0px;
        top: 44px;
        z-index: 9999;
    }

    .navbarCustomMobile {
        margin-bottom: 0;
        display: inherit;
    }

    .navbarCustomMobile .navbar-collapse {
        position: fixed !important;
        height: 100%;
        top: 0px;
        right: 0;
        background: #fff;
        box-shadow: -61px 0px 48px 0px rgb(0 0 0 / 20%);
        padding-top: 50px;
        padding-bottom: 50px;
        /* allow the user to scroll the navbar panel */
        overflow-y: auto;
    }

    .navbarCustomMobile .dropdown-menu .dropdown-item {
        padding: 5px 5px 5px 38px;
        color: #012e43 !important;
    }

    .navbarCustomMobile .navbar-nav .nav-link,
    .navbarCustomMobile .navbar-nav .currParent .nav-link {
        color: #012e43 !important;
    }

    .navbarCustomMobile .dropdown:hover>.dropdown-menu,
    .navbarCustomMobile .dropdown-submenu:hover>.dropdown-menu {
        margin-top: 0;
    }

    .navbarCustomMobile .dropdown>.dropdown-menu {
        display: block;
    }

    .navbarCustomMobile .dropdown-menu {
        box-shadow: none;
        background-color: transparent;
    }

    .header_bar .images .left img {
        margin-left: 25px;
        width: 125px;
    }

    .header_bar .images .right img {
        margin-left: 25px;
        width: 135px;
    }
}

@media (max-width: 450px) {
    .bannerHeaderText h2 {
        font-size: 2.5em;
    }
}