/* ==========================================================
   VULKAN SPIRIT — LCARS NAVIGATION
   STAR TREK INSPIRED / TRANSPARENT / RESPONSIVE
   ========================================================== */


/* ==========================================================
   LCARS COLORS
   ========================================================== */

:root {
    --lcars-orange: #ff9900;
    --lcars-gold: #ffcc66;
    --lcars-peach: #ff9966;
    --lcars-lavender: #cc99cc;
    --lcars-violet: #9999ff;
    --lcars-blue: #99ccff;
    --lcars-red: #cc6666;
    --lcars-text: #130d08;
}


/* ==========================================================
   MAIN NAVIGATION
   IMPORTANT: NO BACKGROUND
   ========================================================== */

.main-navigation {
    position: relative !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 16px 18px 16px 45px !important;

    background: transparent !important;

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

    overflow: visible !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   LEFT LCARS RAIL
   ========================================================== */

.main-navigation::before {
    content: "" !important;

    position: absolute !important;

    left: 8px !important;
    top: 7px !important;
    bottom: 7px !important;

    width: 27px !important;

    background:
        linear-gradient(
            to bottom,
            #cc99cc 0%,
            #cc99cc 38%,
            transparent 38%,
            transparent 42%,
            #ff9966 42%,
            #ff9966 72%,
            transparent 72%,
            transparent 76%,
            #9999ff 76%,
            #9999ff 100%
        ) !important;

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

    z-index: 1 !important;
}


/* LCARS top connector */

.main-navigation::after {
    content: "" !important;

    position: absolute !important;

    left: 8px !important;
    top: 7px !important;

    width: 85px !important;
    height: 18px !important;

    background: #cc99cc !important;

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

    z-index: 1 !important;
}


/* ==========================================================
   MAIN MENU
   ========================================================== */

.main-navigation > ul,
.main-navigation #primary-menu,
.main-navigation .menu-container > ul {

    display: flex !important;
    flex-direction: row !important;

    align-items: stretch !important;
    justify-content: center !important;

    flex-wrap: wrap !important;

    gap: 4px !important;

    width: 100% !important;

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

    list-style: none !important;

    background: transparent !important;

    position: relative !important;

    z-index: 5 !important;
}


/* ==========================================================
   RESET WORDPRESS DEFAULTS
   ========================================================== */

.main-navigation ul,
.main-navigation li {

    list-style: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    background: transparent;
}


.main-navigation > ul > li,
.main-navigation #primary-menu > li,
.main-navigation .menu-container > ul > li {

    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   MAIN LCARS BUTTON
   ========================================================== */

.main-navigation > ul > li > a,
.main-navigation #primary-menu > li > a,
.main-navigation .menu-container > ul > li > a {

    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    box-sizing: border-box !important;

    min-height: 44px !important;
    min-width: 125px !important;

    padding: 9px 18px 7px 18px !important;

    color: var(--lcars-text) !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        "Helvetica Neue",
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    letter-spacing: 1.4px !important;

    line-height: 1 !important;

    text-transform: uppercase !important;

    text-align: right !important;
    text-decoration: none !important;

    border: none !important;

    /*
       LCARS normally uses fairly small corner radius
       except for terminal / elbow elements.
    */

    border-radius: 3px !important;

    box-shadow: none !important;

    transition:
        filter .16s ease,
        transform .16s ease,
        color .16s ease !important;
}


/* ==========================================================
   LCARS ASYMMETRIC WIDTHS
   ========================================================== */

.main-navigation > ul > li:nth-child(1) > a,
.main-navigation #primary-menu > li:nth-child(1) > a {
    min-width: 190px !important;
}


.main-navigation > ul > li:nth-child(2) > a,
.main-navigation #primary-menu > li:nth-child(2) > a {
    min-width: 130px !important;
}


.main-navigation > ul > li:nth-child(3) > a,
.main-navigation #primary-menu > li:nth-child(3) > a {
    min-width: 155px !important;
}


