/* top navigation styles */
ul#menu-toppmeny {
  display: flex;
  justify-content: flex-end;
  gap: var(--wp--preset--spacing--medium);
  padding-inline: var(--wp--preset--spacing--xxx-large);
  margin: 0;
}

ul#menu-toppmeny a{
  color: var(--wp--custom--color--dark);
  font-size: 16px;
  border-bottom: 2px solid transparent;
}

ul#menu-toppmeny li {
  padding-block: var(--wp--preset--spacing--small);
}

.menu-toppmeny-container {
  background-color: var(--wp--custom--color--secondary);
}

ul#menu-toppmeny li {
  padding-block: var(--wp--preset--spacing--small);
}

/* responsive menu styles */
.close {
  display: none;
}

/* main navigation styles */
div#nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--wp--custom--color--light);
}

.menu-hovedmeny-container {
  display: flex;
  justify-content: space-between;
  padding-block: var(--wp--preset--spacing--small);
  float: right;
}

#menu-hovedmeny {
  display: flex;
  gap: 65px;
}

img.logo {
  width: 100%;
}

ul#menu-hovedmeny a{
  color: var(--wp--custom--color--dark);
  margin: 0;
}

#menu-hovedmeny.menu a{
  color: var(--wp--custom--color--dark);
  margin: 0;
}
#menu-hovedmeny li{
  padding-bottom: 0px !important;
}

.nav .button_nav {
  background-color: var(--wp--custom--color--brand);
  border: 2px solid transparent;
  color: var(--wp--custom--color--light);
  padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--medium);
  font-size: var(--wp--preset--font-size--l);
  border-radius: 24px;
  cursor: pointer;
}

.nav .button_nav:hover {
  background-color: var(--wp--custom--color--light);
  border: 2px solid var(--wp--custom--color--brand);
  color: var(--wp--custom--color--brand);
  transition-delay: 0.09s;
  
}

#navigation .nav{
  padding-inline: var(--wp--preset--spacing--xxx-large);
  padding-block: var(--wp--preset--spacing--small);
}
#navigation a{
  text-decoration: none;
}

/*drop down */
.sub-menu {
  display: none; 
  z-index: 99;
  position: relative;
}
.menu li:hover > .sub-menu {
  display: block;
  position:absolute;
}

ul.sub-menu  {
  background-color: var(--wp--custom--color--light);
  padding: 20px 20px 20px 0;
}

li.menu-item {
  font-size: 22px;
}

ul.sub-menu a  {
  font-size: 18px;
}

.sub-menu li {
  padding: 5px 10px 10px 10px;
}

ul#menu-toppmeny li a:hover, .sub-menu li a:hover  {
  border-bottom: 2px solid var(--wp--custom--color--brand);
}

.nav_button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
}

.menu-item-has-children::after {
  content: url('../images/drop-down_icon.svg');
  padding-left: 10px;
}
 
.menu-item-has-children:hover::after {
  content: url('../images/drop-down_icon-upwards.svg');
}

@media only screen and (max-width: 782px) {
  .menu-item-has-children::after {
    display: none;
  }
  img.logo-mobile {
    width: 50%;
  }
  .menu-item-has-children:hover::after {
    content: "";
  }
  .sub-menu {
    display: block; 
    z-index: 1;
  }
  .menu li:hover > .sub-menu {
    display: block;
    position:relative;
  }

  #site-header {
    overflow: hidden;
    position: relative;
  }
  
  #navigation  {
    display: none;
  }
  
  #site-header a.icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .menu-hovedmeny-container, ul#menu-toppmeny, #menu-hovedmeny, .nav {
   flex-direction: column;
  }
  #navigation {
    flex-direction: column-reverse;
  }

  #navigation .nav{
    padding-top: var(--wp--preset--spacing--small);
    padding-bottom:var(--wp--preset--spacing--medium);
  }
  
  ul.sub-menu {
    padding: 5px 10px 10px 0;
}
ul.sub-menu li {
  padding: 5px 5px;
}

.tracking--container_inner_one h2 {
  margin-bottom: 5px;
}

ul#menu-toppmeny {
  gap: 0;
}

.sub-menu {
  display: block; 
  z-index: 1;
}
.nav {
  align-items: flex-start;
}
ul#menu-hovedmeny {
  padding: 0;
  gap: 20px;
}

section.menu-hovedmeny-container, .menu-toppmeny-container {
  padding-block: 20px;
}


.close {
  display: flex;
  justify-content:space-between;
  padding: 20px;
  align-items: center;
  background-color: var(--wp--custom--color--light);
}

.close span.hamburger-icon::after{
  content: url('../images/hamburgermenu.svg')

}
.logo {
  display: none;
}

.close span.hamburger-close-icon::after {
  content: url('../images/hamburgermenu_close.svg')
}

.nav_button-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0px;
  flex-direction: column;
}

div#nav {
  align-items: flex-start;;
}



#menu-hovedmeny li a:not(:last-child) {
  padding-bottom: var(--wp--preset--spacing--small);;
  border-bottom: 2px solid var(--wp--custom--color--brand);;
  font-weight: var(--wp--custom--font--weight--bold);
}

.sub-menu {
  margin-top: 0;
}
}

.menu li:nth-child(6), .menu li:nth-child(5) {
  font-weight: var(--wp--custom--font--weight--bold);
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu li:nth-child(6)::before {
  content:url(../images/login_icon_small.svg);
}


.menu li:nth-child(5)::before {
  content:url(../images/tracking_icon_small.svg); 
}
      


header {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--wp--custom--color--light);
  z-index: 999;
  transition-duration: 0.4s;
}
.nav_button-container .menu li:focus-within > ul {
  display: block;
  position:absolute;
}
.skip-to-main-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
}
.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}