/* static/css/faq-page.css - v2 - Enhanced for Readability */

/* --- Page Header --- */
.display-4 {
    font-weight: 600;
}

/* --- Accordion General Styling --- */
.accordion-item {
    background-color: transparent; /* Make item background transparent to rely on the button/body colors */
    border: 1px solid var(--bs-border-color);
    border-width: 0 0 1px 0; /* Only show a bottom border */
    margin-bottom: 0.5rem;
    border-radius: 0.5rem !important;
    overflow: hidden;
}

/* --- Question Styling (The Accordion Button) --- */
.accordion-button {
    /* Font & Text */
    color: var(--bs-body-color);
    font-size: 1.15rem; /* Increased font size for questions */
    font-weight: 500; /* Slightly bolder for clarity */
    line-height: 1.6;

    /* Spacing */
    padding: 1.25rem 1.5rem;

    /* Background & Transitions */
    background-color: var(--bs-tertiary-bg);
    transition: background-color 0.2s ease-in-out;
}

/* --- Style for the ACTIVE/EXPANDED Question --- */
.accordion-button:not(.collapsed) {
    color: #ffffff; /* Pure white for maximum contrast on the active element */
    background-color: #004d40; /* Keeping the rich, dark teal for the active state */
    box-shadow: none;
}

/* --- Style for the arrow icon --- */
.accordion-button::after {
    filter: var(--bs-accordion-btn-icon-filter);
    transition: filter 0.2s ease-in-out; /* Smooth transition for the arrow color */
}

/* Makes the arrow white when the button is active */
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

/* --- Style for the FOCUS ring (for accessibility) --- */
.accordion-button:focus {
    /* A softer focus ring using the teal color */
    box-shadow: 0 0 0 0.25rem rgba(0, 77, 64, 0.5); 
    border-color: transparent;
}


/* --- Answer Styling (The Accordion Body) --- */
.accordion-body {
    /* Font & Text - CRUCIAL for readability */
    font-size: 1.05rem; /* Larger font size for answers */
    line-height: 1.8; /* Increased line height for better paragraph spacing */
    color: #d1d1d1; /* A softer white, less harsh than pure #FFFFFF for long text */

    /* Spacing */
    padding: 1.5rem 1.75rem; 

    /* Background */
    background-color: var(--bs-body-bg);
}

/* --- CTA Section at the bottom --- */
.faq-cta-section {
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}