/*================================================
Site Header CSS
A slim ribbon (latest announcement and affiliation logos)
above one white row with the logo and the menu. Both stay
fixed while scrolling so the affiliation logos are always
visible.
Loaded after the theme CSS and overrides its navbar rules.
=================================================*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #ffffff;
  box-shadow: 0 1px 0 #ececf3;
}

/* Ribbon */
.site-ribbon {
  border-bottom: 1px solid #ececf3;
  font-size: 14px;
  line-height: 1.4;
}
.site-ribbon-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  min-height: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.site-ribbon-news {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  color: #6b6886;
  white-space: nowrap;
}
.site-ribbon-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-ribbon-tag {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background-color: #fdecec;
  color: #e32125;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-ribbon-news a {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  color: #e32125;
  font-weight: 600;
}
.site-ribbon-news a:hover {
  color: #2f2c52;
}
.site-affiliations {
  margin-left: auto;
}
.site-affiliations ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-affiliations img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

/* Logo and menu row */
.site-brand-logo {
  display: block;
  flex-shrink: 0;
  margin-right: 40px;
}
.site-brand-logo img {
  display: block;
  height: 84px;
  width: auto;
}
.site-header .huruma-nav .navbar {
  min-height: 108px;
}
.site-header .huruma-nav .navbar .navbar-nav > .nav-item > a {
  position: relative;
  top: 0;
  padding-top: 42px;
  padding-bottom: 42px;
  color: #2f2c52;
  font-size: 15px;
  font-weight: 600;
}
.site-header .huruma-nav .navbar .navbar-nav > .nav-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  height: 2px;
  background-color: #e32125;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.site-header .huruma-nav .navbar .navbar-nav > .nav-item:hover > a {
  color: #e32125;
}
.site-header .huruma-nav .navbar .navbar-nav > .nav-item:hover > a::after {
  transform: scaleX(1);
}
.site-header .huruma-nav .navbar .navbar-nav .nav-item .dropdown-menu {
  border-top: 2px solid #e32125;
  border-radius: 0 0 8px 8px;
}

.site-header .huruma-nav .navbar .others-options {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 32px;
}
.site-header .huruma-nav .navbar .others-options .option-item .search-btn,
.site-header .huruma-nav .navbar .others-options .option-item .close-btn {
  width: 42px;
  height: 42px;
  line-height: 40px;
  border-color: #e2e1ea;
  color: #2f2c52;
  font-size: 18px;
}
.site-header .huruma-nav .navbar .others-options .option-item .search-btn:hover,
.site-header .huruma-nav .navbar .others-options .option-item .close-btn:hover {
  border-color: #e32125;
  color: #ffffff;
}
.site-header .huruma-nav .navbar .others-options .burger-menu {
  width: 42px;
  height: 42px;
  line-height: 42px;
  margin-left: 0;
  border-radius: 50%;
  background-color: #2f2c52;
}
.site-header .huruma-nav .navbar .others-options .burger-menu:hover {
  background-color: #e32125;
}
.site-header .huruma-nav .navbar .others-options .burger-menu i {
  top: 0;
}
.site-header .huruma-nav .navbar .others-options .burger-menu i::before {
  font-size: 18px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .site-brand-logo {
    margin-right: 24px;
  }
  .site-brand-logo img {
    height: 72px;
  }
  .site-header .huruma-nav .navbar .navbar-nav .nav-item a {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 14px;
  }
  .site-header .huruma-nav .navbar .others-options {
    margin-left: 16px;
  }
  .site-affiliations img {
    height: 36px;
  }
}

/* Tablet and phone menu (meanmenu) */
@media only screen and (max-width: 991px) {
  .site-header {
    padding: 0;
  }
  .site-ribbon.is-news-only {
    display: none;
  }
  .site-ribbon-news {
    display: none;
  }
  .site-ribbon-inner {
    justify-content: center;
    min-height: 48px;
  }
  .site-affiliations {
    margin-left: 0;
  }
  .site-affiliations ul {
    justify-content: center;
  }
  /* The theme stacks .logo above the hamburger button, so it must end before it. */
  .site-header .huruma-responsive-nav .logo {
    width: auto;
    max-width: calc(100% - 60px);
    padding: 10px 0;
  }
  .site-brand-logo img {
    height: 64px;
  }
  .site-header .mean-container .mean-bar {
    padding-top: 21px;
  }
  .site-header .mean-container .mean-nav {
    margin-top: 70px;
  }
  /* meanmenu swaps the icon by jumping text-indent from -9999em to 0; the theme's
     transition on every link would animate that, so the X slides in from off-screen. */
  .site-header .mean-container a.meanmenu-reveal {
    transition: none;
  }
  .site-affiliations img {
    height: 36px;
  }
}

@media only screen and (max-width: 767px) {
  .site-ribbon.is-hidden-on-phone {
    display: none;
  }
  .site-ribbon-inner {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .site-affiliations {
    padding: 10px 0;
  }
  .site-affiliations ul {
    gap: 8px 20px;
  }
  .site-affiliations img {
    height: 30px;
  }
  .site-header .huruma-responsive-nav .logo {
    padding: 8px 0;
  }
  .site-brand-logo img {
    height: 54px;
  }
  .site-header .mean-container .mean-bar {
    padding-top: 14px;
  }
  .site-header .mean-container .mean-nav {
    margin-top: 62px;
  }
}