/* 
    Redesigned Header 2021 - Jira Ticket WP-567
    Last modified June 26, 2023, at 12:10
*/


/*********************
  NAVIGATION STYLES
  *********************/


/*
  all navs have a .nav class applied via
  the wp_menu function; this is so we can
  easily write one group of styles for
  the navs on the site so our css is cleaner
  and more scalable.
  */

.nav {
    border-bottom: 0;
    margin: 0;
    /* end .menu li */
    /* highlight current page */
    /* end current highlighters */
}

.nav li {
    /*
      so you really have to rethink your dropdowns for mobile.
      you don't want to have it expand too much because the
      screen is so small. How you manage your menu should
      depend on the project. Here's some great info on it:
      http://www.alistapart.com/articles/organizing-mobile/
      */
}

.nav li a {
    display: block;
    color: var(--upmcWhite);
    text-decoration: none;
    padding: 0.75em;
    /*
        remember this is for mobile ONLY, so there's no need
        to even declare hover styles here, you can do it in
        the style.scss file where it's relevant. We want to
        keep this file as small as possible!
        */
}

.nav li ul.sub-menu li a,
.nav li ul.children li a {
    padding-left: 30px;
}


/* end .nav */

.logo {
    float: left;
}


/* Begin FC Styles */

body.admin-bar header.site-header {
    top: 46px;
}

header.site-header .wrap {
    width: 96%;
    max-width: 1142px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    header.site-header .mobile {
        display: none;
    }
    body.admin-bar header.site-header {
        top: 32px;
    }
}

@media (max-width: 767px) {
    header.site-header .desktop {
        display: none;
    }
}

header.site-header .wrap {
    position: relative;
}

header.site-header .wrap:after {
    content: '';
    display: block;
    width: 100%;
    clear: both;
}

header.site-header .searchform {
    background: var(--upmcOffWhite);
}

header.site-header .site-header-bar {
    display: block;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0.5rem 0;
    background: var(--upmcWhite);
    text-align: center;
    /* box-shadow: 5px 5px 5px var(--upmcOffWhite); */
    -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    -ms-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    -o-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

body.admin-bar #content {
    top: calc(46px + 60px);
}

@media (min-width: 768px) {
    body.admin-bar #content {
        top: calc(32px + 60px);
    }
}

header.site-header .site-header-bar .wrap {
    width: 96%;
}

header.site-header .site-header-bar .site-title {
    display: block;
    margin: 0;
    padding: 0;
}

header.site-header .site-header-bar .site-title a img {
    display: block;
    margin: 0;
    padding: 8px 0;
    border: none;
    outline: none;
    width: 200px;
    height: auto;
}

header.site-header .site-header-bar .searchform {
    display: inline-block;
    width: 60%;
    min-width: 275px;
    max-width: 400px;
    margin-top: 0.25rem;
}

