/*
* Navigation theming
*
  * Bootstrap v5.1.0 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  *
  * Description: This is for customization of the bootstrap classes.
  *
  * I have tried to use tailwind in the header.php or walker phps for most font sizes and padding
  *
  */

/* Adjustments can be made according to light or dark navbar background either navbar-light or navbar-dark */

/* Entire <nav> section which includes branding */
.navbar {
    /*background-color: var(--wp--custom--navbar--background);*/
}

/* Branding: Site Name and Description */
.navbar-light .navbar-brand,
.navbar-dark .navbar-brand {
    color: var(--wp--custom--navbar--brand-color);
    font-weight: var(--wp--custom--typography--bold);
}

/* Branding: Logo Max height of logo - set this to what makes sense for client */
.navbar-brand img.logo {
    max-height: 100px;
}

#menu-utility {
    /*margin-top: .8em;*/
}

.navigation-container li {
    margin-left: 0;
}

/* Current Menu Item li */
/*li.current-menu-item,
li.current-menu-parent {
    background-color: var(--wp--custom--navbar--menu--item--background);
}*/

/** ------------------------
* T1
----------------------------*/

/* T1 Menu Item Link */
.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
    color: var(--wp--custom--navbar--menu--item--color);
    /*font-weight: 800;*/
}

/* Utility Menu */
#utility-menu .t1 {
    font-size: var(--wp--preset--font-size--xs);
}

/* T1 Menu Item: Link Active, Focus, Hover, Open */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.open,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.open {
    color: var(--wp--custom--navbar--menu--item--focus);
    text-decoration: none;
    /*background-color: var(--wp--custom--navbar--menu--item--background);*/
}
/** --t1 */


/* Dropdown Menu Box ul */
.dropdown-menu,
.dropdown-menu[data-bs-popper] {
    border: none;
    border-radius: 0;
    margin-top: 0;
    padding-top: 0;
    color: var(--wp--custom--navbar--menu--item--background);
    background-color: var(--wp--custom--navbar--dropdown-menu--background);
    /*box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);*/ /* inset  */
    box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); /* drop shadow bottom */
    /*box-shadow: 0 0 0 10px rgba(255,255,255,.25);*/ /* light shadow */
}


/* Dropdown Item li (> T1) */
ul.dropdown-menu li.menu-item {
}

/* Dropdown Item a for T2 */
li.depth_1 > a {
}


/* Dropdown Item Link <a> tag */
.dropdown-item {
    color: var(--wp--custom--navbar--dropdown-menu--item--color);
    white-space: normal;
}

/* If add class of divider to a line item */
.dropdown-divider {
}

/* Dropdown Item Link: Active, Hover, Focus */
.dropdown-item.active, .dropdown-item:active,
.dropdown-item:hover, .dropdown-item:focus {
    color: var(--wp--custom--navbar--dropdown-menu--item--focus);
    text-decoration: none;
    background-color: var(--wp--custom--navbar--dropdown-menu--item--background);
}

/* Dropdown caret */
.dropdown-toggle::after {
    content: none;
}

/* LOGO */
a.navbar-brand {
    background: url(/wp-content/themes/sp2-2/assets/img/logo.png) no-repeat;
    background-size: 100% auto;
    background-image: url(/wp-content/themes/sp2-2/assets/img/logo.svg), none;
    display: block;
    height: 100px;
    text-indent: -9999em;
    width: 350px;
}

/** -------------------------
* Mobile & Responsive Adjustments
* (navigation is set to collapse on bootstrap lg, which introduces the toggle at 991px)
* this breakpoint is set in header.php <nav> with class of navbar-expand-lg
* to define desktop - use min-width 992
----------------------------- */


/* Logo */
@media (min-width: 1600px) {
    a.navbar-brand {
        height: 100px;
        width: 350px;
    }
}
@media (max-width: 1599px) {
    a.navbar-brand {
        height: 100px;
        width: 350px;
    }
}

@media (max-width: 1440px) {
    a.navbar-brand {
        height: 75px;
        width: 263px;
    }
}
@media (max-width: 1200px) {
    a.navbar-brand {
        height: 66px;
        width: 231px;
    }
}
/* when break to hamburger, have more room for logo again, so increase the size*/
@media (max-width: 992px) {
    a.navbar-brand {
        height: 75px;
        width: 263px;
    }
}
@media (max-width: 350px) {
   /* a.navbar-brand {
        height: 66px;
        width: 231px;
    }*/
}

@media (max-width: 400px) {
    a.navbar-brand {
        height: 50px;
        width: 175px;
    }
}



/* Navigation Container */
/* -- need to break the display: flex on mobile */
@media (max-width: 991px) {
    .navigation-container {
        display: block;
        width: 100%;
        background-color: var(--wp--custom--navbar--dropdown-menu--item--background);
    }
}

