/* CSS Variabelen voor kleuren (makkelijk aanpasbaar) */
:root {
    --fiba-blue: #0054a6;
    --fiba-darkblue: #040136;
    --text-dark: #333333;
    --text-light: #ffffff;
    --background-light: #f8f9fa; /* Lichte achtergrond voor secties */
}

/* Algemene Stijlen */

/* Hamburger button styles */
.hamburger-button {
    display: none; /* Hide by default */
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
}

.hamburger-button span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #000;
    margin-bottom: 5px;
}

.hamburger-button span:last-child {
    margin-bottom: 0;
}

/* Media query for small screens */
@media (max-width: 768px) {
    .hamburger-button {
        display: block; /* Show on small screens */
    }

    .main-navigation {
        display: none; /* Hide menu by default */
        position: absolute;
        top: 70px;
        right: 0; /* Align to the right */
        width: auto; /* Adjust width to content */
        background-color: #fff;
        padding: 10px;
        box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
        right: 0; /* Align to the right */
        left: auto;
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: flex-end; /* Align items to the right */
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-navigation li {
        margin: 0;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .main-navigation li:last-child {
        border-bottom: none;
    }

    .main-navigation.active {
        display: block; /* Show menu when active class is added */
    }
}
        .company-logos {
            background-color: white;
            overflow: hidden;
            position: relative;
            padding: 20px 0; /* Wat verticale ruimte */
            width: 100%;
            height: 120px;
        }

        .company-logos p {
            text-align: center;
            margin-bottom: 15px;
            font-weight: bold;
        }
        .logo-track img {
            height: 100px; /* Nieuwe standaard hoogte */
            margin: 0 20px; /* Behoud of pas marge aan */
            vertical-align: middle; /* Goed voor uitlijning */
       }
        .logo-container {
            width: 100%;
            overflow: hidden; /* Verberg alles buiten de container */
        }

        .logo-track {
            display: inline-block; /* Zorgt dat de breedte zich aanpast aan de inhoud */
            white-space: nowrap; /* Voorkomt dat logo's onder elkaar springen */
            /* De animatie wordt hier toegepast */
            animation: moveLogos 40s linear infinite; /* Start met een vaste duur, pas evt. aan met JS */
            will-change: transform; /* Hint voor de browser voor betere performance */
        }

            /* Pauzeer animatie bij hover */
        .logo-track:hover {
            animation-play-state: paused;
        }

        @keyframes moveLogos {
            0% {
                transform: translateX(0%);
            }
            100% {
                /* Verschuif met de breedte van de EERSTE set logo's.
                   Omdat we de logo's gedupliceerd hebben, is dit 50% van de totale track breedte */
                transform: translateX(-50%);
            }
        }

        /* Responsive aanpassing indien nodig */
        @media (max-width: 768px) {
            .logo-track img {
                height: 40px; /* Kleinere logo's op mobiel */
                margin: 0 15px;
            }
            .logo-track {
                 animation-duration: 30s; /* Snellere animatie op mobiel misschien? */
            }
        }

/* WPForms Astra-like styling */
.wpforms-field {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.wpforms-submit {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.wpforms-submit:hover {
    background-color: #0056b3;
}
body {
    margin: 0;
    font-family: sans-serif; /* Kies een mooi lettertype! */
    color: var(--text-dark);
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1140px; /* Maximale breedte van de content */
    margin: 0 auto; /* Centreert de container */
    padding: 0 15px; /* Wat ruimte aan de zijkanten */
}

/* Header Styling */
header.site-header {
    background-color: var(--text-light); /* Witte achtergrond voor header */
    padding: 10px 0;
    border-bottom: 1px solid #eee; /* Subtiele lijn onder header */
}

header.site-header .container {
    display: flex;
    justify-content: space-between; /* Logo links, menu rechts */
    align-items: center;
}

header.site-header .logo img {
    max-height: 80px; /* Pas hoogte logo aan indien nodig */
}


.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Vertically align items if header height allows */
}

.main-navigation li {
    position: relative; /* Needed for submenu positioning */
    margin: 0; /* Remove default margins if any */
}

.main-navigation a {
    text-decoration: none;
    color: #3a3a3a; /* Slightly darker grey text - adjust as needed */
    padding: 15px 20px; /* Adjust padding for spacing */
    display: block;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500; /* Medium font weight often used */
    line-height: 1.5; /* Ensure consistent line height */
}

/* Style for the optional indicator */
.main-navigation a .submenu-indicator {
    font-size: 0.7em; /* Make indicator smaller */
    margin-left: 5px; /* Space between text and indicator */
    display: inline-block;
    vertical-align: middle; /* Align with text */
    transition: transform 0.2s ease; /* For potential rotation on hover */
}


/* --- Submenu Styles (Astra-like) --- */

.main-navigation .submenu {
    display: none;
    position: absolute;
    top: 100%; /* Position directly below the parent */
    left: 0;
    background-color: #ffffff; /* White background */
    min-width: 200px; /* Typical width */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    border: 1px solid #eaeaea; /* Light border */
    border-top: none; /* Remove top border if it touches parent */
    z-index: 100; /* High z-index */
    padding: 5px 0; /* Small padding top/bottom */
    margin: 0;
    list-style: none;
    border-radius: 0 0 4px 4px; /* Optional: slight rounding at bottom */
    opacity: 0; /* Start hidden for fade effect */
    visibility: hidden; /* Hide completely */
    transform: translateY(10px); /* Start slightly lower for slide effect */
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.main-navigation .submenu li {
    margin: 0;
    width: 100%;
}

.main-navigation .submenu a {
    color: #555555; /* Submenu link color */
    padding: 10px 20px; /* Padding for submenu items */
    text-decoration: none;
    display: block;
    white-space: nowrap;
    font-weight: 400; /* Normal weight for submenu items */
    border: none; /* Ensure no borders from main 'a' style */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Hover Effects (Astra-like) --- */

/* Show submenu on hover over the parent li */
.main-navigation li.has-submenu:hover > .submenu {
    display: block; /* Make it take up space */
    opacity: 1; /* Fade in */
    visibility: visible; /* Make it visible */
    transform: translateY(0); /* Slide up to final position */
}

/* Rotate indicator on hover (optional) */
.main-navigation li.has-submenu:hover > a .submenu-indicator {
    transform: rotate(180deg);
}


/* Change link color/background on hover - ADJUST COLORS AS NEEDED */
.main-navigation > ul > li > a:hover, /* Target only top-level links */
.main-navigation .submenu a:hover {
    background-color: #f7f7f7; /* Very light grey background on hover */
    color: #0170b9; /* Example blue color on hover (like Astra primary) */
}

/* Style the parent link when its submenu is hovered/shown (optional) */
.main-navigation li.has-submenu:hover > a {
    background-color: #f0f0f0; /* Optional subtle background for parent */
    color: #0170b9; /* Optional color change for parent */
}

/* Ensure submenu indicator color changes too */
.main-navigation > ul > li > a:hover .submenu-indicator,
.main-navigation li.has-submenu:hover > a .submenu-indicator {
    color: inherit; /* Inherit the color from the parent 'a' tag */
}

/* Main Content Area */
main.site-content {
    padding: 40px 0; /* Ruimte boven/onder de hoofdinhoud */
}

/* Footer Styling */
footer.site-footer {
    color: var(--text-dark); /* Dark text */
    padding: 20px 0;
    margin-top: 40px; /* Ruimte boven de footer */
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-icons a {
    color: var(--text-dark);
    font-size: 1.5em;
}

footer.site-footer p {
    margin: 0;
    font-size: 0.8em; /* Smaller font size */
}

.footer-content a {
    margin: 0 0.5em; /* Add spacing between links */
    color: var(--fiba-darkblue); /* Dark blue link color */
}

.csv-preview {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.csv-preview th,
.csv-preview td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.csv-preview tr.even {
    background-color: #f2f2f2;
}
.footer-line {
    border-top: 1px solid #ccc;
}
.form-field {
    margin-bottom: 15px; /* Wat ruimte tussen velden */
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
    width: 100%; /* Maak velden breder */
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Zorgt dat padding binnen de width valt */
}
.form-field textarea {
    min-height: 120px; /* Geef textarea een goede hoogte */
    resize: vertical; /* Sta alleen verticale resize toe */
}
.form-field.invalid input,
.form-field.invalid textarea {
    border-color: #dc3545; /* Rode rand voor ongeldige velden */
    background-color: #f8d7da; /* Lichtrode achtergrond */
}
.error-message {
    color: #dc3545; /* Rode tekst voor foutmeldingen */
    font-size: 0.9em;
    margin-top: 5px;
    display: none; /* Standaard verborgen */
}
.form-field.invalid .error-message {
    display: block; /* Toon foutmelding bij ongeldig veld */
}
.wpforms-submit:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
.success-message {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.error-summary {
     color: #721c24;
     background-color: #f8d7da;
     border: 1px solid #f5c6cb;
     padding: 15px;
     margin-bottom: 20px;
     border-radius: 4px;
}
.honeypot-field {
    position: absolute;
    left: -5000px; /* Verplaats het ver buiten het scherm */
    top: -5000px;
    /* Alternatief: opacity: 0; height: 0; width: 0; z-index: -1; */
    /* Gebruik geen display: none;, sommige bots negeren dat */
}
/* --- Cookie Consent Banner Styles --- */
.cc-window{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{-webkit-transition:transform 1s ease;-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease}.cc-animate.cc-revoke.cc-top{-webkit-transform:translateY(-2em);transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{-webkit-transform:translateY(2em);transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-top{-webkit-transform:translateY(0);transform:translateY(0)}.cc-animate.cc-revoke.cc-active.cc-bottom{-webkit-transform:translateY(0);transform:translateY(0)}.cc-revoke:hover{-webkit-transform:translateY(0);transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;-webkit-transition:max-height 1s;transition:max-height 1s}
.cc-revoke,.cc-window{position:fixed;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-revoke:hover{text-decoration:underline}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em;text-decoration:underline}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;margin-right:1em}.cc-compliance{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-floating .cc-compliance>.cc-btn{-webkit-box-flex:1;-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-floating,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-webkit-box-align:unset;-ms-flex-align:unset;align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-webkit-box-flex:0;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em;margin-bottom:1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}