/* =========================================================
   THE VEIL — COMPLETE NAVIGATION THEME
   Normal = Ivory
   Hover = Deep Royal Purple
   Active = Blood Red
   Gold/Yellow removed from navigation states
   ========================================================= */


/* =========================================================
   1. NORMAL TOP-LEVEL NAVIGATION
   ========================================================= */

.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu--main .elementor-item:link,
.elementor-nav-menu--main .elementor-item:visited,
.elementor-nav-menu > li > a {
    color: #eee9e1 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    text-decoration: none !important;

    transition:
        color .22s ease,
        text-shadow .22s ease,
        background-color .22s ease,
        transform .22s ease;
}


/* =========================================================
   2. REMOVE ELEMENTOR DEFAULT POINTER / ACTIVE BOXES
   ========================================================= */

.elementor-nav-menu--main .elementor-item::before,
.elementor-nav-menu--main .elementor-item::after,
.elementor-nav-menu a::before,
.elementor-nav-menu a::after {
    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    opacity: 0 !important;
}


/* =========================================================
   3. TOP-LEVEL HOVER — DEEP VEIL PURPLE
   ========================================================= */

.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item:focus,
.elementor-nav-menu > li > a:hover {
    color: #6818b8 !important;

    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;

    text-shadow:
        0 0 4px rgba(104, 24, 184, 1),
        0 0 10px rgba(78, 12, 150, .95),
        0 0 20px rgba(50, 5, 105, .75),
        0 0 32px rgba(28, 0, 65, .55) !important;

    transform: translateY(-1px);
}


/* =========================================================
   4. ACTIVE / CURRENT PAGE — BLOOD RED
   ========================================================= */

.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .current-menu-item > .elementor-item,
.elementor-nav-menu--main .current_page_item > .elementor-item,
.elementor-nav-menu--main .current-menu-ancestor > .elementor-item,
.elementor-nav-menu--main .current_page_ancestor > .elementor-item,
.elementor-nav-menu .current-menu-item > a,
.elementor-nav-menu .current_page_item > a {
    color: #d41436 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    font-weight: 700 !important;

    text-shadow:
        0 0 4px rgba(212, 20, 54, 1),
        0 0 9px rgba(175, 0, 38, .95),
        0 0 18px rgba(110, 0, 28, .75),
        0 0 30px rgba(65, 0, 20, .50) !important;
}


/* Keep active page blood red on hover */
.elementor-nav-menu--main .elementor-item.elementor-item-active:hover,
.elementor-nav-menu--main .current-menu-item > .elementor-item:hover,
.elementor-nav-menu--main .current_page_item > .elementor-item:hover {
    color: #d41436 !important;

    text-shadow:
        0 0 5px rgba(212, 20, 54, 1),
        0 0 12px rgba(175, 0, 38, 1),
        0 0 24px rgba(110, 0, 28, .80) !important;
}


/* =========================================================
   5. REMOVE ACTIVE BACKGROUNDS FROM MENU ITEMS
   ========================================================= */

.elementor-nav-menu .current-menu-item,
.elementor-nav-menu .current_page_item,
.elementor-nav-menu .current-menu-ancestor,
.elementor-nav-menu .current_page_ancestor {
    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;
}


/* =========================================================
   6. DROPDOWN / SUBMENU PANEL
   ========================================================= */

.elementor-nav-menu .sub-menu,
.elementor-nav-menu--dropdown,
.elementor-nav-menu--main .sub-menu {
    background:
        linear-gradient(
            180deg,
            rgba(12, 5, 20, .99),
            rgba(5, 2, 10, .99)
        ) !important;

    border: 1px solid rgba(75, 14, 130, .65) !important;

    border-radius: 8px !important;

    padding: 7px !important;

    box-shadow:
        0 16px 36px rgba(0, 0, 0, .78),
        0 0 18px rgba(70, 10, 135, .22),
        0 0 38px rgba(35, 0, 75, .16) !important;
}


/* =========================================================
   7. NORMAL SUBMENU LINKS
   ========================================================= */

.elementor-nav-menu .sub-menu li,
.elementor-nav-menu--dropdown li {
    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    margin: 0 !important;
}


.elementor-nav-menu .sub-menu li > a,
.elementor-nav-menu--dropdown li > a {
    color: #e2dde7 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 5px !important;

    box-shadow: none !important;

    padding: 11px 15px !important;

    text-shadow: none !important;

    transition:
        color .20s ease,
        background-color .20s ease,
        text-shadow .20s ease,
        box-shadow .20s ease;
}


/* =========================================================
   8. SUBMENU HOVER — DEEP PURPLE
   ========================================================= */

