תת תפריט עם אנימציה ואייקון אחר

				
					/* הגדרת מצביע עכבר במידה ויש פריט קישור מותאם אישית */
selector {
    cursor: pointer;
}

/* קביעת גודל הפונט בתת תפריט */
/* שליטה על גודל הפונט של תת התפריט - Desktop ו-Mobile */
.elementor-nav-menu .sub-menu .elementor-sub-item,
.elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
    font-size: 14px;
}

/* הסתרת האייקון הדיפולטיבי של אלמנטור */
.elementor-nav-menu .sub-arrow svg,
.elementor-nav-menu--dropdown .sub-arrow svg,
.elementor-nav-menu .sub-arrow i,
.elementor-nav-menu--dropdown .sub-arrow i {
    display: none !important;
}

/* איפוס מלא של האלמנט sub-arrow */
.elementor-nav-menu .sub-arrow,
.elementor-nav-menu--dropdown .sub-arrow {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    vertical-align: middle;
}

/* Desktop styles - אייקון מותאם אישית עם currentColor */
.elementor-nav-menu .sub-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: currentColor;
    transition: transform 0.3s ease-out;
    display: block;
    /* שימוש ב-CSS mask להצגת ה-SVG בצבע currentColor */
    mask-image: url('/wp-content/uploads/2025/01/down-round-open-arrow.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url('/wp-content/uploads/2025/01/down-round-open-arrow.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* אנימציה בעת hover - Desktop */
.elementor-nav-menu .menu-item-has-children:hover .sub-arrow::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* Mobile styles - אייקון מותאם אישית עם currentColor */
.elementor-nav-menu--dropdown .sub-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: currentColor;
    transition: transform 0.3s ease-out;
    display: block;
    /* שימוש ב-CSS mask להצגת ה-SVG בצבע currentColor */
    mask-image: url('/wp-content/uploads/2025/01/down-round-open-arrow.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url('/wp-content/uploads/2025/01/down-round-open-arrow.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* Mobile - אנימציה בעת פתיחה וסגירה */
.elementor-nav-menu--dropdown .menu-item-has-children > a[aria-expanded="true"] .sub-arrow::after,
.elementor-nav-menu--dropdown .menu-item-has-children.elementor-item-active .sub-arrow::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

.elementor-nav-menu--dropdown .menu-item-has-children > a[aria-expanded="false"] .sub-arrow::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* ודא שהאייקון יירש את הצבע מהקישור */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu--dropdown .elementor-item {
    color: inherit;
}

/* עבור דפדפנים שלא תומכים ב-mask - גיבוי עם filter */
@supports not (mask-image: url()) {
    .elementor-nav-menu .sub-arrow::after,
    .elementor-nav-menu--dropdown .sub-arrow::after {
        background-color: transparent;
        background-image: url('/wp-content/uploads/2025/01/down-round-open-arrow.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        /* ייקח את הצבע של הטקסט ויהפוך אותו לפילטר מתאים */
        filter: brightness(0) saturate(100%);
    }
    
    .elementor-nav-menu--dropdown .sub-arrow::after {
        background-image: url('/wp-content/uploads/2025/01/down-round-open-arrow.svg');
    }
}