/* .primary-menu-container { */

.menu-homegrade {
  @apply mx-auto  
    bg-primary
    text-white
    relative
    w-full
    h-fit
    py-2
    px-4
    lg:pl-0
    xl:pl-24
    xl:px-8 
    2xl:px-32
     my-0;

  /* submenus */
  .sub-menu[open] {
    display: block;
  }

  .sub-menu {
    @apply bg-primary 
       p-6
       mx-auto
       lg:mx-0
       static
       bottom-0
       lg:translate-y-full
       lg:absolute;
    z-index: 999;
    display: none;

    &--closed {
      @apply hidden;
    }
    &--open {
      @apply block;
    }

    li {
      @apply py-2 lg:text-left;
    }

    > a::after {
      transform: translateY(-2px) rotate(-90deg);
      content: '';
      display: inline-block;
      height: 10px;
      width: 10px;
      margin-left: 20px;
      background-image: url('../resources/img/arrow_down_white.svg');
      background-repeat: no-repeat;
      background-size: contain;
      transition: all 0.3s ease-out;
    }
  }
  /* &__wrapper-container {
  } */

  &__navlist {
    @apply w-full
    max-w-screen-2xl mx-auto lg:flex justify-center items-center pr-0;

    /* Highlight using list element */
    li.current-page-parent > a,
    li.current_page_item > a {
      @apply font-bold;
    }

    li.menu-item {
      @apply font-medium 
        text-center
        rounded-xl;
      @apply w-fit  lg:mx-0;
      line-height: 1;

      button,
      a {
        @apply block
        px-2
        xl:px-4
        py-2;
        &:hover:not(.wpml-ls-item, .wpml-ls-item > a),
        button:focus-visible,
        a:focus-visible {
          @apply cursor-pointer rounded-md;
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
      button:focus-visible,
      a:focus-visible:not(.wpml-ls-item) {
        @apply rounded-md;
        text-decoration: none;
        outline: 1px solid rgba(255, 255, 255, 0.8);
        outline-offset: 8px;
      }

      &#menu-item-artisan-du-patrimoine {
        @apply bg-white text-sm text-neutral-900 font-bold rounded-full mr-1
        2xl:mr-8 mt-4 lg:mt-0;
        transition: all 0.3s ease-out;
        &:focus-within,
        &:hover {
          @apply text-primary translate-x-1;
        }
        a {
          @apply flex items-center justify-center !py-1;
        }
        a:before {
          @apply w-6 h-6 mr-2 bg-contain bg-center  bg-no-repeat content-[''];
          background-image: url('../resources/img/pictogrammes/Homegrade_artisans-patrimoine.svg');
        }
      }

      /* IF SUBMENU CHILD */
      .menu-item__submenu-toggle {
        @apply pr-4;
        &:after {
          content: '';
          display: inline-block;
          transition: all 0.3s ease-out;
          border-bottom: 2px solid white;
          border-right: 2px solid white;
          height: 8px;
          width: 8px;
          margin-left: 10px;
        }
      }
      .menu-item__submenu-toggle[aria-expanded='false']:after {
        transform: translateY(-30%) rotate(45deg);
      }
      .menu-item__submenu-toggle[aria-expanded='true']:after {
        /* transform: rotate(225deg); */
        transform: translateY(20%) rotate(225deg);
      }
    }
    /* .wpml-ls-legacy-list-horizontal {
      @apply p-0;
    }
    .wpml-ls {
      @apply !p-0;
    } */
  }
  /* &__burger-menu-toggle {
    @apply lg:hidden 
      absolute
      right-10
      -translate-y-1/2	
      z-50	
      top-1/2;
    width: 26px;
    height: 26px;

    .menu-toggle-bar {
      @apply top-1/2
        absolute
        block
        right-0
        w-full
        h-[2px]
        bg-white;
      margin-top: -1px;
      transition: all 0.3s ease;

      &.menu-toggle-bar--top {
        transform: translate(0, -7px);
      }
      &.menu-toggle-bar--middle {
      }
      &.menu-toggle-bar--bottom {
        transform: translate(0, 7px);
      }
      .nav-open & {
        @apply bg-secondary;

        &.menu-toggle-bar--top {
          transform: translate(0, 0) rotate(45deg);
        }
        &.menu-toggle-bar--middle {
          opacity: 0;
        }
        &.menu-toggle-bar--bottom {
          transform: translate(0, 0) rotate(-45deg);
        }
      }
    }

    &:hover {
      path {
        @apply fill-secondary;
      }
    }
  } */
  @media screen and (max-width: 960px) {
    @apply overflow-hidden;

    &[opened] {
      animation: height-in 500ms forwards ease-in, fade-in 1000ms forwards ease-in;
    }
    &[closing] {
      animation: height-out 500ms forwards ease-in, fade-out 500ms forwards ease-in;
    }
    &[closed] {
      @apply hidden;
    }
  }
  /* .wpml-ls-legacy-list-horizontal {
    @apply p-0;
  } */
  .wpml-ls {
    @apply !p-0;
  }
  /* .wpml-ls-item-nl {
    @apply xl:ml-8;
  } */

  .wpml-ls-legacy-dropdown-click {
    @apply !w-fit mt-4 lg:mt-0;
    /* margin-left: -10px !important; */

    ul {
      @apply border-none lg:!px-2;
    }
    ul.wpml-ls-sub-menu {
      @apply !pb-2 bg-primary static lg:absolute;

      @media screen and (max-width: 960px) {
        @apply !visible;
      }
    }

    a {
      @apply !bg-transparent !text-white border-none;
    }
    a:hover {
      @apply rounded-lg font-bold;
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
    a.wpml-ls-item-toggle {
      @apply lg:!px-5;
    }
    a.wpml-ls-item-toggle:after {
      @apply !content-none lg:!content-[''];
      right: 0px;
      display: inline-block;
      transition: all 0.3s ease-out;
      border: unset;
      border-bottom: 2px solid white;
      border-right: 2px solid white;
      height: 8px;
      width: 8px;
      /* margin-left: 10px;
      margin-left: 20px; */

      transform: rotate(45deg);
    }
  }

  .wpml-ls-item {
    @apply bg-transparent text-white;
  }
  /* OLD LANGUAGE SELECTOR LOOK */
  /* .wpml-ls-item {
    @apply !px-1 inline-block mb-3 lg:mb-0;

    a {
      @apply !rounded-full  h-10 w-10 border-2 border-white p-0 !flex justify-center items-center font-semibold text-sm;
      box-sizing: border-box;
      outline-offset: 5px !important;
      outline-width: 2px !important;
    }
    a:hover {
      @apply !bg-white text-primary font-bold;
    }
  } */
  /* .wpml-ls-current-language {
    a {
      @apply bg-white text-primary font-bold;
    }
    a:focus-visible {
      @apply !bg-white text-primary font-bold;
    }
  } */
}

.menu-homegrade--footer {
  @apply grid sm:grid-cols-2 md:grid-cols-4 gap-y-8 mt-8;

  li.menu-item a {
    @apply hover:text-secondary;
  }

  > li.menu-item > a,
  h6.page-group-title {
    @apply font-bold mb-2 block;
  }
  h6.page-group-title {
    cursor: not-allowed;
    /* order: 1; */
  }

  .sub-menu li {
    @apply block my-1;
  }

  .wpml-ls-menu-item {
    @apply hidden;
  }
}

.menu-homegrade--sitemap {
  @apply grid sm:grid-cols-2 md:grid-cols-4 gap-y-8 mt-8;
  a {
    @apply !text-neutral-900;
    font-weight: unset;
  }
  li:before {
    @apply hidden;
    content: none !important;
  }
  li.menu-item a {
    @apply hover:text-secondary;
    text-decoration: none;
  }

  > li.menu-item > a,
  h6.page-group-title {
    @apply font-bold mb-2 block;
  }
  h6.page-group-title {
    cursor: not-allowed;
    /* order: 1; */
  }

  .sub-menu li {
    @apply block my-1;
    a {
      @apply font-normal;
    }
  }
  li {
    padding-left: 0 !important;
  }

  .wpml-ls-menu-item {
    @apply hidden;
  }
}
