/* ==========================================================================
   ui.css 
   Bevat: menu's, knoppen, iconen en andere UI componenten
   ========================================================================== */



.video-loader {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px; /* Dikte van het streepje */
    background: var(--color-horizon);
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 20;
}

.video-loader.is-loading {
    opacity: 1;
    animation: loadingBar 2s infinite ease-in-out;
}

@keyframes loadingBar {
    0% { transform: scaleX(0); transform-origin: left; }
    49% { transform: scaleX(1); transform-origin: left; }
    50% { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}


/* === HAMBURGER MENU === */
.menu-container {
    position: absolute;
    z-index: 10;
    left: 0; top: 0;
    --layer-color: var(--color-donkergroen);
    width: calc(var(--btn-height) * 1); /* Beginbreedte */
    height: calc(var(--btn-height) * 1); /* Beginhoogte */
    border-radius: calc(var(--btn-height) / 2);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: var(--color-wit);
}

.menu-container.is-open {
    width: 14em;
    height: 18em;
    border-radius: var(--border-radius);
}

.hamburger-btn {
            height: var(--btn-height);
            width: var(--btn-height);
            font-size: unset;
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            z-index: 10;
        }

        .hamburger-btn div {
            height: 33%;
            width: 45%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
        }

        .hamburger-btn span {
            display: block;
            border-bottom: white solid var(--line-thickness);
            background-color: var(--color-wit);
            transition: all 0.3s ease;
        }

        .hamburger-btn span:nth-child(1) { width: 100%; }
        .hamburger-btn span:nth-child(2) { width: 50%; } 
        .hamburger-btn span:nth-child(3) { width: 100%; }

        .menu-container.is-open .hamburger-btn span:nth-child(1) { opacity: 0; transform: translateY(0.4em); }
        /* .menu-container.is-open .hamburger-btn span:nth-child(2) { width: 1.2em; } */
        .menu-container.is-open .hamburger-btn span:nth-child(3) { opacity: 0; transform: translateY(-0.4em); }
        
.menu-links {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    padding: 1em 1.5em;
    gap: 1em;
    transition: opacity 0.3s ease;

    & .cta-liquid-wrapper {
        position: relative;
        right: 0; top: 1em;
        justify-content: flex-start;
        width: auto;

    }
}

.menu-container.is-open .menu-links {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.2s;
}

.menu-links a {
    color: var(--color-wit);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
}
/* .menu-links a:hover { opacity: 0.7; } */

/* === GOOEY SPLIT BUTTON === */
.cta-liquid-wrapper {
    --main-btn-width: 6.8em; 
    --split-offset: -3.2em; /* Minder ver uit elkaar, pas aan indien nodig */
    position: absolute; right: 0; top: 0;
    height: var(--btn-height); width: 10em; 
    display: flex; justify-content: flex-end;
    z-index: 20;
    outline: none;
}

/* Gooey achtergrond laag */
.cta-goo-container {
    position: absolute; top: 0; right: 0; 
    width: 100%; height: 100%;
    filter: url(#goo);
    pointer-events: none;
    opacity: 0.85;
    mix-blend-mode: lighten;
}

.goo-bg {
    position: absolute; right: 0; top: 0;
    height: var(--btn-height);
    background-color: var(--color-horizon);
    border-radius: calc(var(--btn-height) / 2);
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.goo-main-bg { width: var(--main-btn-width); z-index: 2; transform: translateX(0); }
.goo-mail-bg { width: var(--btn-height); z-index: 1; transform: translateX(0); }

/* Inhoud (Klikbaar, wordt niet geblurred door filter) */
.cta-content {
    position: absolute; right: 0; top: 0;
    height: var(--btn-height);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-wit); text-decoration: none;
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.cta-main { 
    width: var(--main-btn-width); z-index: 4; cursor: pointer; 
}
.cta-mail { 
    width: var(--btn-height); z-index: 3; transform: translateX(0); opacity: 0; pointer-events: none; 
    background: url(../img/mail.svg) center no-repeat;
    background-size: 1em;
}

/* Tekst & WhatsApp Icon in de hoofdknop */
.cta-text { 
    position: absolute; 
    transition: opacity 0.25s ease 0.3s; /* Delay zodat tekst pas verdwijnt na start animatie */
}
.cta-icon-wa { 
    position: absolute; 
    width: 80%; 
    height: 80%; 
    opacity: 0; 
    pointer-events: none; 
    background: url(../img/whatsapp.svg) center no-repeat;
    background-size: 1.2em;
    transition: opacity 0.3s ease; 
}

/* === HOVER & TAP ACTIES === */

/* 1. Hoofd achtergrond krimpt naar een rondje */
.cta-liquid-wrapper.is-active .goo-main-bg, 
.cta-liquid-wrapper:hover .goo-main-bg, 
.cta-liquid-wrapper:focus-within .goo-main-bg { 
    width: var(--btn-height); 
}

/* 2. Mail achtergrond schiet naar links */
.cta-liquid-wrapper.is-active .goo-mail-bg, 
.cta-liquid-wrapper:hover .goo-mail-bg, 
.cta-liquid-wrapper:focus-within .goo-mail-bg { 
    transform: translateX(var(--split-offset)); 
}

/* 3. Hoofd inhouds-container krimpt mee */
.cta-liquid-wrapper.is-active .cta-main, 
.cta-liquid-wrapper:hover .cta-main, 
.cta-liquid-wrapper:focus-within .cta-main { 
    width: var(--btn-height); 
}

/* 4. Mail icoon schiet mee met achtergrond en wordt zichtbaar */
.cta-liquid-wrapper.is-active .cta-mail, 
.cta-liquid-wrapper:hover .cta-mail, 
.cta-liquid-wrapper:focus-within .cta-mail { 
    transform: translateX(var(--split-offset)); 
    opacity: 1; 
    pointer-events: auto; /* Maakt de link klikbaar */
}

/* 5. Wissel Tekst voor WhatsApp Icoon in de hoofdknop */
.cta-liquid-wrapper.is-active .cta-text, 
.cta-liquid-wrapper:hover .cta-text, 
.cta-liquid-wrapper:focus-within .cta-text { 
    opacity: 0; 
    transition-delay: 0s; 
}

.cta-liquid-wrapper.is-active .cta-icon-wa, 
.cta-liquid-wrapper:hover .cta-icon-wa, 
.cta-liquid-wrapper:focus-within .cta-icon-wa { 
    opacity: 1; 
    pointer-events: auto; /* Maakt WA klikbaar */
    transition-delay: 0.2s; /* Laat icon pas verschijnen als knop wat gekrompen is */
}













.btn {
    height: var(--btn-height);
	width: var(--btn-height);
    border-radius: calc(var(--btn-height) / 2);
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
	background: var(--color-horizon) center no-repeat;
    
    
    &.hover {
       transform: scale(1.1);

    }

    &.active {
        transform: scale(0.9);
    }
}

.btn.adres {background-image: url('../img/locatie.svg');}
.btn.maps {background-image: url('../img/maps.svg');}
.btn.mail {background-image: url('../img/mail.svg');}
.btn.foon {background-image: url('../img/foon.svg');}
.btn.whatsapp {background-image: url('../img/whatsapp.svg');}
.btn.instagram {background-image: url('../img/instagram.svg');}


form button {
    background: var(--color-horizon);
    font-size: var(--font-size-small);
    color: var(--color-wit);
    border: none;
    padding: 0.25em 1em 0.5em 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.send{
    width: auto !important;
}


#contact form,
#contact form input,
#contact form textarea,
#contact form button {
   color: var(--color-wit);
}

#contact form {
    border: 1px solid var(--color-horizon); 
    padding: 1.5em; 
    border-radius: .2em;
}
input {
    width: 100%; 
    border: none; 
    border-bottom: 1px solid var(--color-skyline); 
    background: transparent; outline: none; margin-bottom: 1em; padding: 0.5em 0;
}

#hidden-fields {
    display: none; 
    transition: opacity 0.5s ease; 
    opacity: 0;
    
}

#contact textarea {
    width: 100%; 
    border: none; 
    border-bottom: 1px solid var(--color-zeegroen); 
    background: transparent; outline: none; margin-bottom: 1em; 
    padding: 0.5em 0;
}

#contact textarea {
    width: 100%; border: none; border-bottom: 1px solid var(--color-skyline); background: transparent; outline: none; resize: none; margin-bottom: 1rem;
}

.placeholder {
    margin-top: 0;
    margin-bottom: 1em;
    font-style: italic;
    color: var(--color-wit);
}

#hidden-fields input::placeholder {

    font-style: italic;
    color: var(--color-wit);
}