/*
 * FAQ accordion styles
 *
 * This stylesheet defines the visual appearance of the FAQ
 * section created by the accompanying PHP and JavaScript code.
 * It is responsive, supports two columns on wider screens and
 * single column layouts on mobile devices. Icons and toggle
 * buttons are recoloured depending on whether the item is
 * expanded or collapsed. Feel free to tweak colours, spacing
 * and typography to better match your theme.
 */

/* Container for the entire FAQ section */
.custom-faq-section {
    margin: 60px auto;
    max-width: 1200px;
    padding: 0 15px;
    font-family: inherit;
}

/* Header styling */
.custom-faq-section .faq-header {
    text-align: center;
    margin-bottom: 40px;
}
.custom-faq-section .faq-preheading {
    font-size: 14px;
    font-weight: 600;
    color: #14A4F5;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.custom-faq-section .faq-heading {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}

/* Grid wrapper for the FAQ items. Two columns on tablet/desktop */
.custom-faq-section .faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
	align-items: flex-start;
}
@media (min-width: 768px) {
    .custom-faq-section .faq-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Individual FAQ card */
.custom-faq-section .faq-item {
    background-color: #F9FAFB;
    border-radius: 16px;
    padding: 24px;
    box-shadow: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.custom-faq-section .faq-item.active {
    background-color: #FFFFFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* Question row holds icon, question text and toggle button */
.custom-faq-section .faq-question-row {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Icon wrapper ensures consistent sizing */
.custom-faq-section .faq-icon-wrapper {
    width: 24px;
    height: 24px;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Default inline SVG icon recolouring for inactive state */
.custom-faq-section .faq-icon-wrapper.default-icon svg path {
    stroke: #98A2B3;
    fill: #98A2B3;
}
/* When the item is active, recolour the SVG icon to the primary hue */
.custom-faq-section .faq-item.active .faq-icon-wrapper.default-icon svg path {
    stroke: #14A4F5;
    fill: #14A4F5;
}

/* Question text styling */
.custom-faq-section .faq-question-text {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.4;
}
.custom-faq-section .faq-item.active .faq-question-text {
    color: #14A4F5;
}

/* Toggle button for plus/minus */
.custom-faq-section .faq-toggle-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F3F4F6;
    color: #98A2B3;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

/* Use pseudo element to insert the plus sign. It will be toggled via JS. */
.custom-faq-section .faq-toggle-icon::before {
    content: '+';
}
.custom-faq-section .faq-item.active .faq-toggle-icon {
    background-color: #14A4F5;
    color: #FFFFFF;
}
.custom-faq-section .faq-item.active .faq-toggle-icon::before {
    content: '−';
}

/* Answer content – hidden by default on collapsed items */
.custom-faq-section .faq-answer {
    display: block;
    margin-top: 16px;
    padding-left: 40px; /* align with question text */
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}