/* ===========================
   Nav Menu Widget
   Beautiful design with submenu animation
=========================== */

/*.ek-nav-menu-wrapper {*/
/*  @apply relative;*/

/*  !* Main Navigation - Desktop Only *!*/
/*  > .ek-nav-menu {*/
/*    @apply flex flex-wrap items-center gap-1;*/

/*    !* Menu Items *!*/
/*    > li {*/
/*      @apply relative;*/
/*        a {*/
/*        @apply relative block py-3 px-4 font-medium text-[16px] text-gray-700 transition-all duration-300;*/

/*        &:hover {*/
/*          @apply text-pink-500;*/
/*        }*/
/*      }*/

/*      !* Has submenu indicator *!*/
/*      &.menu-item-has-children {*/
/*        > a {*/
/*          @apply pr-7 text-pink-500;*/

/*          &::after {*/
/*            content: '';*/
/*            @apply absolute right-3 top-1/2 -translate-y-1/2 w-0 h-0;*/
/*            border-left: 4px solid transparent;*/
/*            border-right: 4px solid transparent;*/
/*            border-top: 5px solid currentColor;*/
/*            @apply transition-transform duration-300;*/
/*          }*/
/*        }*/

/*        &:hover > a::after {*/
/*          @apply rotate-180;*/
/*        }*/
/*      }*/

/*      !* Current menu item *!*/
/*      &.current-menu-item > a,*/
/*      &.current-menu-ancestor > a {*/
/*        @apply text-pink-500;*/
/*      }*/

/*      !* Submenu - hidden by default *!*/
/*      > .sub-menu {*/
/*        @apply absolute left-0 top-full min-w-[200px]  translate-y-2 transition-all duration-300 ease-out z-50 bg-white rounded-lg shadow-[0_4px_20px_rgba(0,0,0,0.08)] py-2;*/

/*        > li {*/
/*          @apply relative;*/

/*          > a {*/
/*            @apply block py-2.5 px-5 text-sm text-gray-700 transition-all duration-200;*/

/*            &:hover {*/
/*              @apply text-pink-500 bg-gray-50;*/
/*            }*/
/*          }*/

/*          !* Items with nested submenu - pink color with arrow *!*/
/*          &.menu-item-has-children {*/
/*            > a {*/
/*              @apply text-pink-500 pr-8;*/

/*              &::after {*/
/*                content: '';*/
/*                @apply absolute right-4 top-1/2 -translate-y-1/2 w-0 h-0;*/
/*                border-top: 4px solid transparent;*/
/*                border-bottom: 4px solid transparent;*/
/*                border-left: 5px solid currentColor;*/
/*                @apply transition-transform duration-200;*/
/*              }*/
/*            }*/

/*            !* Nested submenu - positioned to the right *!*/
/*            > .sub-menu {*/
/*              @apply left-full top-0 opacity-0 invisible translate-x-2;*/
/*            }*/

/*            &:hover > .sub-menu {*/
/*              @apply opacity-100 visible translate-x-0;*/
/*            }*/
/*          }*/

/*          &.current-menu-item > a {*/
/*            @apply text-pink-500 bg-gray-50;*/
/*          }*/
/*        }*/
/*      }*/

/*      !* Show THIS item's submenu on hover - only direct child *!*/
/*      &:hover > .sub-menu {*/
/*        @apply opacity-100 visible translate-y-0;*/
/*      }*/
/*    }*/
/*  }*/

/*  !* Alignment Classes *!*/
/*  &.ek-nav-align-left .ek-nav-menu {*/
/*    @apply justify-start;*/
/*  }*/

/*  &.ek-nav-align-center .ek-nav-menu {*/
/*    @apply justify-center;*/
/*  }*/

/*  &.ek-nav-align-right .ek-nav-menu {*/
/*    @apply justify-end;*/
/*  }*/

/*  !* Hamburger Menu Toggle *!*/
/*  .ek-nav-hamburger {*/
/*    @apply hidden items-center justify-center w-10 h-10 rounded-lg cursor-pointer transition-colors duration-200;*/
/*    @apply hover:bg-gray-100;*/

/*    i,*/
/*    svg {*/
/*      @apply text-xl text-gray-700;*/
/*    }*/
/*  }*/

/*  !* Mobile Overlay *!*/
/*  .ek-nav-overlay {*/
/*    @apply fixed inset-0 bg-black/50 opacity-0 invisible transition-opacity duration-300 z-[9998];*/
/*  }*/

/*  !* Mobile Menu Panel *!*/
/*  .ek-nav-mobile-menu {*/
/*    @apply fixed top-0 right-0 h-full w-[300px] max-w-[85vw] bg-white shadow-2xl z-[9999];*/
/*    @apply translate-x-full transition-transform duration-300 ease-out;*/

/*    .ek-nav-mobile-header {*/
/*      @apply flex items-center justify-between p-5 border-b border-gray-100;*/

