/* ==========================================
   GREAT ALASKA COUNCIL
   GLOBAL NAVIGATION STYLES
   ========================================== */


/* ==========================================
   1. EXTERNAL LINK ICONS
   ========================================== */

/* Shared link layout */
#desktop-menu li.external-link > a,
.gac-nav li.external-link > a {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px;
    white-space: nowrap !important;
    box-sizing: border-box;
}

/* Shared Font Awesome icon appearance */
#desktop-menu li.external-link > a::after,
.gac-nav li.external-link > a::before {
    content: "\f35d" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 0.8em !important;

    display: inline-block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 0.65 !important;

    width: auto !important;
    height: auto !important;

    margin-left: auto !important;
    padding-left: 8px !important;

    flex: 0 0 auto !important;
    background: none !important;
    border: none !important;
    transform: none !important;
    animation: none !important;

    transition: opacity 0.2s ease !important;
}

/* Elementor: move ::before icon after text */
.gac-nav li.external-link > a::before {
    order: 2 !important;
}

/* Icon hover state */
#desktop-menu li.external-link > a:hover::after,
.gac-nav li.external-link > a:hover::before {
    opacity: 1 !important;
}

/* Elementor submenu links */
.gac-nav .elementor-nav-menu
li.external-link > a.elementor-sub-item {
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Ensure Elementor submenu icons remain visible */
.gac-nav .elementor-nav-menu
li.external-link > a.elementor-sub-item::before {
    content: "\f35d" !important;
    display: inline-block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 0.65 !important;
    min-width: 12px !important;
    margin-left: auto !important;
    order: 2 !important;
}

/* Elementor submenu icon hover */
.gac-nav .elementor-nav-menu
li.external-link > a.elementor-sub-item:hover::before {
    opacity: 1 !important;
}

/* Elementor dropdown sizing */
.gac-nav .elementor-nav-menu--main .sub-menu {
    min-width: max-content;
}

/* Theme dropdown external links */
#desktop-menu .dropdown-menu li.external-link > a {
    width: 100%;
}

/* Theme first-level dropdown sizing */
#desktop-menu > ul > li > .dropdown-menu {
    min-width: 200px;
}


/* ==========================================
   2. RESPONSIVE NESTED DROPDOWNS
   Main Theme Navigation Only
   ========================================== */

/* Position nested dropdowns relative to parent */
#desktop-menu .dropdown-submenu,
#desktop-menu .dropdown-menu li:has(> .dropdown-menu) {
    position: relative;
}

/* Default nested dropdown direction: right */
#desktop-menu .dropdown-menu .dropdown-menu {
    left: 100%;
    right: auto;
    top: 0;
}

/* JavaScript-controlled left opening */
#desktop-menu .dropdown-menu .dropdown-menu.open-left {
    left: auto !important;
    right: 100% !important;
}


/* ==========================================
   3. THIRD-LEVEL MENU TEXT WRAPPING
   Main Theme Navigation Only
   ========================================== */

/* Third-level dropdown dimensions */
#desktop-menu .dropdown-menu .dropdown-menu {
    width: 260px;
    min-width: 220px;
    max-width: min(300px, 90vw);
    box-sizing: border-box;
}

/* Allow long menu titles to wrap */
#desktop-menu .dropdown-menu .dropdown-menu > li > a {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.4;
    height: auto !important;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

/* Prevent menu items from expanding width */
#desktop-menu .dropdown-menu .dropdown-menu > li {
    width: 100%;
    min-width: 0;
}

/* External links can wrap */
#desktop-menu .dropdown-menu .dropdown-menu
li.external-link > a {
    white-space: normal !important;
    min-width: 0;
}

/* Keep external icon on right */
#desktop-menu .dropdown-menu .dropdown-menu
li.external-link > a::after {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}


/* ==========================================
   4. MOBILE NAVIGATION
   ========================================== */

@media (max-width: 991px) {

    /* Stack theme nested dropdowns */
    #desktop-menu .dropdown-menu .dropdown-menu,
    #desktop-menu .dropdown-menu .dropdown-menu.open-left {
        position: static !important;
        left: auto !important;
        right: auto !important;
        max-width: 100%;
    }

    /* Keep Elementor external links aligned */
    .gac-nav .elementor-nav-menu
    li.external-link > a {
        width: 100%;
    }
}