.main-navigation > ul > li:nth-child(4) > a,
.main-navigation #primary-menu > li:nth-child(4) > a {
    min-width: 115px !important;
}


.main-navigation > ul > li:nth-child(5) > a,
.main-navigation #primary-menu > li:nth-child(5) > a {
    min-width: 175px !important;
}


.main-navigation > ul > li:nth-child(6) > a,
.main-navigation #primary-menu > li:nth-child(6) > a {
    min-width: 125px !important;
}


.main-navigation > ul > li:nth-child(7) > a,
.main-navigation #primary-menu > li:nth-child(7) > a {
    min-width: 155px !important;
}


.main-navigation > ul > li:nth-child(8) > a,
.main-navigation #primary-menu > li:nth-child(8) > a {
    min-width: 120px !important;
}


/* ==========================================================
   AUTHENTIC LCARS COLOR PATTERN
   ========================================================== */

/* orange */

.main-navigation > ul > li:nth-child(1) > a,
.main-navigation #primary-menu > li:nth-child(1) > a {
    background: var(--lcars-orange) !important;
}


/* lavender */

.main-navigation > ul > li:nth-child(2) > a,
.main-navigation #primary-menu > li:nth-child(2) > a {
    background: var(--lcars-lavender) !important;
}


/* blue */

.main-navigation > ul > li:nth-child(3) > a,
.main-navigation #primary-menu > li:nth-child(3) > a {
    background: var(--lcars-blue) !important;
}


/* gold */

.main-navigation > ul > li:nth-child(4) > a,
.main-navigation #primary-menu > li:nth-child(4) > a {
    background: var(--lcars-gold) !important;
}


/* peach */

.main-navigation > ul > li:nth-child(5) > a,
.main-navigation #primary-menu > li:nth-child(5) > a {
    background: var(--lcars-peach) !important;
}


/* violet */

.main-navigation > ul > li:nth-child(6) > a,
.main-navigation #primary-menu > li:nth-child(6) > a {
    background: var(--lcars-violet) !important;
}


/* orange */

.main-navigation > ul > li:nth-child(7) > a,
.main-navigation #primary-menu > li:nth-child(7) > a {
    background: var(--lcars-orange) !important;
}


/* red */

.main-navigation > ul > li:nth-child(8) > a,
.main-navigation #primary-menu > li:nth-child(8) > a {
    background: var(--lcars-red) !important;
}


/* Continue colors automatically */

.main-navigation > ul > li:nth-child(8n + 1) > a,
.main-navigation #primary-menu > li:nth-child(8n + 1) > a {
    background: var(--lcars-orange) !important;
}

.main-navigation > ul > li:nth-child(8n + 2) > a,
.main-navigation #primary-menu > li:nth-child(8n + 2) > a {
    background: var(--lcars-lavender) !important;
}

.main-navigation > ul > li:nth-child(8n + 3) > a,
.main-navigation #primary-menu > li:nth-child(8n + 3) > a {
    background: var(--lcars-blue) !important;
}

.main-navigation > ul > li:nth-child(8n + 4) > a,
.main-navigation #primary-menu > li:nth-child(8n + 4) > a {
    background: var(--lcars-gold) !important;
}

.main-navigation > ul > li:nth-child(8n + 5) > a,
.main-navigation #primary-menu > li:nth-child(8n + 5) > a {
    background: var(--lcars-peach) !important;
}

.main-navigation > ul > li:nth-child(8n + 6) > a,
.main-navigation #primary-menu > li:nth-child(8n + 6) > a {
    background: var(--lcars-violet) !important;
}

.main-navigation > ul > li:nth-child(8n + 7) > a,
.main-navigation #primary-menu > li:nth-child(8n + 7) > a {
    background: var(--lcars-orange) !important;
}

.main-navigation > ul > li:nth-child(8n) > a,
.main-navigation #primary-menu > li:nth-child(8n) > a {
    background: var(--lcars-red) !important;
}


