/* ОБГОРТКА МЕНЮ */
.wfh-el-menu-wrapper {
    position: relative;
    /* Змінна для відступу випадаючого списку (Dropdown Offset) */
    --current-drop-off: var(--menu-drop-off, 15px);
}

/* ГОЛОВНИЙ РІВЕНЬ МЕНЮ */
ul.wfh-nav-menu {
    display: flex; flex-wrap: wrap; align-items: center;
    list-style: none; margin: 0; padding: 0;
    justify-content: var(--menu-align, flex-start);
    gap: var(--menu-gap, 20px);
}

ul.wfh-nav-menu li { position: relative; }

ul.wfh-nav-menu a {
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; font-family: var(--menu-ff);
    font-weight: var(--menu-fw, 400); text-transform: var(--menu-tt, none);
    font-size: var(--menu-fs, 16px); color: var(--menu-tc, #333);
    transition: all 0.3s ease;
}

ul.wfh-nav-menu a:hover { color: var(--menu-tc-h, #2271b1); }

/* Стиль тексту для активного пункту (поточна сторінка або батьківська) */
ul.wfh-nav-menu > li.current-menu-item > a,
ul.wfh-nav-menu > li.current-menu-ancestor > a {
    color: var(--menu-tc-act, var(--menu-tc-h, #2271b1));
}

/* Фарбуємо іконку для активного пункту (в звичайному стані та при наведенні) */
ul.wfh-nav-menu > li.current-menu-item > a .wfh-menu-item-svg,
ul.wfh-nav-menu > li.current-menu-ancestor > a .wfh-menu-item-svg,
ul.wfh-nav-menu > li.current-menu-item:hover > a .wfh-menu-item-svg,
ul.wfh-nav-menu > li.current-menu-ancestor:hover > a .wfh-menu-item-svg {
    background-color: var(--menu-ic-c-act, #2271b1);
}

/* ІКОНКИ В МЕНЮ */
.wfh-menu-item-img { width: var(--menu-is, 16px); height: auto; flex-shrink: 0; }
.wfh-menu-item-svg {
    display: inline-block; width: var(--menu-is, 16px); height: var(--menu-is, 16px);
    background-color: var(--menu-ic-c, currentColor);
    -webkit-mask-image: var(--wfh-ic-url); mask-image: var(--wfh-ic-url);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    flex-shrink: 0; transition: background-color 0.3s ease;
}
ul.wfh-nav-menu li:hover > a .wfh-menu-item-svg { background-color: var(--menu-ic-c-h, var(--menu-ic-c)); }

/* =========================================
   СТРІЛОЧКА ДЛЯ ПІДМЕНЮ (ARROW)
========================================= */
ul.wfh-nav-menu .menu-item-has-children > a::after {
    content: ''; display: block; width: 6px; height: 6px;
    border-right: 2px solid var(--menu-arrow-c, currentColor);
    border-bottom: 2px solid var(--menu-arrow-c, currentColor);
    transform: rotate(45deg); margin-top: -2px; margin-left: 4px;
    transition: transform 0.3s ease;
}
ul.wfh-nav-menu .menu-item-has-children:hover > a::after {
    transform: rotate(-135deg); margin-top: 3px;
}

/* =========================================
   ВИПАДАЮЧІ СПИСКИ (DROPDOWNS)
========================================= */
ul.wfh-nav-menu ul.sub-menu {
    position: absolute; 
    /* Відступаємо від низу пункту меню на задану кількість пікселів */
    top: calc(100% + var(--current-drop-off)); 
    left: 0; min-width: 220px;
    background: var(--menu-drop-bg, #ffffff);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); border-radius: 4px;
    padding: 10px 0; margin: 0; list-style: none;
    opacity: 0; visibility: hidden; 
    /* Додаємо невеликий ефект появи знизу вверх */
    transform: translateY(15px);
    transition: all 0.3s ease; z-index: 1000;
}

/* НЕВИДИМИЙ МІСТОК (INVISIBLE BRIDGE) 
   Заповнює простір між пунктом меню та випадаючим списком, щоб мишка "не падала" */
ul.wfh-nav-menu ul.sub-menu::before {
    content: '';
    position: absolute;
    top: calc(var(--current-drop-off) * -1);
    left: 0;
    right: 0;
    height: var(--current-drop-off);
    background: transparent;
}

/* Багаторівневі випадаючі списки (3-й рівень) */
ul.wfh-nav-menu ul.sub-menu ul.sub-menu { 
    top: -10px; /* Піднімаємо на 10px, щоб компенсувати верхній відступ батьківського блоку */
    left: 100%; 
    transform: translateX(var(--menu-drop-x, 1px)) !important; 
}
/* Місток для горизонтального відступу 3-го рівня */
ul.wfh-nav-menu ul.sub-menu ul.sub-menu::before {
    top: 0;
    left: -10px; 
    width: 10px;
    height: 100%;
}

ul.wfh-nav-menu li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translate(0, 0); }

ul.wfh-nav-menu ul.sub-menu > li > a {
    padding: 8px 20px; display: flex;
    font-size: calc(var(--menu-fs, 16px) * 0.9);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Колір при наведенні у підменю */
ul.wfh-nav-menu ul.sub-menu > li > a:hover {
    background-color: var(--menu-drop-hov-bg, transparent);
    color: var(--menu-tc-h, #2271b1);
}

/* ПІДСВІЧУВАННЯ АКТИВНОГО ПУНКТУ В ПІДМЕНЮ */
ul.wfh-nav-menu ul.sub-menu > li.current-menu-item > a,
ul.wfh-nav-menu ul.sub-menu > li.current-menu-ancestor > a {
    background-color: var(--menu-drop-hov-bg, transparent);
    color: var(--menu-tc-act, #2271b1);
    font-weight: 600; /* Робимо текст трохи жирнішим для акценту */
}

/* =========================================
   ДОДАТКОВІ СТИЛІ: UNDERLINE
========================================= */
.wfh-menu-style-underline ul.wfh-nav-menu > li > a { position: relative; padding-bottom: 5px; }
.wfh-menu-style-underline ul.wfh-nav-menu > li > a::before { content: ''; position: absolute; bottom: 0; height: 2px; background-color: var(--menu-line-c-h, #135e96); }

/* Анімація LTR */
.wfh-anim-ltr ul.wfh-nav-menu > li > a::before { left: 0; width: 0; transition: width 0.3s ease; background-color: var(--menu-line-c, transparent); }
.wfh-anim-ltr ul.wfh-nav-menu > li:hover > a::before { width: 100%; background-color: var(--menu-line-c-h); }

/* Анімація RTL */
.wfh-anim-rtl ul.wfh-nav-menu > li > a::before { right: 0; width: 0; transition: width 0.3s ease; background-color: var(--menu-line-c, transparent); }
.wfh-anim-rtl ul.wfh-nav-menu > li:hover > a::before { width: 100%; background-color: var(--menu-line-c-h); }

/* Анімація Fade */
.wfh-anim-fade ul.wfh-nav-menu > li > a::before { left: 0; width: 100%; opacity: 0; transition: opacity 0.3s ease; background-color: var(--menu-line-c, transparent); }
.wfh-anim-fade ul.wfh-nav-menu > li:hover > a::before { opacity: 1; background-color: var(--menu-line-c-h); }

/* =========================================
   ДОДАТКОВІ СТИЛІ: BACKGROUND (ТІЛЬКИ HOVER І ACTIVE)
========================================= */
.wfh-menu-style-background ul.wfh-nav-menu > li > a {
    background-color: transparent; 
    padding: 8px 16px;
    border-radius: var(--menu-bg-rad, 0px);
}
.wfh-menu-style-background ul.wfh-nav-menu > li.current-menu-item > a,
.wfh-menu-style-background ul.wfh-nav-menu > li.current-menu-ancestor > a {
    background-color: var(--menu-bg-c-act, transparent);
}
.wfh-menu-style-background ul.wfh-nav-menu > li:hover > a {
    background-color: var(--menu-bg-c-h, #e0e0e0);
}