/* 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: 10px !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;
}