/* ==========================================================================
   1. DESKTOP SUB-MENU (2 Columns for 11+ items)
   ========================================================================== */
@media screen and (min-width: 981px) {

    /* ==========================================================================
       1. TWO-COLUMN SUB-MENU (11+ Items)
       ========================================================================== */
    ul.sub-menu:has(> li:nth-child(11)) {
        column-count: 2 !important;
        column-gap: 20px !important;
        width: 540px !important;
    }

    ul.sub-menu:has(> li:nth-child(11)) > li {
        break-inside: avoid !important;
        display: block !important;
        width: 100% !important;
    }

    ul.sub-menu:has(> li:nth-child(11)) > li > a {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ensure custom mobile overlay is strictly hidden on desktop */
    #custom-mobile-menu-overlay {
        display: none !important;
    }

    /* ==========================================================================
       2. 300PX SUB-MENU CONTAINER & INNER TEXT BOX EXPANSION
       ========================================================================== */
    /* Set container width to 300px for single-column sub-menus */
    .et_pb_menu .sub-menu:not(:has(> li:nth-child(11))),
    #main-header #top-menu ul.sub-menu:not(:has(> li:nth-child(11))) {
        width: 300px !important;
        min-width: 300px !important;
    }

    /* Force inner list items & link text boxes to stretch full width */
    .et_pb_menu .sub-menu li,
    #main-header #top-menu ul.sub-menu li {
        width: 100% !important;
        display: block !important;
    }

    .et_pb_menu .sub-menu li > a,
    #main-header #top-menu ul.sub-menu li > a {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Reserve space on the right of parent links for the arrow */
    .et_pb_menu .sub-menu li.menu-item-has-children > a,
    #main-header #top-menu li.sub-menu li.menu-item-has-children > a {
        padding-right: 35px !important;
        position: relative !important;
    }

    /* Position Divi's dropdown arrow inside the reserved padding space */
    .et_pb_menu .sub-menu li.menu-item-has-children > a::after,
    #main-header #top-menu li.sub-menu li.menu-item-has-children > a::after {
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

}

/* ==========================================================================
   2. COMPLETELY CUSTOM MOBILE MENU OVERLAY (<= 980px)
   ========================================================================== */
@media screen and (max-width: 980px) {

    /* Hide Divi's standard mobile dropdown menu entirely */
    .mobile_nav .et_mobile_menu {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Custom Mobile Overlay Container */
    #custom-mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        background-color: #ffffff !important;
        z-index: 99999999 !important;
        display: flex !important;
        flex-direction: column !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }

    /* Visible State */
    #custom-mobile-menu-overlay.is-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Close Button Header */
    .custom-mobile-overlay-header {
        height: 60px !important;
        padding: 0 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        flex-shrink: 0 !important;
    }

    .custom-mobile-close-btn {
        font-size: 36px !important;
        line-height: 1 !important;
        color: #333333 !important;
        cursor: pointer !important;
        padding: 5px 10px !important;
    }

    /* Scrollable Menu Body */
    .custom-mobile-overlay-body {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 20px 60px 20px !important;
    }

    /* Unordered List Reset */
    .custom-mobile-menu-list,
    .custom-mobile-menu-list ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* List Item Wrapper */
    .custom-mobile-menu-list li {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    /* --------------------------------------------------------------------------
       LINK CLICK AREA & ROW TOGGLE TARGET
       -------------------------------------------------------------------------- */

    /* Navigation Links: Strict click area around text with breathing room */
    .custom-mobile-menu-list li > a {
        position: relative !important;
        z-index: 5 !important;                /* Sits ABOVE the row toggle button */
        display: inline-block !important;
        width: auto !important;
        max-width: calc(100% - 60px) !important;
        padding: 14px 12px 14px 6px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    /* Full-Row Toggle Button: Covers the whole item row behind the link text */
    #custom-mobile-menu-overlay .custom-toggle-btn {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 50px !important;
        z-index: 2 !important;                 /* Behind link, above background */
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: 15px !important;
    }

    /* Arrow Icon Glyph */
    #custom-mobile-menu-overlay .custom-toggle-btn::after {
        content: "3" !important;               /* Down arrow glyph */
        font-family: "ETmodules" !important;
        font-size: 18px !important;
        color: #333333 !important;
        display: inline-block !important;
        transition: transform 0.25s ease !important;
    }

    /* Rotate Arrow When Open */
    #custom-mobile-menu-overlay li.is-open > .custom-toggle-btn::after {
        transform: rotate(180deg) !important;
    }

    /* Sub-menu Styles (Hidden by default, slides down via JS) */
    .custom-mobile-menu-list .sub-menu {
        display: none;
        padding-left: 15px !important;
        background: transparent !important;
    }

    .custom-mobile-menu-list .sub-menu li {
        border-bottom: none !important;
    }

    .custom-mobile-menu-list .sub-menu li > a {
        padding: 8px 10px 8px 6px !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        color: #555555 !important;
    }

    /* --------------------------------------------------------------------------
       ACTIVE PAGE & PATHWAY HIGHLIGHTS (#f1ce48)
       -------------------------------------------------------------------------- */

    /* Active Current Page */
    .custom-mobile-menu-list li.current-menu-item > a,
    .custom-mobile-menu-list li.current_page_item > a {
        color: #f1ce48 !important;            /* Yellow highlight */
        font-weight: 700 !important;
    }

    /* Parent Ancestor / Pathway Items */
    .custom-mobile-menu-list li.current-menu-ancestor > a,
    .custom-mobile-menu-list li.current-menu-parent > a {
        color: #f1ce48 !important;            /* Yellow highlight */
        font-weight: 600 !important;
    }

    /* Active Left Accent Bar Indicator */
    .custom-mobile-menu-list li.current-menu-item::before,
    .custom-mobile-menu-list li.current_page_item::before {
        content: "" !important;
        position: absolute !important;
        left: -20px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 4px !important;
        background-color: #f1ce48 !important;
    }
}