/* ==========================================================================
   [ DECLASSIFIED: PX MATRIX NAV CSS MATRIX ]
   ==========================================================================
   Architecture scoped with the `pxi-` prefix to prevent bleed from bloated 
   legacy themes. We anchor the entire aesthetic to four global variables 
   for instant, system-wide theming.
   
   When you upgrade to the Core Engine, the variables synchronize automatically:
   :root {
       --pxi-nav-bg: var(--px-bg, #020617);
       --pxi-nav-text: var(--px-text, #f8fafc);
       --pxi-nav-accent: var(--px-accent, #00FF41);
       --pxi-nav-overlay: rgba(2, 6, 23, 0.98);
   }
   ========================================================================== */
:root {
    --pxi-nav-bg: #020617;
    --pxi-nav-text: #f8fafc;
    --pxi-nav-accent: #00ff41;
    --pxi-nav-overlay: rgba(2, 6, 23, 0.98);
}

.pxi-matrix-nav {
    background: var(--pxi-nav-bg) !important;
    color: var(--pxi-nav-text) !important;
    font-family: 'Inter', system-ui, sans-serif;
    position: relative;
    z-index: 99999;
    width: 100%;
}
/* =========================================
   DIVI DOM JAILBREAK (Force Parent Release)
   Adjust the selector as needed to target your
   specific page builder structure.
   The :has() pseudo-class is a game-changer here.
   ========================================= */
/* Strips stacking contexts from any Divi wrapper containing the nav */
[class*="et_pb_"]:has(.pxi-matrix-nav) {
    position: static !important;
    z-index: auto !important;
    transform: none !important;
    animation: none !important;
}
/* * =========================================
 * HOSTILE THEME OVERRIDE (Kill the dots)
 * ========================================= 
 */
.pxi-matrix-nav ul, 
.pxi-matrix-nav li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pxi-matrix-nav li::before, 
.pxi-matrix-nav li::after {
    content: none !important;
    display: none !important;
}

.pxi-nav-root {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    flex-wrap: nowrap;
    max-width: 100%; /* Forces it to respect the column bounds */
    margin: 0 !important;
    padding: 0 !important;
}

.pxi-nav-item {
    position: relative;
}

/* =========================================
   DECOUPLED LINK & TRIGGER ALIGNMENT
   ========================================= */
.pxi-nav-link-wrapper {
    display: flex;
    align-items: center;
}

