/* Custom styles for News Feed Grid Element */
.news-wrapper {
    max-width: var(--site-container-width);
    margin: 0px auto;
    margin-top:-200px;
    margin-bottom:150px;
    position: relative; 
    z-index: 2; 
}
/* H2 STYLES REMOVED (as H2 is gone) */
/* YOAST STYLES REMOVED (as Yoast breadcrumbs are gone) */

.news-filter {
    display: flex;
    /* MODIFICATION: Changed from flex-end to space-between */
    justify-content: space-between; 
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    padding: 0 15px;
    z-index: 999;
}

.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 200px;
    flex-grow: 0;
    flex-shrink: 1;
}

/* --- MODIFIED THIS RULE --- */
.search-wrap input {
    flex: 1;
    font-size: 14px;
    border-radius: 12px;
    border: 1px solid #EFEFEF;
    max-width: 200px;
    line-height: 25px !important;
    background-color:#EFEFEF;
    color:#000;
    
    /* Replaced padding rules with this: */
    padding: 10px 35px 10px 10px; /* Top, Right, Bottom, Left */
    box-sizing: border-box; /* Added for consistency */
}

/* --- NEW RULE ADDED --- */
.search-wrap input::placeholder {
    color: #000;
    opacity: 1; /* Ensures it's not faded in some browsers */
}


.search-icon-button {
    background: none;
    border: none;
    position: absolute;
    right: 5px;
    cursor: pointer;
    padding: 0;
    color: #555;
    line-height: 1;
    z-index: 2;
}
.search-icon-button i {
    font-size: 14px;
    margin-right: 10px;
}

/* --- MODIFIED THIS RULE --- */
.news-filter select {
    padding: 10px; /* This is correct */
    /* Removed redundant padding-left/right */
    border-radius: 12px;
    font-size: 14px;
    border: 1px solid #EFEFEF;
    max-width: 200px;
    line-height: 25px !important;
    background-color:#EFEFEF;
    color:#000;
    background-image: linear-gradient(45deg, transparent 50%, black 0), linear-gradient(135deg, black 50%, transparent 0) !important;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box; /* Added for consistency */
}

.news-filter select option {
    background-color: #ffffff;
    color: #000000;
    border-radius:10px;
    border:none;
}

@media(max-width: 767px) {
    .news-filter {
        /* On mobile, stack them and reverse the order to keep filter on top */
        flex-direction: column-reverse; 
        align-items: center;
        gap: 15px;
    }
    .search-wrap,
    .news-filter select {
        width: 100%;
        max-width: 300px;
        flex-grow: 0;
        flex-shrink: 1;
    }
    .search-wrap input {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        background-color:#EFEFEF;
        color:#000;
    }
    .search-icon-button {
        right: 5px;
    }
}

select{
  font-family: 'Figtree', sans-serif;   
}
.grid-error{
color:#000;

}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 60px;
    padding: 0 15px;
    /* MODIFICATION: Added max-width and margin */
    max-width: 1440px;
    margin: 0 auto;
}
.news-card {
    flex: unset;
    max-width: 100%;
    width: 100%;
    margin: 0;
    border-radius: 25px;
    background-color: var(--color-five);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* MODIFICATION: Added drop shadow */
    box-shadow: 0px 10px 25px 0px #0000004D;
}
.news-card.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* NEW: Wrapper for image to contain zoom */
.news-card-image-wrapper {
    height: 200px; /* Set the fixed height on the wrapper */
    overflow: hidden; /* This clips the zoom effect */
    display: block;
    position: relative; /* IMPORTANT: Added for positioning the badge */
}

/* ---------------------------------------------------- */
/* NEW RULE: Parent Category Badge Styling and Positioning */
/* ---------------------------------------------------- */
.news-card-parent-badge {
    position: absolute;
    top: 20px;       /* 20px margin top */
    right: 20px;     /* 20px margin right */
    padding-top:5px;
    padding-bottom:5px;
    padding-left:8px;
    padding-right:8px;
    background-color: #7D54CC; /* Background: #7D54CC */
    color: #FFFFFF; /* Text color: white */
    border-radius: 10px;
    font-size: 0.75em; 
    font-weight: 600;
    z-index: 10;     /* Ensure it sits above the image */
    letter-spacing: 0.5px;
    text-transform:uppercase;
}