/* ==========================================================
   LCARS END CAPS
   ========================================================== */

.main-navigation > ul > li:first-child > a,
.main-navigation #primary-menu > li:first-child > a {

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

    padding-left: 31px !important;
}


.main-navigation > ul > li:last-child > a,
.main-navigation #primary-menu > li:last-child > a {

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

    padding-right: 25px !important;
}


/* ==========================================================
   SMALL LCARS DATA MARK
   ========================================================== */

.main-navigation > ul > li > a::before,
.main-navigation #primary-menu > li > a::before {

    content: "" !important;

    width: 4px !important;
    height: 4px !important;

    flex: 0 0 4px !important;

    margin-right: auto !important;

    background: rgba(0,0,0,.45) !important;

    border-radius: 50% !important;

    opacity: .55 !important;
}


/* ==========================================================
   HOVER
   ========================================================== */

.main-navigation > ul > li > a:hover,
.main-navigation #primary-menu > li > a:hover,
.main-navigation .menu-container > ul > li > a:hover {

    color: #000 !important;

    filter:
        brightness(1.14)
        saturate(1.05) !important;

    transform: translateY(-2px) !important;
}


/* tiny LCARS indicator */

.main-navigation > ul > li > a:hover::before,
.main-navigation #primary-menu > li > a:hover::before {

    width: 15px !important;

    flex-basis: 15px !important;

    border-radius: 3px !important;

    transition: all .16s ease !important;
}


/* ==========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================== */

.main-navigation a:focus-visible {

    outline: 3px solid var(--lcars-blue) !important;

    outline-offset: 3px !important;
}


/* ==========================================================
   CURRENT PAGE
   ========================================================== */

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_ancestor > a {

    color: #000 !important;

    filter: brightness(1.22) !important;

    box-shadow:
        inset 0 -5px 0 rgba(0,0,0,.35) !important;
}


/* ==========================================================
   DROPDOWNS
   NO DARK BACKGROUND BOX
   ========================================================== */

.main-navigation ul ul {

    position: absolute !important;

    top: calc(100% + 5px) !important;
    left: 0 !important;

    display: none !important;

    min-width: 245px !important;

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

    background: transparent !important;

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

    z-index: 99999 !important;
}


/* Show submenu */

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {

    display: block !important;
}


/* submenu list */

.main-navigation ul ul li {

    display: block !important;

    width: 100% !important;

    margin: 0 0 4px !important;

    background: transparent !important;
}


.main-navigation ul ul li:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   SUBMENU LCARS BUTTONS
   ========================================================== */

.main-navigation ul ul li > a {

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;

    min-width: 0 !important;
    min-height: 39px !important;

    box-sizing: border-box !important;

    padding: 9px 14px !important;

    background: var(--lcars-gold) !important;

    color: #111 !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif !important;

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

    letter-spacing: 1px !important;

    line-height: 1 !important;

    text-transform: uppercase !important;

    text-align: right !important;
    text-decoration: none !important;

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

    transition:
        filter .15s ease,
        transform .15s ease !important;
}


.main-navigation ul ul li:nth-child(2n) > a {
    background: var(--lcars-lavender) !important;
}


.main-navigation ul ul li:nth-child(3n) > a {
    background: var(--lcars-blue) !important;
}


.main-navigation ul ul li:nth-child(4n) > a {
    background: var(--lcars-peach) !important;
}


.main-navigation ul ul li > a:hover {

    color: #000 !important;

    filter: brightness(1.18) !important;

    transform: translateX(4px) !important;
}


/* ==========================================================
   DROPDOWN ARROW
   ========================================================== */

.main-navigation .menu-item-has-children > a::after {

    content: "▾" !important;

    display: inline-block !important;

    margin-left: 9px !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    opacity: .7 !important;
}


/* ==========================================================
   MOBILE MENU BUTTON
   ========================================================== */

