/* Cabecera RFJ para OJS 3.3 con el tema Bootstrap 3. */

#headerNavigationContainer.navbar {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: #224e98;
  box-shadow: none;
}

/* Equivalente para el fragmento HTML personalizado. */
.rfj-header-branding {
  width: 100%;
  padding: 12px clamp(20px, 4vw, 72px);
  background: #224e98;
}

.rfj-header-branding__link {
  display: block;
  width: min(100%, 800px);
  margin: 0 auto;
}

.rfj-header-branding__image {
  display: block;
  width: 100%;
  height: auto;
}

#headerNavigationContainer > .container-fluid:first-child {
  width: 100%;
  padding-right: clamp(20px, 4vw, 72px);
  padding-left: clamp(20px, 4vw, 72px);
  background: #173d67;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

#headerNavigationContainer #navigationUser > li > a {
  color: #fff;
  background: transparent;
}

#headerNavigationContainer #navigationUser > li > a:hover,
#headerNavigationContainer #navigationUser > li > a:focus {
  color: #fff;
  text-decoration: underline;
  background: transparent;
}

#headerNavigationContainer > .container-fluid:nth-of-type(2) {
  width: 100%;
  padding: 0;
}

#headerNavigationContainer .navbar-header {
  position: relative;
  float: none;
  width: 100%;
  margin: 0;
}

#headerNavigationContainer .site-name {
  margin: 0;
}

/* Sobrescribe los 50 px de alto y 15 px de relleno de Bootstrap. */
#headerNavigationContainer .navbar-brand-logo {
  display: block;
  float: none;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 12px clamp(20px, 4vw, 72px);
  line-height: 0;
}

#headerNavigationContainer .navbar-brand-logo img {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  max-height: none;
  margin: 0 auto;
}

/* Barra personalizada: idioma a la izquierda del acceso. */
.rfj-header-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: 100%;
  min-height: 40px;
  padding: 0 clamp(20px, 4vw, 72px);
  color: #fff;
  background: #173d67;
}

.rfj-header-utility__language {
  min-height: 30px;
  padding: 0 26px 0 8px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background: #173d67;
  font-size: 14px;
  cursor: pointer;
}

.rfj-header-utility__language option {
  color: #173d67;
  background: #fff;
}

.rfj-header-utility__login {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.rfj-header-utility__login:hover,
.rfj-header-utility__login:focus {
  color: #fff;
  text-decoration: underline;
}

#headerNavigationContainer #nav-menu {
  clear: both;
  float: none;
  width: 100%;
  margin: 0;
  padding-right: clamp(20px, 4vw, 72px);
  padding-left: clamp(20px, 4vw, 72px);
  background: #1c4776;
  border: 0;
  border-top: 1px solid rgba(255, 255,255, 0.28);
  box-shadow: none;
}

#headerNavigationContainer #main-navigation > li > a {
  color: #fff;
  font-weight: 700;
}

#headerNavigationContainer #main-navigation > li > a:hover,
#headerNavigationContainer #main-navigation > li > a:focus,
#headerNavigationContainer #main-navigation > .open > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 767px) {
  #headerNavigationContainer .navbar-header {
    padding-bottom: 50px;
  }

  #headerNavigationContainer .navbar-brand-logo {
    padding: 10px 15px;
  }

  #headerNavigationContainer .navbar-toggle {
    position: absolute;
    right: 15px;
    bottom: 7px;
    margin: 0;
    border-color: rgba(255, 255, 255, 0.65);
  }

  #headerNavigationContainer .navbar-toggle .icon-bar {
    background-color: #fff;
  }

  #headerNavigationContainer #nav-menu {
    padding: 0 15px;
  }

  #headerNavigationContainer #main-navigation {
    margin: 0 -15px;
  }
}