/**
  * @file
  * Header bar, excluding the primary navigation which is found in components/navigation.
  */

/** Fluid UI **/
.flc-prefsEditor-separatedPanel {
  z-index: 1000;
}

@media (max-width: 39em) {
  .fl-prefsEditor-separatedPanel .fl-panelBar {
    box-shadow: 0 0.5px 0.5px 0 #6f6f6f;
    font-size: 1rem;
  }

  .fl-prefsEditor-separatedPanel .fl-panelBar .fl-prefsEditor-buttons {
    height: 20px;
  }
}

.fl-prefsEditor-buttons button:is(:hover, :focus) {
  background-color: var(--laurier-purple);
  color: var(--white);
}

/** Top navigation bar **/
.navbar-top {
  background-color: var(--white);
  color: var(--black);
}

.navbar-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  width: 100%;
}

.user-menu-search-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1023px) {
  .navbar-container,
  .user-menu-search-container {
    justify-content: center;
  }
}

@media (max-width: 50em) {
  .menu--account a {
    width: 100%;
  }
}

:is(.accessibility-guide, .menu--account a):is(:hover, :focus) {
  background-color: var(--laurier-purple);
  color: var(--white);
}

/** Hide initial header **/
.site-header__initial {
  height: 0;
  display: none;
}

/** Second row of navigation bar including main menu block **/
.navbar.navbar-expand-lg {
  background-color: var(--laurier-purple);
  color: var(--white);
  padding: 0;
}

/** Search bar **/
.header-nav-search-navbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}