/* ************************************* */
/*                                       */
/* Mobile Navigation                     */
/*                                       */
/* ************************************* */

body.freeze {
  overflow:hidden;
}

/* ******************************************************* */
/* Variables: LMd theme -> Fonts and typography            */
/* ******************************************************* */

:root,
[data-theme="default"] {
    --font-hamburger: 'Fira Sans',Helvetica,Arial,sans-serif;
    --font-hamburger-weight: 400;
    --font-hamburger-size: 20px;
    --font-hamburger-transform: uppercase;
}


/* ************************************* */
/* Elements                              */
/* ************************************* */

.hamburger__input {
  display:none;
}

/* Not used in the LMd context - only needed to set a height */
.hamburger-text {
  cursor: pointer;
  padding-top:var(--padding-primary-vertical-px);
  padding-bottom:var(--padding-primary-vertical-px);
  display:block;
  font-family: var(--font-hamburger);
  font-size: var(--font-hamburger-size);
  font-weight: var(--font-hamburger-weight);
  text-transform: var(--font-hamburger-transform);
  user-select: none;
  min-height: 60px;
  pointer-events: none; /* click through */
}

@media only screen and (min-width: 768px) {

  .hamburger-text {
    display:none;
  }

}

.hamburger__label {
  position: absolute;
  top: 50%;
  right: 0;
  padding: 26px 11px;
  z-index: 11;
  cursor: pointer;
  user-select: none;
  transform: translateY(-50%);
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(240,240,237,1) 10%);
}

@media only screen and (min-width: 768px) {

  .hamburger__label {
    display:none;
  }

}


/* ************************************* */
/* Hamburger Styling                     */
/* ************************************* */

.hamburger__label span {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: black;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}

.hamburger__label span:before {
  top: -10px;
  visibility: visible;
}

.hamburger__label span:after {
  top: 10px;
}

.hamburger__label span:before, 
.hamburger__label span:after {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: black;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}

.hamburger__label:hover span, 
.hamburger__label:hover span:before, 
.hamburger__label:hover span:after {
  background: #333332;
}

/* ************************************* */
/* Hamburger Events                      */
/* ************************************* */

input[type=checkbox]:checked ~ .nav-main__list {
  visibility: visible;
  opacity:1;
  height:auto;
  transition: height 0ms 0ms, opacity 0.5s 0ms, visibility 0.5s 0ms; /* fade in: first 100% height, then opacity */
}

input[type=checkbox]:checked ~ .hamburger__label:hover span, 
input[type=checkbox]:checked ~ .hamburger__label span {
  background: transparent;
}

input[type=checkbox]:checked ~ .hamburger__label span:before {
  transform: rotate(45deg) translate(7px, 7px);
  opacity: 1;
}

input[type=checkbox]:checked ~ .hamburger__label span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* ************************************* */
/*                                       */
/* Main navigation                       */
/*                                       */
/* ************************************* */

@media only screen and (max-width: 767px) {

  .nav-main__list {
    position:fixed;
    left:0;
    top:60px;
    height:100vw;
    width:100vw;
    bottom:0;
    font-family: var(--font-nav);
    font-size: var(--font-nav-size);
    font-weight: var(--font-nav-weight);
    text-transform: var(--font-nav-transform);
    display: block;
    visibility: hidden;
    opacity:0;
    background:var(--color-overlay);
    color:var(--color-light);
    z-index:3;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.4);
    overflow:auto;
  }

  .nav-main__list > li {
    text-align: center;
    padding:0;
    position: relative;
    border-bottom:1px solid var(--color-accent-light);
  }

   .nav-main__list > li:not(.mobile-abonav) {
    background:var(--color-accent);
  }

  .nav-main__list > li:last-child {
    border-bottom:0;
  }

  .nav-main__list > li > a {
    display:block;
    padding: 20px;
  }

  /* ************************************* */
  /* Submenu                               */
  /* ************************************* */

  .nav-main__submenu {
    visibility:hidden;
    opacity:0;
    height:0;
    overflow:hidden;
    pointer-events: none; /* click through - extra save */
    transition: height 0ms 1s, opacity 1s 0ms, visibility 1s 0ms; /* fade out: first opacity, then 0% height */
  }

  .nav-main__submenu li{
    background:var(--color-accent-light);
  }

  .nav-main__submenu a {
    display:block;
    padding: 20px;
    text-transform: none;
    font-weight:300;
    color: var(--color-light);
  }

}

@media only screen and (max-width: 320px) {

  .logo-mobile .logo-mobile__img {
    max-width: 230px;
  }
}

/* ************************************* */
/* Submenu Toggle Styling                */
/* ************************************* */

.submenu-toggle-input {
  display:none;
}

@media only screen and (max-width: 767px) {

  .submenu-toggle-label {
    position:absolute;
    right:0;
    top:0;
    width:60px;
    bottom:0;
    cursor: pointer;
    padding:10px;
    background: var(--color-accent-dark);
    transform:rotate(0deg);
    transition: all 200ms linear;
    display:flex;
    align-items: center;
    justify-content: center;
  }

  .submenu-toggle-label i {
    transform:rotate(0deg);
    transition: all 200ms linear;
  }

  input[type=checkbox]:checked ~ .nav-main__submenu {
    visibility:visible;
    opacity:1;
    height:auto;
    overflow:hidden;
    pointer-events: auto;
    transition: height 0ms 0ms, opacity 1s 0ms, visibility 1s 0ms; /* fade in: first 100% height, then opacity */
  }

  input[type=checkbox]:checked ~ .submenu-toggle-label {
      height:59px;
      background: var(--color-accent-light);
  }

  input[type=checkbox]:checked ~ .submenu-toggle-label i {
      transform:rotate(180deg);
      transition: all 0.3s linear;
  }

}