/*Mobile FIRST door GN Nieuw gemaakt op Niftrik.nl, werkt volledig naar wens sinds 18-02-2023
Dank aan Kevin Powell & Follow Andrew 
Nu geimplementeerd in bazeja.music start 24 maart 2023*/
:root{
--clr-navtext-main:hsl(0, 0%, 60%);
--clr-navtext-hover:red;
--clr-navbgr-main: hsl(0, 0%, 21%);
--clr-navbgr-hover:hsl(0, 0%, 77%);
--clr-navbgr-2tier: hsl(0, 0%, 87%);
--clr-navbgr-3tier:hsl(0, 0%, 47%);
--clr-navbgr-4tier:hsl(0, 0%, 37%);
--clr-hover-text:hsl(0, 0%, 21%);
--clr-bar-ham:hsl(0, 0%, 77%);
--clr-fieldset: purple;
}

nav {
  background-color: var(--clr-navbgr-main);
  position: relative;
  width: 100%;
  height: 3.125rem;
  font-weight: 600;
  z-index: 5;
}

nav a {
  display: block;
  background-color: var(--clr-navbgr-main);
  padding: 0 1.25rem;
  color: var(--clr-navtext-main);
  text-decoration: none;
}

nav .login-account {
  float: right;
  width: 50%;
}

.toggle,
[id^=drop] {
  display: none;
}

[id^=drop]:checked~ul {
  display: block;
}

#main-toggle {
  cursor: pointer;
  padding: 1.483rem 0.563rem;
  float: left;
}

/* #main-toggle:hover {
  background-color: var(--clr-navbgr-hover);
} */

nav .menu :hover {
  color: var(--clr-hover-text);
  background-color: var(--clr-navbgr-hover);
  transform: scaleX(1.1rem);
  transition: 0.5s;
}

nav ul {
  display: block;
  list-style: none;
  width: 50%;
  margin: 0;
  padding: 0;
  background-color: var(--clr-navbgr-main);
}

.toggle+a,
.menu {
  display: none;
}

.toggle {
  display: block;
  background-color: var(--clr-navbgr-main);
  padding: 0 1.25rem;
  color: var(--clr-navtext-main);
  line-height: 3.14rem;
  text-decoration: none;
  border: none;
}

nav ul a {
  display: block;
  line-height: 3.14rem;
}

nav a:hover {
  background-color: var(--clr-navbgr-hover);
  color: var(--clr-hover-text);
}

nav ul ul {
  display: none;
  position: relative;
  width: 100%;
}

nav .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/*Hamburger menu*/
.nav-icon {
  background: var(--clr-bar-ham);
  display: block;
  height: 0.16rem;
  position: relative;
  width: 1.6rem;
  transition: background .2s ease-out;
  /*effect voor bars -> kruis*/
}

.nav-icon::before {
  background: var(--clr-bar-ham);
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: 0.5rem;
}

.nav-icon::after {
  background: var(--clr-bar-ham);
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: -0.5rem;
}

/*Start kruismenu*/
.menu-btn:checked~.toggle .nav-icon {
  background: transparent;
}

.menu-btn:checked~.toggle .nav-icon:before {
  transform: rotate(-45deg);
  top: 0;
}

.menu-btn:checked~.toggle .nav-icon:after {
  transform: rotate(45deg);
  top: 0;
}
/*Einde kruismenu & Hamburger menu*/

nav ul li {
  display: block;
}

nav ul ul .toggle,
nav ul ul a {
  padding: 0 2.25rem;
}

nav ul ul ul a {
  padding: 0 5rem;
}

nav ul ul ul .toggle,
nav ul ul ul a {
  padding: 0 3.25rem;
}

/*2e Tier down*/
nav ul li ul li .toggle,
nav ul ul a {
  background-color: var(--clr-navbgr-2tier);
}

/*3e Tier down*/
nav ul ul ul a {
  background-color: var(--clr-navbgr-3tier);
}

/*4e Tier down*/
nav ul ul ul ul a {
  padding: 0 4.25rem;
  color: var(--clr-navtext-hover);
  background-color: var(--clr-navbgr-4tier);
}

li>label:after {
  content: "\25BF";
}

li>label:hover:after {
  content: "\25B5";
}

li>label:only-child:after {
  content: "";
}

.lock::after{
  content: url(//bazeja.music/images/sitebouw/lock-grijs10.png);
  position: absolute;
  top: 0.8rem;
  right: 1rem;
}

/*Media Queries 48em of groter
------------------------------------*/
@media all and (min-width: 48em) {

  #main-toggle {
    display: none;
  }

  nav .login-account {
    width: auto;
    text-align: center;
  }

  nav .toggle {
    width: 6rem;
  }

  nav .menu {
    display: flex;
    position: absolute;
  }

  nav a {
    width: 6rem;
  }

  nav ul li {
    float: left;
  }

  nav ul ul {
    display: none;
    position: absolute;
    top: 50px;
    width: 0;
  }

  nav ul ul li {
    width: 8.5rem;
    float: none;
    display: list-item;
    position: relative;
  }

  nav ul ul ul li {
    position: relative;
    top: -50px;
    left: 8.5rem;
  }

  nav ul li:hover>ul {
    display: inherit;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 1.25rem;
  }

  nav ul ul ul a {
    padding: 0 5rem;
  }

  nav ul ul ul .toggle,
  nav ul ul ul a {
    padding: 0 1.25rem;
  }

  /*2e Tier down*/
  nav ul li ul li .toggle,
  nav ul ul a {
    width: auto 1.25rem;
  }

  /*4e Tier down*/
  nav ul ul ul ul a {
    padding: 0 1.25rem;
  }

}