/**
 * @file
 * General navigation/search bar regions.
 */

.navbar-second {
  padding: 0;
  background-color: var(--laurier-purple);
}

.site-header__inner {
  width: 100%;
  padding: 0.5em 0;
}

.site-header__inner__container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 0 3%;
  padding: 0;
}

.header-nav {
  display: none;
}

.region--header-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  min-width: 13rem; /** Keep it from moving the rest of the header flex area when set to display none: https://git.ict.wlu.ca/library/apps/drupal/theme-public/-/issues/19 **/
}

@media (max-width: 768px) {
  .region--header-form {
    min-width: 8rem; /** Allow smaller so it can stay centered on small screens.**/
  }
}

/**
  * Desktop display.
  * This cutoff needs to match when the mobile menu hides itself, in nav-button-mobile.css, so that the mobile menu appears when the full menu disappears
  **/
@media (min-width: 85rem) {
  .site-header__inner__container {
    justify-content: space-between;
  }

  /** Only show on the largest screen AND with JS **/
  html.js .header-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}