/**
 * @file
 * Visual styles for menu.
 */

 ul.menu {

  padding: 0;
  list-style: none outside;
  text-align: left; /* LTR */
}
[dir="rtl"] ul.menu {
  margin-right: 1em;
  margin-left: 0;
  text-align: right;
}
.menu-item--expanded {
  list-style-type: circle;
  list-style-image: url(../../images/icons/menu-expanded.png);
}
.menu-item--collapsed {
  list-style-type: disc;
  list-style-image: url(../../images/icons/menu-collapsed.png); /* LTR */
}
[dir="rtl"] .menu-item--collapsed {
  list-style-image: url(../../images/icons/menu-collapsed-rtl.png);
}
.menu-item {
  margin: 0;
  padding: 0;
}
ul.menu a.is-active {
  color: var(--col-accent);
}


.menu--intern {

 li{
    width: 100%;
  }
   a{
    display:inline-block;
    box-sizing: border-box;
    width:100%;
    height:100%;
    margin: 0;
    padding: 0.8rem 3rem;
    text-decoration: none;
    color: var(--col-heading);
    font-size: 1.1rem;
    text-transform:uppercase;
    overflow:auto;
  }

   a:hover{
    color: var(--col-accent);
    background-color: transparent;
  }


  a.is-active {
    color: var(--col-header-bg);
    background-color: var(--col-heading);

  }

  .menu-item a:hover{
    background-color: var(--col-heading);
  }
}

/* ########################################
    Hamburger Menu
  ######################################### */

/*	-----------------
	responsive navbar
	----------------- */

  .region-primary-menu {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1.5rem 0;
    z-index: 9999;
  }


.menu--main {

  padding: 0.5rem 0 3rem;

  .menu{
      position: absolute;
      top: 100%;
      right: 0;
      transform-origin: top;
      transform: scale(1,0);  
      transition: transform 400ms ease-in-out;
      text-align:right;
      border-bottom: 4px solid var(--col-accent);
      background-color: var(--col-main-menu-bg);
      z-index: 9999;
      padding-right: 2rem;
    }

  .menu li{
      list-style-type: none;
      padding-top: 1rem;
      padding-left: 2rem;

  }

  .menu a{
      text-decoration: none;
      color: var(--col-header);
      font-size: 1.8rem;
      opacity: 0;
      text-transform:uppercase;
      transition: opacity 200ms ease-in-out;
      border-radius: 2px;
    }

  .menu a:hover{
    color: var(--col-accent);
    background-color: transparent;
  }

  .nav-toggle{
      display:none;
  }
  .nav-toggle:checked ~ .menu{
      transform: scale(1, 1);
  }
  .nav-toggle:checked ~ .menu a{
      opacity: 1;
      transition: opacity 250ms ease-in-out;
  }

  .hamburger{
      position: absolute;
      top: 0;
      right: 0;
      margin-right: 2em;
      height: 100%;
      display: flex;
      align-items: center;
      transition: transform 350ms ease-in-out;
  }
  .hamburger span,
  .hamburger span::before,
  .hamburger span::after{
      display:block;
      width: 2em;
      height: 3px;
      border-radius: 2px;
      background-color: var(--col-accent);
      position:relative;
      transition: transform 350ms ease-in-out, opacity 200ms linear;
  }
  .hamburger span::before,
  .hamburger span::after{
      content: '';
      position: absolute;
  }
  .hamburger span::before{
      top:7px;
  }
  .hamburger span::after{
      bottom: 7px;
  }
  .nav-toggle:checked ~ .hamburger{
    transition: transform 350ms ease-in-out;
      transform: rotate(45deg);
  }
  .nav-toggle:checked ~ .hamburger span:after{
    transition: transform 350ms ease-in-out;
      transform: rotate(90deg) translate(7px);
  }
  .nav-toggle:checked ~ .hamburger span:before{
      opacity: 0;
  }  

}


@media screen and (min-width: 1100px){
  .region-primary-menu {
    position:relative;
    padding: 0;
  }


 

.menu--main {
  padding: 0;
  display: grid;
    align-items: center;
  /*	-----------------------
    header and navbar style
    ----------------------- */

  .hamburger{
    display:none;
  }

  .menu{
      position: relative;
      top: initial;
      transform: initial;
      transform-origin: initial;
      transition: initial;
      text-align:right;
      border-top: none;
      background-color: transparent;
      margin: 0;
      border-bottom: none;
  }
  .menu ul{
      margin: 0;
      padding: 0;
      background-color: transparent;
  }
  .menu li{
      display:inline-block;
      padding: 0;
  }
  .menu a{
      position: relative;
      opacity: 1;
      transition: initial;
      font-size: 1.2rem;
      padding: 0.4rem 0.5rem 0.3rem;
  }
  .menu a:before{
    display: inline-block;
    content: '';
    width: 100%;
    height: 5px;
    background: var(--col-accent);
    position: absolute;
    bottom: -5px;
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: left;
  }
  .menu a:hover{
    color: white;
  }
  .menu a:hover:before{
      transform: scaleX(1);
  }


.menu--intern {

    a{
      padding: 1rem 3rem;
   }
}
}