/* ================================================================
   MAX MEGA MENU — CUSTOM STYLING TAB
   
   Structure targeted:
     ul.mega-sub-menu[style*="--columns:12"]           ← outer grid wrapper
       └─ li.mega-menu-column.mega-menu-columns-4-of-12  ← 3 equal columns
            └─ ul.mega-sub-menu                          ← inner list
                 └─ li.mega-menu-item                    ← widget item
                      ├─ h4.mega-block-title             ← section heading
                      └─ div.menu-*-container > ul > li  ← nav links
   
   All text: white / rgba(255,255,255,x)
   ================================================================ */


/* ----------------------------------------------------------------
   1. OUTER GRID WRAPPER
   Force the 3-column grid on the <ul> that holds the columns.
   The plugin writes style="--columns:12" on this element.
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    gap: 0 !important; /* dividers handle spacing */

    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;

    /* reset any flex the plugin sets */
    flex-direction: unset !important;
    flex-wrap: unset !important;
}


/* ----------------------------------------------------------------
   2. COLUMN  <li> ITEMS
   Each column is a <li role="presentation"> inside the grid.
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column {
    display: block !important;
    float: none !important;
    width: auto !important; /* let grid control width */
    max-width: none !important;
    min-width: 0 !important; /* prevent blowout */
    padding: 1.75rem 1.5rem !important;
    box-sizing: border-box !important;

    /* vertical divider between columns */
}


/* ----------------------------------------------------------------
   3. INNER SUB-MENU  <ul>  (one per column)
   Needs to be a plain vertical flex list — NOT inherit the outer grid.
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column > ul.mega-sub-menu {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


/* ----------------------------------------------------------------
   4. WIDGET ITEM wrapper  (li.mega-menu-item inside each column)
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a {
    display: block !important;
    width: 100% !important;
    padding: 0.35rem 0 !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    white-space: normal !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 1) !important;
    text-decoration: none !important;

    transition: color 0.15s ease,
    padding-left 0.15s ease !important;
}


/* ----------------------------------------------------------------
   5. SECTION HEADINGS  h4.mega-block-title
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] .mega-block-title {
    display: block !important;
    margin: 1rem 0 1rem 0 !important;
    padding: 0 0 0 0 !important;
    /*   border-bottom:  1px solid rgba(255, 255, 255, 0.25) !important; */

    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    color: var(--color7) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}


/* ----------------------------------------------------------------
   6. NAV CONTAINERS  .menu-find-container etc.
   ---------------------------------------------------------------- */
.menu-find-container,
.menu-do-container,
.menu-learn-container {
    display: block !important;
    width: 100% !important;
}

.menu-find-container ul,
.menu-do-container ul,
.menu-learn-container ul {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


/* ----------------------------------------------------------------
   7. INDIVIDUAL LIST ITEMS
   ---------------------------------------------------------------- */
.menu-find-container .menu-item,
.menu-do-container .menu-item,
.menu-learn-container .menu-item {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ----------------------------------------------------------------
   8. LINKS  — white text, subtle hover
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a {
    display: block !important;
    width: 100% !important;
    padding: 0.35rem 0 !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    white-space: normal !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 1) !important;
    text-decoration: none !important;

    transition: color 0.15s ease,
    padding-left 0.15s ease !important;
}

/* Hover / focus */
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a:hover,
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a:focus-visible {
    color: var(--color3) !important;
    padding-left: 0 !important;
    outline: none !important;
}

/* Active / current page */
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a[aria-current="page"] {
    color: var(--color3) !important;
    font-weight: 600 !important;
}


/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Tablet (≤ 1024px) — 2 columns, last column spans full width */
@media (max-width: 1024px) {
    ul.mega-sub-menu[style*="--columns:12"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:first-child {
        /*     border-right:  1px solid rgba(255, 255, 255, 0.12) !important; */
        /*     border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; */
    }

    ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:nth-child(2) {
        border-right: none !important;
        /*     border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; */
    }

    ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:last-child {
        grid-column: 1 / -1 !important;
        border-right: none !important;
        border-bottom: none !important;
    }
}

/* Mobile (≤ 768px) — single column stack */
@media (max-width: 768px) {
    ul.mega-sub-menu[style*="--columns:12"] {
        grid-template-columns: 1fr !important;
    }

    ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        padding: 1.25rem 0rem !important;
    }

    ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:first-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:last-child {
        grid-column: auto !important;
        border-bottom: none !important;
    }

    .menu-find-container a,
    .menu-do-container a,
    .menu-learn-container a {
        font-size: 18px;
    !important;
        padding: 0.45rem 0rem !important;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        background: var(--color8);
        width: 100vw;
        max-width: fit-content !important;
        opacity: 1 !important;
    }
}

/* Very small (≤ 480px) */
@media (max-width: 480px) {
    ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column {
        padding: 1rem 0.75rem !important;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        background: var(--color8);
        width: 100vw;
        max-width: fit-content !important;
        opacity: 1 !important;
    }
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
    width: 100%;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    background: var(--color1);
    width: 100vw;
    max-width: 100vw;
    opacity: 1 !important;
}


.mega-sub-menu {
    opacity: 1 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    color: var(--color7);
    opacity: 1 !important;
    font-size: 16px;
}

.mega-sub-menu a:hover {
    color: var(--color3) !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    font-size: 18px;
}