/**
*
* Hamburger Trigger Button
* Visual styling, internal spans, and programmatic transform matrices for active toggle states
*
**/
/**
*
* Hamburger Trigger Button
* Visual styling, internal spans, and programmatic transform matrices for active toggle states
*
**/
#custom-hamburger {
    gap: 6px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;  
    height: 40px;
    padding: 8px;
    z-index: 9999;
    cursor: pointer;
    background: none;
    border: none;

    align-self: center; 
    margin-top: auto;
    margin-bottom: auto;
    
    span {
        display: block;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background: #1d1d1b;
        transform-origin: center;
        transition: transform 0.3s ease;
    }

    &.is-open {
        span:nth-child(1) {
            transform: translateY(4px) rotate(45deg);
        }
        
        span:nth-child(2) {
            transform: translateY(-4px) rotate(-45deg);
        }
    }
}

#wiz_header {
    flex-direction: row;
}

/**
*
* Fullscreen Navigation Overlay
* Primary modal drawer layout, multi-tiered typography settings, submenus, and responsive media items
*
**/
#custom-mobile-menu {
    position: fixed;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    inset: 0;
    opacity: 0;
    z-index: 9998;
    overflow-y: auto;
    background: #fff;
    pointer-events: none;
    transition: opacity 0.3s ease;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li.cmm-has-sub {
            border-bottom: 1px solid #ddd;

            div.cmm-top-link {
                margin: 16px;
                font-size: 18px;
                font-weight: 500;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .cmm-arrow {
                    width: 20px;
                    height: 20px;
                    margin-right: 10px;
                }
            }

            div.cmm-submenu {
                display: none;

                li.cmm-submenu-heading {
                    color: #676767;
                    font-size: 10px;
                    font-weight: 500;
                    margin-left: 2rem;
                    text-transform: uppercase;

                    &:not(:first-of-type) {
                        margin-top: 2rem;
                    }
                }

                ul {
                    gap: 4px;
                    display: flex;
                    margin-left: 2rem;
                    margin-top: 0.5rem;
                    flex-direction: column;
                    
                    li a {
                        border: none;
                        color: #333;
                        display: block;
                        padding: 4px 0;
                        font-size: 14px;
                        margin-left: 1rem;
                    }
                }

                ul:has(img) {
                    display: grid;
                    margin-right: 16px;
                    grid-template-columns: 1fr 1fr;
                    
                    img {
                        aspect-ratio: 1;
                        object-fit: cover;
                        margin-bottom: -12px;
                    }

                    p {
                        margin-block-start: 20px;
                    }
                }

                &.is-open {
                    display: block;
                    margin-bottom: 2rem;
                }
            }

            &.is-open {
                div.cmm-top-link {
                    .cmm-arrow {
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }

    &.is-open {
        opacity: 1;
        pointer-events: all;
    }
}

/**
*
* Micro-Utilities & Text Links
* Isolated link alignments, global structural parameters, and inline SVG corrections
*
**/
a.small-text-link {
    gap: 8px !important;
    display: flex !important;

    p {
        margin: 0 !important;
        margin-block-start: 0 !important;
    }
    
    svg {
        width: 18px;
        height: 18px;
    }
}

/**
*
* Responsive Layout Configuration
* Dit staat nu onderaan zodat het de desktop-instellingen correct overschrijft.
*
**/
@media (max-width: 1024px) {
    /* Hide the default mobile-menu from Elementskit */
    .elementskit-menu-hamburger,
    .elementskit-menu-container,
    .ekit-nav-identity-bar {
        display: none !important;
    }

    /* Activeer onze eigen hamburger */
    #custom-hamburger {
        display: flex !important;
    }
}