.pxi-nav-link {
    display: block;
    padding: 1rem 0.5rem 1rem 1.5rem; /* Adjusted right padding */
    color: var(--pxi-nav-text) !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.pxi-dropdown-trigger {
    background: transparent;
    border: none;
    color: var(--pxi-nav-text) !important;
    cursor: pointer;
    padding: 1rem 1.5rem 1rem 0.5rem; /* Easy tap target for thumbs */
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.pxi-dropdown-trigger .pxi-chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   STATE MODIFICATIONS (HOVER & ACTIVE)
   ========================================= */
@media (min-width: 1025px) {
    /* Desktop Hover applies to both elements simultaneously */
    .pxi-nav-item:hover > .pxi-nav-link-wrapper > .pxi-nav-link,
    .pxi-nav-item:hover > .pxi-nav-link-wrapper > .pxi-dropdown-trigger {
        color: var(--pxi-nav-accent) !important;
    }
    .pxi-nav-item:hover > .pxi-nav-link-wrapper > .pxi-dropdown-trigger .pxi-chevron {
        transform: rotate(180deg);
    }
    .pxi-nav-item.pxi-has-children:hover > .pxi-standard-dropdown,
    .pxi-nav-item.pxi-mega.pxi-has-children:hover > .pxi-mega-dropdown {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

@media (max-width: 1024px) {
    /* Mobile JS Trigger States */
    .pxi-nav-item[aria-expanded="true"] > .pxi-nav-link-wrapper > .pxi-dropdown-trigger .pxi-chevron {
        transform: rotate(180deg);
    }
    .pxi-nav-item[aria-expanded="true"] > .pxi-nav-link-wrapper > .pxi-nav-link,
    .pxi-nav-item[aria-expanded="true"] > .pxi-nav-link-wrapper > .pxi-dropdown-trigger {
        color: var(--pxi-nav-accent) !important;
    }
}
/* =========================================
   CURRENT PAGE STATE (The "You Are Here" Marker)
   ========================================= */
.pxi-nav-item.pxi-current-item > .pxi-nav-link-wrapper > .pxi-nav-link,
.pxi-nav-item.pxi-current-parent > .pxi-nav-link-wrapper > .pxi-nav-link,
.pxi-nav-item.pxi-current-item > .pxi-nav-link-wrapper > .pxi-dropdown-trigger,
.pxi-nav-item.pxi-current-parent > .pxi-nav-link-wrapper > .pxi-dropdown-trigger {
    color: var(--pxi-nav-accent) !important;
}

/* Optional: Keep the chevron flipped up if the submenu parent is the active page */
.pxi-nav-item.pxi-current-parent > .pxi-nav-link-wrapper > .pxi-dropdown-trigger .pxi-chevron {
    transform: rotate(180deg);
}
/* =========================================
   STANDARD DROPDOWN
   ========================================= */
.pxi-standard-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: var(--pxi-nav-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 0.5rem 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Hardware Acceleration */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none;
    z-index: 100;
}

.pxi-standard-dropdown .pxi-nav-link-wrapper .pxi-nav-link {
    padding: 0.75rem 1.5rem;
}

/* =========================================
   MEGA MENU (CSS GRID)
   ========================================= */
.pxi-mega {
    position: static;
}

.pxi-mega-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--pxi-nav-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none;
    z-index: 100;
}

.pxi-nav-payload {
    padding: 0.5rem 1.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
}
.pxi-mega-dropdown .pxi-nav-payload { padding: 0.5rem 0; }
.pxi-promo-card {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
/* =========================================
   ENTHUSIAST CURSOR (Stay as Arrow)
   ========================================= */
.pxi-nav-link, 
.pxi-dropdown-trigger {
    cursor: pointer !important;
}

/* =========================================
   MOBILE TOGGLE - ALIGNMENT & Z-INDEX FIX
   ========================================= */
.pxi-mobile-toggle {
    display: none;
    background: transparent !important;
    border: none !important;
    color: var(--pxi-nav-text) !important;
    padding: 1rem !important;
    position: relative; 
    z-index: 2147483648 !important; 
    transition: color 0.2s ease !important;
}

/* Alignment Logic */
.pxi-matrix-nav.pxi-align-left .pxi-mobile-toggle { margin-right: auto; margin-left: 0; }
.pxi-matrix-nav.pxi-align-center .pxi-mobile-toggle { margin: 0 auto; }
.pxi-matrix-nav.pxi-align-right .pxi-mobile-toggle { margin-left: auto; margin-right: 0; }

.pxi-matrix-nav.is-mobile-open .pxi-mobile-toggle {
    position: fixed !important;
    top: 20px !important; 
    right: 45px !important; /* Anchors it cleanly over the vault, but also out of the way of the A11y panel trigger */
    background: rgba(2, 6, 23, 0.5) !important; /* Optional: Slight bg to make X pop */
    border-radius: 50% !important;
    z-index: 2147483645 !important; /* Supreme elevation */
}
.pxi-matrix-nav.is-mobile-open .pxi-icon-menu { display: none; }
.pxi-matrix-nav.is-mobile-open .pxi-icon-close { display: block !important; pointer-events: auto !important; cursor: pointer; }

@media (max-width: 1024px) {
    .pxi-mobile-toggle { display: block; }
    
    .pxi-nav-vault {
        position: fixed;
        inset: 0;
        background: var(--pxi-nav-overlay) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        overflow-y: auto;
        padding: 5rem 2rem 2rem;
        
        opacity: 0;
        visibility: hidden;
        transform: scale(0.98);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        z-index: 2147483640 !important;
    }

    .pxi-matrix-nav.is-mobile-open .pxi-nav-vault {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    .pxi-nav-root {
        flex-direction: column;
        align-items: stretch;
    }

    .pxi-standard-dropdown, .pxi-mega-dropdown {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none; 
        box-shadow: none;
        padding: 0 0 0 1.5rem !important;
        border: none;
        pointer-events: auto !important;
    }

    .pxi-mega-dropdown {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Mobile JS Trigger States */
    .pxi-nav-item[aria-expanded="true"] > ul {
        display: grid; 
    }
    .pxi-nav-item[aria-expanded="true"] > .pxi-nav-link {
        color: var(--pxi-nav-accent) !important;
    }
    .pxi-nav-item[aria-expanded="true"] > .pxi-nav-link .pxi-chevron {
        transform: rotate(180deg);
    }
}
/* =========================================
   THE HOVER BRIDGE & ASYMMETRIC DELAY
   Zero-JS solution for the diagonal hover problem.
   ========================================= */

/* 1. The Asymmetric Transition (Delayed Close) */
.pxi-standard-dropdown,
.pxi-mega-dropdown {
    /* On HOVER OUT (mouse leaves): delay the disappearance by 250ms (0.25s) 
       This gives the user a grace period to get their mouse into the menu. */
    transition: opacity 0.3s ease 0.25s, transform 0.3s ease 0.25s, visibility 0.3s ease 0.25s !important;
}

/* 2. Instant Open (Overrides the delay on entry) */
@media (min-width: 1025px) {
    .pxi-nav-item.pxi-has-children:hover > .pxi-standard-dropdown,
    .pxi-nav-item.pxi-mega.pxi-has-children:hover > .pxi-mega-dropdown {
        /* On HOVER IN: execute immediately with 0s delay */
        transition: opacity 0.3s ease 0s, transform 0.3s ease 0s, visibility 0s 0s !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto !important;
        transform: none;
    }
}

/* 3. The Invisible Hover Bridge */
/* This creates an invisible physical block between the parent and the dropdown.
   If the mouse travels through this 15px empty space, it technically never 
   leaves the dropdown, keeping the hover state perfectly alive. */
.pxi-standard-dropdown::before,
.pxi-mega-dropdown::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -15px !important; /* Adjust if your gap is larger/smaller */
    left: 0 !important;
    width: 100% !important;
    height: 15px !important;
    background: transparent !important;
}
/* =========================================
   VERTICAL MODE (The Sidebar Matrix)
   [px_matrix_nav layout="vertical"]
   ========================================= */
.pxi-layout-vertical .pxi-nav-root {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 300px !important; /* Optional: Constrain sidebar width */
}

.pxi-layout-vertical .pxi-nav-link-wrapper {
    background: transparent !important;
    border-left: 3px solid transparent !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

.pxi-layout-vertical .pxi-nav-item:hover > .pxi-nav-link-wrapper,
.pxi-layout-vertical .pxi-nav-item[aria-expanded="true"] > .pxi-nav-link-wrapper {
    border-left: 3px solid var(--pxi-nav-accent) !important;
    background: rgba(236, 72, 153, 0.05) !important; /* Subtle pink wash */
}

.pxi-layout-vertical .pxi-nav-item:hover > .pxi-nav-link-wrapper .pxi-nav-link,
.pxi-layout-vertical .pxi-nav-item:hover > .pxi-nav-link-wrapper .pxi-dropdown-trigger {
    color: var(--pxi-nav-text) !important;
}

/* Vertical Dropdown Behavior (Push Down instead of Absolute Flyout) */
@media (min-width: 1025px) {
    .pxi-layout-vertical .pxi-standard-dropdown,
    .pxi-layout-vertical .pxi-mega-dropdown {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 0 0 1.5rem !important; /* Indent nested items */
        background: transparent !important;
        display: none; /* Relies on CSS hover to display: block */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .pxi-layout-vertical .pxi-nav-item:hover > .pxi-standard-dropdown,
    .pxi-layout-vertical .pxi-nav-item:hover > .pxi-mega-dropdown {
        display: block !important;
    }
}
/* ==========================================================================
   [ END OF ARCHITECTURE ]
   The matrix is compiled. Your DOM is secure.
   — ωяαίϮЋ
   ========================================================================== */