/* Container: De menubalk zelf */
.mod-menu, .nav, .menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 10px !important; /* Gecombineerde padding voor ademruimte */
    background-color: #f2f4f9; 
    border-radius: 5px;
    width: 100%;
    align-items: center; /* Zorgt dat items verticaal mooi in het midden staan */
}

/* Lijst-items: De 'containers' van de linkjes */
.mod-menu li, .nav li, .menu li {
    display: inline-block !important;
    margin-right: 15px !important; /* Iets verkleind voor betere balans */
}
@media (max-width: 767.98px) {
    /* Stapel de cellen onder elkaar */
    .mijn-module-hoogte td {
        display: block !important;
        width: 100% !important;
        text-align: center !important; /* Zet alles netjes in het midden */
        padding: 10px 0 !important;
        border: none !important;      /* Verwijder eventuele tabelranden */
    }

    /* Maak het logo in de eerste 'kolom' (nu de bovenste rij) mooi passend */
    .mijn-module-hoogte td:first-child img {
        max-width: 120px !important; /* Pas dit aan voor de ideale grootte van je logo */
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Maak de tekst in de tweede en derde 'kolom' weer iets groter nu ze de volle breedte hebben */
    .mijn-module-hoogte td:nth-child(2),
    .mijn-module-hoogte td:nth-child(3) {
        font-size: 14px !important; 
        line-height: 1.4 !important;
    }
}

/* De Linkjes: De klikbare tekst */
.mod-menu a, .nav a, .menu a {
    text-decoration: none !important;
    white-space: nowrap !important;
    color: #5f9ea0 !important;
    padding: 10px 15px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    letter-spacing: 1px;
    transition: all 0.3s ease; /* Zorgt voor een vloeiende overgang bij hover */
}

/* Hover-effect: Als je er met de muis overheen gaat */
.mod-menu a:hover, .nav a:hover, .menu a:hover {
    background-color: #a8b5d7; 
    color: #024a64 !important; 
    border-radius: 6px;
}
/*****************************************/
/* Media query voor smartphones (Android/iOS) */
@media (max-width: 991px) {

    /* 1. Forceer de lijst (UL) naar een verticale kolom */
    .navbar-collapse ul.mod-menu, 
    .navbar-collapse ul.nav, 
    .navbar-collapse ul.menu {
        display: flex !important;
        flex-direction: column !important; /* Dwingt items onder elkaar */
        padding: 0 !important;
        margin: 0 !important;
        background-color: #2c3e50 !important; /* Pas deze kleur aan naar wens */
        border-radius: 4px;
    }

    /* 2. Zorg dat de lijst-items (LI) de volledige breedte benutten */
    .navbar-collapse li {
        display: block !important;         /* Verwijder de inline-block */
        width: 100% !important;
        margin-right: 0 !important;        /* Verwijder de horizontale ruimte */
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Optioneel: een scheidingslijntje */
    }

    /* 3. De linkjes (A) over de hele breedte klikbaar maken */
    .navbar-collapse a {
        display: block !important;
        width: 100% !important;
        text-align: left !important;       /* Zet de tekst netjes links */
        padding: 15px 20px !important;     /* Ruime 'tap' oppervlakte voor vingers */
        box-sizing: border-box !important;
    }
    
    /* Laatste lijntje verwijderen bij het onderste item */
    .navbar-collapse li:last-child {
        border-bottom: none !important;
    }
}
/******************************************/
/* Markeer de huidige pagina in het menu (Desktop & Mobiel) */
.mod-menu li.active a, 
.nav li.active a, 
.menu li.active a {
    background-color: #5f9ea0 !important; /* De kleur van je thema */
    color: #ffffff !important;           /* Witte tekst */
    border-radius: 4px;
}
/* Forceer de tekst MENU naast het icoon */
button.navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px; /* Ruimte tussen tekst en streepjes */
    background-color: #ffffff !important;
    border: 1px solid #5f9ea0 !important;
    padding: 5px 12px !important;
    min-height: 44px; /* Minimale grootte voor Google/Android richtlijnen */
}

