/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 04 2026 | 21:20:47 */
/* 1. Base Card Container */
.custom-post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Only transition specific properties to stop the 'sliding' effect */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid #e0e0e0;
    background: #fff;
    overflow: hidden; 
    will-change: transform;
	outline: none !important; /* Kills the default box outline */
}

/* 2. The Invisible Click Layer (WCAG & SR Compliant) */
.main-card-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10; 
	outline: none !important; /* Ensures the link doesn't create its own box outline */
}

/* 3. Hover State - Unified Lift */
.custom-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    border-color: #5b5da8;
	transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
	outline: none !important;
    /* Removing border-color change here keeps the outline "fixed" visually */
}

/* 4. Image Handling - Fixed height to prevent layout shifts */
.post-image img {
    width: 100%;
    height: 240px; 
    object-fit: cover; 
    display: block;
    transition: none !important; /* Prevents image from sliding independently */
}

/* 1. Container Fixes (Prevents the 'sliding/clipping' look) */
.fl-post-grid-post, 
.fl-post-column,
.fl-post-grid-content {
    overflow: visible !important;
}

/* 2. The Card Container */
.custom-post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    border: 1px solid #e0e0e0;
    background: #fff;
    overflow: visible; 
    will-change: transform;
}

/* 3. The Clickable Overlay (SR Compliant) */
.main-card-link::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
}

/* 4. Card Hover Lift */
.custom-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    border-color: #5b5da8;
	outline: none !important;
}

/* 5. Image & Content Scaling */
.post-image img {
    width: 100%;
    height: 240px; 
    object-fit: cover; 
    display: block;
    transition: none !important;
}

.card-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 24px !important;
    position: relative;
    z-index: 1;
}

/* 6. Typography */
.post-title {
    color: #440099;
    font-size: 1.35em !important;
    line-height: 1.3;
    margin-bottom: 15px;
    font-weight: 700;
}

.post-title a { text-decoration: none; color: inherit; }

.post-excerpt {
/*     flex-grow: 1 !important; */
    margin-bottom: 25px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    color: #555;
}

/* 7. Card Button styling */
.card-content .fl-button {
    margin-top: auto !important; 
    align-self: center !important;
    background-color: #440099;
    color: #ffffff !important;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 600;
}

/* 8. Pagination with Matching Lift Effect */
.fl-builder-pagination {
    margin-top: 40px 0 !important;
    display: flex;
    justify-content: center;
}

.fl-builder-pagination ul.page-numbers li a {
    color: #440099; /* Theme Primary */
    transition: all 0.2s ease;
}

.fl-builder-pagination ul.page-numbers {
    display: flex;
    list-style: none;
    gap: 12px; /* Slightly wider gap for the lift effect */
    padding: 0;
}

a.page-numbers:hover{
	color: #440099 !important;
}

.fl-builder-pagination ul.page-numbers li a,
.fl-builder-pagination ul.page-numbers li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #fff;
    color: #440099;
    border: 1px solid #e0e0e0;
    font-weight: 700;
    text-decoration: none;
    /* Transition for the lift */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Hover & Focus state for Pagination Buttons */
.fl-builder-pagination ul.page-numbers li a:hover,
.fl-builder-pagination ul.page-numbers li a:focus-visible {
    transform: translateY(-4px); /* Slightly smaller lift than the large cards */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: #440099;

    background-color: #ebe8f9; /* Very subtle tint */
    outline: none !important; /* Clean look since we use box-shadow/lift for focus */
}

/* Active Page stays pinned but matches style */
.fl-builder-pagination ul.page-numbers li span.current {
    background-color: #440099;
    color: #fff;
    border-color: #440099;
    box-shadow: 0 4px 10px rgba(68, 0, 153, 0.2);
}

.fl-post-grid-post{
	border: 0 !important;
}

/* Mobile Adjustments for Spacing */
@media (max-width: 768px) {
    .fl-builder-pagination {
        margin: 30px 0 !important; /* Slightly tighter for mobile */
    }
    
    .post-title {
        font-size: 1.2em !important; /* Even smaller for mobile screens */
    }
}