/**
 * @file
 * This file is used to style the main menu.
 */

/** Contenedor del menú */
.content-menu{
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in;
}
.region-primary-menu.is-open .content-menu {
  overflow-y: auto;
  /**
   * An exact max-height value must be set to make possible to animate the menu display.
   * It my not be much larger than the content because that would break the animation.
   * See: https://css-tricks.com/using-css-transitions-auto-dimensions/
   */
  max-height: 18.75rem;
}

/**  Menú principal */
.menu-main {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: var(--brand-color-blue);
  font-family: poppins, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
}
.menu-main__item {
  text-align: left;
  padding: 16px 0 16px 16px;
  border-bottom: solid 1px var(--brand-color-blue-light)
}
.menu-main__link {
  display: inline-block;
  /* Margin required for focus outlines. */
  padding-bottom: 0.15em;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
}

.menu-main__link:active,
.menu-main__link.is-active {
  text-decoration: none;
  font-weight: 600;
}

/** Hamburger */
.hamburger {
  min-height: 30px;
  min-width: 30px;
  position: absolute;
  top: 29px;
  right: 11px;
}

.hamburger-inner, .hamburger-inner:after, 
.hamburger-inner:before {
  background-color: var(--brand-color-orange);
  position: absolute;
  width: 20px;
  height: 3px;
  border-radius: 5px;
  content: '';
  transition-timing-function: ease;
  transition-duration: .2s;
  transition-property: opacity,-webkit-transform;
  transition-property: transform,opacity;
  transition-property: transform,opacity,-webkit-transform;
}

.hamburger-inner:before {
  top: 8px;
}

.hamburger-inner:after {
  top: 16px;
}

.region-primary-menu.is-open .hamburger .hamburger-inner {
  -webkit-transform: translate3d(0,10px,0) rotate(45deg);
  transform: translate3d(0,10px,0) rotate(45deg);
}

.region-primary-menu.is-open .hamburger .hamburger-inner:after {
  -webkit-transform: translate3d(0,-16px,0) rotate(-90deg);
  transform: translate3d(0,-16px,0) rotate(-90deg);
}

.region-primary-menu.is-open .hamburger .hamburger-inner:before {
  -webkit-transform: translate3d(0,-16px,0) rotate(90deg);
  transform: translate3d(0,-16px,0) rotate(90deg);
  opacity: 0;
}

/** Bloque idioma **/
.block-language {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.block-language .feather-globe{
  margin: 0 8px 0 16px;
}
.link-language-active{
  display: none;
}
.link-language{
  padding: 0;
  display: inline-block;
  margin: 11px 0;
}
.link-language__item{
  list-style-type: none;
  display: inline-block;
  margin-left: 20px;
}
.link-language__item .link{
  text-decoration: none;
  color: var(--brand-color-blue-dark);
}
.link-language__item .link.is-active{
  color: var(--brand-color-orange);
}


@media screen and (min-width: 73em) {
  .hamburger {
    display: none;
  }
  .content-menu{
    max-height: 18.75rem;
    display: flex;
    justify-content: space-between;
  }
  .menu-main {
    display: flex;
    overflow: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-height: none;
  }
  .menu-main__link {
    padding-bottom:2.15em;
    margin: 0;
  }

  .menu-main__link.is-active{
    border-bottom: solid 3px var(--brand-color-orange);
  }
  
  .menu-main__link:hover,
  .menu-main__link.is-active:hover,
  .menu-main__link:focus{
    font-weight: 600;
  }


  .menu-main-toggle {
    display: none;
  }
  .menu-main__item {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border-bottom: none;
  }
  .menu-main__item + .menu-main__item {
    margin-left: 2.5em; /* LTR */
  }

  .block-language{
    height: 20px;
    position: relative;
    margin-left: 24px;
  }
  .link-language-active{
    display: flex;
    align-items: center;
    color: var(--brand-color-orange);
    margin: 0;
  }
  .link-language-active .feather-globe {
    margin-right: 7px;
  }
  .link-language{
    display: none;
    position: fixed;
    background-color: #fff;
    padding: 0 20px 10px 20px;
    margin: 150px 24px 0;
    z-index: 9;
  }
  .link-language__item{
    display: block;
    text-decoration: none;
    margin-left: 0;
  }
}