#header {
   background-color: var(--ua-purple-darkest);
   /* background-image:  var(--ua-grad-purple-dark-radial); */
  /*  background-image:  var(--ua-grad-purple);
   background-image:  var(--ua-grad-purple-inv); */
}

#header a {
  color: var(--white-color);
   text-decoration: none;
}


#navbar-top {
   box-shadow: var(--shadow-elevation-medium);
}

/* make logo shrink on mobile instead of nav */
.region-top-header {
    max-width: 50%;
    padding-right: 5px;
}
/*
*
* MAIN NAV:
*  now = uswds usa-header code 
*   header layout is here, but see: uswds.css for internal styling
*/


#navbar-main {
  background: var(--ua-purple);
  padding: 0;
}

#navbar-main .container {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

.navbar-brand img {
    width: 200px;
    /* padding: 0.25em 0.5em 0.5em 0.5em; */
}

/* 
*  NAV TOGGLER 
*  it's inside the #extra-nav-top block
*  show / hide main nav on mobile/desktop 
*     ul is what toggles   #ualibrariesd10-mainnavigation-menu--main-nav
*      - has "collapse" class on it so it's HIDDEN by default on mobile
       - add "display: flex" on desktop 992 so it's OPEN by default
*/
@media all and (min-width: 992px){
  #ualibrariesd10-mainnavigation-menu--main-nav.collapse {
    display: flex;
    justify-content: center;
  }

  /* slider on homepage crops the nav focus state so give the ul a lil bottom margin */
  .path-frontpage #ualibrariesd10-mainnavigation-menu--main-nav.collapse {
    margin-bottom: 0.125em;
  }
}

.btn#nav-toggle {
  /* background-color: var(--ua-gold); */
  /* box-shadow: 0 0 0 .2rem rgba(216,217,219,.5); */
  box-shadow: 0 0 0 .2rem var(--ua-gold);
 /*  border: .2rem solid var(--ua-gold); */

 background-color: var(--ua-gold);
}


.btn#nav-toggle:focus,
.btn#nav-toggle:focus-visible {
  box-shadow: 0 0 0 .2rem var(--ua-gold);
}
/* holds the navbart-top and mobile toggle */
#top-nav > div {
  display: flex;
  align-items: center;
  gap: .66em;
}

#top-nav button#search-toggle {
  height: 40px;
  width: 40px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ua-gold);
  position: relative;
  top: 1px;
}


#top-nav button .svg-inline--fa {
  height: 25px;
}

header #search-block-form {
  padding: 0em 0.5em;
}


.search-block-form .btn-primary,
.search-block-form .btn-primary.focus, 
.search-block-form .btn-primary:focus {
  background-color: var(--ua-gold);
  border-color: var(--ua-teal);
  box-shadow: none;
  color: var(--ua-purple-darkest);
  font-weight: 700;
}

.search-block-form .form-row > fieldset, 
.search-block-form .form-row > div {
  padding-left: 0;
  padding-right: 0;
}

/*
*
*. SeARCH PAGE STUFF -- here for now, but move to own file
*
*/

.search-help-link {
  display: none;
}



#navbar-top nav,
#navbar-top nav ul li  {
  display: flex;
  flex-wrap: nowrap;
}

#navbar-top .svg-inline--fa {
  height: 40px;
  width: auto;
/*   padding-right: 0.5em; */
}

#navbar-top ul svg,
#navbar-top ul svg path {
  fill: var(--white-color);
}


/* d-lg- breakpoint -- where logo and hamburger nav swap */
@media (min-width: 992px) {
  
  #navbar-top {
    padding-bottom: 0.5em;
    border-bottom: 1px dotted var(--ua-purple-highlight);
    border-bottom: 1px dotted var(--ua-gold-mid);
    box-shadow: unset;
  }

  #navbar-top a {
    color: var(--ua-gold);
    text-decoration: none;
  }

  .navbar-brand img {
    width: 325px;
    /* padding: 0.25em 0.5em 0.5em 0.5em; */
  }

  #navbar-top .svg-inline--fa {
    height: 1.5em; /* back to default */
  }

  #navbar-top ul svg,
  #navbar-top ul svg path {
    fill: var(--ua-gold);
  }

 /*  #navbar-top ul {
    display: flex; 
    gap: 0.75em; 
    margin-bottom: 0px;
  } */

  #navbar-main {
    padding: 0 1rem;
    box-shadow: var(--shadow-elevation-low);
  }

  #navbar-main > .container {
   /*  padding-inline: 0.25rem; */
  }

  .navbar-expand-lg > .container {
    /* flex-direction: column;
    align-items: flex-start; */
  }

  #block-ualibrariesd10-main-menu ul {
    justify-content: space-between;
    column-gap: var(--column-gap-sm);
  }
}