/* Remove overlay background */
.wp-block-carousel .carousel-item .overlay {
    background: none !important;  /* Removes the grey overlay */
}

/* Move text below the image */
.wp-block-carousel .carousel-item .carousel-caption {
    position: static !important; /* Removes absolute positioning */
    background: none !important; /* Ensure no background */
    color: #000;                 /* Make text visible if needed */
    text-align: center;          /* Center the text below image */
    margin-top: 10px;            /* Space between image and text */
}

/* Optional: adjust carousel item spacing */
.wp-block-carousel .carousel-item {
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    align-items: center;
}
/* Make the navigation horizontal */
.wp-block-post-navigation {
    display: flex;                 /* horizontal layout */
    justify-content: space-between; /* push prev left, next right */
    align-items: center;
    margin: 20px 0;                /* spacing around navigation */
}

/* Style the links as buttons */
.wp-block-post-navigation__link a {
    background-color: #f05454;     /* button color */
    color: white;                  /* text color */
    padding: 10px 20px;            /* spacing inside buttons */
    border-radius: 8px;            /* rounded corners */
    text-decoration: none;         /* remove underline */
    font-weight: bold;
    display: inline-block;
}

/* Add arrows before/after text */
.wp-block-post-navigation__link.prev a::before {
    content: "← ";                 /* arrow before previous post */
}

.wp-block-post-navigation__link.next a::after {
    content: " →";                 /* arrow after next post */
}

/* Optional: hover effect */
.wp-block-post-navigation__link a:hover {
    background-color: #d94343;     /* darker red on hover */
    transition: background-color 0.3s ease;
}
/* Add custom text before/after post links */
.wp-block-post-navigation__link.prev a::before {
    content: "← Previous Recipe "; /* text before the link */
}

.wp-block-post-navigation__link.next a::after {
    content: " Next Recipe →"; /* text after the link */
}

/* Optional: hide the actual post title if you just want arrows/text */
.wp-block-post-navigation__link.prev a span,
.wp-block-post-navigation__link.next a span {
    display: none;
}