/* Remove theme SVG dropdown buttons */
nav ul li svg,
nav ul li button svg,
nav ul li .dropdown-toggle svg {
    display: none !important;
}

nav ul li button,
nav ul li .dropdown-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ===============================
   Typography (not bold)
=============================== */
nav ul li a {
    font-weight: 400 !important;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}


/* ===============================
   ADD FONT AWESOME SYMBOL
   (ALL categories & subcategories)
=============================== */

nav ul li.menu-item-has-children > a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f107"; /* fa-chevron-down */
    margin-left: 10px;
    font-size: 12px;
    color: #f97316; /* orange */
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
}


/* ===============================
   FIRST LEVEL ROTATION (180°)
=============================== */
@media (min-width: 768px) {

    nav > ul > li.menu-item-has-children:hover > a::after {
        transform: rotate(-180deg);
    }

}


/* ===============================
   SUBMENU ROTATION (90°)
=============================== */

nav ul ul li.menu-item-has-children:hover > a::after {
    transform: rotate(-90deg);
}


/* ===============================
   MOBILE OPEN STATE
=============================== */
@media (max-width: 767px) {

    nav ul li.menu-item-has-children.open > a::after,
    nav ul li.menu-item-has-children.active > a::after,
    nav ul li.menu-item-has-children.current-menu-parent > a::after {
        transform: rotate(-180deg);
    }

}


/* ===============================
   Cleaner submenu spacing
=============================== */
nav ul ul {
    margin-left: 8px !important;
    padding-left: 8px !important;
    transition: all 0.3s ease;
}

/* =================================
   REMOVE EXTRA RIGHT SPACE
================================= */

/* Remove extra width from dropdown buttons */
nav ul li.menu-item-has-children {
    position: relative;
}

/* Force link to take full width */
nav ul li.menu-item-has-children > a {
    padding-right: 0 !important;
}

/* Remove any reserved toggle space */
nav ul li.menu-item-has-children > button,
nav ul li.menu-item-has-children .dropdown-toggle {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make chevron absolute so it doesn’t push layout */
nav ul li.menu-item-has-children > a::after {
    position: relative;
}

/* =================================
   SLOWER SUBMENU TRANSITION
================================= */

/* Base submenu */
nav ul ul {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 
        opacity 0.9s ease,
        transform 0.9s ease,
        visibility 0.9s ease;
}

/* Show submenu */
nav ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Sub-sub menu smoother */
nav ul ul ul {
    transition: 
        opacity 0.9s ease,
        transform 0.9s ease;
}

nav ul li > ul {
    transition-delay: 0.9s;
}


/* =================================
   STABLE SUBMENU HOVER SYSTEM
================================= */

/* Base submenu hidden state */
nav ul ul {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0s linear 0.3s; /* delay hiding */
}

/* Show submenu */
nav ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s; /* show instantly */
}

/* Keep submenu open slightly longer */
nav ul li > ul {
    transition-delay: 0.3s; /* 0.3 second delay before closing */
}

/* =================================
   FIX SUB-SUBMENU HORIZONTAL GAP
================================= */

/* Ensure submenu positions exactly touching */
nav ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 0 !important;
}

/* Remove any transform shift */
nav ul ul {
    transform: none !important;
}

/* Make parent li relative */
nav ul li {
    position: relative;
}


/* =================================
   SMALL SAFE GAP BETWEEN LEVELS
================================= */

/* Parent li must be relative */
nav ul li {
    position: relative;
}

/* Submenu base */
nav ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

/* Create tiny visual gap */
nav ul ul {
    margin-left: 2px;   /* 1–2px visual gap */
}

/* Add invisible hover bridge */
nav ul ul::before {
    content: "";
    position: absolute;
    left: -4px;        /* overlap back toward parent */
    top: 0;
    width: 4px;        /* invisible bridge */
    height: 100%;
}

/* ================================
   SMALL VISUAL GAP (SAFE VERSION)
================================ */

/* Ensure positioning */
nav ul li {
    position: relative;
}

/* Submenu positioning */
nav ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 1px; /* 1px visible gap */
}

/* Invisible hover bridge */
nav ul ul::before {
    content: "";
    position: absolute;
    left: -6px;   /* extends toward parent */
    top: 0;
    width: 6px;   /* invisible hover zone */
    height: 100%;
}

/* Keep submenu visible when hovering bridge */
nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}

/* ================================
   REAL 2px GAP (STABLE)
================================ */

/* Ensure parent positioning */
nav ul li {
    position: relative;
}

/* Sub-submenu positioning */
nav ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 2px;   /* REAL visible 2px gap */
}

/* Invisible hover bridge to prevent closing */
nav ul ul ul::before {
    content: "";
    position: absolute;
    left: -6px;   /* extends toward parent */
    top: 0;
    width: 6px;   /* invisible hover area */
    height: 100%;
}