/*      .ek-nav-close {*/
/*        @apply flex items-center justify-center w-9 h-9 rounded-full cursor-pointer transition-colors duration-200;*/
/*        @apply hover:bg-gray-100;*/

/*        i,*/
/*        svg {*/
/*          @apply text-lg text-gray-600;*/
/*        }*/
/*      }*/
/*    }*/

/*    .ek-nav-mobile-content {*/
/*      @apply p-4 h-[calc(100%-72px)] overflow-y-auto;*/

/*      .ek-nav-menu {*/
/*        @apply flex-col gap-0;*/

/*        > li {*/
/*          @apply border-b border-gray-100 last:border-0;*/

/*          > a {*/
/*            @apply py-4 px-3;*/

/*            &::after {*/
/*              @apply hidden;*/
/*            }*/
/*          }*/

/*          &.menu-item-has-children {*/
/*            > a::before {*/
/*              @apply right-3;*/
/*            }*/
/*          }*/

/*          > .sub-menu {*/
/*            @apply static opacity-100 visible translate-y-0 shadow-none border-0 p-0 pl-4 bg-gray-50 rounded-lg max-h-0 overflow-hidden transition-all duration-300;*/
/*          }*/

/*          &.ek-submenu-open > .sub-menu {*/
/*            @apply max-h-[500px] py-2;*/
/*          }*/

/*          &.ek-submenu-open > a::before {*/
/*            @apply rotate-180;*/
/*          }*/
/*        }*/
/*      }*/
/*    }*/
/*  }*/

/*  !* Active state for mobile menu *!*/
/*  &.ek-nav-mobile-active {*/
/*    .ek-nav-overlay {*/
/*      @apply opacity-100 visible;*/
/*    }*/

/*    .ek-nav-mobile-menu {*/
/*      @apply translate-x-0;*/
/*    }*/
/*  }*/
/*}*/

/*!* Responsive - Show hamburger on mobile *!*/
/*@media (max-width: 1024px) {*/
/*  .ek-nav-menu-wrapper {*/
/*    &.ek-nav-hamburger-enabled {*/
/*      .ek-nav-hamburger {*/
/*        @apply flex;*/
/*      }*/

/*      > .ek-nav-menu {*/
/*        @apply hidden;*/
/*      }*/
/*    }*/
/*  }*/
/*}*/

/*!* Animation keyframes for submenu items stagger *!*/
/*@keyframes ekNavSubmenuItemSlide {*/
/*  from {*/
/*    opacity: 0;*/
/*    transform: translateX(-10px);*/
/*  }*/
/*  to {*/
/*    opacity: 1;*/
/*    transform: translateX(0);*/
/*  }*/
/*}*/

/*.ek-nav-menu-wrapper .ek-nav-menu > li:hover > .sub-menu > li {*/
/*  animation: ekNavSubmenuItemSlide 0.3s ease-out forwards;*/
/*}*/

/*.ek-nav-menu-wrapper .ek-nav-menu > li:hover > .sub-menu > li:nth-child(1) {*/
/*  animation-delay: 0.03s;*/
/*}*/
/*.ek-nav-menu-wrapper .ek-nav-menu > li:hover > .sub-menu > li:nth-child(2) {*/
/*  animation-delay: 0.06s;*/
/*}*/
/*.ek-nav-menu-wrapper .ek-nav-menu > li:hover > .sub-menu > li:nth-child(3) {*/
/*  animation-delay: 0.09s;*/
/*}*/
/*.ek-nav-menu-wrapper .ek-nav-menu > li:hover > .sub-menu > li:nth-child(4) {*/
/*  animation-delay: 0.12s;*/
/*}*/
/*.ek-nav-menu-wrapper .ek-nav-menu > li:hover > .sub-menu > li:nth-child(5) {*/
/*  animation-delay: 0.15s;*/
/*}*/
/*.ek-nav-menu-wrapper .ek-nav-menu > li:hover > .sub-menu > li:nth-child(6) {*/
/*  animation-delay: 0.18s;*/
/*}*/
/*.ek-nav-menu-wrapper .ek-nav-menu > li:hover > .sub-menu > li:nth-child(7) {*/
/*  animation-delay: 0.21s;*/
/*}*/
/*.ek-nav-menu-wrapper .ek-nav-menu > li:hover > .sub-menu > li:nth-child(8) {*/
/*  animation-delay: 0.24s;*/
/*}*/

