/** Push menu onto new line **/ 
#{$wrap} { 
    clear: both; 
}

/***** Main Site Menu Styles *****/
.header-main__container-left .main-menu__mega-sub-wrapper {
    padding: var(--l-spacing) calc(var(--s-spacing) / 2) var(--s-spacing);
    background: white;
    box-shadow: var(--box-shadow);
    position: relative;
}

.header-main__container-left .mega-menu__custom-title {
    background-color: var(--neoblue);
    color: white;
    width: auto;
    max-width: unset;
    min-width: 0;
    min-height: 0;
    max-height: unset;
    padding: .5rem 1.5rem;
    margin: 0;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.header-main__container-left .mega-menu__custom-title h3 {
    font-size: .875rem !important;
    font-weight: var(--light) !important;
    text-transform: uppercase !important;
}

.header-main__container-left #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
    font-weight: var(--regular) !important;
}

.header-main__container-left #mega-menu-wrap-theme-header #mega-menu-theme-header a.mega-menu-link .mega-description-group .mega-menu-description {
    max-width: unset !important;
}

/***** Inner Siter Menu Styles *****/
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-item > a.mega-menu-link:hover,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-item.mega-current-menu-item .mega-menu-title,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
	font-weight: 600 !important;
}

.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-has-description > a.mega-menu-link {
	line-height: 0 !important;
}

.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	line-height: 36px !important;
}

.mega-menu-description {
    max-width: 275px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
	font-size: 12px !important;
	font-style: normal !important;
	color: #525252 !important;
}

/* Apply Hover Styling to active Mega Menu - Second Level Links */
.header-inner__menu-wrapper #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-inner__menu-wrapper #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
    color: $panel_second_level_font_color_hover;
    font-weight: 600 !important;
    text-decoration: $panel_second_level_text_decoration_hover;
    @include background($panel_second_level_background_hover_from, $panel_second_level_background_hover_to);
}

/* Apply Hover Styling to active Mega Menu - Third Level Links */
.header-inner__menu-wrapper #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-inner__menu-wrapper #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
    color: $panel_third_level_font_color_hover;
    font-weight: 600 !important;
    text-decoration: $panel_third_level_text_decoration_hover;
    @include background($panel_third_level_background_hover_from, $panel_third_level_background_hover_to);
}

/* Apply Hover Styling to active Flyout Links and ancestors */
.header-inner__menu-wrapper #{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-inner__menu-wrapper #{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.header-inner__menu-wrapper #{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    @include background($flyout_background_hover_from, $flyout_background_hover_to);
    font-weight: 600 !important;
    text-decoration: $flyout_link_text_decoration_hover;
    color: $flyout_link_color_hover;
}

.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu {
	padding: 16px 24px !important;
}

.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:active {
	background: white !important;
}

.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a:hover {
	position: relative !important;
}

/* Estilos base del triángulo */
/* Asegúrate de que el enlace esté posicionado relativamente */
.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a {
	position: relative !important;
}

.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link > .mega-indicator:after {
	visibility: hidden !important;
}

/* Estilos base para los triángulos */
.header-inner__menu-wrapper .triangle-before, .triangle-after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0) !important; /* Inicialmente escalado a 0 para ocultar */
    border-width: 18px 0 18px 12px !important;
    border-style: solid !important;
    transition: border-width 200ms linear, border-color 200ms linear, transform 200ms ease !important;
    opacity: 0; /* Inicialmente invisible */
    z-index: 10 !important; /* Asegura que esté encima de otros elementos */
}

/* Estilo para el primer triángulo */
.header-inner__menu-wrapper .triangle-before {
    left: 100% !important;
    border-color: transparent transparent transparent white !important; /* Color del primer triángulo (blanco) */
}

/* Estilo para el segundo triángulo */
.header-inner__menu-wrapper .triangle-after {
    left: calc(100% + 16px) !important; /* Desplazado 16px a la derecha del primer triángulo */
    border-color: transparent transparent transparent var(--neowhite) !important; /* Color del segundo triángulo */
}

/* Estilo al hacer hover */
.header-inner__menu-wrapper .menu-item-hover .triangle-before, .menu-item-hover .triangle-after {
    transform: translateY(-50%) scale(1) !important; /* Escala 1 para mostrar el triángulo */
    opacity: 1 !important; /* Visible */
}


/* Menu Custom Titles */
.header-inner__menu-wrapper .mega-menu__custom-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 720px;
    min-width: calc(360px - (24px * 2));
    min-height: 50px;
    max-height: 50px;
    text-align: center;
    margin: 4px 0 16px;
}

.header-inner__menu-wrapper .mega-menu__custom-title .mega-menu__custom-title-icon {
    width: 100% !important;
    max-width: 55px !important;
    height: 100% !important;
    max-height: 55px !important;
}

.header-inner__menu-wrapper .mega-menu__custom-title h3 {
    font-size: var(--bigtext) !important;
    font-weight: var(--light) !important;
    text-align: left !important;
}

.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-6-of-12 {
    margin-top: 70px !important;
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    /***** Main Site Menu Styles *****/
    .header-main__container-left .main-menu__mega-sub-wrapper {
        padding: 0 calc(var(--s-spacing) / 2);
        background: white;
        position: relative;
        box-shadow: none;
    }

    .header-main__container-left .mega-menu__custom-title {
        display: none;
    }

    /***** Inner Sites Menu Styles *****/
    .header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu {
        padding: 8px !important;
    }

	.header-inner__menu-wrapper .mega-menu-description {
		display: none !important;
	}

    .header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-has-description > a.mega-menu-link {
        line-height: unset !important;
    }
	
	.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link > .mega-indicator:after {
		visibility: visible !important;
	}
	
	.header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
		font-size: 24px !important;
	}
	
	.header-inner__menu-wrapper #mega-menu-theme-header {
		margin-top: 10px !important;
	}

    /* Menu Custom Titles */
    .header-inner__menu-wrapper .mega-menu__custom-title {
        max-width: 100%;
        min-width: 100%;
        margin: 8px 0 16px;
    }

    .header-inner__menu-wrapper #mega-menu-wrap-theme-header #mega-menu-theme-header li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-6-of-12 {
        margin-top: 0px !important;
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    /***** Main Site Menu Styles *****/

    /***** Inner Sites Menu Styles *****/
    .header-inner__menu-wrapper .mega-menu-column.mega-menu-columns-5-of-12.mega-menu-clear {
        display: none !important;
    }

    .header-inner__menu-wrapper .mega-menu__custom-title .mega-menu__custom-title-icon {
        width: 100% !important;
        max-width: 45px !important;
        height: 100% !important;
        max-height: 45px !important;
    }
}