.elementor-nav-menu .sub-menu li > a:hover,
.elementor-nav-menu--dropdown li > a:hover {
    color: #8a2be2 !important;

    background:
        linear-gradient(
            90deg,
            rgba(72, 12, 125, .42),
            rgba(35, 5, 65, .16)
        ) !important;

    text-shadow:
        0 0 4px rgba(104, 24, 184, 1),
        0 0 10px rgba(78, 12, 150, .90),
        0 0 18px rgba(45, 5, 95, .65) !important;

    box-shadow:
        inset 3px 0 0 #6818b8 !important;
}


/* =========================================================
   9. ACTIVE SUBMENU ITEM — BLOOD RED
   ========================================================= */

.elementor-nav-menu .sub-menu .current-menu-item > a,
.elementor-nav-menu .sub-menu .current_page_item > a,
.elementor-nav-menu--dropdown .current-menu-item > a,
.elementor-nav-menu--dropdown .current_page_item > a {
    color: #d41436 !important;

    background:
        linear-gradient(
            90deg,
            rgba(120, 0, 28, .30),
            rgba(50, 0, 15, .10)
        ) !important;

    text-shadow:
        0 0 4px rgba(212, 20, 54, 1),
        0 0 10px rgba(160, 0, 35, .85),
        0 0 18px rgba(90, 0, 25, .60) !important;

    box-shadow:
        inset 3px 0 0 #d41436 !important;
}


/* Active submenu stays red on hover */
.elementor-nav-menu .sub-menu .current-menu-item > a:hover,
.elementor-nav-menu--dropdown .current-menu-item > a:hover {
    color: #d41436 !important;
}


/* =========================================================
   10. DROPDOWN ARROWS
   ========================================================= */

.elementor-nav-menu .sub-arrow {
    color: inherit !important;
    fill: currentColor !important;
}


/* =========================================================
   11. REMOVE YELLOW / GOLD FROM MENU STATES
   ========================================================= */

.elementor-nav-menu--main a,
.elementor-nav-menu--main a:hover,
.elementor-nav-menu--main a:focus,
.elementor-nav-menu--main a:active,
.elementor-nav-menu--main .elementor-item-active {
    border-color: transparent !important;
}


/* =========================================================
   12. JOIN THE VEIL — OPTIONAL CTA
   Keep this ONLY if you still want Join the Veil gold.
   Delete this section if you want zero gold anywhere.
   ========================================================= */

.veil-nav-join > a {
    color: #0b0b0d !important;

    background: #f2c14e !important;

    border: 1px solid #f2c14e !important;
    border-radius: 6px !important;

    padding: 10px 18px !important;

    font-weight: 700 !important;

    text-shadow: none !important;

    box-shadow:
        0 0 12px rgba(242, 193, 78, .15) !important;
}

.veil-nav-join > a:hover {
    color: #0b0b0d !important;

    background: #ffd36a !important;

    text-shadow: none !important;

    box-shadow:
        0 0 16px rgba(242, 193, 78, .32) !important;
}


/* =========================================================
   13. ENTER THE VEIL — DARK SECONDARY CTA
   ========================================================= */

.veil-nav-enter > a {
    color: #e8e1ee !important;

    background: rgba(12, 5, 20, .90) !important;

    border: 1px solid rgba(104, 24, 184, .70) !important;
    border-radius: 6px !important;

    padding: 10px 18px !important;

    text-shadow:
        0 0 7px rgba(70, 10, 140, .35) !important;
}

.veil-nav-enter > a:hover {
    color: #8a2be2 !important;

    background: rgba(18, 5, 30, .98) !important;

    border-color: #6818b8 !important;

    text-shadow:
        0 0 5px rgba(104, 24, 184, 1),
        0 0 14px rgba(70, 10, 140, .70) !important;

    box-shadow:
        0 0 16px rgba(70, 10, 140, .25) !important;
}


/* =========================================================
   14. MOBILE DROPDOWN
   ========================================================= */

.elementor-nav-menu--dropdown {
    background: #08040d !important;
}

.elementor-nav-menu--dropdown a {
    color: #e2dde7 !important;

    background: transparent !important;

    border: 0 !important;
}

.elementor-nav-menu--dropdown a:hover {
    color: #8a2be2 !important;

    background: rgba(72, 12, 125, .28) !important;
}

.elementor-nav-menu--dropdown .elementor-item-active,
.elementor-nav-menu--dropdown .current-menu-item > a {
    color: #d41436 !important;

    background: rgba(110, 0, 28, .22) !important;
}


/* =========================================================
   15. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .elementor-nav-menu a {
        transition: none !important;
    }

    .elementor-nav-menu--main .elementor-item:hover {
        transform: none !important;
    }
}
/* =========================================================
   REMOVE EXCESS SPACE BELOW HEADER / NAV
   ========================================================= */

