/* =============================================================================
   Hotfix: Primary Navigation Dropdown – Desktop
   Matches the existing dark-teal nav theme (#042023 / rgba(76,94,89,0.12)).
   WordPress generates .menu-item-has-children > .sub-menu for nested items.
   ============================================================================= */

/* ── Desktop only ─────────────────────────────────────────────────────────── */
@media (min-width: 992px) {

    /* 1. Chevron arrow on parent items that have children
    ───────────────────────────────────────────────────── */
    #primary-menu-list > li.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        flex-shrink: 0;
        width: 8px;
        height: 5px;
        margin-left: 4px;
        /* CSS chevron – no external asset needed */
        border-left:   2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg) translateY(-2px);
        transition: transform 0.25s ease;
        opacity: 0.75;
    }

    /* Rotate arrow when dropdown is open */
    #primary-menu-list > li.menu-item-has-children:hover > a::after,
    #primary-menu-list > li.menu-item-has-children:focus-within > a::after {
        transform: rotate(135deg) translateY(-2px);
        opacity: 1;
    }

    /* 2. Sub-menu container
    ───────────────────────────────────────────────────── */
    #primary-menu-list > li.menu-item-has-children {
        /* Ensure the sub-menu extends below the pill nav bar */
        overflow: visible;
    }

    #primary-menu-list > li.menu-item-has-children > .sub-menu {
        /* Reset inherited ul styles */
        list-style: none;
        margin: 0;

        /* Positioning – drop below the nav bar with a small gap */
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(-6px);

        /* Appearance – matches the header's on-scroll dark-teal bg */
        min-width: 260px;
        padding: 8px;
        background-color: #042023;
        border: 1px solid rgba(249, 255, 230, 0.08);
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);

        /* Hidden by default */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity    0.2s ease,
            transform  0.2s ease,
            visibility 0.2s ease;

        z-index: 99998;
    }

    /* 3. Reveal on hover / focus-within
    ───────────────────────────────────────────────────── */
    #primary-menu-list > li.menu-item-has-children:hover > .sub-menu,
    #primary-menu-list > li.menu-item-has-children:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    /* 4. Sub-menu list items
    ───────────────────────────────────────────────────── */
    #primary-menu-list .sub-menu > li {
        position: static;
        height: auto;
        width: 100%;
    }

    /* 5. Sub-menu links
    ───────────────────────────────────────────────────── */
    #primary-menu-list .sub-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: auto;
        padding: 9px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: rgba(249, 255, 230, 0.8);
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    /* Reset the inner <span> so the parent pill style doesn't interfere */
    #primary-menu-list .sub-menu > li > a > span {
        display: inline;
        padding: 0;
        background-color: transparent !important;
        color: inherit !important;
        border-radius: 0;
    }

    /* Hover state – subtle green tint, bright text */
    #primary-menu-list .sub-menu > li > a:hover {
        background-color: rgba(161, 222, 59, 0.12);
        color: #F9FFE6;
    }

    /* 6. Active / current page item inside the sub-menu
    ───────────────────────────────────────────────────── */
    #primary-menu-list .sub-menu > li.current-menu-item > a,
    #primary-menu-list .sub-menu > li.current_page_item > a {
        background-color: rgba(161, 222, 59, 0.18);
        color: #A1DE3B;
        pointer-events: none;
        cursor: default;
    }

    /* Parent item highlight when a child page is active */
    #primary-menu-list > li.current-menu-ancestor:not(.current-menu-item) > a > span {
        background-color: #F9FFE6;
        color: #010708;
    }
}

/* ── Mobile: collapsible sub-menu (JS-driven via existing toggleDropdown) ──── */
@media (max-width: 991px) {

    /* Initially hidden – JS sets display:block when opening */
    #primary-menu-list .sub-menu {
        display: none;
        list-style: none;
        margin: 4px 0 0;
        padding: 0 0 0 20px;
        overflow: hidden;
    }

    /* Already-open state (JS adds .is-open after animation completes) */
    #primary-menu-list .sub-menu.is-open {
        display: block;
        overflow: visible;
    }

    /* Toggle arrow for mobile */
    #primary-menu-list > li.menu-item-has-children > a::after {
        content: '';
        position: absolute;
        right: 15px;
        top: 50%;
        width: 8px;
        height: 5px;
        margin-top: -3px;
        border-left:   2px solid rgba(255,255,255,0.6);
        border-bottom: 2px solid rgba(255,255,255,0.6);
        transform: rotate(-45deg);
        transition: transform 0.25s ease;
    }

    /* Parent li gets .opened when dropdown is active */
    #primary-menu-list > li.menu-item-has-children.opened > a::after {
        transform: rotate(135deg);
        margin-top: -5px;
    }

    /* Mobile sub-menu link style */
    #primary-menu-list .sub-menu > li > a {
        display: block;
        height: auto;
        padding: 8px 15px;
        font-size: 16px;
        font-weight: 500;
        color: rgba(249, 255, 230, 0.75);
        text-decoration: none;
        border-radius: 8px;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    #primary-menu-list .sub-menu > li > a > span {
        display: inline;
        padding: 0;
        background-color: transparent !important;
        color: inherit !important;
        border-radius: 0;
    }

    #primary-menu-list .sub-menu > li > a:hover {
        background-color: rgba(161, 222, 59, 0.1);
        color: #F9FFE6;
    }

    #primary-menu-list .sub-menu > li.current-menu-item > a,
    #primary-menu-list .sub-menu > li.current_page_item > a {
        color: #A1DE3B;
        pointer-events: none;
    }
}