@media (max-width: 991px) {
    .logo,
    .navigation-container .primary,
    .navigation-container .utility {
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media (max-width: 991px) {
    .navbar-toggler {
        padding: 2%;
        margin-right: 2%;
    }
}

/* Alignment adjustments for mobile menu */
@media (max-width: 992px) {
    .menu-container ul,
    .menu-container ul li {
        margin-left: 0;
    }
}

/* Need to override 'display: block' of dropdowns on mobile, so break into flex columns */
@media (min-width: 992px) {
    .is-megamenu > .dropdown-menu.show {
        display: flex;
    }
}

/* T1 Menu Item */
.t1-in-mobile {
    font-family: var(--wp--custom--typography--fontfamilybold);
    font-size: var(--wp--custom--typography--h3);
    border-bottom: 1px solid var(--wp--custom--navbar--dropdown-menu--item--color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
@media (min-width: 1100px) {
    .primary ul li.is-megamenu:not(:last-child),
    .primary ul li.t1:not(:last-child){
        padding-right: 30px; /* sets the padding between the T1 list items for desktop */
    }
}
@media (min-width: 992px) {
    .primary ul li.is-megamenu:not(:last-child),
    .primary ul li.t1:not(:last-child){
        padding-right: 20px; /* sets the padding between the T1 list items for desktop */
    }
}


@media (max-width: 991px) {
    .nav-link.t1.dropdown-toggle.show,
    .nav-link.t1active.dropdown-toggle.show {
        display: none;
    }
}

@media (min-width: 992px) {
    .utility ul li.is-megamenu,
    .utility ul li.t1 {
        padding-right: 30px; /* sets the padding between the T1 list items for desktop */
    }
}

@media (max-width: 991px) {
    .t1 > a {
        font-size: 20px;
        text-transform: uppercase;
        font-weight: var(--wp--custom--typography--bold);
        /*border-bottom: 1px solid var(--wp--custom--navbar--menu--item--color);*/
    }
}
@media (max-width: 992px) {
    .t1 > a.show {
        margin-bottom: 20px;
    }
}
@media (max-width: 992px) {
    #menu-utility a {
        padding-left: 0;
    }
}
@media (max-width: 992px) {
    .utility-2 {
        padding-left: 0;
    }
}

@media (min-width: 992px) {
    .navbar-megamenu li.is-megamenu .dropdown-menu {
        padding: 0 40px;
    }
}
@media (min-width: 992px) {
    .page-template-transparent .navbar-megamenu li.is-megamenu .dropdown-menu {
        padding: 40px 40px 0 40px;
        margin-top: -30px;
    }
}

/* Megamenu Columns Style */
@media (min-width: 992px) {
    ul.megamenu-ul.depth_1 {
        padding-left: 40px;
    }
}

/* Utility Menu - desktop alignment */
@media (min-width: 992px) {
    #utility-menu ul.dropdown-menu {
        padding-top: 2em;
    }
}


/** -------------------------
* MegaMenu
----------------------------- */

/* Position required to set the width of the megamenu */
.navbar-megamenu li.is-megamenu {
    position: static;
}

/* Megamenu Container */
.navbar-megamenu li.is-megamenu .dropdown-menu {
    /*background-color: var(--wp--custom--navbar--mega-menu--background);*/
    width: 100%;
}
.c-hero .navbar-megamenu li.is-megamenu .dropdown-menu,
.c-hero .dropdown-menu {
    /*background: transparent;*/
}

/* Megamenu Columns Style */
ul.megamenu-ul.depth_1 {
}

/* Item with Divider in Megamenu */
li.megamenu-col.tw-flex-1.divider h3 {
    text-transform: uppercase;
}

/* T2 and its T3s Container  */
.megamenu-ul li.menu-item-has-children {
    /* padding-bottom: 40px; put tailwind in html */
}
a.dropdown-item.t2 {
    text-transform: uppercase;
}

/* T3s */
li.depth_2 a {
    font-size: var(--wp--preset--font-size--xs);
}

/* Description & Button Style */
/*-- description */
p.sub {
}

/* Divider when user selects divider  */
li.megamenu-col.tw-flex-1.divider {
    margin: 0 0 40px 20px;
    border-left: 1px solid var(--wp--custom--navbar--dropdown-menu--item--color);
}

.menu-title a {
    font-size: var(--wp--custom--typography--h3);
    font-family: var(--wp--custom--typography--fontfamilybold);
}

/* --MegaMenu */


/* X TOGGLER */
/* Remove border from toggler */
.navbar-toggler {
    border: 0;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    border: 0;
}

/* Lines of the Toggler */
.toggler-icon{
    /*width: 30px;
    height: 2px;*/
    width: 35px;
    height: 2px;
    margin: 12px 0;
    background-color: #fff;

    display: block;
    transition: all 0.2s;
}

/* Adds Space between the lines */
.middle-bar{
    /*margin: 15px auto;*/
}

/* State when navbar is opened (START) */
.navbar-toggler .top-bar {
    /*transform: rotate(45deg);
    transform-origin: 10% 10%;*/z-index:   -webkit-transform: rotate(-45deg) translate(-10px, 13px);
    transform: rotate(-45deg) translate(-10px, 13px);;
}

.navbar-toggler .middle-bar {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
    /*transform: rotate(-45deg);
    transform-origin: 10% 90%;*/
    -webkit-transform: rotate(45deg) translate(-5px, -12px);
    transform: rotate(45deg) translate(-5px, -12px);
}
/* State when navbar is opened (END) */

/* State when navbar is collapsed (START) */
.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
}
/* State when navbar is collapsed (END) */

/* Color of Toggler when collapsed */
.navbar-toggler.collapsed .toggler-icon {
    background-color: #fff;
}