/**
 * Mega Menu Styles
 * Desktop: mega-menu card layout | Tablet/mobile: normal dropdown
 */


/* ===== Tablet & mobile: plain dropdown, no cards ====================== */

@media (max-width: 1024px) {

    .submenu-image,
    .submenu-button {
        display: none !important;
    }

}


/* ===== Desktop: mega-menu card layout ================================ */

@media (min-width: 1025px) {

    :root {
        --submenu-panel-bg: #ffffff;
        --submenu-card-border: #7ab648;
        --submenu-title: #10256b;
        --submenu-accent: #1eb100;
        --submenu-accent-hover: #199400;
        --submenu-max-width: 1140px;
    }


    /* ---- Parent li: static so submenu positions relative to header ---- */

    .hfe-nav-menu .menu-item-has-children {
        position: static !important;
    }


    /* ---- Submenu: hidden by default ---- */

    .hfe-nav-menu .sub-menu {
        display: none !important;
        position: absolute !important;
        top: calc(100% - 2px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: min(
            var(--submenu-max-width),
            calc(100vw - 40px)
        ) !important;

        max-width: none !important;
        min-width: 0 !important;

        background: var(--submenu-panel-bg) !important;

        border: 0 !important;
        border-radius: 16px !important;

        padding: 24px !important;

        box-shadow: 0 18px 40px rgba(0, 0, 0, .18) !important;

        /*
         * Changed from 10px to 0.
         * Prevents a hover gap between the parent menu item
         * and the mega menu.
         */
        margin-top: 0 !important;

        z-index: 9999 !important;
    }


    /* ---- OPEN ONLY WHEN THE PARENT MENU ITEM IS ACTUALLY HOVERED ---- */

    .hfe-nav-menu .menu-item-has-children:hover > .sub-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 24px !important;
        justify-content: center !important;
        align-items: stretch !important;
    }


    /* ---- Each card - HORIZONTAL LAYOUT ---- */

    .hfe-nav-menu .sub-menu .menu-item.submenu-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        flex: 1 1 280px !important;

        max-width: 360px !important;
        width: auto !important;
        min-width: 200px !important;

        background: #fff !important;

        border: 1px solid var(--submenu-card-border) !important;

        padding: 18px !important;

        margin: 0 !important;

        list-style: none !important;

        transition:
            all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }


    /* ---- Card hover ---- */

    .hfe-nav-menu .sub-menu .menu-item.submenu-card:hover {
        border-bottom-left-radius: 30px !important;

        transform: translateY(-4px) !important;

        box-shadow:
            0 8px 25px rgba(0, 0, 0, 0.12) !important;

        border-color: var(--submenu-accent) !important;
    }


    /* ---- Card image ---- */

    .hfe-nav-menu
    .sub-menu
    .menu-item.submenu-card
    .submenu-image {
        order: 1 !important;

        margin: 0 0 18px 0 !important;

        width: 100% !important;

        display: block !important;

        transition:
            all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

        overflow: hidden !important;
    }


    /* ---- Image hover ---- */

    .hfe-nav-menu
    .sub-menu
    .menu-item.submenu-card:hover
    .submenu-image {
        border-bottom-left-radius: 30px !important;
    }


    /* ---- Card title/link ---- */

    .hfe-nav-menu
    .sub-menu
    .menu-item.submenu-card
    > a {
        order: 2 !important;

        margin: 0 !important;

        padding: 0 0 20px 0 !important;

        display: block !important;

        flex-grow: 0 !important;

        color: var(--submenu-title) !important;

        font-size: 22px !important;

        line-height: 1.28 !important;

        font-weight: 400 !important;

        text-transform: none !important;

        text-decoration: none !important;

        white-space: normal !important;

        letter-spacing: normal !important;

        transition: color 0.3s ease !important;
    }


    /* ---- Card title hover ---- */

    .hfe-nav-menu
    .sub-menu
    .menu-item.submenu-card
    > a:hover,

    .hfe-nav-menu
    .sub-menu
    .menu-item.submenu-card
    > a:focus {
        background: none !important;

        color: var(--submenu-accent) !important;
    }


    /* ---- Submenu button container ---- */

    .hfe-nav-menu
    .sub-menu
    .menu-item.submenu-card
    .submenu-button {
        order: 3 !important;

        margin-top: auto !important;

        width: 100% !important;

        display: block !important;

        padding-top: 10px !important;
    }


    /* ---- Submenu card image ---- */

    .hfe-nav-menu
    .sub-menu
    .menu-item.submenu-card
    .submenu-image
    img {
        display: block !important;

        width: 100% !important;

        height: auto !important;

        aspect-ratio: 16 / 10 !important;

        object-fit: cover !important;

        transition:
            all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }


    /* ---- Image hover zoom ---- */

    .hfe-nav-menu
    .sub-menu
    .menu-item.submenu-card:hover
    .submenu-image
    img {
        border-bottom-left-radius: 30px !important;

        transform: scale(1.02) !important;
    }


    /* ---- Button container alignment ---- */

    .hfe-nav-menu
    .sub-menu
    .menu-item.submenu-card
    .submenu-button {
        display: flex !important;

        align-items: flex-start !important;
    }


    /* ---- Green button ---- */

    .menu-button {
        display: inline-flex !important;

        align-items: center !important;

        gap: 8px !important;

        padding: 12px 24px !important;

        background-color: var(--submenu-accent) !important;

        color: #ffffff !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        letter-spacing: .09em !important;

        text-transform: uppercase !important;

        text-decoration: none !important;

        line-height: 1 !important;

        border: none !important;

        border-radius: 50px !important;

        transition: all 0.3s ease !important;

        cursor: pointer !important;

        min-height: 44px !important;

        white-space: nowrap !important;
    }


    /* ---- Button icon ---- */

    .menu-button .button-icon {
        display: inline-flex !important;

        align-items: center !important;

        line-height: 0 !important;

        flex-shrink: 0 !important;
    }


    .menu-button .button-icon img {
        width: 12px !important;

        height: 12px !important;

        display: block !important;

        transition: transform 0.3s ease !important;
    }


    /* ---- Button text ---- */

    .menu-button .button-text {
        display: inline-block !important;

        white-space: nowrap !important;
    }


    /* ---- Button hover ---- */

    .menu-button:hover,

    .menu-button:focus {
        background-color: var(--submenu-accent-hover) !important;

        color: #ffffff !important;

        text-decoration: none !important;

        transform: translateY(-2px) !important;

        box-shadow:
            0 4px 12px rgba(30, 177, 0, 0.3) !important;
    }


    /* ---- Button icon hover ---- */

    .menu-button:hover .button-icon img {
        transform: translateX(4px) !important;
    }


    /* ---- Remove default submenu item padding ---- */

    .hfe-nav-menu .sub-menu .menu-item {
        padding: 0 !important;
    }


    /* ---- Keep submenu buttons visible ---- */

    .hfe-nav-menu
    .sub-menu
    .menu-item
    .submenu-button {
        display: flex !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    .hfe-nav-menu
    .sub-menu
    .menu-item
    .menu-button {
        display: inline-flex !important;

        visibility: visible !important;

        opacity: 1 !important;
    }

}


/* ---- Fix for cards without buttons to maintain alignment ---- */

.hfe-nav-menu
.sub-menu
.menu-item.submenu-card:not(:has(.submenu-button))
.submenu-image {
    margin-bottom: 0 !important;
}


.hfe-nav-menu
.sub-menu
.menu-item.submenu-card:not(:has(.submenu-button))
> a {
    padding-bottom: 0 !important;
}