/*
 *
 * Mobile Header
 *
 */

#mobile-header:has(#mobile-menu-toggle:not(:checked)) #mobile-menu {
  opacity: 0;
  visibility: hidden;
}

#mobile-header:has(#mobile-menu-toggle:checked) #mobile-menu {
  opacity: 100;
  visibility: visible;
}

#mobile-header .menu-item:has(input:checked) .menu-item-link-container {
  background-color: #e2e2e2;
}

#mobile-header .menu-item:has(input:checked) label {
  transform: rotate(180deg);
}

#mobile-menu .sub-menu {
  border-top: 1px solid #c1c1c1;
}

#mobile-menu .sub-menu li {
  padding-left: 20px;
}

#mobile-menu .sub-menu li a {
  font-weight: 300;
}

#mobile-menu-toggle:not(:checked)+label .menu-icon {
  opacity: 100;
}

#mobile-menu-toggle:not(:checked)+label .close-icon {
  opacity: 0;
}

#mobile-menu-toggle:checked+label .menu-icon {
  opacity: 0;
  transform: rotate(180deg);
}

#mobile-menu-toggle:checked+label .close-icon {
  opacity: 100;
  transform: rotate(180deg);
}

/*
 *
 * Desktop Header
 *
 */

#desktop-header #menu-header-menu li a {
  transition: all 0.3s;
}

#desktop-header #menu-header-menu > li:hover > a {
  color: var(--color-primary);
}

#desktop-header #menu-header-menu li:has(.sub-menu) {
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='7' viewBox='0 0 13 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.2695 0.246094C12.0586 0 11.707 0 11.4961 0.210938L6.25781 4.92188L0.984375 0.210938C0.773438 0 0.421875 0 0.210938 0.246094C0 0.457031 0 0.84375 0.246094 1.01953L5.83594 6.08203C6.04688 6.29297 6.36328 6.29297 6.57422 6.08203L12.1641 1.01953C12.4805 0.84375 12.4805 0.457031 12.2695 0.246094Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px 18px;
}

#desktop-header #menu-header-menu li .sub-menu {
  transition: all 0.3s;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  position: absolute;
  z-index: 1000;
  width: max-content;
  top: calc(100% + 20px);
  background-color: white;
  color: black;
  border-radius: 15px;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.15);
}

#desktop-header #menu-header-menu li {
  &:hover .sub-menu {
    max-height: 9999vh;
    opacity: 1;
  }
}

#desktop-header #menu-header-menu li .sub-menu li {
  transition: all 0.3s;
  padding: 10px 72px 10px 20px;
  background-color: white;

  &:hover {
    background-color: var(--color-primary);
  }
}