/* Voeg dit toe aan je CSS of in een <style> tag in je base.html */

/* Zorg dat html en body de volledige hoogte innemen */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Maak body een flex container */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Minimaal de volledige viewport hoogte */
}

/* Laat de main content area groeien om beschikbare ruimte te vullen */
.content-wrapper {
    flex: 1; /* Dit zorgt ervoor dat deze ruimte opvult */
}

/* Krachtige footer override - overschrijft body inheritance */
html body footer,
body footer,
footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    
    /* Forceer de juiste achtergrondkleur - overschrijft body inheritance */
    background-color: #353A40 !important;
    background: #353A40 !important;
    
    border-top: 1px solid #ddd !important;
    padding: 20px 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #fff !important;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1) !important;
}

/* Extra override voor inheritance */
footer, footer * {
    background-color: #353A40 !important;
}

/* Email links in footer - gele kleur voor leesbaarheid */
footer a,
footer a:link,
footer a:visited {
    color: #ffcc00 !important;  /* Gele kleur #f39c12 (Bootstrap warning geel) */
    text-decoration: underline !important;
}

footer a:hover,
footer a:focus {
    color: #e67e22 !important;  /* Iets donkerder geel bij hover */
    text-decoration: underline !important;
}

/* Krachtige LinkedIn styling - overschrijft alles */
footer .social-links,
footer .social-links * {
    background-color: #353A40 !important; /* Zelfde als footer */
    color: #f39c12 !important;
}

footer .linkedin-link,
footer .linkedin-link:link,
footer .linkedin-link:visited {
    color: #f39c12 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
}

footer .linkedin-link:hover {
    color: #e67e22 !important;
    text-decoration: underline !important;
}