/* ============================================================
   LONDYN PUBLISHING DESIGN SYSTEM
   NAVIGATION — BLOCKSY
   ============================================================

   Desktop:
       #header-menu-1

   Mobile:
       .mobile-menu

   Normal: Ivory
   Hover: Veil Purple
   Active: Blood Red
   ============================================================ */


/* ============================================================
   1. HEADER STACKING
   ============================================================ */

#header,
.site-header,
header {
    position: relative !important;
    z-index: 99999 !important;
}

#header [data-row],
#header [data-row] > div,
#header .ct-container,
#header .ct-container-fluid,
#header .header-menu-1,
#header-menu-1 {
    overflow: visible !important;
}

#header-menu-1 {
    position: relative !important;
    z-index: 100000 !important;
}


/* Dropdowns must remain above page content and breadcrumbs */

#header-menu-1 .sub-menu {
    z-index: 100001 !important;
}


/* ============================================================
   2. BREADCRUMBS / PAGE CONTENT STACKING
   ============================================================ */

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

main,
.site-main,
#main,
#primary,
.content-area {
    position: relative;
    z-index: 1;
}


/* ============================================================
   3. DESKTOP TOP-LEVEL NAVIGATION
   ============================================================ */

#header-menu-1 > ul > li > .ct-menu-link,
#header-menu-1 > ul > li > a {
    color: var(--lpds-color-ivory, #eee9e1) !important;

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

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

    font-family: var(--lpds-font-body);
    font-weight: 500;

    text-decoration: none !important;
    text-shadow: none;

    white-space: nowrap !important;

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


/* ============================================================
   4. DESKTOP TOP-LEVEL HOVER
   ============================================================ */

#header-menu-1 > ul > li:hover > .ct-menu-link,
#header-menu-1 > ul > li > .ct-menu-link:hover,
#header-menu-1 > ul > li > .ct-menu-link:focus {
    color: var(--lpds-color-purple, #6818b8) !important;

    background: transparent !important;

    text-shadow:
        0 0 5px rgba(104, 24, 184, .95),
        0 0 12px rgba(78, 12, 150, .70),
        0 0 22px rgba(50, 5, 105, .45);

    transform: translateY(-1px);
}


/* ============================================================
   5. DESKTOP ACTIVE / CURRENT ITEM
   ============================================================ */

#header-menu-1 > ul > li.current-menu-item > .ct-menu-link,
#header-menu-1 > ul > li.current_page_item > .ct-menu-link,
#header-menu-1 > ul > li.current-menu-ancestor > .ct-menu-link,
#header-menu-1 > ul > li.current_page_ancestor > .ct-menu-link,
#header-menu-1 > ul > li > .ct-menu-link[aria-current="page"] {
    color: var(--lpds-color-blood, #d41436) !important;

    background: transparent !important;

    font-weight: 700;

    text-shadow:
        0 0 5px rgba(212, 20, 54, .90),
        0 0 12px rgba(160, 0, 35, .60);
}


/* Current page remains blood red on hover */

#header-menu-1 > ul > li.current-menu-item:hover > .ct-menu-link,
#header-menu-1 > ul > li.current_page_item:hover > .ct-menu-link {
    color: var(--lpds-color-blood, #d41436) !important;
}


/* ============================================================
   6. DROPDOWN TOGGLE / ARROW
   ============================================================ */

#header-menu-1 .ct-toggle-dropdown-desktop {
    color: inherit !important;
}

#header-menu-1 .ct-toggle-dropdown-desktop svg {
    fill: currentColor !important;
}


/* ============================================================
   7. DESKTOP SUBMENU PANEL
   ============================================================ */

#header-menu-1 .sub-menu {
    min-width: 190px !important;

    margin: 0 !important;
    padding: 7px !important;

    background:
        linear-gradient(
            145deg,
            rgba(12, 5, 20, .995) 0%,
            rgba(5, 2, 10, .995) 100%
        ) !important;

    background-color: #08040d !important;

    border:
        1px solid rgba(104, 24, 184, .62) !important;

    border-radius: 6px !important;

    box-shadow:
        0 16px 36px rgba(0, 0, 0, .78),
        0 0 18px rgba(104, 24, 184, .22),
        0 0 38px rgba(53, 8, 95, .12) !important;

    overflow: hidden !important;
}


/*
 * Blocksy exposes dropdown appearance through CSS custom
 * properties. Override those on the actual menu as well.
 */

#header-menu-1 {
    --dropdown-background-color: #08040d !important;
    --dropdown-text-color: #eee9e1 !important;
    --dropdown-text-hover-color: #ffffff !important;
    --dropdown-divider: rgba(104, 24, 184, .18) !important;
}


/* ============================================================
   8. SUBMENU LIST ITEMS
   ============================================================ */

#header-menu-1 .sub-menu > li {
    margin: 0 !important;
    padding: 0 !important;

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

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

#header-menu-1 .sub-menu > li + li {
    border-top:
        1px solid rgba(104, 24, 184, .18) !important;
}


/* ============================================================
   9. SUBMENU LINKS
   ============================================================ */

