/* ---------------------------------------------------------------------- 
    Mega Menu – scope to desktop
---------------------------------------------------------------------- */
@media (min-width: 1301px) {
    /* Keep li relative so the divider :after stays put */
    header .top-bar .menu > li.mega-menu {
        position: relative;
        font-family: var(--ff-primary-100);

        > a:focus {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }
    }

    /* Hide the legacy submenu */
    /* For mega items only (preserve original specificity) */
    #et-boc header .top-bar .et_pb_widget_area .menu > li.mega-menu {
        > ul.sub-menu {
            display: none !important;
            visibility: hidden !important;
        }
    }

    /* Viewport-anchored full-bleed panel */
    .mega-dropdown {
        position: fixed;
        left: 0;
        right: 0;
        top: 0; /* set dynamically by JS */
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease;

        &.is-open {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        /* Keyboard focus inside the panel */
        a:focus {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }

        & .mega-inner {
            max-width: calc(var(--max-width) + var(--max-width-padding) * 2);
            padding: 2rem var(--max-width-padding) 3rem;
            margin: 0 auto;

            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 24px;

            background: #fff;
            box-shadow: 0 6px 5px 2px rgba(0, 0, 0, 0.1);
            border-bottom: 8px solid var(--clr-primary-100);

            & .mega-group {
                min-width: 0;

                /* Level 2 Links */
                & .mega-l2 {
                    margin: 0;
                    line-height: var(--lh-300);
                    padding-bottom: 0.5rem;

                    & .mega-l2__link {
                        font-size: var(--fs-400);
                        font-weight: var(--fw-medium);
                        color: var(--clr-neutral-100) !important;
                        text-decoration: none;

                        &:hover {
                            opacity: 1;
                            color: var(--clr-primary-100) !important;
                        }

                        &.current-menu-item,
                        &[aria-current="page"] {
                            color: var(--clr-primary-100) !important;
                            opacity: 1;
                        }
                    }
                }

                /* Level 3 Links */
                & .mega-l3 {
                    list-style: none;
                    margin: 0;
                    padding: 0;

                    & .mega-l3__item {
                        padding: 0 0 0 25px;
                        margin-bottom: 0.25rem;
                        line-height: var(--lh-400);

                        &:first-child {
                            border-top: none;
                        }

                        & a {
                            position: relative;
                            font-size: var(--fs-400);
                            color: var(--clr-neutral-100) !important;
                            text-decoration: none;
                            opacity: 1;

                            &:before {
                                content: "\2014";
                                position: absolute;
                                left: 1px;
                                top: 9px;
                                transform: translateX(-25px) translateY(-50%);
                                color: inherit;
                                font-weight: inherit;
                                line-height: 1rem;
                                padding-right: 2px;
                            }

                            &:hover {
                                opacity: 1;
                                color: var(--clr-primary-100) !important;
                            }
                        }

                        /* Active/current states */
                        &.current-menu-item > a,
                        & a[aria-current="page"] {
                            color: var(--clr-primary-100) !important;
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .mega-dropdown {
            transition: none !important;
            transform: none !important;
        }
    }

    /* Screen-reader-only utility */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 1px, 1px) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}