.secondary-menu-container {
  @apply bg-primary  items-center px-8 py-4 
	2xl:px-32;

  a {
    @apply text-white;
  }

  .secondary-menu-nav {
    @apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;

    > ul {
      @apply flex flex-col lg:flex-row justify-between gap-4;
    }
    a {
      @apply font-normal text-lg;
    }
    li.menu-item > a:hover {
      @apply underline underline-offset-8 decoration-1;
    }
    .network-redirector {
      @apply lg:block hidden;
      a {
        @apply flex items-center gap-4;
        &:after {
          transition: all 0.3s ease-out;
          @apply w-8 h-8 bg-no-repeat bg-contain bg-center text-lg;
          filter: invert(1);
          content: '';
          background-image: url('../resources/img/carhop-fleche-lien-externe-full.svg');
          display: inline-block;
        }
        &:hover {
          &:after {
            @apply translate-x-2 rotate-45;
          }
        }
      }
    }
  }

  /* #### PARENT WITH CHILDREN */
  li.menu-item-has-children {
    @apply relative;

    .sub-menu {
      @apply hidden;
    }
    &:has(button.menu-item__submenu-toggle[aria-expanded='true']) {
      .sub-menu {
        @apply block;
      }
    }
  }

  /* #### SUBMENU */

  button.menu-item__submenu-toggle {
    @apply text-white;
    &:hover,
    &[aria-expanded='true'] {
      @apply underline underline-offset-8 decoration-1;
    }
  }
  .sub-menu {
    @apply flex flex-col border border-white bg-primary  absolute top-10 left-0 z-30;
    width: 330px;

    li {
      @apply border-b border-white;
      a {
        @apply py-6 px-4 block w-full;

        &:hover {
          backdrop-filter: brightness(0.9);
        }
      }
      &:last-child {
        @apply border-b-0;
      }
    }

    li.has-page-icon {
      .menu-item__content {
        @apply flex items-center gap-4;
      }
    }

    a.menu-item__content {
      .menu-item__title {
        @apply font-medium;
      }
      .menu-item__excerpt {
        @apply opacity-80;
      }

      &:hover {
        text-decoration: none !important;

        .menu-item__title {
          text-decoration: underline !important;
        }
      }
    }
  }
}

.secondary-menu-container {
  @apply hidden lg:block;
}

@media (max-width: 960px) {
  .secondary-menu-container {
    @apply w-fit mx-0;
  }
}