/* De tekst toevoegen */
button.navbar-toggler::before {
    content: "MENU" !important;
 /*   display: inline-block !important; */
    font-size: 16px !important;
    font-weight: bold !important;
    color: #5f9ea0 !important;
    text-transform: uppercase;
    font-family: sans-serif; /* Zorgt dat het niet een gek lettertype pakt */
}

/* 1. Verberg de knop op desktop (breed scherm) */
@media (min-width: 992px) {
    header.header .navbar-toggler,
    .navbar .navbar-toggler,
    button.navbar-toggler {
        display: none !important; /* Dwingt de knop onzichtbaar te zijn */
    }
}

/* 2. Stijl de knop op mobiel (smal scherm) */
@media (max-width: 991px) {
    header.header .navbar-toggler,
    button.navbar-toggler {
        display: inline-flex !important; /* Toon de knop */
        align-items: center !important;
        gap: 8px !important;
        background-color: #ffffff !important;
        border: 1px solid #5f9ea0 !important;
        padding: 5px 12px !important;
    }

    /* Voeg de tekst MENU toe */
    header.header .navbar-toggler::before {
        content: "MENU" !important;
        font-size: 16px !important;
        font-weight: bold !important;
        color: #5f9ea0 !important;
        display: inline-block !important;
    }
}
/***********Module Logo en Tekst****************************/
/* ============================================================
   1. DESKTOP STYLING (Groot scherm)
   ============================================================ */
.mijn-module-hoogte {
    min-height: auto !important; /*300px;*/
    /* Kleurenmix: Zachtblauw naar Lichtgroen */
    background: linear-gradient(135deg, #e3f2fd 0%, #e8f5e9 100%) !important;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* De schaduw */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #dee2e6 !important;
}

/* Zorg dat de tabel op desktop netjes breed is */
.mijn-module-hoogte table {
    width: 100%;
    background: transparent;
}

/* ============================================================
   2. SMARTPHONE STYLING (Scherm kleiner dan 768px)
   ============================================================ */
@media (max-width: 767.98px) {
    /* 1. De module zelf: we dwingen de hoogte omlaag */
    .mijn-module-hoogte {
        min-height: 0 !important;      /* Verwijder de minimale hoogte van desktop */
        height: auto !important;       /* Laat de box krimpen naar het logo */
        padding: 10px 0 !important;    /* Minimale ruimte boven/onder het logo */
    }

    /* 2. De tabel en de rij: alle extra witruimte weg */
    .mijn-module-hoogte table, 
    .mijn-module-hoogte tbody, 
    .mijn-module-hoogte tr {
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* 3. De cel waar het logo in staat: alle padding naar 0 */
    .mijn-module-hoogte td:first-child {
        display: block !important;
        padding: 0 !important;         /* Dit haalt de loze ruimte boven/onder weg */
        margin: 0 !important;
        height: auto !important;
        line-height: 0 !important;     /* Voorkomt extra witruimte onder de afbeelding */
    }

    /* 4. Verberg de tekstkolommen volledig */
    .mijn-module-hoogte td:nth-child(2),
    .mijn-module-hoogte td:nth-child(3) {
        display: none !important;
    }

    /* 5. Het logo zelf */
    .mijn-module-hoogte img {
        display: block !important;
        margin: 0 auto !important;     /* Houdt hem in het midden */
        width: 180px !important;       /* Jouw gekozen breedte */
        height: auto !important;
    }
}
/* ========================================================== */
/* -------------- wijzigingen voor inlog form --------------- */
/* ========================================================== */

/* Verberg alleen Registreren */
.mod-login a[href*="registration"] { display: none !important; }

/* Verberg alleen Wachtwoord vergeten */
.mod-login a[href*="remind"] { display: none !important; }

/* Verberg alleen Gebruikersnaam vergeten */
.mod-login a[href*="reset"] { display: none !important; }  

/* Verberg het 'Onthoud mij' vinkje */
.mod-login .form-check { display: none !important; } 

/* Maak de hele module-container smaller en centreer deze */
.mod-login {
    max-width: 300px;
  /*  margin: 0 auto; */
}

/* Optioneel: Maak ook de tekstvelden en knop wat compacter */
.mod-login .form-control {
    padding: 5px 10px;
    font-size: 0.9rem;
}

.mod-login .btn {
    padding: 5px 12px;
    font-size: 0.9rem;
}