/*
 * Directory Goo Header Dropdown V1
 * Desktop navigation dropdown presentation only.
 * Does not change React menu data, URLs or navigation behavior.
 */

@media (min-width: 992px) {

    /* Dropdown trigger */
    #navbarNav .header-dropdown {
        position: relative !important;
    }

    #navbarNav .header-dropdown > .drop-btn {
        position: relative !important;
        min-height: 30px !important;
        padding: 5px 7px !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        transition:
            background-color .18s ease,
            box-shadow .18s ease !important;
    }

    #navbarNav .header-dropdown > .drop-btn:hover {
        background: rgba(255,255,255,.11) !important;
    }

    /* Caret */
    #navbarNav .header-dropdown > .drop-btn .fa-caret-down {
        margin-left: 1px !important;
        font-size: 11px !important;
        opacity: .9 !important;
        transition: transform .18s ease !important;
    }

    /*
     * React inserts .drops-container only while menu is open,
     * therefore rotate the trigger caret while its dropdown exists.
     */
    #navbarNav .header-dropdown:has(.drops-container)
    > .drop-btn .fa-caret-down {
        transform: rotate(180deg) !important;
    }

    /* Dropdown positioning */
    #navbarNav .header-dropdown > .drops-container {
        position: absolute !important;
        left: 0 !important;
        top: 100% !important;
        width: 290px !important;
        margin-top: 5px !important;
        padding-top: 6px !important;
        z-index: 3000 !important;
    }

    /* Main floating panel */
    #navbarNav .header-dropdwon-menu {
        position: relative !important;
        width: 290px !important;
        min-width: 290px !important;
        max-height: 365px !important;

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

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #ffffff !important;
        border: 1px solid #e4eaf0 !important;
        border-top: 3px solid #18a83a !important;
        border-radius: 10px !important;

        box-shadow:
            0 14px 36px rgba(21, 45, 72, .16),
            0 3px 8px rgba(21, 45, 72, .08) !important;

        list-style: none !important;
    }

    /* Small pointer */
    #navbarNav .header-dropdwon-menu::before {
        content: "" !important;
        position: absolute !important;
        top: -8px !important;
        left: 22px !important;
        width: 12px !important;
        height: 12px !important;
        background: #18a83a !important;
        transform: rotate(45deg) !important;
        border-radius: 2px 0 0 0 !important;
    }

    /* Menu rows */
    #navbarNav .header-dropdwon-menu > li {
        position: relative !important;

        min-height: 42px !important;
        width: 100% !important;

        margin: 2px 0 !important;
        padding: 9px 35px 9px 12px !important;

        gap: 9px !important;

        color: #25364d !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 7px !important;

        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;

        transition:
            background-color .16s ease,
            color .16s ease,
            border-color .16s ease,
            transform .16s ease !important;
    }

    #navbarNav .header-dropdwon-menu > li > span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Images supplied dynamically by existing React data */
    #navbarNav .header-dropdwon-menu > li > img {
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
        padding: 2px !important;

        object-fit: contain !important;

        background: #f5f8fa !important;
        border: 1px solid #edf1f4 !important;
        border-radius: 5px !important;
    }

    /* Right navigation indicator */
    #navbarNav .header-dropdwon-menu > li::after {
        content: "›" !important;
        position: absolute !important;
        right: 13px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        color: #9aa7b5 !important;
        font-size: 19px !important;
        font-weight: 400 !important;
        line-height: 1 !important;

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

    /*
     * React already sets .active-menu for both mouse and
     * keyboard-selected entries.
     */
    #navbarNav .header-dropdwon-menu > li:hover,
    #navbarNav .header-dropdwon-menu > li.active-menu {
        color: #0879d9 !important;
        background: #f2f8ff !important;
        border-color: #d4e9fb !important;
        transform: translateX(2px) !important;
    }

    #navbarNav .header-dropdwon-menu > li:hover::after,
    #navbarNav .header-dropdwon-menu > li.active-menu::after {
        color: #18a83a !important;
        transform: translate(2px, -50%) !important;
    }

    /* Cleaner scrollbar */
    #navbarNav .header-dropdwon-menu {
        scrollbar-width: thin !important;
        scrollbar-color: #cbd5df transparent !important;
    }

    #navbarNav .header-dropdwon-menu::-webkit-scrollbar {
        width: 6px !important;
    }

    #navbarNav .header-dropdwon-menu::-webkit-scrollbar-track {
        background: transparent !important;
    }

    #navbarNav .header-dropdwon-menu::-webkit-scrollbar-thumb {
        background: #cbd5df !important;
        border-radius: 10px !important;
    }

    /* Slightly narrower dropdown for smaller desktop/tablet widths */
    @media (max-width: 1199px) {
        #navbarNav .header-dropdown > .drops-container,
        #navbarNav .header-dropdwon-menu {
            width: 260px !important;
            min-width: 260px !important;
        }

        #navbarNav .header-dropdwon-menu > li {
            min-height: 40px !important;
            font-size: 13px !important;
        }
    }
}

/* Directory Goo Header Dropdown V1.1 — compact desktop width */
@media (min-width: 1200px) {
    #navbarNav .header-dropdown > .drops-container,
    #navbarNav .header-dropdwon-menu {
        width: 270px !important;
        min-width: 270px !important;
    }
}