/* MODIFIED: Target image inside the new wrapper */
.news-card-image-wrapper > a > img {
    width: 100%;
    height: 100%; /* Make image fill the wrapper height */
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* MODIFIED: Target hover on the .news-card to zoom image */
.news-card:hover .news-card-image-wrapper > a > img {
    transform: scale(1.1);
}


.news-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    background: var(--color-five);
    text-align:left;
}

/* NEW: STYLING FOR CATEGORY & DATE */
.news-card-category {
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1em; /* 16px */
    line-height: 150%;
    letter-spacing: 0;
    color: #94268F;
    margin: 0 0 10px 0; /* Added some bottom margin */
}
.news-card-category a {
    color: #94268F;
    text-decoration: none;
}
.news-card-category a:hover {
    text-decoration: underline;
}


.news-card h3 {
    font-family: Figtree;
    font-weight: 500;
    font-style: Medium;
    font-size: 24px;
    color:#36194C;
    margin-bottom:20px;
}

/* REPLACED .news-card p WITH .news-card-excerpt */
.news-card-excerpt {
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1em; /* 16px */
    line-height: 150%;
    letter-spacing: 0;
    color: #36194C;
    margin: 0 0 15px 0;
    flex-grow: 1; /* This makes the excerpt fill the space */
}

/* UPDATED: Read more button alignment and styling */
.news-card a.arrow-button {
    margin-top: auto; /* Pushes button to the bottom */
    align-self: flex-end; /* Aligns button to the far right */
    text-decoration: none;
    display: flex; /* Use flexbox to center the arrow */
    align-items: center;
    justify-content: center;
    width: 30px; /* Fixed width for the circular background */
    height: 30px; /* Fixed height for the circular background */
    background-color: #7D54CC; /* Background color for the circle */
    border-radius: 50%; /* Makes it a perfect circle */
    transition: background-color 0.2s ease-out; /* Smooth transition for hover */
}

/* Optional: Hover effect for the entire button (background color) */
.news-card a.arrow-button:hover {
    background-color: #7a1d75; /* A slightly darker purple on hover */
}


/* NEW CSS for the arrow icon */
.css-arrow-icon {
    box-sizing: border-box; /* Helps with border calculation */
    display: inline-block;
    width: 8px; /* Width of the arrow itself */
    height: 8px; /* Height of the arrow itself */
    border: solid #FFFFFF; /* Changed arrow color to white */
    border-width: 0 3px 3px 0; /* Thickness and direction of the arrow */
    transform: rotate(-45deg); /* Rotate to make it point right */
    transition: transform 0.2s ease-out; /* Smooth transition for hover */
    position: relative;
    right: 0px; /* Nudge 1px to the left */
    bottom: 0px; /* Nudge 1px up */
    left:-1px;
}




.pagination {
    margin-top: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pagination a,
.pagination span.current {
    margin: 0 5px;
    padding: 8px 16px;
    background-color: #eee;
    text-decoration: none;
    border-radius: 5px;
    color: #333;
    transition: background-color 0.3s ease;
}
.pagination a:hover {
    background-color: #ddd;
}

/*
 * FIX FOR INVISIBLE ACTIVE PAGINATION:
 * We override the possibly light 'var(--color-primary)' with a dark, visible
 * color (using the card button purple #7D54CC) to ensure contrast with the 
 * defined 'color: white'.
 */
.pagination span.current {
    background-color: #7D54CC; /* Replaced var(--color-primary) with a dark, brand-matching color */
    color: white; 
    font-weight: bold;
}

.news-filter{
    max-width:1440px;
    margin:0px auto;
    margin-bottom:50px;
}



/* Corrected grid columns for larger screens to 3 */
@media(min-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media(min-width: 768px) and (max-width: 991px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    /* UPDATED: Target the new wrapper for mobile height */
    .news-card-image-wrapper {
        height:150px !important;
    }

    .news-wrapper {

    margin-top:0px;

}

.news-card h3{
    font-size:1.3em;
}

.news-grid {

    gap: 30px;

}
}

/* --- Custom Focus Styles --- */
.search-wrap input:focus,
.news-filter select:focus {
    outline: none; /* Removes the default blue/orange glow */
    box-shadow: none; /* Removes any focus shadow glow */
    border-color: inherit; /* Sets the border color to black on focus */
}