.main-navigation .menu-toggle,
button.menu-toggle {

    background: var(--lcars-gold) !important;

    color: #111 !important;

    border: none !important;

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

    padding: 12px 22px !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    letter-spacing: 1.5px !important;

    text-transform: uppercase !important;

    cursor: pointer !important;

    box-shadow: none !important;
}


.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {

    filter: brightness(1.15) !important;

    color: #000 !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width: 1000px) {

    .main-navigation > ul,
    .main-navigation #primary-menu,
    .main-navigation .menu-container > ul {

        gap: 4px !important;
    }


    .main-navigation > ul > li > a,
    .main-navigation #primary-menu > li > a,
    .main-navigation .menu-container > ul > li > a {

        min-width: 115px !important;

        font-size: 12px !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width: 700px) {

    .main-navigation {

        width: 100% !important;

        padding:
            12px
            7px
            12px
            32px !important;

        box-sizing: border-box !important;

        background: transparent !important;
    }


    /* thinner LCARS rail */

    .main-navigation::before {

        left: 4px !important;

        top: 5px !important;
        bottom: 5px !important;

        width: 19px !important;

        border-radius:
            18px 0 0 18px !important;
    }


    .main-navigation::after {

        left: 4px !important;

        top: 5px !important;

        width: 52px !important;
        height: 13px !important;

        border-radius:
            18px 0 0 0 !important;
    }


    /* menu stack */

    .main-navigation > ul,
    .main-navigation #primary-menu,
    .main-navigation .menu-container > ul {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        gap: 4px !important;

        width: 100% !important;

        padding: 5px 0 !important;

        background: transparent !important;
    }


    .main-navigation > ul > li,
    .main-navigation #primary-menu > li,
    .main-navigation .menu-container > ul > li {

        width: 100% !important;
    }


    /* mobile button */

    .main-navigation > ul > li > a,
    .main-navigation #primary-menu > li > a,
    .main-navigation .menu-container > ul > li > a {

        width: 100% !important;

        min-width: 0 !important;
        min-height: 44px !important;

        padding: 10px 15px !important;

        justify-content: flex-end !important;

        font-size: 13px !important;

        text-align: right !important;

        border-radius:
            21px 3px 3px 21px !important;
    }


    /* varying LCARS lengths */

    .main-navigation > ul > li:nth-child(3n + 1) > a,
    .main-navigation #primary-menu > li:nth-child(3n + 1) > a {

        width: 100% !important;
    }


    .main-navigation > ul > li:nth-child(3n + 2) > a,
    .main-navigation #primary-menu > li:nth-child(3n + 2) > a {

        width: 93% !important;

        margin-left: auto !important;
    }


    .main-navigation > ul > li:nth-child(3n) > a,
    .main-navigation #primary-menu > li:nth-child(3n) > a {

        width: 97% !important;

        margin-left: auto !important;
    }


    /* ======================================================
       MOBILE DROPDOWN
       ====================================================== */

    .main-navigation ul ul {

        position: static !important;

        display: none !important;

        width: 100% !important;

        min-width: 0 !important;

        margin: 4px 0 2px !important;

        padding: 0 0 0 13px !important;

        background: transparent !important;

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


    .main-navigation li:hover > ul,
    .main-navigation li:focus-within > ul {

        display: block !important;
    }


    .main-navigation ul ul li > a {

        min-height: 39px !important;

        padding: 9px 13px !important;

        font-size: 11px !important;

        border-radius:
            18px 3px 3px 18px !important;
    }

}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media screen and (max-width: 380px) {

    .main-navigation {

        padding-left: 28px !important;
    }


    .main-navigation > ul > li > a,
    .main-navigation #primary-menu > li > a {

        min-height: 42px !important;

        padding: 9px 12px !important;

        font-size: 12px !important;

        letter-spacing: .9px !important;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .main-navigation a {

        transition: none !important;
    }


    .main-navigation a:hover {

        transform: none !important;
    }
}