/*
 * Unifor Multi-Column Menu Styles
 * Posten.no inspired fullscreen menu layout
 * 
 * @since 1.0.0
 * @author Kamy - 2026
 */

/*-------------------------------------------
 * Posten-Style Multi-Column Menu
 * Full-width white background with organized columns
 *-------------------------------------------*/

/* ===============================================
   FULLSCREEN MENU CONTAINER
   =============================================== */

/* Default position (header not fixed) */
body.et_pb_fullscreen_menu_active.admin-bar .et_slide_in_menu_container{
    top: 112px !important;
}
body.et_pb_fullscreen_menu_active:not(.admin-bar) .et_slide_in_menu_container{
    top: 80px !important;
}

/* When header is fixed (has et-fixed-header class) */
body.has-et-fixed-header.et_pb_fullscreen_menu_active.admin-bar .et_slide_in_menu_container{
    top: 80px !important;
}
body.has-et-fixed-header.et_pb_fullscreen_menu_active:not(.admin-bar) .et_slide_in_menu_container{
    top: 50px !important;
}
.et_header_style_fullscreen .et_slide_in_menu_container{
    display: none !important;
}

.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
    opacity: 1;
    visibility: visible;
    z-index: 99;
    display: block !important;
}

/* Ensure body has no blue background when menu is open */
body.et_pb_fullscreen_menu_open {
    background: #ffffff !important;
}

/* Menu container - white background, full screen */
.et_slide_in_menu_container {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
    background: #ffffff !important;
    background-color: #ffffff !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
}

.et_pb_fullscreen_menu_open .et_slide_in_menu_container {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Navigation container - ensure white background */
.et_slide_in_menu_container .et_pb_fullscreen_nav_container {
    background: #ffffff !important;
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 5% 60px;
}

/* Menu slide top section - white background */
.et_slide_in_menu_container .et_slide_menu_top {
    background: #ffffff !important;
}

/* ===============================================
   HAMBURGER MENU ICON - Change to X when open
   =============================================== */

/* Change hamburger to X icon when menu is open */
body.et_pb_fullscreen_menu_active .mobile_menu_bar:before {
    content: '\4d' !important;
}

/* ===============================================
   NAVIGATION CONTAINER
   =============================================== */

.et_slide_in_menu_container .et_pb_fullscreen_nav_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 5% 60px;
}

/* ===============================================
   MENU GRID - 4 COLUMNS
   =============================================== */
.et_header_style_fullscreen ul#mobile_menu_slide{
    height: auto ;
}
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened #mobile_menu_slide.et_mobile_menu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px 40px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}


/* ===============================================
   COLUMN HEADERS (Items with Children)
   =============================================== */

/* Remove display: block to allow grid layout to work */
#mobile_menu_slide.et_mobile_menu > .menu-item-has-children {
    /* Grid items - no display override needed */
}

#mobile_menu_slide.et_mobile_menu > .menu-item-has-children > a {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-decoration: none !important;
    margin-bottom: 20px !important;
    display: block !important;
    pointer-events: none !important;
    text-align: left !important;
   
}


/* Hide dropdown arrows on headers */
#mobile_menu_slide.et_mobile_menu > .menu-item-has-children > a .et_mobile_menu_arrow {
    display: none !important;
}

/* ===============================================
   SUB-MENU (Column Links)
   =============================================== */

#mobile_menu_slide.et_mobile_menu .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
}

#mobile_menu_slide.et_mobile_menu .menu-item-has-children .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
}

#mobile_menu_slide.et_mobile_menu .sub-menu li {
    margin-bottom: 12px !important;
    padding: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#mobile_menu_slide.et_mobile_menu .sub-menu a {
    color: #000 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    display: inline-block !important;
    transition: color 0.2s ease, border-bottom 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0px 0 2px 0;
    border-bottom: 2px solid transparent;
}

#mobile_menu_slide.et_mobile_menu .sub-menu a:hover {
    color: #8E0C3A !important;
    border-bottom: 2px solid #8E0C3A !important;
}

/* ===============================================
   ANIMATION
   =============================================== */

@keyframes unifor_menu_fade_in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.et_slide_in_menu_container .et_pb_fullscreen_nav_container {
    animation: unifor_menu_fade_in 0.3s ease-out;
}

#mobile_menu_slide.et_mobile_menu > li {
    animation: unifor_menu_fade_in 0.4s ease-out;
    animation-fill-mode: both;
}

#mobile_menu_slide.et_mobile_menu > li:nth-child(2) {
    animation-delay: 0.1s;
}

