/* ======= Variables ======= */
/* :root {
  --brand-primary: #003120;
  --brand-secondary: #71B644;
  --brand-accent: #E7EDFF;
  --neutral-dark: #000;
  --neutral-light: #fff;
} */

:root {
  interpolate-size: allow-keywords;
}

/* ======= Navigation ======= */
.c-nav .menu-link::after{
    content: '' !important;
    width: 100% !important;
    height: 1px !important;
    background-color: var(--brand-primary) !important;

    position: absolute !important;
    bottom: 4px !important;
    left: 0 !important;

    opacity: 1 !important;
    transform: scaleX(0) !important;
    transform-origin: right !important;

    transition: transform 0.3s ease !important;
}

.c-nav .menu-link{
    color: var(--brand-primary) !important;
}

.c-nav__topnav .menu-link{
    color: var(--neutral-light) !important;
}
.c-nav__topnav .menu-link::after{
    background-color: var(--neutral-light) !important;
    /* bottom: 6px !important; */
}

.c-nav .menu-link:hover::after, .c-nav .current-menu-item .menu-link::after{
    transform: scaleX(1) !important;
    transform-origin: left !important;
}
.c-nav .current-menu-item .menu-link{
    font-weight: 600 !important;
}

/* ======= dropdown ======= */
.c-nav__mainnav{
    position: relative !important;
}

/* Alle tussenliggende elementen static (de header zelf niet, want we zoeken enkel binnen .c-header) */
body:not(.elementor-editor-active) .c-nav .elementor-element:has(.elementor-nav-menu--toggle),
body:not(.elementor-editor-active) .c-nav .elementor-nav-menu--toggle,
body:not(.elementor-editor-active) .c-nav .elementor-nav-menu--toggle .elementor-widget-container{
    position: static !important;
}

/* .elementor-nav-menu--toggle{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
} */

.elementor-nav-menu--dropdown{
    position: absolute;
    left: 0;
    right: 0;
    top: 101px !important;
    border-bottom: 1px solid var(--brand-primary) !important;
    margin: 0 !important;
}

@media(max-width: 576px){
    .elementor-nav-menu--dropdown{
        top: 163px !important;
    }
}

.elementor-nav-menu--dropdown .elementor-nav-menu{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 16px !important;
}

.elementor-nav-menu--dropdown .menu-item{
    width: auto !important;
}

.elementor-nav-menu--dropdown .elementor-item:hover, 
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown .elementor-item.highlighted{
    background-color: transparent !important;
    color: var(--neutral-dark) !important;
}

/* ======= Sub menu ======= */
.menu-link{
    cursor: pointer !important;
}

.sub-menu{
    width: 240px !important;
    /* background-color: hotpink !important; */
}

.elementor-sub-item{
    width: auto !important;
}
.elementor-sub-item:hover{
    width: auto !important;
    background-color: var(--brand-accent) !important;
    color: var(--brand-primary) !important;
}
/* .elementor-sub-item:hover *{
    color: var(--neutral-dark) !important;
} */

.c-nav .sub-menu .menu-link::after{
    content: none !important;
}

.elementor-sub-item.elementor-item-active{
    background-color: var(--brand-primary) !important;
    color: var(--neutral-light) !important;
}

@media(max-width: 1024px){
    .sub-menu{
        top: 0 !important;
        right: 0 !important;

        transform: translateX(50%) !important;
    }
}

/* ======= Custom Responsive ======= */
.c-responsivenav__btn{
    cursor: pointer !important;
}

.c-responsivenav__subnav{
    height: 0 !important;
    padding-bottom: all !important;
    overflow: hidden !important;

    transition: all 0.3s ease !important;
}

.c-responsivenav__subnav--active{
    height: auto !important;
    padding-bottom: 32px !important;
}