/* 1. Laad Red Hat Display Black & Regular */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;900&display=swap');

/* 2. De Kaart (Groep blok) */
.wp-block-group.odwh-custom-card {
    background-color: #ffffff !important; /* Forceer de witte kleur */
    border: 1px solid #dee3ed !important;
    border-radius: 20px !important;
    padding: 35px 30px !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 280px !important;
    max-height: 50%;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    margin: 20px 0 !important;
    z-index: 1 !important;
}

/* Hover-effect: Kaart wordt groen */
.wp-block-group.odwh-custom-card:hover,
.wp-block-group.odwh-custom-card:focus-within {
    background-color: #008533 !important;
    border-color: #008533 !important;
    transform: translateY(-5px) !important;
}

/* 3. De Kop (Red Hat Display met de juiste spatiëring) */
.odwh-custom-card :is(h1, h2, h3, h4, .wp-block-heading, [class*="heading"]) {
    font-family: 'Red Hat Display', sans-serif !important;
    font-weight: 900 !important; 
    font-size: 1.5rem !important;
    color: #27272e !important;
    
    /* Ruimere spatiëring voor de ODWH-look */
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    
    margin: 0 0 15px 0 !important;
    transition: color 0.3s ease !important;
    text-transform: none !important;
    background: none !important;
}

/* 4. De Paragraaf (Ook ruimere spatiëring) */
.odwh-custom-card p {
    font-family: 'Red Hat Display', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    color: #2f3237 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    max-width: 85% !important;
    transition: color 0.3s ease !important;
    margin: 0 !important;
}

/* Tekstkleuren naar wit bij hover/focus */
.odwh-custom-card:hover :is(h1, h2, h3, h4, p, .wp-block-heading),
.odwh-custom-card:focus-within :is(h1, h2, h3, h4, p, .wp-block-heading) {
    color: #ffffff !important;
}

/* 5. Het Icoon (SVG Link) */
.odwh-card-svg-link {
    position: absolute !important;
    bottom: -5px !important;
    right: -5px !important;
    width: 135px !important;
    height: 135px !important;
    z-index: 10 !important;
}

.odwh-card-svg-link .path {
    stroke: #008533 !important;
    stroke-width:1;
    transition: stroke 0.4s ease !important;
}

.odwh-card-svg-link .path-circle {
    stroke: #008533 !important;
    stroke-width:3;
    transition: stroke 0.4s ease !important;
}

/* Icoon wordt wit bij hover op de kaart */
.odwh-custom-card:hover .path, 
.odwh-custom-card:focus-within .path {
    stroke: #ffffff !important;
}

/* Fix voor SVG in Gutenberg editor */
.odwh-custom-card svg {
    max-width: 135px !important;
    display: block !important;
}

.single-tribe_events .tribe-events-c-subscribe-dropdown__container{
display:none !important;
}

#secondary.primary-sidebar {
    background-color: #ffffff !important;
    border-radius: 20px !important;    /* Past de ronding van de hoeken aan */
    padding: 30px !important;         /* Zorgt voor ademruimte binnenin de zijbalk */
    box-sizing: border-box !important;
    overflow: hidden !important;      /* Snijdt de inhoud strak af langs de ronde hoeken */
}

/* Voorkom dat de binnenste wrapper een eigen achtergrondkleur toont */
#secondary.primary-sidebar .sidebar-inner-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

/* Geef de hele kaart aan alle vier de hoeken exact 20px ronding */
article.loop-entry {
    border-radius: 20px !important;  /* Verhoogd naar 20px voor onder én boven */
    overflow: hidden !important;     
}

/* Zorg dat de afbeeldingslagen aan de bovenkant meebuigen naar 20px, maar onder recht blijven */
.loop-entry .post-thumbnail,
.loop-entry .kadence-thumbnail-ratio-2-3,
.loop-entry .post-thumbnail-inner,
.loop-entry .post-thumbnail img {
    border-top-left-radius: 20px !important;  /* Verhoogd naar 20px */
    border-top-right-radius: 20px !important; /* Verhoogd naar 20px */
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Globale automatische afbreking voor Kadence */
body {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

/* Uitzondering voor knoppen (voorkomt dat korte knopteksten afbreken) */
.wp-block-button__link, .kadence-advanced-btn {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}