/* alleen maar uitzonderingen en specials */

/* ============================================================
   HULPMIDDELEN SECTIE (Flexbox Cards)
   ============================================================ */

/* Titel en Lijn */
.tk-hulpmiddelen-titel {
    color: #1711D7 !important;
    font-family: 'RundText', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    margin-bottom: 10px !important;
    letter-spacing: 0.5px;
}

.tk-hulpmiddelen-lijn {
    border: none;
    border-top: 2px solid #1711D7;
    margin-bottom: 30px !important;
    width: 100%;
}

/* De Container voor de Kaarten */
.tk-hulpmiddelen-grid {
    display: flex;
    gap: 20px; /* Ruimte tussen de roze blokken */
    align-items: stretch; /* Zorgt dat alle kaarten even hoog worden */
}

/* De Roze Kaart Zelf */
.tk-hulpmiddel-card {
    flex: 1; /* Dwingt gelijke breedte af voor alle 3 de blokken */
    background-color: #FFD1D1; /* De zachtroze kleur */
    padding: 25px 25px 20px 25px; /* Binnenmarge (iets minder aan de onderkant voor de knop) */
    display: flex;
    flex-direction: column; /* Zet tekst en knop onder elkaar */
}

/* Tekst Container in de kaart */
.tk-card-tekst {
    flex-grow: 1; /* Dit is de magic trick: drukt de knop altijd naar de bodem! */
    margin-bottom: 25px;
}

.tk-card-tekst h4 {
    font-family: 'RundText', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    margin-bottom: 5px !important;
    line-height: 1.3em;
}

.tk-card-tekst p {
    font-family: 'RundText', sans-serif !important;
    font-size: 14px !important;
    color: #000000 !important;
    margin-bottom: 0 !important;
    line-height: 1.4em;
}

/* De Download Knop */
.tk-btn-download {
    display: block;
    width: 100%;
    background-color: #1711D7 !important;
    color: #ffffff !important;
    text-align: center;
    padding: 6px 10px;
    font-family: 'RundText', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
	border-radius: 4px;
}

.tk-btn-download:hover {
    background-color: #0F0A9E !important;
}

/* Mobiele Weergave (Onder elkaar op telefoons) */
@media (max-width: 768px) {
    .tk-hulpmiddelen-grid {
        flex-direction: column;
        gap: 15px;
    }
}


/* ============================================================
   KNOP IN HET ORANJE PAPIER VLAK
   ============================================================ */
.tk-oranje-vlak-knop {
    display: block; /* Maakt er een zelfstandig blok van ipv een stukje tekst */
    width: max-content; /* Zorgt dat het blok precies zo breed is als de tekst */
    margin: 30px auto 0 auto !important; /* De 'auto' links en rechts centreert de knop! */
    background-color: #ffffff !important;
    color: #140FBE !important; /* Huisstijl blauw */
    padding: 12px 24px !important;
    font-family: 'RundText', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-top: 20px !important; /* Zorgt voor ademruimte boven de knop */
	border-radius: 4px;
}

/* Hover effect */
.tk-oranje-vlak-knop:hover {
    background-color: #140FBE !important;
    color: #ffffff !important;
}


/* ============================================================
   PERFECT RONDE PORTRET FOTO'S
   ============================================================ */
.tk-ronde-foto .et_pb_image_wrap,
.tk-ronde-foto img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: top center !important; /* Schuift de focus naar de bovenkant van de foto */
    border-radius: 50% !important;
    width: 100% !important;
}


/* ============================================================
   GELIJKE ICONEN IN BLURBS (VERSIE 2)
   ============================================================ */
/* 1. Maak het doosje eromheen exact 100x100 pixels */
.tk-gelijke-iconen .et_pb_main_blurb_image {
    width: 170px !important;
    height: 170px !important;
    max-width: 170px !important;
    margin-bottom: 10px !important; /* Ruimte tussen icoon en titel */
}

/* 2. Dwing de SVG (en de span eromheen) om netjes binnen dat doosje te blijven */
.tk-gelijke-iconen .et_pb_main_blurb_image .et_pb_image_wrap,
.tk-gelijke-iconen .et_pb_main_blurb_image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* 1. Maak het doosje eromheen exact 100x100 pixels */
.tk-gelijke-iconen-lijst .et_pb_main_blurb_image {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    margin-bottom: 10px !important; /* Ruimte tussen icoon en titel */
}

/* 2. Dwing de SVG (en de span eromheen) om netjes binnen dat doosje te blijven */
.tk-gelijke-iconen-lijst .et_pb_main_blurb_image .et_pb_image_wrap,
.tk-gelijke-iconen-lijst .et_pb_main_blurb_image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
}