header.site-header .site-header-bar .toggle-menu-container {
    text-align: right;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu {
    display: block;
    width: 50px;
    height: 0;
    margin: 0;
    padding: 26px 0 0;
    background: none !important;
    border: none;
    outline: none;
    position: relative;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: auto;
    right: 0;
    top: 1rem;
    -moz-transition: top ease-in-out 0.15s;
    -ms-transition: top ease-in-out 0.15s;
    -o-transition: top ease-in-out 0.15s;
    -webkit-transition: top ease-in-out 0.15s;
    transition: top ease-in-out 0.15s;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    clear: both;
    float: none;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.bars,
header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.bars:before,
header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.bars:after {
    content: '';
    display: block;
    width: 65%;
    height: 4.33333px;
    background: var(--upmcGreyDark);
    position: absolute;
    top: 10.83333px;
    left: 0;
    -moz-transition: all ease-in-out 0.15s;
    -ms-transition: all ease-in-out 0.15s;
    -o-transition: all ease-in-out 0.15s;
    -webkit-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.bars:before {
    top: -10.83333px;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.bars:after {
    top: 10.83333px;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.bars,
header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.bars:before,
header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.bars:after {
    width: 100%;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.text {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    position: absolute;
    top: -1.25rem;
    left: 0;
    -moz-transition: top ease-in-out 0.15s;
    -ms-transition: top ease-in-out 0.15s;
    -o-transition: top ease-in-out 0.15s;
    -webkit-transition: top ease-in-out 0.15s;
    transition: top ease-in-out 0.15s;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu span.text .text-open {
    letter-spacing: 0;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open {
    top: 0.1rem;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.text {
    top: 130%;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.text .text-default,
header.site-header .site-header-bar .toggle-menu-container #toggle-menu:not(.open) span.text .text-open {
    display: none;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.bars,
header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.bars:before,
header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.bars:after {
    width: 100% !important;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.bars {
    background: transparent;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.bars:before,
header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.bars:after {
    background: var(--upmcGreyDark);
    top: 0;
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.bars:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

header.site-header .site-header-bar .toggle-menu-container #toggle-menu.open span.bars:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

header.site-header .site-navigation {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--upmcOffWhite);
    position: fixed;
    top: 60px;
    left: 100%;
    -moz-transition: left ease-in-out 0.3s;
    -ms-transition: left ease-in-out 0.3s;
    -o-transition: left ease-in-out 0.3s;
    -webkit-transition: left ease-in-out 0.3s;
    transition: left ease-in-out 0.3s;
}

body.admin-bar header.site-header .site-navigation {
    top: calc(46px + 60px);
}

@media (min-width: 768px) {
    body.admin-bar header.site-header .site-navigation {
        top: calc(32px + 60px);
    }
}

header.site-header .site-navigation.open {
    left: 0;
}

header.site-header .site-navigation .site-title {
    margin: 1rem 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

header.site-header .site-navigation .searchform {
    width: 96%;
    margin: 1rem auto 0.5rem;
    background: var(--upmcWhite);
}

@media (max-width: 767px) {
    header.site-header .site-navigation .wrap {
        width: 100%;
    }
    header.site-header .site-navigation .site-title,
    header.site-header .site-navigation .primary-navigation ul.nav,
    header.site-header .site-navigation ul.social-menu,
    header.site-header .site-navigation .secondary-menu {
        width: 96%;
        margin: 0 auto;
    }
}

header.site-header .site-navigation ul.social-menu {
    margin: 2rem auto 1rem;
}

header.site-header .site-navigation ul.social-menu li.menu-item a {
    border: none;
}

header.site-header .site-navigation ul.nav li.menu-item>a {
    /* color: var(--upmcGreyDark);
    color: #00819f; */
}

header.site-header .site-navigation ul.nav li.menu-item>a:active,
header.site-header .site-navigation ul.nav li.menu-item>a:focus,
header.site-header .site-navigation ul.nav li.menu-item>a:hover {
    border-bottom-width: 2px;
}

header.site-header .site-navigation .primary-menu-submenu-back-wrapper {
    display: block;
    width: 96%;
    margin: 0.5rem auto;
    text-align: right;
}

header.site-header .site-navigation .primary-menu-submenu-back {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--upmcPurple);
    /* float: right; */
    opacity: 1;
    -moz-transition: opacity ease-in-out 0.3s;
    -ms-transition: opacity ease-in-out 0.3s;
    -o-transition: opacity ease-in-out 0.3s;
    -webkit-transition: opacity ease-in-out 0.3s;
    transition: opacity ease-in-out 0.3s;
}

header.site-header .site-navigation .primary-menu-submenu-back:active,
header.site-header .site-navigation .primary-menu-submenu-back:focus,
header.site-header .site-navigation .primary-menu-submenu-back:hover {
    color: var(--upmcPurpleBright);
}

header.site-header .site-navigation .primary-menu-submenu-back .back-icon {
    display: inline-block;
    margin: auto 0.25rem auto 0;
    vertical-align: baseline;
    line-height: 1;
    font-size: 0.85rem;
}

header.site-header .site-navigation .primary-menu-submenu-back.hidden {
    opacity: 0;
}

header.site-header .site-navigation ul li.menu-item:not(.social-icon) a {
    display: inline-block;
    margin: 0.25rem;
    padding: 0;
    outline: none;
    background: none;
    text-decoration: none;
    border: none;
    /* border-bottom: 1px solid #00819f;
    -moz-transition: border 0.15s linear;
    -ms-transition: border 0.15s linear;
    -o-transition: border 0.15s linear;
    -webkit-transition: border 0.15s linear;
    transition: border 0.15s linear; */
}

header.site-header .site-navigation ul li.menu-item:not(.social-icon) a,
header.site-header .site-navigation ul li.menu-item:not(.social-icon) a:visited {
    color: var(--upmcGreyDark);
    /* color: #00819f; */
}

header.site-header .site-navigation ul li.menu-item:not(.social-icon) a:active,
header.site-header .site-navigation ul li.menu-item:not(.social-icon) a:focus,
header.site-header .site-navigation ul li.menu-item:not(.social-icon) a:hover {
    color: var(--upmcPurple);
    color: var(--upmcPurpleBright);
    /* color: #00819f; */
    outline: none;
    background: none;
    text-decoration: underline;
    /* color: #bb2253; */
    /* border-bottom-width: 2px; */
}

header.site-header .site-navigation .primary-navigation ul.primary-nav li.menu-item {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-size: 1rem !important;
}

header.site-header .site-navigation .primary-navigation ul.primary-nav li.menu-item a {
    /* display: block;
    width: 100%; */
    font-size: 1rem;
    font-weight: 600;
}

header.site-header .site-navigation .primary-navigation ul.primary-nav>li.menu-item>a {
    font-weight: 700;
}

header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children ul.sub-menu li.menu-item ul.sub-menu li.menu-item a {
    font-weight: 400;
}

header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children {
    position: relative;
}

header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .toggle-dropdown {
    position: absolute;
    right: 0;
}

header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .toggle-dropdown:active,
header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .toggle-dropdown:focus,
header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .toggle-dropdown:hover {
    color: var(--upmcPurpleBright);
}

header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .toggle-dropdown .chevron-left {
    display: none;
}

header.site-header .site-navigation ul.primary-nav li.menu-item.secondary-link {
    /* TODO: Once this VWO test is over, these links should be removed from the primary nav menu (https://share.upmc.com/wp-admin/nav-menus.php) */
    display: none !important;
}

header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .sub-menu-wrapper {
    display: block;
    width: 100% !important;
    height: 100%;
    background: var(--upmcOffWhite);
    position: fixed;
    /* top: 185px; */
    top: 150px;
    left: 100%;
    z-index: 1;
    border-top: 3px solid var(--upmcPurple);
    border-left: 3px solid var(--upmcPurple);
    -moz-transition: left ease-in-out 0.3s;
    -ms-transition: left ease-in-out 0.3s;
    -o-transition: left ease-in-out 0.3s;
    -webkit-transition: left ease-in-out 0.3s;
    transition: left ease-in-out 0.3s;
}

body.admin-bar header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .sub-menu-wrapper {
    top: calc(46px + 150px);
}

@media (min-width: 768px) {
    body.admin-bar header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .sub-menu-wrapper {
        top: calc(32px + 150px);
    }
}

header.site-header .site-navigation.open .primary-navigation ul.nav li.menu-item-has-children .sub-menu-wrapper.open {
    left: -3px;
}

header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .sub-menu-wrapper .sub-menu-scroller {
    /* overflow: auto; */
    overflow-y: auto;
    /* max-height: none !important; */
    /* width: 100% !important; */
    padding: 0 !important;
}

header.site-header .site-navigation .primary-navigation ul.nav.primary-nav li.menu-item-has-children .sub-menu-wrapper .sub-menu-scroller ul.sub-menu {
    z-index: auto;
    visibility: visible;
    position: static;
    display: block;
    margin: 0;
    /* display: grid;
    grid-template-rows: 50% 1rem auto;
    justify-items: stretch;
    align-items: center;
    justify-content: stretch;
    align-content: start; */
}

header.site-header .site-navigation ul.social-menu,
header.site-header .site-navigation .secondary-menu ul.secondary-nav li.menu-item {
    text-align: center;
}

header.site-header .site-navigation ul.social-menu li.social-icon {
    float: none;
    display: inline-block;
}

header.site-header .site-navigation .secondary-menu ul.secondary-nav li.menu-item a {
    font-size: 0.9rem;
}


/* Desktop Navigation Layout */

@media (min-width: 768px) {
    header.site-header .site-navigation .tw-row ul.social-menu {
        text-align: left;
        margin: 0;
    }
    header.site-header .site-navigation .tw-row ul.social-menu li.social-icon {
        display: block;
        width: 100% !important;
        margin: 1rem 0;
    }
    header.site-header .site-navigation .tw-row ul.social-menu li.social-icon a {
        display: inline-block;
        width: auto;
        border: none !important;
        outline: none !important;
        background: none !important;
    }
    header.site-header .site-navigation .tw-row ul.social-menu li.social-icon a span {
        display: inline-block !important;
        vertical-align: middle;
    }
    header.site-header .site-navigation .tw-row ul.social-menu li.social-icon a .screen-reader-text {
        position: static !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        cursor: inherit !important;
        margin-left: 0.5rem;
        font-weight: 700;
        color: var(--upmcGreyDark);
        font-size: 0.9rem;
    }
    header.site-header .site-navigation .tw-row ul.social-menu li.social-icon a:active .screen-reader-text,
    header.site-header .site-navigation .tw-row ul.social-menu li.social-icon a:focus .screen-reader-text,
    header.site-header .site-navigation .tw-row ul.social-menu li.social-icon a:hover .screen-reader-text {
        color: var(--upmcPurple);
        color: var(--upmcPurpleBright);
        /* color: #bb2253; */
        text-decoration: underline;
    }
    header.site-header .site-navigation ul.nav li.menu-item-has-children>a.dropdown-toggle+button.toggle-dropdown {
        display: none;
    }
    header.site-header .site-navigation ul li.menu-item a {
        margin: 0.5rem;
    }
    header.site-header .site-navigation ul.primary-nav,
    header.site-header .site-navigation ul.secondary-nav {
        display: table;
        width: 100%;
    }
    header.site-header .site-navigation ul.primary-nav>li.menu-item,
    header.site-header .site-navigation ul.secondary-nav>li.menu-item {
        display: table-cell;
        text-align: left;
        vertical-align: top;
        float: none;
    }
    header.site-header .site-navigation ul.secondary-nav>li.menu-item {
        width: 20%;
        text-align: center;
    }
    header.site-header .site-navigation .primary-navigation ul.primary-nav li.menu-item {
        text-align: left;
    }
    header.site-header .site-navigation .primary-navigation ul.primary-nav li.menu-item a {
        display: inline-block;
        width: auto;
        /* padding-left: 0; */
        margin-left: 0;
    }
    header.site-header .site-navigation .primary-navigation ul.primary-nav>li.menu-item {
        min-width: 200px;
        min-width: 250px;
        margin: 0;
        padding: 1rem 1rem 1rem 0;
    }
    header.site-header .site-navigation .primary-navigation ul.primary-nav>li.menu-item>a {
        margin: 0 0 1rem;
        padding: 0;
        font-size: 1.2rem;
    }
    header.site-header .site-navigation .primary-navigation ul.primary-nav>li.menu-item.two-col {
        min-width: 400px;
    }
    header.site-header .site-navigation .primary-navigation ul.primary-nav>li.menu-item.menu-item-has-children {
        position: relative;
    }
    header.site-header .site-navigation .primary-navigation ul.primary-nav>li.menu-item.menu-item-has-children:after {
        content: '';
        display: block;
        width: 85%;
        height: 3px;
        position: absolute;
        top: 2.6rem;
        left: 1rem;
        left: 0;
        background: var(--upmcPurple);
    }
    header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .sub-menu-wrapper {
        display: block;
        width: auto !important;
        height: auto;
        position: static;
        background: none;
        border: none;
        visibility: visible;
        z-index: auto;
    }
    header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .sub-menu-wrapper .sub-menu-scroller {
        width: 100% !important;
    }
    header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children .sub-menu-wrapper .sub-menu-scroller ul.sub-menu li.menu-item {
        display: block;
        float: none;
    }
    header.site-header .site-navigation .primary-navigation ul.nav li.menu-item-has-children ul.sub-menu li.menu-item ul.sub-menu li.menu-item a {
        /* padding-left: 2rem; */
        margin-left: 2rem;
    }
    header.site-header .site-navigation .primary-navigation ul.nav.primary-nav li.menu-item-has-children.two-col>.sub-menu-wrapper>.sub-menu-scroller>ul.sub-menu {
        /* float: left;
        width: 50%; */
        /* justify-self: stretch;
        align-self: center; */
        -moz-columns: 2;
        -ms-columns: 2;
        -o-columns: 2;
        -webkit-columns: 2;
        columns: 2;
    }
    header.site-header .site-navigation .secondary-menu {
        width: 100%;
        /* position: fixed;
        left: 100%;
        bottom: 0;
        -moz-transition: left ease-in-out 0.3s;
        -ms-transition: left ease-in-out 0.3s;
        -o-transition: left ease-in-out 0.3s;
        -webkit-transition: left ease-in-out 0.3s;
        transition: left ease-in-out 0.3s; */
    }
    header.site-header .site-navigation .secondary-menu>nav {
        /* width: 96%;
        max-width: 1142px;
        margin: 0 auto; */
    }
    header.site-header .site-navigation.open .secondary-menu {
        /* left: 0; */
    }
    header.site-header .site-navigation.open .secondary-menu ul.secondary-nav li a {
        font-weight: 600;
        font-size: 1rem;
    }
}