/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 01 2026 | 00:46:23 */
/* The Scholarship Navigation Grid */
.scholarship-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    max-width: 960px;
    margin: 40px auto;
}

/* Individual White Box Styling */
.scholarship-nav-grid .nav-grid-item {
    background-color: #ffffff;
    color: #440099 !important; /* Your brand purple */
    padding: 25px 15px;
    text-align: center;
    text-decoration: none !important;
    font-size: 20px;
    font-weight: 700;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    
    /* Perfect Centering */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    
    /* Box Shadow for depth (optional, based on image) */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Hover State */
.scholarship-nav-grid .nav-grid-item:hover {
    background-color: #ebe8f9; 
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(68, 0, 153, 0.1); /* Glows with your brand color */
}

/* Accessibility: Focus Ring for Keyboard Navigation */
.scholarship-nav-grid .nav-grid-item:focus {
    outline: 3px solid #ffffff; 
    outline-offset: 4px;
}


/* 1. Prevent focus outline on click/tap, but keep it for keyboard users */
.fl-accordion-button:focus {
    outline: none !important;
}

/* Only show the outline when someone is actually using the Tab key (Accessibility) */
.fl-accordion-button:focus-visible {
    outline: 2px solid #440099 !important;
    outline-offset: 2px;
}

/* 2. Remove the border under the question when the FAQ is open */
/* This targets the button and the item container when it has the 'active' class */
.fl-accordion-item-active .fl-accordion-button,
.fl-accordion-item-active .fl-accordion-content {
    border-bottom: none !important;
    border-top: none !important; /* Optional: in case there's a top border too */
}

/* This specifically kills the line between the question and the answer */
.fl-accordion-item-active .fl-accordion-button {
    border-bottom: 0px transparent !important;
    box-shadow: none !important; /* Some themes use shadow instead of border */
}

/* Mobile Responsiveness */
@media (max-width: 800px) {
    .scholarship-nav-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 480px) {
    .scholarship-nav-grid {
        grid-template-columns: 1fr; /* Stacked on mobile */
    }
}

/* 1. Change Icon Color to Dark Purple */
.fl-accordion-button-icon {
    color: #440099 !important;
}

/* 2. Fix the Border Alignment */
/* Beaver Builder accordions usually have default side padding 
   on the button. Setting it to 0 on the left and right 
   aligns the border with the text above/below it.
*/
.fl-accordion-button {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid #e0e0e0; /* Clean separator line */
}

/* 3. Adjust Content Padding */
/* Ensures the revealed text also starts at the same 
   horizontal point as the header.
*/
.fl-accordion-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 4. Hover State for Better UX */
.fl-accordion-item:hover .fl-accordion-button-label {
    color: #440099;
    transition: color 0.2s ease;
}

/* 5. Accessibility: Focus Ring */
/* Ensures keyboard users can see which FAQ they are on */
.fl-accordion-button:focus-within {
/*     outline: 2px solid #440099; */
    outline-offset: 2px;
}

/* Removes the border under the question only when the accordion is expanded */
.fl-accordion-item.fl-accordion-item-active .fl-accordion-button {
    border-bottom: none !important;
    box-shadow: none !important; /* Clears any 'shadow' borders */
}

/* Optional: Removes the border from the top of the content box to ensure a seamless look */
.fl-accordion-item.fl-accordion-item-active .fl-accordion-content {
    border-top: none !important;
    padding-top: 0 !important; /* Keeps the text close to the question */
}