#mobile_menu_slide.et_mobile_menu > li:nth-child(3) {
    animation-delay: 0.15s;
}

#mobile_menu_slide.et_mobile_menu > li:nth-child(4) {
    animation-delay: 0.2s;
}

#mobile_menu_slide.et_mobile_menu > li:nth-child(5) {
    animation-delay: 0.25s;
}

/* ===============================================
   RESPONSIVE DESIGN
   =============================================== */

@media (max-width: 1200px) {
    #mobile_menu_slide.et_mobile_menu {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 50px 30px !important;
    }
}

@media (max-width: 980px) {
    #mobile_menu_slide.et_mobile_menu {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 30px !important;
    }
    
    .et_slide_in_menu_container .et_pb_fullscreen_nav_container {
        padding: 100px 5% 40px;
    }
}

@media (max-width: 690px) {
    .et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened #mobile_menu_slide.et_mobile_menu {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .et_slide_in_menu_container .et_pb_fullscreen_nav_container {
        padding: 100px 8% 40px;
    }
    
    #mobile_menu_slide.et_mobile_menu > .menu-item-has-children > a {
        font-size: 20px !important;
    }
}


.foundation-portal-buttons .et_pb_button {
    font-size: 15px;
    background-color: #5c001f;
    border-width: 0px !important;
    border-color: #5c001f;
    color: #f7f7f7;
}

/* Front end menu after hamburger */
.foundation-portal-active .mobile_menu_bar:before{
    color: #5c001f;
}
div#et-top-navigation {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.foundation-portal-buttons{
    display: flex;
    align-items: center;
}
.foundation-portal-buttons .et_pb_button{
    margin-right: 15px;
    font-size: 14px;
}
.foundation-portal-active.et_header_style_left .logo_container {
    position: relative;
    height: 100%;
    width: 100%;
}
.admin-portal-fw-menu-warp  #top-menu a.menu-item-main {
    display: flex;
    min-width: 150px;
    font-size: 20px;
    color: #5c001f;
    gap: 10px;
    font-weight: 500;
    padding: 0;
    justify-content: flex-end;
    align-items: flex-end;
}

@media (max-width: 980px) {
    .foundation-portal-active.et_header_style_left #et-top-navigation, 
    .foundation-portal-active.et_header_style_left .et-fixed-header #et-top-navigation {
        padding: 24px 0px !important;
        display: flex;
    }
    .foundation-portal-active.et_header_style_left #et-top-navigation .mobile_menu_bar {
        padding-bottom: 0px;
    }
    .foundation-portal-active .admin-portal-fw-menu-warp ul#top-menu {
        display: block;
    }
}

@media (max-width: 690px) {
    .et_header_style_left .logo_container {
        position: relative;
        padding: 16px 0;
    }
    span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu{
        /* position: absolute; */
        /* top: 25px; */
        /* right: 0; */
    }
    div#et-top-navigation{
        padding: 10px 0 15px 0;
    }
    .container.clearfix.et_menu_container{
        width: 90%;
        display: flex;
        /* flex-direction: column; */
    }
    .foundation-portal-buttons {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: space-between;
    }
    .foundation-portal-buttons a {
        width: 47%;
        text-align: center;
        margin: 0px !important;
    }
    .foundation-portal-active.et_header_style_left #et-top-navigation,
    .foundation-portal-active.et_header_style_left .et-fixed-header #et-top-navigation {
        padding: 10px 0px 20px 0 !important;
    }
    .admin-portal-fw-menu-warp #top-menu a.menu-item-main{
        font-size: 0px;
    }
    .admin-portal-fw-menu-warp #top-menu a.menu-item-main span.linearicons-user {
        font-size: 20px;
    }
}
@media (min-width: 690px) {
    .foundation-portal-active.et_fullwidth_nav #main-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
@media (min-width: 981px) {
    .foundation-portal-active.et_fullwidth_nav #main-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }    
}


span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu{
    width: 85px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
}
.admin-portal-fw-menu-warp ul#top-menu{
    min-height: 25px;
}

.admin-portal-fw-menu-warp #top-menu a.menu-item-main::after{
    content: none;
}

span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu::after{
    content: 'Meny';
    color: #5c001f;
    font-size: 20px;
    font-weight: 500;
    margin-right: 3px;
}
body.et_pb_fullscreen_menu_active span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu::after{
    content: 'Lukk';
}
.admin-portal-fw-menu-warp {
    margin-right: 30px;
    margin-left: 0;
}
.admin-portal-fw-menu-warp ul li:hover>ul{
    margin-top: 5px;
}