/**
 * @file
 * The header components.
 *
 * It includes styles for the header itself and their
 * component as the logotype or the main menu.
 */

/**
 * Global header rules
 */
.site-header{
  position: relative;
}
.site-logo{
  display: none;
}
.site-heading{
  width:100%;
}
.site-heading, .site-heading__navigation, .site-heading__information, .site-heading__menu, .site-heading__breadcrumbs{
  display: block;
  width:100%;
}
@media screen and (min-width: 600px){
  .site-logo{
    display: block;
    width:120px;
    position: absolute;
    left:-1px;
    top: -15px;
    z-index:5;
  }
}
@media screen and (min-width: 850px){
  .site-logo{
    width:190px;
    top: 0px;
  }
}



/**
 * Site Name and Search
 */
.site-heading__information{
  margin:2rem 0;
  position: relative;
  text-align: center;
}
.site-heading__title{
  font-weight: 400;
  font-family: Georgia, serif;
}
.site-heading__title span{
  color:#167394;
  position: relative;
  z-index:1;
  font-size:2.25rem;
  font-weight: 400;
}
.site-heading__title span:after{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  background-size: cover;
  background-position: center;
  background-image: url('../images/icon-abeille.svg');
  background-repeat: no-repeat;
  position: absolute;
  top: 0em;
  right: -0.5em;
  z-index:-1;
}
.site-heading__search{
  margin:1rem auto;
  display: block;
  max-width:310px;
}
@media screen and (min-width: 980px){
  .site-heading__search{
    margin:0;
    position: absolute;
    right: 0;
    top:50%;
    transform:translateY(-50%);
  }
}






/**
 * Site Main Nav
 */
.site-heading__menu{
  text-align: center;
}
.site-heading__menu .region-primary-menu{
  display: none;
  max-height:300px;
  overflow-y:scroll;
}
.site-heading__menu .region-primary-menu.is-active{
  display: block;
}
.site-heading__menu .menu--level-0{
  margin:0;
}
.site-heading__menu .menu__item--level-0{
  position: relative;
  display: block;
  text-align: center;
}
.site-heading__menu .menu__item--level-0 > a, .site-heading__menu .menu__item--level-0 > span{
  color:#555555;
  display: block;
  font-size:0.9em;
  padding:0.35rem 0.35rem;
}
.site-heading__menu .menu__item--level-0.menu__item--active-trail > a, .site-heading__menu .menu__item--level-0.menu__item--active-trail > span{
  color:#167394;
}
.site-heading__menu .menu--level-1{
  margin:0;
  background-color:#167394;
  display: none;
}
.site-heading__menu .submenu-active{
  display: block;
}
.site-heading__menu .menu__item--level-1{
  text-align: center;
}
.site-heading__menu .menu__item--level-1 a{
  color:#ffffff;
  border-bottom:1px solid #ffffff;
  padding:0.25em 1em;
  display: block;
  font-size:0.9em;
}
.site-heading__menu .menu__item--level-1:last-child a{
  border:none;
}
.site-heading__menu .menu__item--level-1.menu__item--active-trail > a{
  color:#fdc533;
}



@media screen and (min-width: 700px){
  .site-heading__menu .region-primary-menu{
    display: block;
    max-height:inherit;
    overflow-y:visible;
  }
  .site-heading__menu .menu--level-0{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .site-heading__menu .submenu-active{
    display: none;
  }
  .site-heading__menu .menu__item--level-0{
    text-align: left;
  }
  .site-heading__menu .menu--level-1{
    position: absolute;
    left: 0;
    top:100%;
    z-index:6;
    width:195px;
  }
  .site-heading__menu .menu__item--level-0:hover .menu--level-1{
    display: block;
  }
  .site-heading__menu .menu__item--level-1{
    text-align: left;
  }
  .site-heading__menu .menu__item--level-1 a{
    font-size:1em;
    padding:0.75em 1em;
  }
}
@media screen and (min-width: 850px){
  .site-heading__navigation{
    padding-left:190px;
  }
}
@media screen and (min-width: 980px){
  .site-heading__menu .menu__item--level-0 > a, .site-heading__menu .menu__item--level-0 > span{
    font-size:1em;
    padding:0.35rem 0.5rem;
  }
}
@media screen and (min-width: 1200px){
  .site-heading__menu .menu__item--level-0 > a, .site-heading__menu .menu__item--level-0 > span{
    font-size:1.125em;
    padding:0.35rem 1rem;
  }
}


/**
 * Site Main Nav RESPONSIVE
 */
.menu-toggle{
  line-height:0;
  margin:1em;
  display: inline-block;
}
.menu-toggle__button{
  height:25px;
  width:30px;
    padding: 0;
    line-height:0;
    text-indent: -999em;
    background-color: transparent;
    border: none;
    text-align: center;
    position: relative;
}
@media screen and (min-width: 700px) {
  .menu-toggle{
    display: none;
  } 
}
/*
=== Button bar & animation ===
*/
.menu-toggle__bar{
  position: absolute;
  width:30px;
  height:2px;
  background-color:#167394;
  top: 50%;
  display: block;
  -webkit-transition: all ease .25s;
  -o-transition: all ease .25s;
  transition: all ease .25s;
}
.menu-toggle__bar:first-child {
  top: 0%;
}
.menu-toggle__bar:last-child {
  top: 100%;
}
.is-active .menu-toggle__bar {
  opacity: 0; /* The central bar is not visible if button is active */
}
.is-active .menu-toggle__bar:first-child,
.is-active .menu-toggle__bar:last-child {
  /* If the button is active, the burger icon is turning into a cross icon */
  top: 45%;
  opacity: 1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.is-active .menu-toggle__bar:last-child {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}






/**
 * Site Breadcrumbs
 */
.breadcrumb{
  padding:0 0 0 0.35rem;
  position: relative;
}
.breadcrumb:before, .breadcrumb:after{
  content:'';
  display: block;
  width:100%;
  left:0;
  height:1px;
}
.breadcrumb:before{
  top:0;
  background-color:#92becd;
}
.breadcrumb:after{
  bottom:0;
  background-color:#c0c0c0;
}
.breadcrumb ol{
  padding:0.35rem 0.25rem;
  position: relative;
}
.breadcrumb ol:after{
  content:'';
  display: block;
  width:70px;
  height:45px;
  background-size:cover;
  background-position: center;
  background-image:url('../images/icon-papillon.svg');
  background-repeat: no-repeat;
  position: absolute;
  right:1rem;
  bottom:-0.75rem;
}
.breadcrumb li{
  font-size: 0.9em;
}
.breadcrumb li:before{
  content:'>';
  padding:0 0.25rem;
}
.breadcrumb li:before, .breadcrumb a{
  color:#c0c0c0;
}
.breadcrumb a:hover{
  text-decoration: underline;
}



@media screen and (min-width: 980px){
  .breadcrumb{
    padding:0 0 0 0.5rem;
  }
  .breadcrumb li{
    font-size: 1em;
  }
}
@media screen and (min-width: 1200px){
  .breadcrumb{
    padding:0 0 0 1rem;
  }
  .breadcrumb li{
    font-size: 1.125em;
  }
}