.contact-info-with-menu {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Zorg ervoor dat beide kolommen de volledige hoogte innemen */
    /*
     * min-height in plaats van een vaste height: het blok vult het scherm,
     * maar groeit mee zodra de inhoud meer ruimte nodig heeft. Met een vaste
     * hoogte viel tekst buiten het blok en was die niet meer te zien.
     */
    min-height: 95vh;
}

.contact-info-left {
    flex: 0 0 60%; /* Zet de breedte op 60% voor de afbeelding */
    max-width: 500px; /* Maximale breedte van de afbeelding */
    margin-right: 20px;
    display: flex;
    align-items: flex-end; /* Zorg ervoor dat de afbeelding aan de onderkant uitgelijnd wordt */
}

.contact-info-left img {
    width: 100%; /* Zorgt ervoor dat de afbeelding binnen de container van 250px blijft */
    height: auto; /* Houdt de verhoudingen van de afbeelding intact */
}

.contact-info-right {
    flex: 0 0 40%; /* Zet de breedte op 40% voor de tekst en het menu */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Zorgt ervoor dat tekst bovenaan en menu onderaan wordt geplaatst */
    /*
     * Geen height: 100% hier. Een percentagehoogte kan niet oplossen tegen de
     * min-height van de ouder, waardoor de kolom terugviel op zijn eigen
     * inhoud en het menu vlak onder de tekst bleef hangen in plaats van
     * onderaan. align-self doet hetzelfde werk en werkt wel.
     */
    align-self: stretch;
}

.contact-info-text {
    margin-bottom: 20px; /* Ruimte tussen tekst en menu */
}

.horizontal-menu{
    /* Krimpt mee als de kolom smaller wordt, zodat het menu langer op een regel past. */
    gap: clamp(10px, 1.4vw, 30px);
}

.contact-info-menu ul {
    list-style-type: none; /* Verwijdert opsommingstekens */
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Past het niet op een regel, dan schuift een heel item door */
    justify-content: flex-end; /* Zorgt ervoor dat het menu rechts wordt uitgelijnd */
    /*
     * De kolom is maar 40% breed, dus de vier items passen er op een smaller
     * scherm niet meer naast elkaar. Iets meeschalen houdt ze op een regel tot
     * aan het punt waar het menu toch onder elkaar gaat staan.
     */
    font-size: clamp(14px, 1.05vw, 17px);
}

/*
 * Een menu-item breekt nooit middenin: "Algemene voorwaarden" ging anders
 * over twee regels waardoor het menu er rommelig uitzag.
 */
.contact-info-menu ul li > a,
.contact-info-menu ul li > .menu-item-static {
    white-space: nowrap;
}

.contact-info-menu ul li a {
    text-decoration: none; /* Verwijdert onderstreping */
    color: inherit; /* Neemt de kleur uit de style settings */
}

.contact-info-menu ul li a:hover {
    text-decoration: underline; /* Onderstreping bij hover */
}

/* Media Query voor mobiele schermen */
@media (max-width: 1330px) {
    /*
     * Gestapeld: eerst de contactgegevens, daaronder "Let's meet up!".
     *
     * De min-height van 95vh moet er hier af. In een kolom betekent
     * flex: 0 0 100% namelijk een basis van 100% van de *hoogte*, dus werd de
     * tekstkolom een heel scherm hoog en duwde space-between het beeld naar de
     * onderrand. Daardoor stond "Let's meet up!" een half scherm onder de
     * LinkedIn-link, half weggevallen achter de browserbalk. Met een hoogte die
     * de inhoud volgt en flex-basis auto sluit het beeld gewoon onder de tekst
     * aan.
     */
    .contact-info-with-menu {
        flex-direction: column-reverse; /* Wissel de volgorde van de kolommen: tekst eerst, afbeelding daarna */
        align-items: flex-start; /* Lijn de inhoud uit aan de linkerkant */
        min-height: 0;
        justify-content: flex-start;
        /*
         * Geen extra gap: de ondermarge van de tekst laat hier al ruim twee
         * regels wit tussen de LinkedIn-link en het beeld (gemeten 112px op een
         * regelhoogte van 43px, tegen 20px tussen de alinea's onderling). Zet er
         * dus niets bovenop, anders zakt "Let's meet up!" weer los van de tekst.
         */
    }

    .contact-info-left {
        flex: 0 0 auto; /* Niet de volle hoogte: het beeld is zo hoog als het is. */
        width: 100%;
        max-width: 100%; /* Verwijder de max breedte van 250px op mobiel */
        margin-right: 0;
        margin-bottom: 0; /* De ruimte zit nu in de gap hierboven. */
    }

    .contact-info-right {
        flex: 0 0 auto; /* Zie de opmerking hierboven: 100% zou de hoogte zijn. */
        width: 100%; /* Zorg ervoor dat de kolom de volledige breedte inneemt */
        justify-content: flex-start; /* Lijn de tekst en het menu bovenaan uit */
    }

    .contact-info-menu ul {
        display: block; /* Zet het menu verticaal */
        text-align: right; /* Zorgt ervoor dat de menu-items rechts worden uitgelijnd */
    }

    .contact-info-menu ul li {
        margin-left: 0; /* Verwijder de ruimte tussen de menu-items */
        margin-bottom: 10px; /* Voeg ruimte toe tussen de menu-items */
    }

    .contact-info-menu ul li a {
        display: block; /* Zet elk menu-item in een aparte rij */
        text-align: right; /* Zorgt ervoor dat de links in de menu-items rechts worden uitgelijnd */
    }
}

/* Menu-items zonder bestemming: zelfde uiterlijk, maar niet klikbaar. */
.contact-info-menu ul li .menu-item-static {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

@media (max-width: 1330px) {
    .contact-info-menu ul li .menu-item-static {
        display: block;
        text-align: right;
    }
}