/**
 * Astra Mega Menu
 * Mega menu width should be set to "Full Width" in Astra Mega Menu options
 * and assign a column class in top level menu items
 */

/* ==========================================================================
   #VARIABLES
   ========================================================================== */
:root {
    interpolate-size: allow-keywords;
    --mm-two-col: 2;    /* mm-two-col class for wordpress menu top level item */
    --mm-three-col: 3;  /* mm-three-col class for wordpress menu top level item */
    --mm-four-col: 4;   /* mm-four-col class for wordpress menu top level item */
    --mm-image-width: 528px;
    --main-menu-border-radius: 24px;
    --transition-duration: 0.2s;
    --transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

/* ==========================================================================
   #BASE STYLES
   ========================================================================== */

/* Header bar styles */
#ast-desktop-header .main-header-bar {
    background: #FFF;
    border-radius: 0 0 var(--main-menu-border-radius) var(--main-menu-border-radius);
    transition: all var(--transition-duration) linear,
                border-radius var(--transition-duration) var(--transition-timing-function);
}

#ast-desktop-header.mm-active .main-header-bar {
    border-radius: 0;
}

/* Header row styles */
#ast-desktop-header .site-primary-header-wrap > .ast-builder-grid-row {
    box-shadow: 0 1px 0 transparent;
    transition: box-shadow var(--transition-duration) linear;
}

#ast-desktop-header.mm-active .site-primary-header-wrap > .ast-builder-grid-row {
    box-shadow: 0 1px 0 var(--color-secondary, #F7941D);
}

/* ==========================================================================
   #MEGAMENU WRAPPER
   ========================================================================== */

/* Base megamenu wrapper */
#ast-desktop-header .astra-full-megamenu-wrapper {
    z-index: -1;
    left: 0;
    max-height: 0;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    padding: 0 24px;
    margin: 0;
    border: none;
    border-radius: 0 0 var(--main-menu-border-radius) var(--main-menu-border-radius);
    transition: max-height var(--transition-duration) var(--transition-timing-function),
                transform var(--transition-duration) var(--transition-timing-function);
    transform: translateY(calc(var(--main-menu-border-radius) * -1));
}

@supports (interpolate-size: allow-keywords) {
    #ast-desktop-header .astra-full-megamenu-wrapper {
        max-height: unset;
        overflow: unset;
        height: 0;
        overflow: clip;
        transition: height var(--transition-duration) var(--transition-timing-function),
                    transform var(--transition-duration) var(--transition-timing-function);
    }
}

/* Megamenu with image */
#ast-desktop-header .astra-full-megamenu-wrapper.has-image {
    display: flex;
    column-gap: clamp(48px, 156px, 8vw);
}

/* Hover states */
#ast-desktop-header .astra-megamenu-li:hover .astra-full-megamenu-wrapper {
    max-height: 1000px;
    transform: translateY(0);
}

@supports (interpolate-size: allow-keywords) {
    #ast-desktop-header .astra-megamenu-li:hover .astra-full-megamenu-wrapper {
        max-height: unset;
        height: max-content;
    }
}

#ast-desktop-header .astra-megamenu-li:hover .astra-full-megamenu-wrapper .mega-menu-image,
#ast-desktop-header .astra-megamenu-li:hover .astra-full-megamenu-wrapper::before {
    opacity: 1;
}

/* ==========================================================================
   #MEGAMENU IMAGE
   ========================================================================== */

#ast-desktop-header .astra-full-megamenu-wrapper .mega-menu-image {
    flex: 1 1 var(--mm-image-width);
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-timing-function);
    transition-delay: var(--transition-duration);
}

#ast-desktop-header .astra-full-megamenu-wrapper .mega-menu-image figcaption {
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}

#ast-desktop-header .astra-full-megamenu-wrapper .mega-menu-image img {
    width: 100%;
    max-width: var(--mm-image-width);
    border-radius: 40px;
}

/* ==========================================================================
   #MEGAMENU LAYOUTS
   ========================================================================== */

