/* Site styles for header and navigation bar with UAMS branding */

.site-header {
  padding: 24.144px 2rem;
  align-items: flex-start;
}

.global-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: auto;
  gap: 22.3332px;
}

.global-title .navbar-brand {
  --bs-navbar-brand-padding-y: 0;
}

.global-title .navbar-brand img {
  height: 31.8912px;
  
  /* use height 66px if you use the UAMS Health logo */
  /*height: 66px;*/
}

.global-title .navbar-subbrand .title {
  font-size: 19.13472px;
  line-height: 1.2;
  color: inherit;
  display: block;
}

.site-header nav {
  position: absolute;
  right: 1rem;
}

.site-header .navbar-toggler {
  margin-right: 1rem;
}

.site-header .nav {
  --bs-nav-link-color: var(--bs-body-color);
}

@media (min-width: 576px) {
  .global-title .navbar-brand img {
    height: 31.8912px;
  }
}

@media (min-width: 768px) {
  .global-title .navbar-brand img {
    height: 37px;
  }
  
  .site-header {
    padding: 30.18px 2rem;
  }

  .global-title .navbar-subbrand .title {
    padding: 0;
    font-size: 25.9px;
  }
}

@media (min-width: 1200px) {
  .site-header {
    align-items: center;
  }
  
  .global-title {
    flex-direction: row;
    gap: 0;
  }

  .global-title .navbar-brand {
    padding: 0 22.3332px 0 0;
    margin: 0;
    border-right: 2px solid var(--uams-primary-red);
  }

  .global-title .navbar-subbrand {
    padding: 0 0 0 22.3332px;
    margin: 0;
  }

  .global-title .navbar-subbrand .title {
    padding: 2.96px 0;
  }
}

@media (min-width: 1500px) {
  .global-title .navbar-brand img {
    height: 50px;
  }

  .global-title .navbar-subbrand .title {
    font-size: 35px;
  }
}