/* =========================================================
   1. BODY
   ========================================================= */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

/* =========================================================
   2. CONTAINERS (lichtblauw = #c7e5f0 )
   ========================================================= */
.container {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

.body-container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-container {
    background-color: #33658A;
    color: white;
    padding: 5px 0;
    border-radius: 8px;
}

.navigator-container {
    background-color: #33658A;
    color: #fff;
    text-transform: uppercase;
    border-radius: 0px;
    padding: 0px 0;
}

.navigator-container .nav-link {
    font-weight: 700;
    color: #fff;
}

.navigator-container .navbar-nav .nav-link:hover {
    color: #eea617 !important;
    text-decoration: none !important;
}

/* =========================================================
   3. NAVBAR
   ========================================================= */
.navbar {
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar-toggler {
    padding: 5px 10px;
}

.navbar-nav .nav-link {
    padding: 5px 5px 5px 5px;
}

.navbar-nav .nav-item.active .nav-link {
    color: #b42a46 !important;
    background-color: #ffffff !important;
    border: 0px solid #33658A;
}

.navbar-nav .nav-item .nav-link {
    color: white;
}

.navbar-nav .nav-item:hover .nav-link {
    color: orange !important;
    background-color: #33658A !important;
}

/* =========================================================
   4. HEADER
   ========================================================= */
.header-container h1 {
    font-size: 2.5rem;
    margin-bottom: 5px;
}

/* =========================================================
   5. ADVERTENTIE
   ========================================================= */
.advertentie-container {
    background-color: #33658A;
    padding: 5px 0px 0px 0px;
    border-radius: 0px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* =========================================================
   6. INHOUD (TRANSPARANT)
   ========================================================= */
.inhoud-container {
    background-color: #ffffff;
    padding: 5px 0px 0px 5px;
    border-radius: 0px;
    box-shadow: 0 0px 0px rgba(0,0,0,0.08);
    margin-bottom: 0px;
    border-color: #33658A;
    border: none;
}

/* =========================================================
   7. FOOTER
   ========================================================= */
.footer-container {
    padding: 5px 5px 5px 5px;
    margin-top: 10px;
    border-radius: 0px;
}

.footer-container a {
    color: black;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-container a:hover {
    color: orange !important;
    text-decoration: none !important;
}

/* =========================================================
   8. MEDIA
   ========================================================= */
@media (max-width: 767px) {
    .body-container,
    .advertentie-container,
    .inhoud-container,
    .footer-container {
        padding: 15px;
    }

    .header-container h1 {
        font-size: 2rem;
    }

    /* Verlaag de hoogte van de afbeeldingen op mobiel en tablet */
    .info-card img {
        height: 50px; /* Verlaag de hoogte voor mobiele apparaten en tablets */
    }
}

/* =========================================================
   9. SECTION
   ========================================================= */
.contact-section {
    background-color: #33658A;
    padding: 1.5rem 0;
    border-radius: 1.5rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.15);
}

/* =========================================================
   10. TITEL BOVEN DE REEKS CARDS
   ========================================================= */
.title-row {
    padding: 0.75rem;
}

.title-card {
    background-color: rgba(255,255,255,0.92);
    border: 0px solid rgba(0,0,0,.15);
    border-radius: 1.5rem;
    box-shadow: 0 0em 0rem rgba(0,0,0,.15);
}

.title-card-body {
    background-color: #33658A;
    padding: 0.75rem 1rem;
    border-radius: 1.5rem;
}

.title-card-body h6 {
    margin: 0;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}

/* =========================================================
   11. CARDS – gelijke hoogte & breedte
   ========================================================= */
.cards-grid > .col {
    display: flex;
    align-items: stretch;
}

.info-card {
    width: 100%;
    height: 100%;
    min-height: 50px;
    border: 0px solid rgba(0,0,0,.15);
    border-radius: 1.5rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: none;
    transform: none;
}

/* Beperk de hoogte van de afbeeldingen in de kaarten */
.info-card img {
    width: 100%; /* Zorg ervoor dat de afbeelding de breedte van de kaart benut */
    height: 200px; /* Standaard hoogte voor grotere schermen */
    object-fit: cover; /* Zorg ervoor dat de afbeelding netjes bijgesneden wordt */
}

/* Zorg ervoor dat de titels altijd op dezelfde hoogte komen */
.info-card-body {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Zorg ervoor dat de titel bovenaan komt */
}

.info-card-body h5 {
    margin-bottom: .5rem;
    font-weight: 600;
}

/* =========================================================
   12. AFWISSELENDE TRANSPARANTE KAARTKLEUREN
   ========================================================= */
/* Kleurinstellingen */
:root {
    --card-bg-a: #c7e5f0; /* Lichtblauw voor oneven kolommen */
    --card-bg-b: #c4cdd7; /* Grijsblauw voor even kolommen */
}

/* Afwisseling van kleuren per kolom in de rij (1 kolom per rij) */
@media (max-width: 767px) {
    .cards-grid .col:nth-child(odd) .info-card {
        background-color: var(--card-bg-a) !important;
    }

    .cards-grid .col:nth-child(even) .info-card {
        background-color: var(--card-bg-b) !important;
    }
}

/* Afwisseling van kleuren per kolom in de rij (2 kolommen per rij) */
@media (min-width: 768px) and (max-width: 1023px) {
    .cards-grid .col:nth-child(odd) .info-card {
        background-color: var(--card-bg-a) !important;
    }

    .cards-grid .col:nth-child(even) .info-card {
        background-color: var(--card-bg-b) !important;
    }

    .cards-grid .col:nth-child(3) .info-card {
        background-color: var(--card-bg-b) !important;
    }

    .cards-grid .col:nth-child(4) .info-card {
        background-color: var(--card-bg-a) !important;
    }
}

/* Afwisseling van kleuren per kolom in de rij (4 kolommen per rij) */
@media (min-width: 1024px) {
    .cards-grid .col:nth-child(1) .info-card {
        background-color: var(--card-bg-a) !important;
    }

    .cards-grid .col:nth-child(2) .info-card {
        background-color: var(--card-bg-b) !important;
    }

    .cards-grid .col:nth-child(3) .info-card {
        background-color: var(--card-bg-a) !important;
    }

    .cards-grid .col:nth-child(4) .info-card {
        background-color: var(--card-bg-b) !important;
    }

    /* Extra voor meer kolommen op desktop */
    .cards-grid .col:nth-child(5) .info-card {
        background-color: var(--card-bg-b) !important;
    }

    .cards-grid .col:nth-child(6) .info-card {
        background-color: var(--card-bg-a) !important;
    }

    .cards-grid .col:nth-child(7) .info-card {
        background-color: var(--card-bg-b) !important;
    }

    .cards-grid .col:nth-child(8) .info-card {
        background-color: var(--card-bg-a) !important;
    }
}

/* =========================================================
   13. INFO-CARD FOOTER – WITTE TEKST BIJ ALLE STATES
   ========================================================= */

.info-card-footer {
    background-color: var(--bs-primary);  
    margin-top: auto;
    transition: background-color 0.0s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: 40px;
}

/* Zorg ervoor dat de link de hele footer beslaat */
.info-card-footer a {
    display: block;
    width: 100%;
    color: #ffffff !important;    /* Forceer witte tekstkleur */
    text-decoration: none !important;  /* Geen onderstreping */
    font-weight: 500;
    text-align: center;
}

/* Hover: achtergrond van de footer verandert naar rood, tekst blijft wit */
.info-card-footer:hover {
    background-color: #b13a4a !important;
}

/* Zorg ervoor dat de tekst wit blijft in alle staten (link, visited, hover, focus, active) */
.info-card-footer a:link,
.info-card-footer a:hover,
.info-card-footer a:focus,
.info-card-footer a:active {
    color: #ffffff !important;    /* Tekst blijft wit in alle states */
    text-decoration: none !important;   /* Geen onderstreping */
}

/* Zorg ervoor dat hover geen blauwe tekst of onderstreping toevoegt */
.info-card-footer a:hover,
.info-card-footer a:focus {
    background-color: #b13a4a !important;   /* Achtergrond wordt rood bij hover */
    color: #ffffff !important;    /* Tekst blijft wit altijd */
    text-decoration: none !important;
}

/* =========================================================
   14. Standaard linkstijl 
   ========================================================= */
a {
    color: blue;  /* blauwe kleur voor links */
    text-decoration: none !important;  /* Verwijder onderstreping */
}

a:hover {
    color: red;  /* rood voor hover */
    text-decoration: none !important;  /* Verwijder onderstreping bij hover */
}

/* =========================================================
   15. Container navigator 
   ========================================================= */
/* =========================================================
   BASIS
   ========================================================= */

.navigator-container{
    background-color:#33658A;
    padding:0;
}

.nav-wrapper{
    display:flex;
    flex-wrap:wrap;
}

/* =========================================================
   NAV ITEMS
   ========================================================= */

.nav-tile{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    height:42px;
    padding:0 8px;

    font-weight:bold;
    text-decoration:none;
    color:white;
    background-color:#33658A;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    transition:0.15s ease;
}

/* Hover */
.nav-tile:hover{
    color:orange !important;
    background-color:#33658A !important;
}

/* Active */
.nav-tile.active{
    color:#b42a46 !important;
    background-color:#ffffff !important;
}

/* =========================================================
   BASIS (grid layout)
   ========================================================= */

.nav-wrapper{
    display:grid;
    justify-content:center; /* hele blok centreren */
}

.nav-tile{
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,0.15);
}


/* =========================================================
   BASIS
   ========================================================= */

.nav-wrapper{
    display:grid;
    justify-content:center; 
}

.nav-tile{
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,0.15);
}


/* =========================================================
   MOBIEL VERTICAAL
   3 per rij (past altijd binnen scherm)
   ========================================================= */

@media (max-width:767.98px){

    .nav-wrapper{
        grid-template-columns:repeat(3, 1fr);
    }
}


/* =========================================================
   BASIS
   ========================================================= */

.nav-wrapper{
    display:grid;
    justify-content:center; /* hele grid centreren */
}

.nav-tile{
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,0.15);
}


/* =========================================================
   MOBIEL VERTICAAL
   3 kolommen
   ========================================================= */

@media (max-width:767.98px) and (orientation:portrait){

    .nav-wrapper{
        grid-template-columns:repeat(3, 1fr);
    }
}


/* =========================================================
   MOBIEL HORIZONTAAL
   6 kolommen
   ========================================================= */

@media (max-width:991.98px) and (orientation:landscape){

    .nav-wrapper{
        grid-template-columns:repeat(6, 1fr);
    }
}


/* =========================================================
   DESKTOP
   gewone navbar inline
   ========================================================= */

@media (min-width:992px){

    .nav-wrapper{
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;
    }

    .nav-tile{
        border:0;
    }
}