/*** PPPL orange: #ee7623 (r238-g118-b35)
cool grey: #4c5c65 (r76-g92-b101)
cool grey light: #c9ced1 (r201-g206-b209) ***/
:root {
  --orange: #ee7623;
  --main-color: #4c5c65;
  --main-color-light: #c9ced1;
}

.header:not(.stuck) {
  position: relative;
}

.site-branding .site-logo {
    padding-bottom: 0;
}

.site-branding .site-logo img {
    width: 200px;
}

@media (min-width: 62rem) {
    .header:not(.stuck):before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--main-color);
        width: 27vw;
        height: 100%;
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        -webkit-transform: skew(-22deg);
        transform: skew(-22deg); 
    }

    .header nav.main-menu {
        margin-top: -2rem;
    }

    .header:not(.stuck) .site-branding {
        margin-top: -1.5rem;
    }
}

@media (min-width: 1920px) {
  .header:not(.stuck):before {
     width: 40%;
  }
}

/* Menu for tablet and mobile */
@media (max-width: 61.94rem) {
    .header {
        background: var(--main-color);
    }

    .header .site-logo {
        height: 5rem;
        background: url("/sites/g/files/toruqf286/files/2023-07/pppl-simple.svg");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        width: 191px;
    }

    .header .site-logo img {
       opacity: 0;
    }

    .header:not(.stuck) .site-branding {
        margin-top: -1rem;
    }

    .princeton-branding .container {
       padding-top: 0.75rem;
    }

    .princeton-branding .alt-pu-logo {
        display: block;
        background: url("/profiles/ps/themes/ps_base/images/pu-logo-stacked-white.svg") no-repeat 0 0;
        width: 10rem;
        height: 2.5rem;
    }

    .princeton-branding .alt-pu-logo img {
        display: none;
    }

   .main-menu button.toggle-mobile-menu {
        color: #FFF;
   }

   .full-width-search-box .search-bar button.toggle-searchbar {
        top: 23px;
    }

   .full-width-search-box .search-bar button.toggle-searchbar .fa-search {
        filter: invert(1);
   }
}

/* Sticky Main Menu */
#header.stuck {
    background: var(--main-color);
}

@media (min-width: 62rem) {
    #header.stuck .main-menu ul.main > li > a {
        color: #FFF;
    }
}

#header.stuck .site-branding {
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0;
}

#header.stuck .site-logo {
    height: 5rem;
    background: url("/sites/g/files/toruqf286/files/2023-07/pppl-simple.svg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding-bottom: 0;
    width: 191px;
}

#header.stuck .site-logo img {
    opacity: 0;
}

@media (min-width: 62rem) {
    #header.stuck .main-menu .nav > li > .toggle-submenu {
        filter: invert(1);
    }

    #header.stuck nav.main-menu {
        margin-top: -3rem;
    }
}

@media (max-width: 61.94rem) {
    #header.stuck button.toggle-mobile-menu {
        top: 1rem;
    }

    #header.stuck button.toggle-searchbar {
        top: 1.4rem;
    }
}

/*Solve the menu and logo overlap at breakpoint between 992px and 1199px */
@media (min-width: 62rem) and (max-width: 74.938rem) {
    .header nav.main-menu {
        margin-top: 0;
    }

    #header.stuck nav.main-menu {
        margin-top: -.5rem;
    }

    .header:not(.stuck):before {
        height: calc(100% - 51px);
    }

    .site-branding .site-logo {
        padding-bottom: 1rem;
    }
}

/* Main Menu Dropdown */
@media (min-width: 62rem) {
    .menu4 .header ul.main > li > a {
        text-transform: uppercase;
    }

    .menu4 .main-menu .navbar-nav > .expanded:hover > .toggle-submenu:hover .toggle-submenu-icon {
        filter: saturate(0) brightness(0.2);
    }
    
    .menu4 .header .main-menu ul.main > li > .submenu a.is-active {
       border-color: #E77500;
    }
}


/* DOE logo */
a.doe {
  background: url("/sites/g/files/toruqf286/files/2025-02/All%20Blue%20-%20CMYK%20Stacked%20horizontal%20DOE%20logo.svg") no-repeat 0 0;
  text-indent: -9999px;
  width: 10rem;
  height: 2.5rem;
  display: inline-block;
  padding-top: 0;
  border: 0;
}

a.doe:hover,
a.doe:focus {
    border: 0;
}

@media (max-width: 61.94rem) {
    .header .utility-menu a.doe {
        margin-top: 1rem;
        margin-left: 1.25rem;
    }
}

body.front .header + .highlighted {
    margin-top: 0;
}

/* Main menu weight*/
.main-menu a {
   font-weight: 400;
}

@media (min-width: 62rem) {
  .menu4 .header .main-menu ul.main > li > .submenu li .submenu a {
    padding-left: 0.5rem;
  }
}