homegrade_theme_production/resources/css/layout/menu-homegrade.css

/* .primary-menu-container { */

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

  &__wrapper-container {
    @apply max-w-screen-2xl 
      w-full 
      mx-auto
      flex 
      flex-col 
      lg:flex-row 
      items-center 
      justify-around
      lg:justify-end;

    /* li.menu-item.menu-item-has-children:hover {
        @screen lg {
          .menu-item-submenu-toggle:after {
            transform: rotate(180deg);
          }
          .sub-menu {
            display: block;
          }
        }
      } */
    /* submenus */
    li .sub-menu {
      @apply bg-primary 
        p-6
        mx-auto
        lg:mx-0
        static
        lg:absolute;
      z-index: 999;
      display: none;

      &.sub-menu-open {
        display: 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;
      }
    }
  }

  &__navlist {
    @apply lg:flex pr-0;

    /* Highlight using list element */
    li.current-page-parent > a,
    li.current_page_item > a {
      @apply font-medium
       text-white
       decoration-secondary
       underline underline-offset-8;
    }

    li.menu-item {
      @apply font-medium 
        text-center
        px-4
        py-2
        rounded-xl;

      &:hover,
      a:focus {
        @apply cursor-pointer;
        background-color: rgba(255, 255, 255, 0.1);
      }
      a:focus {
        text-decoration: none;
      }

      /* IF SUBMENU CHILD */
      .menu-item-submenu-toggle {
        &:hover,
        &:focus {
          @apply text-secondary;
        }
        @apply relative pr-4;
        &:after {
          @apply absolute right-0;
          content: '▼';
          position: absolute;
          display: inline-block;
          line-height: 0.5;
          height: 10px;
          top: calc(50% - 4px);
          width: 10px;
          margin-left: 20px;
          transform-origin: center;
          background-repeat: no-repeat;
          background-size: contain;
          transition: all 0.3s ease-out;
        }
      }
      .menu-item-submenu-toggle[aria-expanded='false']:after {
        transform: rotate(0deg);
      }
      .menu-item-submenu-toggle[aria-expanded='true']:after {
        transform: rotate(180deg);
      }
    }
  }
  &__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-red-400 */
        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;
      }
    }
  }

  /*##### RESPONSIVE */

  /* @media (max-width: 960px) {
    &__wrapper-container {
      @apply mt-0
          left-0
          z-40
          absolute
          hidden;

      min-height: 100vh;
      height: fit-content;
      top: 0;
      width: 100vw;

      // Rendu conditionnel de l'élément si contenu dans une classe de parent  (nesting inversé)

      .nav-open & {
        @apply flex;
      }

      > ul {
        @apply max-w-xs
            mx-auto;
        padding-top: 5vh;
      }
      li.menu-item {
        @apply mt-0
            text-center
            text-white
            font-medium
            py-8
            text-lg
            !block
            pb-0;

        .sub-menu li {
          @apply text-sm;
        }
      }
    }

    // BURGER MENU
    body:has(.nav-open) {
      @apply max-h-screen
        overflow-hidden;
    }
  } */

  /* @media (max-width: 960px) and (hover: none) {
    li.menu-item {
      @apply mx-auto 
    }
  } */
}

.menu-homegrade--header {
}

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

  li.menu-item a {
    @apply hover:text-secondary;
  }
  > li.menu-item {
    order: 5;
  }
  > li.menu-item-has-children {
    order: 1;
  }

  > 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;
  }
}