#header-menu-1 .sub-menu .ct-menu-link,
#header-menu-1 .sub-menu > li > a {
    display: flex !important;
    align-items: center;

    width: 100% !important;

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

    color: var(--lpds-color-ivory, #eee9e1) !important;

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

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

    box-shadow: none !important;

    font-family: var(--lpds-font-body);
    font-size: .75rem;
    font-weight: 500;

    letter-spacing: .06em;
    line-height: 1.35;

    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: uppercase;

    white-space: nowrap !important;

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


/* ============================================================
   10. SUBMENU HOVER
   ============================================================ */

#header-menu-1 .sub-menu > li:hover > .ct-menu-link,
#header-menu-1 .sub-menu .ct-menu-link:hover,
#header-menu-1 .sub-menu .ct-menu-link:focus {
    color: #ffffff !important;

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

    background-color: rgba(104, 24, 184, .28) !important;

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

    text-shadow:
        0 0 7px rgba(104, 24, 184, .55) !important;
}


/* ============================================================
   11. ACTIVE SUBMENU ITEM
   ============================================================ */

#header-menu-1 .sub-menu > li.current-menu-item > .ct-menu-link,
#header-menu-1 .sub-menu > li.current_page_item > .ct-menu-link,
#header-menu-1 .sub-menu > li > .ct-menu-link[aria-current="page"] {
    color: #ffffff !important;

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

    background-color: rgba(120, 0, 28, .25) !important;

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

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


/* ============================================================
   12. THE VEIL PARENT WHILE OPEN
   ============================================================ */

#header-menu-1
.menu-item-has-children:hover > .ct-menu-link {
    color: var(--lpds-color-purple, #6818b8) !important;

    text-shadow:
        0 0 5px rgba(104, 24, 184, .95),
        0 0 12px rgba(78, 12, 150, .65);
}


/* ============================================================
   13. VEIL SPECIAL MENU CLASSES
   ============================================================ */

/*
 * These work when the corresponding CSS classes are assigned
 * to WordPress menu items.
 */


/* Join the Veil */

#header-menu-1 .menu-item-veil-join > .ct-menu-link,
#header-menu-1 .veil-nav-join > .ct-menu-link {
    color: #0b0b0d !important;

    background:
        var(--lpds-color-gold, #d7b46a) !important;

    border:
        1px solid var(--lpds-color-gold, #d7b46a) !important;

    border-radius: 5px !important;

    font-weight: 700 !important;

    text-shadow: none !important;
}

#header-menu-1 .menu-item-veil-join > .ct-menu-link:hover,
#header-menu-1 .veil-nav-join > .ct-menu-link:hover {
    color: #0b0b0d !important;

    background: #e7c77f !important;

    box-shadow:
        0 0 14px rgba(215, 180, 106, .28) !important;
}


/* Enter the Veil */

#header-menu-1 .menu-item-veil-login > .ct-menu-link,
#header-menu-1 .veil-nav-enter > .ct-menu-link {
    color: var(--lpds-color-ivory, #eee9e1) !important;

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

    border:
        1px solid rgba(104, 24, 184, .62) !important;

    border-radius: 5px !important;
}


/* My Veil */

#header-menu-1 .menu-item-veil-account > .ct-menu-link {
    font-weight: 600 !important;
}


/* Log Out */

#header-menu-1 .menu-item-veil-logout > .ct-menu-link {
    color: rgba(238, 233, 225, .78) !important;
}

#header-menu-1 .menu-item-veil-logout > .ct-menu-link:hover {
    color: var(--lpds-color-blood, #d41436) !important;
}


/* ============================================================
   14. MOBILE / OFF-CANVAS NAVIGATION
   ============================================================ */

.mobile-menu.menu-container {
    font-family: var(--lpds-font-body);
}

.mobile-menu .menu-item {
    background: transparent !important;
}

.mobile-menu .ct-menu-link {
    color: var(--lpds-color-ivory, #eee9e1) !important;

    background: transparent !important;

    text-decoration: none !important;

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

.mobile-menu .ct-menu-link:hover,
.mobile-menu .ct-menu-link:focus {
    color: #ffffff !important;

    background:
        rgba(104, 24, 184, .24) !important;

    box-shadow:
        inset 3px 0 0 var(--lpds-color-purple, #6818b8);
}


/* Mobile nested submenu */

.mobile-menu .sub-menu {
    background:
        rgba(5, 2, 10, .60) !important;

    border-left:
        1px solid rgba(104, 24, 184, .28) !important;
}


/* Mobile active */

.mobile-menu .current-menu-item > .ct-menu-link,
.mobile-menu .current_page_item > .ct-menu-link,
.mobile-menu .ct-menu-link[aria-current="page"] {
    color: #ffffff !important;

    background:
        rgba(120, 0, 28, .24) !important;

    box-shadow:
        inset 3px 0 0 var(--lpds-color-blood, #d41436);

    text-shadow:
        0 0 6px rgba(212, 20, 54, .55);
}


/* ============================================================
   15. ACCESSIBILITY
   ============================================================ */

#header-menu-1 .ct-menu-link:focus-visible,
.mobile-menu .ct-menu-link:focus-visible {
    outline:
        2px solid var(--lpds-color-purple-light, #9b4de0);

    outline-offset: 3px;
}


/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

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

    #header-menu-1 .ct-menu-link,
    .mobile-menu .ct-menu-link {
        transition: none !important;
    }

    #header-menu-1 > ul > li > .ct-menu-link:hover {
        transform: none;
    }
}