/* =====================================================
   APEX CROWN - DROPDOWN MENU
===================================================== */

/* Parent */
.main-menu-item.has-dropdown {
    position: relative;
}

/* Dropdown trigger */
.main-menu-item.has-dropdown > .menu-dropdown-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Professional CSS arrow */
.dropdown-arrow {
    width: 8px;
    height: 8px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);
    margin-top: -4px;

    transition: transform 0.25s ease;
}

/* Dropdown container */
.main-menu-item.has-dropdown > .main-menu-submenu {
    display: block !important;

    position: absolute !important;

    top: 100% !important;
    left: 0 !important;

    width: 240px;

    min-width: 240px;

    padding: 10px 0;

    margin: 0;

    background: #ffffff;

    z-index: 999999;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.15);

    border-radius: 4px;
}

/* Keep dropdown open while hovering */
.main-menu-item.has-dropdown:hover > .main-menu-submenu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}

/* Rotate arrow */
.main-menu-item.has-dropdown:hover .dropdown-arrow {
    transform: rotate(225deg);

    margin-top: 4px;
}

/* Remove list styles */
.main-menu-item.has-dropdown > .main-menu-submenu ul {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

/* Dropdown item */
.main-menu-item.has-dropdown > .main-menu-submenu ul li {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}

/* Dropdown link */
.main-menu-item.has-dropdown > .main-menu-submenu ul li a {
    display: block !important;

    width: 100%;

    padding: 12px 22px !important;

    color: #222;

    text-decoration: none;

    line-height: 1.4;

    transition:
        background 0.2s ease,
        padding-left 0.2s ease,
        color 0.2s ease;
}

/* Dropdown link hover */
.main-menu-item.has-dropdown > .main-menu-submenu ul li a:hover {
    background: #f5f5f5;

    padding-left: 28px !important;
}	





/* =====================================================
   APEX CROWN - MOBILE MENU
   Desktop CSS remains unchanged
===================================================== */

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

    /* =================================================
       HEADER BOTTOM
    ================================================= */

    .header-bottom {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 75px;
    }


    /* =================================================
       MOBILE BURGER BUTTON
    ================================================= */

    .header__burger {
        display: flex !important;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 5px;

        width: 45px;

        height: 45px;

        padding: 0;

        margin: 0;

        border: none;

        background: transparent;

        cursor: pointer;

        z-index: 1000001;

        position: relative;
    }


    /* Burger lines */

    .header__burger span {
        display: block;

        width: 27px;

        height: 3px;

        background: currentColor;

        border-radius: 3px;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    /* =================================================
       BURGER -> X
    ================================================= */

    .header__burger.is-active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .header__burger.is-active span:nth-child(2) {
        opacity: 0;
    }

    .header__burger.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


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

    .header-bottom .header__brand.is-hidden-desktop {
        display: block !important;

        margin: 0 auto;
    }

    .header-bottom .header__brand img {
        max-height: 55px;

        width: auto;
    }


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

    .header__nav {
        position: absolute !important;

        top: 100% !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        background: #ffffff;

        z-index: 1000000;

        display: block !important;

        /*
         * Keep the menu closed initially.
         */
        max-height: 0;

        overflow: hidden;

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        transition:
            max-height 0.35s ease,
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;

        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.15);
    }


    /* =================================================
       OPEN NAVIGATION
       
       Increased height so ALL menu links can display.
       No internal scrollbar.
    ================================================= */

    .header__nav.is-open {

        /*
         * Large enough for the complete menu.
         */
        max-height: 1000px;

        /*
         * IMPORTANT:
         * Do not use overflow-y:auto here.
         * It creates the scrollbar you were seeing.
         */
        overflow: visible;

        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }


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

    .header__nav .main-menu {
        display: block !important;

        width: 100%;

        margin: 0 !important;

        padding: 10px 0 !important;

        list-style: none !important;
    }


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

    .header__nav .main-menu > .main-menu-item {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        border-bottom: 1px solid #eeeeee;
    }


    /* =================================================
       NORMAL MENU LINKS
    ================================================= */

    .header__nav .main-menu > .main-menu-item > a {
        display: flex !important;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        min-height: 52px;

        padding: 14px 22px !important;

        color: #222222;

        text-decoration: none;

        background: #ffffff;

        transition:
            background 0.2s ease,
            color 0.2s ease;
    }


    .header__nav .main-menu > .main-menu-item > a:hover {
        background: #f5f7fa;

        color: #1d4f91;
    }


    /* =================================================
       DROPDOWN PARENT
    ================================================= */

    .header__nav .main-menu-item.has-dropdown {
        position: relative;
    }


    /* =================================================
       DROPDOWN TRIGGER
    ================================================= */

    .header__nav
    .main-menu-item.has-dropdown
    > .menu-dropdown-toggle {

        display: flex !important;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        cursor: pointer;
    }


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

    .header__nav
    .main-menu-item.has-dropdown
    .dropdown-arrow {

        flex-shrink: 0;

        width: 9px;

        height: 9px;

        border-right: 2px solid currentColor;

        border-bottom: 2px solid currentColor;

        transform: rotate(45deg);

        margin-right: 5px;

        margin-top: -4px;

        transition:
            transform 0.25s ease;
    }


    /* Rotate arrow when dropdown is open */

    .header__nav
    .main-menu-item.has-dropdown.is-open
    .dropdown-arrow {

        transform: rotate(225deg);

        margin-top: 4px;
    }


    /* =================================================
       MOBILE DROPDOWN
       
       Override desktop absolute positioning
    ================================================= */

    .header__nav
    .main-menu-item.has-dropdown
    > .main-menu-submenu {

        position: static !important;

        top: auto !important;

        left: auto !important;

        width: 100% !important;

        min-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        background: #f7f9fc;

        border-radius: 0;

        box-shadow: none;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;

        display: block !important;

        /*
         * Closed dropdown.
         */
        max-height: 0;

        overflow: hidden;

        transition:
            max-height 0.3s ease;
    }


    /* =================================================
       OPEN MOBILE DROPDOWN
       
       Increased from 500px.
       This allows all submenu links to display.
    ================================================= */

    .header__nav
    .main-menu-item.has-dropdown.is-open
    > .main-menu-submenu {

        /*
         * Large enough for all submenu items.
         */
        max-height: 1000px;

        /*
         * No scrollbar inside individual dropdown.
         */
        overflow: visible;
    }


    /* =================================================
       DROPDOWN UL
    ================================================= */

    .header__nav
    .main-menu-item.has-dropdown
    > .main-menu-submenu ul {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        list-style: none !important;
    }


    /* =================================================
       DROPDOWN ITEMS
    ================================================= */

    .header__nav
    .main-menu-item.has-dropdown
    > .main-menu-submenu
    ul li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        border-top: 1px solid #e9edf2;
    }


    /* =================================================
       DROPDOWN LINKS
    ================================================= */

    .header__nav
    .main-menu-item.has-dropdown
    > .main-menu-submenu
    ul li a {

        display: block !important;

        width: 100% !important;

        padding: 13px 22px 13px 40px !important;

        color: #333333;

        text-decoration: none;

        font-size: 15px;

        line-height: 1.5;

        background: #f7f9fc;

        transition:
            background 0.2s ease,
            padding-left 0.2s ease,
            color 0.2s ease;
    }


    /* Dropdown hover */

    .header__nav
    .main-menu-item.has-dropdown
    > .main-menu-submenu
    ul li a:hover {

        background: #eef3f8;

        color: #1d4f91;

        padding-left: 46px !important;
    }


    /* =================================================
       GET STARTED BUTTON
    ================================================= */

    .header__nav
    .main-menu-item.menu-button {

        padding: 15px 20px !important;

        border-bottom: none;
    }


    .header__nav
    .main-menu-item.menu-button
    > a.header-cta {

        justify-content: center;

        width: 100%;

        min-height: 48px;

        padding: 12px 20px !important;

        color: #ffffff !important;

        background: #1d4f91;

        border-radius: 4px;

        text-align: center;
    }


    .header__nav
    .main-menu-item.menu-button
    > a.header-cta:hover {

        background: #123c69;

        color: #ffffff !important;
    }


    /* =================================================
       TOP HEADER ACTIONS
    ================================================= */

    .header-top-actions {
        display: none;
    }

}


/* =====================================================
   DESKTOP
   Keep burger hidden
===================================================== */

@media screen and (min-width: 1024px) {

    .header__burger {
        display: none !important;
    }

}