/* Column layouts */
#ast-desktop-header .mm-two-col .astra-full-megamenu-wrapper > .astra-megamenu.sub-menu,
#ast-desktop-header .mm-three-col .astra-full-megamenu-wrapper > .astra-megamenu.sub-menu,
#ast-desktop-header .mm-four-col .astra-full-megamenu-wrapper > .astra-megamenu.sub-menu {
    display: block;
    position: static;
    margin: 0;
    visibility: visible;
    overflow: hidden;
    transition: opacity var(--transition-duration) var(--transition-timing-function);
    transition-delay: var(--transition-duration);
}

#ast-desktop-header [class*="mm-"] .astra-full-megamenu-wrapper > .astra-megamenu.sub-menu > li + li.menu-item-has-children {
    margin-bottom: 32px;
}

/* Two column layout */
#ast-desktop-header .mm-two-col .astra-full-megamenu-wrapper > .astra-megamenu.sub-menu {
    column-count: var(--mm-two-col);
}

/* Three column layout */
#ast-desktop-header .mm-three-col .astra-full-megamenu-wrapper > .astra-megamenu.sub-menu {
    column-count: var(--mm-three-col);
}

/* Four column layout */
#ast-desktop-header .mm-four-col .astra-full-megamenu-wrapper > .astra-megamenu.sub-menu {
    column-count: var(--mm-four-col);
}

/* Common column styles */
#ast-desktop-header .mm-two-col .astra-full-megamenu-wrapper > *,
#ast-desktop-header .mm-three-col .astra-full-megamenu-wrapper > *,
#ast-desktop-header .mm-four-col .astra-full-megamenu-wrapper > * {
    padding-top: 24px;
    padding-bottom: 34px;
}

#ast-desktop-header .mm-two-col .astra-full-megamenu-wrapper > .astra-megamenu > .menu-item,
#ast-desktop-header .mm-three-col .astra-full-megamenu-wrapper > .astra-megamenu > .menu-item,
#ast-desktop-header .mm-four-col .astra-full-megamenu-wrapper > .astra-megamenu > .menu-item {
    display: block;
    opacity: 1;
    visibility: visible;
    padding: 0;
    margin: 0;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

/* Full width menu items when no image */
#ast-desktop-header .mm-two-col .astra-full-megamenu-wrapper:not(.has-image) > .astra-megamenu.sub-menu,
#ast-desktop-header .mm-three-col .astra-full-megamenu-wrapper:not(.has-image) > .astra-megamenu.sub-menu,
#ast-desktop-header .mm-four-col .astra-full-megamenu-wrapper:not(.has-image) > .astra-megamenu.sub-menu {
    min-width: 100%;
}

/* ==========================================================================
   #MISCELLANEOUS
   ========================================================================== */

/* Hide sub-menu arrows */
#ast-desktop-header .main-header-menu > .menu-item .sub-menu:before {
    content: none;
}

/* Image with submenu layout */
#ast-desktop-header .astra-full-megamenu-wrapper .mega-menu-image ~ .astra-megamenu.sub-menu,
#ast-desktop-header .astra-full-megamenu-wrapper .mega-menu-image + .astra-megamenu.sub-menu {
    flex: 1 1 calc(100% - var(--mm-image-width));
}

/* Astra menu animation */
#ast-desktop-header .astra-menu-animation-slide-down > .menu-item > .astra-full-megamenu-wrapper,
#ast-desktop-header .astra-menu-animation-slide-down > .menu-item > .sub-menu,
#ast-desktop-header .astra-menu-animation-slide-down > .menu-item > .sub-menu .sub-menu {
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}

/* Menu divider
#ast-desktop-header .astra-full-megamenu-wrapper::before {
    content: "";
    display: block;
    border-bottom: 1px solid var(--color-secondary);
    width: calc(100% - 48px);
    margin: auto;
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-timing-function);
    position: absolute;
    top: 1px;
    right: 0;
    left: 0;
}*/

/* ==========================================================================
   #MEDIA QUERIES
   ========================================================================== */
@media (min-width: 1280px) {
    #ast-desktop-header .astra-megamenu-li[class*="mm-"] .astra-full-megamenu-wrapper:not(.has-image) > ul.sub-menu {
        min-height: 300px;
        max-width: 1412px;
        min-width: unset !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }
}