/* Main header wrapper */
.elementor-location-header,
.site-header,
header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Header's last section/container */
.elementor-location-header .elementor-section:last-child,
.elementor-location-header .e-con:last-child,
.site-header .elementor-section:last-child,
.site-header .e-con:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Breadcrumb area */
.rank-math-breadcrumb,
.yoast-breadcrumb,
.breadcrumb,
.breadcrumbs,
.elementor-widget-breadcrumbs {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* First page section after the header */
.elementor-location-header + main,
.elementor-location-header + .site-main,
.site-header + main,
.site-header + .site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* =========================================================
   ELEMENTOR HEADER GAP FIX
   ========================================================= */

.elementor-location-header .elementor-element {
    --margin-bottom: 0;
}

.elementor-location-header > .elementor-element,
.elementor-location-header > .elementor-element > .elementor-container,
.elementor-location-header > .elementor-element > .e-con-inner {
    min-height: 0 !important;
}

.elementor-location-header .elementor-widget-spacer {
    display: none !important;
}
/* =========================================================
   FIX SUBMENUS BEING BLOCKED BY BREADCRUMBS
   ========================================================= */

/* Header must sit above page content */
.elementor-location-header,
.site-header,
header {
    position: relative !important;
    z-index: 99999 !important;
}

/* Main nav */
.elementor-nav-menu--main,
.elementor-nav-menu,
.elementor-widget-nav-menu {
    position: relative !important;
    z-index: 100000 !important;
}

/* Dropdown menus */
.elementor-nav-menu .sub-menu,
.elementor-nav-menu--main .sub-menu,
.elementor-nav-menu--dropdown {
    position: absolute !important;
    z-index: 100001 !important;
}

/* Make sure parent menu items allow dropdowns to escape */
.elementor-nav-menu,
.elementor-nav-menu li,
.elementor-widget-nav-menu,
.elementor-widget-container {
    overflow: visible !important;
}

/* =========================================================
   BREADCRUMBS STAY UNDER NAVIGATION
   ========================================================= */

.rank-math-breadcrumb,
.yoast-breadcrumb,
.breadcrumb,
.breadcrumbs,
.elementor-widget-breadcrumbs,
.elementor-widget-breadcrumbs .elementor-widget-container {
    position: relative !important;
    z-index: 1 !important;
}

/* Main page content underneath header */
main,
.site-main,
.elementor-location-single,
.elementor-location-archive {
    position: relative;
    z-index: 1;
}
.menu-item-veil-join > a {
    /* Join the Veil */
}

.menu-item-veil-login > a {
    /* Enter the Veil */
}

.menu-item-veil-account > a {
    /* My Veil */
}

.menu-item-veil-logout > a {
    /* Log Out */
}
/* ============================================================
   MAIN NAVIGATION — SUBMENUS
   ============================================================ */

/* Dropdown container */
.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu {
    min-width: 190px !important;

    padding: 8px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10, 5, 16, .98),
            rgba(4, 2, 9, .98)
        ) !important;

    border: 1px solid rgba(104, 24, 184, .55) !important;
    border-radius: 5px !important;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .75),
        0 0 18px rgba(104, 24, 184, .18) !important;
}


/* Remove Elementor submenu backgrounds */
.elementor-nav-menu--main .sub-menu .menu-item {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* Submenu links */
.elementor-nav-menu--main .sub-menu .elementor-sub-item {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 11px 14px !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 3px !important;

    color: #eee9e1 !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    letter-spacing: .07em !important;
    text-transform: uppercase !important;

    transition:
        color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}


/* Separator between submenu items */
.elementor-nav-menu--main .sub-menu .menu-item + .menu-item {
    border-top:
        1px solid rgba(104, 24, 184, .20) !important;
}


/* Hover */
.elementor-nav-menu--main .sub-menu .elementor-sub-item:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(104, 24, 184, .38),
            rgba(104, 24, 184, .12)
        ) !important;

    box-shadow:
        inset 3px 0 0 #6818b8,
        0 0 12px rgba(104, 24, 184, .12) !important;
}


/* Current/active submenu item */
.elementor-nav-menu--main .sub-menu .current-menu-item > .elementor-sub-item,
.elementor-nav-menu--main .sub-menu .current_page_item > .elementor-sub-item,
.elementor-nav-menu--main .sub-menu .elementor-sub-item.elementor-item-active,
.elementor-nav-menu--main .sub-menu .elementor-sub-item[aria-current="page"] {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(212, 20, 54, .34),
            rgba(100, 5, 30, .12)
        ) !important;

    box-shadow:
        inset 3px 0 0 #d41436,
        0 0 12px rgba(212, 20, 54, .15) !important;

    text-shadow:
        0 0 7px rgba(212, 20, 54, .65) !important;
}


/* Keep parent menu item purple while dropdown is open */
.elementor-nav-menu--main
.menu-item-has-children:hover > .elementor-item {
    color: #6818b8 !important;
}


/* Dropdown arrow */
.elementor-nav-menu--main
.menu-item-has-children > .elementor-item
.sub-arrow {
    color: inherit !important;
}


/* Prevent Elementor theme colors from bleeding through */
.elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown .elementor-sub-item {
    --e-global-color-accent: #6818b8;
}