.ek-nav-menu-wrapper {
    @apply relative;
    .ek-nav-menu-main {
        @apply flex  gap-[30px] flex-wrap;

        li {
            @apply relative;
            a {
                @apply relative flex items-center gap-[5px] font-semibold text-[16px] transition-all duration-300 hover:text-ekl-brand;
            }

            &.menu-item-has-children {
                > a {
                    i {
                        @apply transition-all duration-300;
                    }
                }
                &:hover {
                    > a {
                        i {
                            @apply rotate-180;
                        }
                    }

                    > .sub-menu {
                        @apply opacity-100 visible translate-y-0;
                    }
                }
            }

            .sub-menu {
                @apply absolute left-0 top-full min-w-[160px] opacity-0 invisible transition-all duration-300 ease-out z-50 bg-white shadow-[0_4px_20px_rgba(0,0,0,0.08)] py-2 translate-y-3;
                > li {
                    @apply relative;
                    a {
                        @apply justify-between;
                    }
                    > a {
                        @apply py-2.5 px-[20px] text-[15px] text-gray-700 transition-all duration-200 hover:text-ekl-brand hover:pl-[25px];
                    }

                    &.menu-item-has-children {
                        > a {
                            i {
                                @apply -rotate-90;
                            }
                        }
                    }

                    .sub-menu {
                        @apply left-full top-0  transition-all duration-300;
                    }
                    &.current-menu-item,
                    &.current-menu-ancestor {
                        > a {
                            @apply text-ekl-brand;
                        }
                    }
                }
            }
            &.current-menu-item,
            &.current-menu-ancestor {
                > a {
                    @apply text-ekl-brand;
                }
            }
        }
    }
    .ek-nav-hamburger-wrapper{
        @apply  max-[1024px]:block hidden;
    }

    .ek-nav-hamburger {
        @apply w-fit relative items-center text-ekl-brand justify-center  rounded-[3px] cursor-pointer border border-ekl-brand transition-colors duration-200  hover:bg-ekl-secondary hover:border-ekl-secondary hover:text-white active:bg-ekl-secondary active:border-ekl-secondary active:text-white focus:bg-ekl-secondary focus:border-ekl-secondary focus:text-white;

        svg {
            @apply w-[1em] h-[1em] fill-current;
        }

        .ek-close-icon {
            @apply hidden;
        }
    }
    .dropdown-btn {
        @apply hidden;
    }
}

@media (max-width: 1024px) {
    .ek-nav-menu-wrapper {
        &.ek-nav-hamburger-enabled {
            .ek-nav-menu-main {
                @apply block max-h-0 overflow-hidden bg-[#54595f] w-full opacity-0 transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)];

                li {
                    a {
                        @apply block py-[10px] px-[15px] text-white hover:bg-ekl-brand hover:text-white;
                        i {
                            @apply hidden;
                        }
                    }

                    &.current-menu-item,
                    &.current-menu-ancestor {
                        > a {
                            @apply bg-ekl-brand text-white;
                        }
                    }
                }
                .sub-menu {
                    /* Use max-height for smooth height animation */
                    @apply max-h-0 opacity-0 translate-y-0 sticky shadow-none p-0 bg-white overflow-hidden pl-[10px];
                    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease-in-out;

                    li {
                        a {
                            @apply text-black px-[15px] hover:pl-[15px] hover:bg-transparent;
                        }

                        &.current-menu-item,
                        &.current-menu-ancestor {
                            > a {
                                @apply bg-transparent text-ekl-brand;
                            }
                        }

                        .dropdown-btn {
                            @apply bg-ekl-brand;
                            .plus-line {
                                @apply bg-white after:bg-white;
                            }
                        }
                    }

                    &.ek-submenu-open {
                        @apply max-h-[1000px] visible opacity-100 ;
                        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.3s ease-in-out;
                    }
                }

                .dropdown-btn {
                    @apply block absolute text-center right-[20px] top-1.5 w-[32px] h-[32px] text-[16px] leading-[32px] text-ekl-brand-two bg-white cursor-pointer rounded-[2px] transition-all duration-500 ease-in-out z-[5];

                    .plus-line {
                        @apply absolute  left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] w-[12px] h-[2px] bg-ekl-brand-two transition-all duration-500 ease-in-out after:content-[""] after:absolute after:left-[50%] after:top-[50%] after:w-[2px] after:h-[12px] after:bg-ekl-brand-two after:rounded-[10px]  after:-translate-x-[50%] after:-translate-y-[50%] after:transition-all after:duration-500 after:ease-in-out;
                    }
                    &.active {
                        .plus-line {
                            @apply after:hidden;
                        }
                    }
                }
            }
            /* Active state - animate height open */
            &.ek-nav-mobile-active {
                .ek-nav-menu-main {
                    @apply max-h-[calc(100vh-60px)] opacity-100 overflow-y-scroll;

                    .sub-menu {
                        @apply opacity-100 visible;
                    }
                }

                .ek-humburger-icon {
                    @apply hidden;
                }

                .ek-close-icon {
                    @apply block;
                }
            }
        }
    }
}

.ek-editor-placeholder{
    .ek-editor-placeholder-title{
        @apply text-[18px] mb-[7px];
    }

    .ek-editor-placeholder-content{
        @apply text-[12px]
    }
}